From c124d13d4a27f2458244641f93e733429c2e405c Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 21 Aug 2013 21:54:32 -0400 Subject: [PATCH] last update to sidebar before kaputz --- build/minified/modules/sidebar.js | 137 +++++++----------- build/packaged/modules/sidebar.js | 137 +++++++----------- build/uncompressed/modules/sidebar.css | 59 ++------ build/uncompressed/modules/sidebar.js | 137 +++++++----------- node/src/documents/modules/sidebar.html | 2 +- .../components/semantic/modules/sidebar.css | 59 ++------ .../components/semantic/modules/sidebar.js | 137 +++++++----------- node/src/files/javascript/semantic.js | 2 +- node/src/files/stylesheets/semantic.css | 30 ++-- src/modules/sidebar.js | 137 +++++++----------- src/modules/sidebar.less | 78 ++++------ 11 files changed, 364 insertions(+), 551 deletions(-) diff --git a/build/minified/modules/sidebar.js b/build/minified/modules/sidebar.js index 9873aff86..4706fd5e8 100644 --- a/build/minified/modules/sidebar.js +++ b/build/minified/modules/sidebar.js @@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) { show: function() { module.debug('Showing sidebar'); if(module.is.closed()) { - module.set.active(); if(!settings.overlay) { - module.add.bodyCSS(); - module.set.pushed(); + module.pushPage(); } + module.set.active(); } else { module.debug('Sidebar is already visible'); @@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) { hide: function() { if(module.is.open()) { - module.remove.active(); if(!settings.overlay) { - module.remove.bodyCSS(); + module.pullPage(); module.remove.pushed(); } + module.remove.active(); } }, @@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) { } }, + pushPage: function() { + var + direction = module.get.direction(), + distance = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + if(settings.useCSS) { + module.debug('Using CSS to animate body'); + module.add.bodyCSS(direction, distance); + module.set.pushed(); + } + else { + module.animatePage(direction, distance, module.set.pushed); + } + }, + + pullPage: function() { + var + direction = module.get.direction() + ; + if(settings.useCSS) { + module.debug('Resetting body position css'); + module.remove.bodyCSS(); + } + else { + module.debug('Resetting body position using javascript'); + module.animatePage(direction, 0); + } + module.remove.pushed(); + }, + + animatePage: function(direction, distance) { + var + animateSettings = {} + ; + animateSettings['padding-' + direction] = distance; + module.debug('Using javascript to animate body', animateSettings); + $body + .animate(animateSettings, settings.duration, module.set.pushed) + ; + }, + add: { - bodyCSS: function() { + bodyCSS: function(direction, distance) { var - style = '', - direction = module.get.direction(), - distance = (module.is.vertical()) - ? $module.outerHeight() - : $module.outerWidth() + style ; if(direction !== className.bottom) { style = '' - + '' ; - if(settings.useTransform) { - style += '' - + 'body.pushed {' - + module.get.transform(direction, distance) - + '}' - + '' - ; - } - else { - style += '' - + 'body.pushed {' - + ' margin-' + direction + ': ' + distance + 'px !important;' - + '}' - + '' - ; - } } $head.append(style); - module.refresh(); module.debug('Adding body css to head', $style); - $style[0].disabled = false; } }, remove: { bodyCSS: function() { module.debug('Removing body css styles', $style); + module.refresh(); $style.remove(); }, active: function() { @@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) { return className.left; } }, - transform: function(direction, distance) { - if(direction && distance) { - if(direction == className.left) { - return '' - + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' - + 'margin-right: ' + distance + 'px !important;' - ; - } - if(direction == className.right) { - return '' - + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' - + 'margin-left: ' + distance + 'px !important;' - ; - } - if(direction == className.top) { - return '' - + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' - ; - } - if(direction == className.bottom) { - return '' - + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' - ; - } - } - }, - transformProperty: function() { - var - element = document.createElement('element'), - properties = { - 'transform' :'transform', - 'msTransform' :'-ms-transform', - 'MozTransform' :'-moz-transform', - 'WebkitTransform' :'-webkit-transform' - }, - property - ; - for(property in properties){ - if( element.style[property] !== undefined ){ - return properties[property]; - } - } - }, transitionEvent: function() { var element = document.createElement('element'), @@ -477,16 +453,15 @@ $.fn.sidebar.settings = { moduleName : 'Sidebar', namespace : 'sidebar', - useTransform : true, - verbose : true, debug : true, performance : true, + useCSS : true, overlay : false, + duration : 300, side : 'left', - duration : 500, onChange : function(){}, onShow : function(){}, diff --git a/build/packaged/modules/sidebar.js b/build/packaged/modules/sidebar.js index 9873aff86..4706fd5e8 100644 --- a/build/packaged/modules/sidebar.js +++ b/build/packaged/modules/sidebar.js @@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) { show: function() { module.debug('Showing sidebar'); if(module.is.closed()) { - module.set.active(); if(!settings.overlay) { - module.add.bodyCSS(); - module.set.pushed(); + module.pushPage(); } + module.set.active(); } else { module.debug('Sidebar is already visible'); @@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) { hide: function() { if(module.is.open()) { - module.remove.active(); if(!settings.overlay) { - module.remove.bodyCSS(); + module.pullPage(); module.remove.pushed(); } + module.remove.active(); } }, @@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) { } }, + pushPage: function() { + var + direction = module.get.direction(), + distance = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + if(settings.useCSS) { + module.debug('Using CSS to animate body'); + module.add.bodyCSS(direction, distance); + module.set.pushed(); + } + else { + module.animatePage(direction, distance, module.set.pushed); + } + }, + + pullPage: function() { + var + direction = module.get.direction() + ; + if(settings.useCSS) { + module.debug('Resetting body position css'); + module.remove.bodyCSS(); + } + else { + module.debug('Resetting body position using javascript'); + module.animatePage(direction, 0); + } + module.remove.pushed(); + }, + + animatePage: function(direction, distance) { + var + animateSettings = {} + ; + animateSettings['padding-' + direction] = distance; + module.debug('Using javascript to animate body', animateSettings); + $body + .animate(animateSettings, settings.duration, module.set.pushed) + ; + }, + add: { - bodyCSS: function() { + bodyCSS: function(direction, distance) { var - style = '', - direction = module.get.direction(), - distance = (module.is.vertical()) - ? $module.outerHeight() - : $module.outerWidth() + style ; if(direction !== className.bottom) { style = '' - + '' ; - if(settings.useTransform) { - style += '' - + 'body.pushed {' - + module.get.transform(direction, distance) - + '}' - + '' - ; - } - else { - style += '' - + 'body.pushed {' - + ' margin-' + direction + ': ' + distance + 'px !important;' - + '}' - + '' - ; - } } $head.append(style); - module.refresh(); module.debug('Adding body css to head', $style); - $style[0].disabled = false; } }, remove: { bodyCSS: function() { module.debug('Removing body css styles', $style); + module.refresh(); $style.remove(); }, active: function() { @@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) { return className.left; } }, - transform: function(direction, distance) { - if(direction && distance) { - if(direction == className.left) { - return '' - + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' - + 'margin-right: ' + distance + 'px !important;' - ; - } - if(direction == className.right) { - return '' - + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' - + 'margin-left: ' + distance + 'px !important;' - ; - } - if(direction == className.top) { - return '' - + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' - ; - } - if(direction == className.bottom) { - return '' - + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' - ; - } - } - }, - transformProperty: function() { - var - element = document.createElement('element'), - properties = { - 'transform' :'transform', - 'msTransform' :'-ms-transform', - 'MozTransform' :'-moz-transform', - 'WebkitTransform' :'-webkit-transform' - }, - property - ; - for(property in properties){ - if( element.style[property] !== undefined ){ - return properties[property]; - } - } - }, transitionEvent: function() { var element = document.createElement('element'), @@ -477,16 +453,15 @@ $.fn.sidebar.settings = { moduleName : 'Sidebar', namespace : 'sidebar', - useTransform : true, - verbose : true, debug : true, performance : true, + useCSS : true, overlay : false, + duration : 300, side : 'left', - duration : 500, onChange : function(){}, onShow : function(){}, diff --git a/build/uncompressed/modules/sidebar.css b/build/uncompressed/modules/sidebar.css index ba06cda00..e56ad659a 100644 --- a/build/uncompressed/modules/sidebar.css +++ b/build/uncompressed/modules/sidebar.css @@ -22,11 +22,6 @@ body { } .ui.sidebar { position: fixed; - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); margin: 0 !important; width: 275px !important; height: 100% !important; @@ -38,71 +33,47 @@ body { top: 0px; left: 0px; z-index: 999; - -webkit-transition: -webkit-transform 0.3s ease; - -moz-transition: -moz-transform 0.3s ease; - transition: transform 0.3s ease; + -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -o-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease; + transition: margin-left 0.3s ease, margin-top 0.3s ease; } /******************************* Types *******************************/ +.ui.sidebar { + margin-left: -275px !important; +} .ui.right.sidebar { left: 100%; - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -o-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + margin: 0px !important; } .ui.top.sidebar { + margin: -40px 0px 0px 0px !important; width: 100% !important; height: 40px !important; - overflow: hidden; - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -o-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); } .ui.bottom.sidebar { width: 100% !important; height: 40px !important; top: 100%; - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -o-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); + margin: 0px !important; } /******************************* States *******************************/ .ui.active.sidebar { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -o-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + margin-left: 0px !important; } .ui.active.right.sidebar { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); + margin-left: -275px !important; } .ui.active.top.sidebar { - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -o-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); + margin-top: 0px !important; } .ui.active.bottom.sidebar { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -o-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); + margin-top: -40px !important; } /******************************* Variations diff --git a/build/uncompressed/modules/sidebar.js b/build/uncompressed/modules/sidebar.js index 9873aff86..4706fd5e8 100644 --- a/build/uncompressed/modules/sidebar.js +++ b/build/uncompressed/modules/sidebar.js @@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) { show: function() { module.debug('Showing sidebar'); if(module.is.closed()) { - module.set.active(); if(!settings.overlay) { - module.add.bodyCSS(); - module.set.pushed(); + module.pushPage(); } + module.set.active(); } else { module.debug('Sidebar is already visible'); @@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) { hide: function() { if(module.is.open()) { - module.remove.active(); if(!settings.overlay) { - module.remove.bodyCSS(); + module.pullPage(); module.remove.pushed(); } + module.remove.active(); } }, @@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) { } }, + pushPage: function() { + var + direction = module.get.direction(), + distance = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + if(settings.useCSS) { + module.debug('Using CSS to animate body'); + module.add.bodyCSS(direction, distance); + module.set.pushed(); + } + else { + module.animatePage(direction, distance, module.set.pushed); + } + }, + + pullPage: function() { + var + direction = module.get.direction() + ; + if(settings.useCSS) { + module.debug('Resetting body position css'); + module.remove.bodyCSS(); + } + else { + module.debug('Resetting body position using javascript'); + module.animatePage(direction, 0); + } + module.remove.pushed(); + }, + + animatePage: function(direction, distance) { + var + animateSettings = {} + ; + animateSettings['padding-' + direction] = distance; + module.debug('Using javascript to animate body', animateSettings); + $body + .animate(animateSettings, settings.duration, module.set.pushed) + ; + }, + add: { - bodyCSS: function() { + bodyCSS: function(direction, distance) { var - style = '', - direction = module.get.direction(), - distance = (module.is.vertical()) - ? $module.outerHeight() - : $module.outerWidth() + style ; if(direction !== className.bottom) { style = '' - + '' ; - if(settings.useTransform) { - style += '' - + 'body.pushed {' - + module.get.transform(direction, distance) - + '}' - + '' - ; - } - else { - style += '' - + 'body.pushed {' - + ' margin-' + direction + ': ' + distance + 'px !important;' - + '}' - + '' - ; - } } $head.append(style); - module.refresh(); module.debug('Adding body css to head', $style); - $style[0].disabled = false; } }, remove: { bodyCSS: function() { module.debug('Removing body css styles', $style); + module.refresh(); $style.remove(); }, active: function() { @@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) { return className.left; } }, - transform: function(direction, distance) { - if(direction && distance) { - if(direction == className.left) { - return '' - + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' - + 'margin-right: ' + distance + 'px !important;' - ; - } - if(direction == className.right) { - return '' - + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' - + 'margin-left: ' + distance + 'px !important;' - ; - } - if(direction == className.top) { - return '' - + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' - ; - } - if(direction == className.bottom) { - return '' - + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' - ; - } - } - }, - transformProperty: function() { - var - element = document.createElement('element'), - properties = { - 'transform' :'transform', - 'msTransform' :'-ms-transform', - 'MozTransform' :'-moz-transform', - 'WebkitTransform' :'-webkit-transform' - }, - property - ; - for(property in properties){ - if( element.style[property] !== undefined ){ - return properties[property]; - } - } - }, transitionEvent: function() { var element = document.createElement('element'), @@ -477,16 +453,15 @@ $.fn.sidebar.settings = { moduleName : 'Sidebar', namespace : 'sidebar', - useTransform : true, - verbose : true, debug : true, performance : true, + useCSS : true, overlay : false, + duration : 300, side : 'left', - duration : 500, onChange : function(){}, onShow : function(){}, diff --git a/node/src/documents/modules/sidebar.html b/node/src/documents/modules/sidebar.html index 8a50948ba..4c83fe005 100755 --- a/node/src/documents/modules/sidebar.html +++ b/node/src/documents/modules/sidebar.html @@ -66,7 +66,7 @@ type : 'UI Module'

Initializing

Any content can be used as a sidebar by adding the class ui sidebar and initializing the menu in javascript.

-
+
Fixed Position Snafoos
Fixed position content may have issues changing it's position when a sidebar appears. There are two solutions
    diff --git a/node/src/files/components/semantic/modules/sidebar.css b/node/src/files/components/semantic/modules/sidebar.css index ba06cda00..e56ad659a 100644 --- a/node/src/files/components/semantic/modules/sidebar.css +++ b/node/src/files/components/semantic/modules/sidebar.css @@ -22,11 +22,6 @@ body { } .ui.sidebar { position: fixed; - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); margin: 0 !important; width: 275px !important; height: 100% !important; @@ -38,71 +33,47 @@ body { top: 0px; left: 0px; z-index: 999; - -webkit-transition: -webkit-transform 0.3s ease; - -moz-transition: -moz-transform 0.3s ease; - transition: transform 0.3s ease; + -webkit-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -moz-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -o-transition: margin-left 0.3s ease, margin-top 0.3s ease; + -ms-transition: margin-left 0.3s ease, margin-top 0.3s ease; + transition: margin-left 0.3s ease, margin-top 0.3s ease; } /******************************* Types *******************************/ +.ui.sidebar { + margin-left: -275px !important; +} .ui.right.sidebar { left: 100%; - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -o-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + margin: 0px !important; } .ui.top.sidebar { + margin: -40px 0px 0px 0px !important; width: 100% !important; height: 40px !important; - overflow: hidden; - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -o-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); } .ui.bottom.sidebar { width: 100% !important; height: 40px !important; top: 100%; - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -o-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); + margin: 0px !important; } /******************************* States *******************************/ .ui.active.sidebar { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -o-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + margin-left: 0px !important; } .ui.active.right.sidebar { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); + margin-left: -275px !important; } .ui.active.top.sidebar { - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -o-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); + margin-top: 0px !important; } .ui.active.bottom.sidebar { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -o-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); + margin-top: -40px !important; } /******************************* Variations diff --git a/node/src/files/components/semantic/modules/sidebar.js b/node/src/files/components/semantic/modules/sidebar.js index 9873aff86..4706fd5e8 100644 --- a/node/src/files/components/semantic/modules/sidebar.js +++ b/node/src/files/components/semantic/modules/sidebar.js @@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) { show: function() { module.debug('Showing sidebar'); if(module.is.closed()) { - module.set.active(); if(!settings.overlay) { - module.add.bodyCSS(); - module.set.pushed(); + module.pushPage(); } + module.set.active(); } else { module.debug('Sidebar is already visible'); @@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) { hide: function() { if(module.is.open()) { - module.remove.active(); if(!settings.overlay) { - module.remove.bodyCSS(); + module.pullPage(); module.remove.pushed(); } + module.remove.active(); } }, @@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) { } }, + pushPage: function() { + var + direction = module.get.direction(), + distance = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + if(settings.useCSS) { + module.debug('Using CSS to animate body'); + module.add.bodyCSS(direction, distance); + module.set.pushed(); + } + else { + module.animatePage(direction, distance, module.set.pushed); + } + }, + + pullPage: function() { + var + direction = module.get.direction() + ; + if(settings.useCSS) { + module.debug('Resetting body position css'); + module.remove.bodyCSS(); + } + else { + module.debug('Resetting body position using javascript'); + module.animatePage(direction, 0); + } + module.remove.pushed(); + }, + + animatePage: function(direction, distance) { + var + animateSettings = {} + ; + animateSettings['padding-' + direction] = distance; + module.debug('Using javascript to animate body', animateSettings); + $body + .animate(animateSettings, settings.duration, module.set.pushed) + ; + }, + add: { - bodyCSS: function() { + bodyCSS: function(direction, distance) { var - style = '', - direction = module.get.direction(), - distance = (module.is.vertical()) - ? $module.outerHeight() - : $module.outerWidth() + style ; if(direction !== className.bottom) { style = '' - + '' ; - if(settings.useTransform) { - style += '' - + 'body.pushed {' - + module.get.transform(direction, distance) - + '}' - + '' - ; - } - else { - style += '' - + 'body.pushed {' - + ' margin-' + direction + ': ' + distance + 'px !important;' - + '}' - + '' - ; - } } $head.append(style); - module.refresh(); module.debug('Adding body css to head', $style); - $style[0].disabled = false; } }, remove: { bodyCSS: function() { module.debug('Removing body css styles', $style); + module.refresh(); $style.remove(); }, active: function() { @@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) { return className.left; } }, - transform: function(direction, distance) { - if(direction && distance) { - if(direction == className.left) { - return '' - + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' - + 'margin-right: ' + distance + 'px !important;' - ; - } - if(direction == className.right) { - return '' - + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' - + 'margin-left: ' + distance + 'px !important;' - ; - } - if(direction == className.top) { - return '' - + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' - ; - } - if(direction == className.bottom) { - return '' - + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' - ; - } - } - }, - transformProperty: function() { - var - element = document.createElement('element'), - properties = { - 'transform' :'transform', - 'msTransform' :'-ms-transform', - 'MozTransform' :'-moz-transform', - 'WebkitTransform' :'-webkit-transform' - }, - property - ; - for(property in properties){ - if( element.style[property] !== undefined ){ - return properties[property]; - } - } - }, transitionEvent: function() { var element = document.createElement('element'), @@ -477,16 +453,15 @@ $.fn.sidebar.settings = { moduleName : 'Sidebar', namespace : 'sidebar', - useTransform : true, - verbose : true, debug : true, performance : true, + useCSS : true, overlay : false, + duration : 300, side : 'left', - duration : 500, onChange : function(){}, onShow : function(){}, diff --git a/node/src/files/javascript/semantic.js b/node/src/files/javascript/semantic.js index 123da6495..6c4fe92ee 100755 --- a/node/src/files/javascript/semantic.js +++ b/node/src/files/javascript/semantic.js @@ -460,7 +460,6 @@ semantic.ready = function() { $menu .sidebar('attach events', '.launch.button, .launch.item') ; - $waypoints .waypoint({ continuous : false, @@ -504,6 +503,7 @@ semantic.ready = function() { stuckClass : 'stuck' }) ; + $peekItem .on('click', handler.peek) ; diff --git a/node/src/files/stylesheets/semantic.css b/node/src/files/stylesheets/semantic.css index 1b7de3cd5..cb864e49f 100755 --- a/node/src/files/stylesheets/semantic.css +++ b/node/src/files/stylesheets/semantic.css @@ -260,11 +260,11 @@ a:hover { -ms-box-sizing: border-box; box-sizing: border-box; - -webkit-transition: margin 0.3s ease-out; - -moz-transition: margin 0.3s ease-out; - -o-transition: margin 0.3s ease-out; - -ms-transition: margin 0.3s ease-out; - transition: margin 0.3s ease-out; + -webkit-transition: margin 0.3s ease; + -moz-transition: margin 0.3s ease; + -o-transition: margin 0.3s ease; + -ms-transition: margin 0.3s ease; + transition: margin 0.3s ease; } #example .main.menu .count { font-family: "Hevletica Neue", Arial, sans-serif; @@ -463,11 +463,11 @@ a:hover { left: -230px; width: 180px; - -webkit-transition: padding 0.3s ease-out; - -moz-transition: padding 0.3s ease-out; - -o-transition: padding 0.3s ease-out; - -ms-transition: padding 0.3s ease-out; - transition: padding 0.3s ease-out; + -webkit-transition: padding 0.3s ease; + -moz-transition: padding 0.3s ease; + -o-transition: padding 0.3s ease; + -ms-transition: padding 0.3s ease; + transition: padding 0.3s ease; } #example .main.ui.grid { @@ -630,7 +630,13 @@ a:hover { left: 50%; margin-left: -685px; } +#example.left.pushed .sticky-wrapper .peek { + margin-left: -132.5px; + padding-left: 132.5px; +} + #example.left.pushed .sticky-wrapper.stuck .peek { + margin-left: -817.5px; padding-left: 132.5px; } @@ -1031,6 +1037,10 @@ body.progress .ui.progress .bar { margin-left: 0px; left: 95px; } + #example.left.pushed .sticky-wrapper .peek { + padding-left: 275px; + margin-left: -275px; + } #example.left.pushed .sticky-wrapper.stuck .peek { padding-left: 275px; } diff --git a/src/modules/sidebar.js b/src/modules/sidebar.js index 9873aff86..4706fd5e8 100755 --- a/src/modules/sidebar.js +++ b/src/modules/sidebar.js @@ -102,11 +102,10 @@ $.fn.sidebar = function(parameters) { show: function() { module.debug('Showing sidebar'); if(module.is.closed()) { - module.set.active(); if(!settings.overlay) { - module.add.bodyCSS(); - module.set.pushed(); + module.pushPage(); } + module.set.active(); } else { module.debug('Sidebar is already visible'); @@ -115,11 +114,11 @@ $.fn.sidebar = function(parameters) { hide: function() { if(module.is.open()) { - module.remove.active(); if(!settings.overlay) { - module.remove.bodyCSS(); + module.pullPage(); module.remove.pushed(); } + module.remove.active(); } }, @@ -132,52 +131,72 @@ $.fn.sidebar = function(parameters) { } }, + pushPage: function() { + var + direction = module.get.direction(), + distance = (module.is.vertical()) + ? $module.outerHeight() + : $module.outerWidth() + ; + if(settings.useCSS) { + module.debug('Using CSS to animate body'); + module.add.bodyCSS(direction, distance); + module.set.pushed(); + } + else { + module.animatePage(direction, distance, module.set.pushed); + } + }, + + pullPage: function() { + var + direction = module.get.direction() + ; + if(settings.useCSS) { + module.debug('Resetting body position css'); + module.remove.bodyCSS(); + } + else { + module.debug('Resetting body position using javascript'); + module.animatePage(direction, 0); + } + module.remove.pushed(); + }, + + animatePage: function(direction, distance) { + var + animateSettings = {} + ; + animateSettings['padding-' + direction] = distance; + module.debug('Using javascript to animate body', animateSettings); + $body + .animate(animateSettings, settings.duration, module.set.pushed) + ; + }, + add: { - bodyCSS: function() { + bodyCSS: function(direction, distance) { var - style = '', - direction = module.get.direction(), - distance = (module.is.vertical()) - ? $module.outerHeight() - : $module.outerWidth() + style ; if(direction !== className.bottom) { style = '' - + '' ; - if(settings.useTransform) { - style += '' - + 'body.pushed {' - + module.get.transform(direction, distance) - + '}' - + '' - ; - } - else { - style += '' - + 'body.pushed {' - + ' margin-' + direction + ': ' + distance + 'px !important;' - + '}' - + '' - ; - } } $head.append(style); - module.refresh(); module.debug('Adding body css to head', $style); - $style[0].disabled = false; } }, remove: { bodyCSS: function() { module.debug('Removing body css styles', $style); + module.refresh(); $style.remove(); }, active: function() { @@ -220,49 +239,6 @@ $.fn.sidebar = function(parameters) { return className.left; } }, - transform: function(direction, distance) { - if(direction && distance) { - if(direction == className.left) { - return '' - + module.get.transformProperty() + ': translate3d(' + distance + 'px, 0px, 0px);' - + 'margin-right: ' + distance + 'px !important;' - ; - } - if(direction == className.right) { - return '' - + module.get.transformProperty() + ': translate3d(-' + distance + 'px, 0px, 0px);' - + 'margin-left: ' + distance + 'px !important;' - ; - } - if(direction == className.top) { - return '' - + module.get.transformProperty() + ': translate3d(0px, ' + distance + 'px, 0px);' - ; - } - if(direction == className.bottom) { - return '' - + module.get.transformProperty() + ': translate3d(0px, -' + distance + 'px, 0px);' - ; - } - } - }, - transformProperty: function() { - var - element = document.createElement('element'), - properties = { - 'transform' :'transform', - 'msTransform' :'-ms-transform', - 'MozTransform' :'-moz-transform', - 'WebkitTransform' :'-webkit-transform' - }, - property - ; - for(property in properties){ - if( element.style[property] !== undefined ){ - return properties[property]; - } - } - }, transitionEvent: function() { var element = document.createElement('element'), @@ -477,16 +453,15 @@ $.fn.sidebar.settings = { moduleName : 'Sidebar', namespace : 'sidebar', - useTransform : true, - verbose : true, debug : true, performance : true, + useCSS : true, overlay : false, + duration : 300, side : 'left', - duration : 500, onChange : function(){}, onShow : function(){}, diff --git a/src/modules/sidebar.less b/src/modules/sidebar.less index 477210e89..4f10d2108 100755 --- a/src/modules/sidebar.less +++ b/src/modules/sidebar.less @@ -35,13 +35,8 @@ body { .ui.sidebar { position: fixed; - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); - margin: 0 !important; + width: 275px !important; height: 100% !important; @@ -55,9 +50,26 @@ body { left: 0px; z-index: 999; - -webkit-transition: -webkit-transform 0.3s ease; - -moz-transition: -moz-transform 0.3s ease; - transition: transform 0.3s ease; + -webkit-transition: + margin-left 0.3s ease, + margin-top 0.3s ease + ; + -moz-transition: + margin-left 0.3s ease, + margin-top 0.3s ease + ; + -o-transition: + margin-left 0.3s ease, + margin-top 0.3s ease + ; + -ms-transition: + margin-left 0.3s ease, + margin-top 0.3s ease + ; + transition: + margin-left 0.3s ease, + margin-top 0.3s ease + ; } @@ -65,36 +77,26 @@ body { Types *******************************/ +.ui.sidebar { + margin-left: -275px !important; +} + .ui.right.sidebar { left: 100%; - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -o-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + margin: 0px !important; } .ui.top.sidebar { + margin: -40px 0px 0px 0px !important; width: 100% !important; height: 40px !important; - overflow: hidden; - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -o-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); } .ui.bottom.sidebar { width: 100% !important; height: 40px !important; top: 100%; - - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -o-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); + margin: 0px !important; } @@ -103,33 +105,17 @@ body { *******************************/ .ui.active.sidebar { - -webkit-transform: translateX(0%); - -moz-transform: translateX(0%); - -o-transform: translateX(0%); - -ms-transform: translateX(0%); - transform: translateX(0%); + margin-left: 0px !important; } .ui.active.right.sidebar { - -webkit-transform: translateX(-100%); - -moz-transform: translateX(-100%); - -o-transform: translateX(-100%); - -ms-transform: translateX(-100%); - transform: translateX(-100%); + margin-left: -275px !important; } .ui.active.top.sidebar { - -webkit-transform: translateY(0%); - -moz-transform: translateY(0%); - -o-transform: translateY(0%); - -ms-transform: translateY(0%); - transform: translateY(0%); + margin-top: 0px !important; } .ui.active.bottom.sidebar { - -webkit-transform: translateY(-100%); - -moz-transform: translateY(-100%); - -o-transform: translateY(-100%); - -ms-transform: translateY(-100%); - transform: translateY(-100%); + margin-top: -40px !important; } /*******************************