Browse Source

Add new features for mobile sidebar, fix issues with gulpfile breaking on js changes

pull/1243/head
jlukic 10 years ago
parent
commit
58c50fdbc3
6 changed files with 38 additions and 22 deletions
  1. 1
      gulpfile.js
  2. 2
      src/definitions/collections/menu.less
  3. 1
      src/definitions/globals/site.less
  4. 32
      src/definitions/modules/sidebar.js
  5. 17
      src/definitions/modules/sidebar.less
  6. 7
      src/themes/default/modules/sidebar.variables

1
gulpfile.js

@ -278,6 +278,7 @@ gulp.task('watch', 'Watch for site/theme changes (Default Task)', function(callb
source.definitions + '**/*.js'
], function(file) {
gulp.src(file.path)
.pipe(plumber())
.pipe(gulp.dest(output.uncompressed))
.pipe(print(log.created))
.pipe(sourcemaps.init())

2
src/definitions/collections/menu.less

@ -1452,7 +1452,7 @@
.ui.menu.fixed {
position: fixed;
z-index: 903;
z-index: 101;
margin: 0em;
border: none;
width: 100%;

1
src/definitions/globals/site.less

@ -49,7 +49,6 @@ body {
line-height: @lineHeight;
color: @textColor;
font-smoothing: @fontSmoothing;
overflow-x: @pageOverflowX;
}

32
src/definitions/modules/sidebar.js

@ -109,6 +109,17 @@ $.fn.sidebar = function(parameters) {
module.hide();
}
},
touch: function(event) {
//event.stopPropagation();
},
containScroll: function(event) {
if(element.scrollTop <= 0) {
element.scrollTop = 1;
}
if((element.scrollTop + element.offsetHeight) >= element.scrollHeight) {
element.scrollTop = element.scrollHeight - element.offsetHeight - 1;
}
},
scroll: function(event) {
if( $module.find(event.target).size() === 0 && $(event.target).filter($module).size() === 0 ) {
event.preventDefault();
@ -123,8 +134,11 @@ $.fn.sidebar = function(parameters) {
.on('DOMMouseScroll' + eventNamespace, module.event.scroll)
;
}
$(window)
.on('touchmove' + eventNamespace, module.event.scroll)
$(document)
.on('touchmove' + eventNamespace, module.event.touch)
;
$module
.on('scroll' + eventNamespace, module.event.containScroll)
;
if(settings.closable) {
$context
@ -136,12 +150,9 @@ $.fn.sidebar = function(parameters) {
},
unbind: {
clickaway: function() {
$context
.off(eventNamespace)
;
$pusher
.off(eventNamespace)
;
$context.off(eventNamespace);
$pusher.off(eventNamespace);
$(document).off(eventNamespace);
$(window).off(eventNamespace);
}
},
@ -364,7 +375,6 @@ $.fn.sidebar = function(parameters) {
$transition.off(transitionEvent + eventNamespace, transitionEnd);
module.remove.animating();
module.bind.clickaway();
module.set.active();
$.proxy(callback, element)();
}
};
@ -391,7 +401,6 @@ $.fn.sidebar = function(parameters) {
if(!module.othersActive()) {
module.unbind.clickaway();
}
module.remove.active();
animate = function() {
module.set.animating();
module.remove.visible();
@ -438,7 +447,6 @@ $.fn.sidebar = function(parameters) {
.animate(properties, settings.duration, settings.easing, function() {
module.remove.animating();
module.bind.clickaway();
module.set.active();
$.proxy(callback, module)();
})
;
@ -459,7 +467,6 @@ $.fn.sidebar = function(parameters) {
module.unbind.clickaway();
module.set.animating();
module.remove.visible();
module.remove.active();
if(settings.dimPage && !module.othersVisible()) {
$pusher.removeClass(className.dimmed);
}
@ -474,7 +481,6 @@ $.fn.sidebar = function(parameters) {
scrollToTop: function() {
module.verbose('Scrolling to top of page to avoid animation issues');
$module.scrollTop(0);
currentScroll = $(window).scrollTop();
window.scrollTo(0, 0);
},

17
src/definitions/modules/sidebar.less

@ -35,6 +35,7 @@
will-change: transform;
transform: translate3d(0, 0, 0);
visibility: hidden;
-webkit-overflow-scrolling: touch;
height: 100% !important;
border-radius: 0em !important;
@ -42,6 +43,10 @@
overflow-y: auto !important;
z-index: @topLayer;
}
.ui.sidebar * {
backface-visibility: hidden;
transform: rotateZ(0deg);
}
/*--------------
Direction
@ -174,12 +179,16 @@
visibility: visible;
}
/*--------------
Active
Mobile
---------------*/
.ui.active.sidebar {
-webkit-overflow-scrolling: touch;
@media only screen and (max-width: @computerBreakpoint) {
html {
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
}
}
@ -419,7 +428,7 @@
.ui.animating.scale.down > .visible.ui.sidebar {
transition: transform @duration @easing;
}
.ui.active.scale.down.sidebar ~ .pusher,
.ui.visible.scale.down.sidebar ~ .pusher,
.ui.animating.scale.down.sidebar ~ .pusher {
display: block !important;
width: 100%;

7
src/themes/default/modules/sidebar.variables

@ -15,6 +15,7 @@
@bottomLayer: 1;
@middleLayer: 2;
@topLayer: 3;
@dimmerLayer: 900;
@fixedLayer: 901;
@fixedLayer: 101;
@topLayer: 102;
@dimmerLayer: 1000;
Loading…
Cancel
Save