diff --git a/index.html b/index.html
index 4e38cf98b..f8495b30d 100755
--- a/index.html
+++ b/index.html
@@ -813,6 +813,96 @@
display:none;
}
}
+
+
+
+
+
+
+
+
+ .nav-items {
+ display: inline-block;
+ float: right;
+}
+
+.navbar {
+ background-color: #222;
+ color: #ddd;
+ min-height: 50px;
+ width: 100%;
+}
+
+.navbar-container {
+ max-width: 950px;
+ margin: 0 auto;
+ width: 95%;
+}
+
+.navbar-container::after {
+ content: "";
+ clear: both;
+ display: block;
+}
+
+.navbar-brand {
+ vertical-align: top;
+ display: inline-block;
+ padding: 5px;
+ min-height: 50px;
+ min-width: 50px;
+ color: inherit;
+ text-decoration: none;
+}
+
+.navbar-items {
+ padding: 10px 0;
+ display: block;
+ float: right;
+ margin: 0;
+}
+
+.navbar-item {
+ margin: 0;
+ color: inherit;
+ text-decoration: none;
+ display: inline-block;
+ padding: 10px 15px;
+}
+
+.burger {
+ margin: 10px 0;
+ width: 45px;
+ padding: 5px 10px;
+ display: none;
+ float: right;
+ cursor: pointer;
+}
+
+.burger-line {
+ padding: 1px;
+ background-color: white;
+ margin: 5px 0;
+}
+
+@media (max-width: 768px) {
+ .burger {
+ display: block;
+ }
+
+ .nav-items {
+ display: none;
+ width: 100%;
+ }
+
+ .navbar-items {
+ width: 100%;
+ }
+
+ .navbar-item {
+ display: block;
+ }
+}
@@ -832,7 +922,7 @@
clearOnRender: 0,
storageManager:{
- autoload: 1,
+ autoload: 0,
storeComponents: 1,
storeStyles: 1,
},
@@ -1299,6 +1389,192 @@
editor.on('storage:store', function(e) {
console.log('STORE ', e);
})
+
+ let dc = editor.DomComponents;
+ const defaultType = dc.getType('default');
+ const textType = dc.getType('text');
+ const defaultModel = defaultType.model;
+ const defaultView = defaultType.view;
+ const textModel = textType.model;
+ const textView = textType.view;
+
+ dc.addType('burger-menu', {
+ model: defaultModel.extend({
+ defaults: Object.assign({}, defaultModel.prototype.defaults, {
+ 'custom-name': 'Burger Menu',
+ draggable: false, //'[data-gjs=nav], [data-gjs=nav] *',
+ droppable: false,
+ copyable: false,
+ removable: false,
+ script: function () {
+ var timer;
+ var toggled = false;
+ var time = 1000;
+ var transEndAdded;
+ var isAnimating = 0;
+ var stringCollapse = 'gjs-collapse';
+ var clickEvent = 'click';
+
+ var getElHeight = function(el) {
+ var style = window.getComputedStyle(el);
+ var elDisplay = style.display;
+ var elPos = style.position;
+ var elVis = style.visibility;
+ var currentHeight = style.height;
+ var currentMaxHeight = style.maxHeight;
+ var elMaxHeight = style.maxHeight.replace('px', '').replace('%', '');
+
+ if (elDisplay !== 'none' && elMaxHeight !== '0') {
+ return el.offsetHeight;
+ }
+
+ el.style.height = 'auto';
+ el.style.display = 'block';
+ el.style.position = 'absolute';
+ el.style.visibility = 'hidden';
+ //el.style.maxHeight = 'auto';
+ var height = el.offsetHeight;
+ /*
+ el.style.height = currentHeight;
+ el.style.display = '';
+ el.style.position = elPos;
+ el.style.visibility = elVis;
+ */
+ el.style.height = '';
+ el.style.display = '';
+ el.style.position = '';
+ el.style.visibility = '';
+ //el.style.maxHeight = currentMaxHeight;
+
+ return height;
+ };
+
+ var toggleSlide = function(el) {
+ /*
+ clearInterval(timer);
+ var elMaxHeight = getElHeight(el);
+ var currentHeight = parseInt(el.style.height) || 0;
+ var start = (new Date()).getTime();
+ var heightToSet = (toggled = !toggled) ? elMaxHeight : 0;
+ var disp = heightToSet - currentHeight;
+
+ if (heightToSet) {
+ el.style.display = 'block';
+ }
+
+ timer = setInterval(function() {
+ var diffTime = (new Date()).getTime() - start;
+ if (diffTime <= time) {
+ var pos = currentHeight + Math.floor(disp * diffTime / time);
+ el.style.height = pos + 'px';
+ } else {
+ el.style.height = heightToSet + 'px';
+ clearInterval(timer);
+ }
+ }, 1);
+ */
+ isAnimating = 1;
+ var elMaxHeight = getElHeight(el);
+ console.log('Max height', elMaxHeight);
+ el.style.display = 'block';
+ el.style.transition = 'max-height 0.25s ease-in-out';
+ el.style.overflowY = 'hidden';
+
+ if (el.style.maxHeight == '') {
+ console.log('No maxHeight');
+ el.style.maxHeight = 0;
+ }
+
+ if(parseInt(el.style.maxHeight) == 0) {
+ console.log('Set maxHeight FROM 0');
+ el.style.maxHeight = '0';
+ setTimeout(function() {
+ el.style.maxHeight = elMaxHeight + 'px';
+ }, 10);
+ } else {
+ console.log('Set maxHeight TO 0');
+ el.style.maxHeight = '0';
+ }
+ }
+
+ var toggle = function(e) {
+ e.preventDefault();
+
+ if (isAnimating) {
+ console.log('Already animated');
+ return;
+ }
+
+ var navParent = this.closest('[data-gjs=nav]');
+ var navItems = navParent.querySelector('[data-gjs=nav-items]');
+ toggleSlide(navItems);
+
+ if (!transEndAdded) {
+ navItems.addEventListener('transitionend', function() {
+ console.log('transitionend', parseInt(navItems.style.maxHeight), ' ', navItems.style.display);
+ isAnimating = 0;
+ transEndAdded = 1;
+ if (parseInt(navItems.style.maxHeight) == 0) {
+ navItems.style.display = '';
+ navItems.style.maxHeight = '';
+ }
+ });
+ }
+ //var isVisible = navItems.style.display == 'block';
+ //navItems.style.display = isVisible ? '' : 'block';
+ };
+
+ if ( !(stringCollapse in this ) ) {
+ console.log('Menu add click addEventListener');
+ this.addEventListener(clickEvent, toggle);
+ }
+
+ this[stringCollapse] = 1;
+ },
+ }),
+ }, {
+ isComponent(el) {
+ if(el.getAttribute &&
+ el.getAttribute('data-gjs-type') == 'burger-menu') {
+ return {type: 'burger-menu'};
+ }
+ },
+ }),
+ view: defaultView,
+ });
+
+
+ bm.add('navbar', {
+ label: 'Navbar',
+ attributes: {class:'fa fa-link'},
+ category: 'Extra',
+ content: `
+
+ `,
+ });
+
editor.render();
diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index e2e067f69..119c72025 100644
--- a/src/canvas/view/CanvasView.js
+++ b/src/canvas/view/CanvasView.js
@@ -257,6 +257,7 @@ module.exports = Backbone.View.extend({
view.scriptContainer.append(`