richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Fixes issues with touch overflow on ios

pull/1129/head
jlukic 10 years ago
parent
5340f43553
commit
305d19fb61
13 changed files with 147 additions and 112 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 69
      build/less/definitions/modules/sidebar.js
  2. 4
      build/less/definitions/modules/sidebar.less
  3. 2
      build/minified/definitions/modules/sidebar.min.css
  4. 2
      build/minified/definitions/modules/sidebar.min.js
  5. 6
      build/packaged/definitions/css/semantic.css
  6. 2
      build/packaged/definitions/css/semantic.min.css
  7. 69
      build/packaged/definitions/javascript/semantic.js
  8. 4
      build/packaged/definitions/javascript/semantic.min.js
  9. 6
      build/uncompressed/definitions/modules/sidebar.css
  10. 69
      build/uncompressed/definitions/modules/sidebar.js
  11. 2
      server/files/stylesheets/semantic.css
  12. 2
      src/definitions/modules/sidebar.js
  13. 22
      src/definitions/modules/sidebar.less

69
build/less/definitions/modules/sidebar.js
View File

@ -139,6 +139,11 @@ $.fn.sidebar = function(parameters) {
$fixed = $pusher.find(selector.fixed);
},
repaint: function() {
module.verbose('Forcing repaint event');
var fakeAssignment = $context[0].offsetWidth;
},
setup: {
layout: function() {
if( $context.find(selector.pusher).size() === 0 ) {
@ -198,9 +203,9 @@ $.fn.sidebar = function(parameters) {
module.debug('Showing sidebar', callback);
if(module.is.closed()) {
if(settings.overlay) {
settings.animation = 'overlay';
settings.transition = 'overlay';
}
if(settings.animation !== 'overlay') {
if(settings.transition !== 'overlay') {
module.hideAll();
}
module.pushPage(function() {
@ -252,20 +257,20 @@ $.fn.sidebar = function(parameters) {
pushPage: function(callback) {
var
$transition = (settings.animation == 'safe')
$transition = (settings.transition == 'safe')
? $context
: (settings.animation == 'overlay')
: (settings.transition == 'overlay')
? $module
: $pusher,
animation
transition
;
callback = $.isFunction(callback)
? callback
: function(){}
;
animation = function() {
transition = function() {
module.set.visible();
module.set.animation();
module.set.transition();
module.set.direction();
requestAnimationFrame(function() {
module.set.active();
@ -284,23 +289,26 @@ $.fn.sidebar = function(parameters) {
})
;
module.verbose('Adding context push state', $context);
if(settings.animation === 'overlay') {
requestAnimationFrame(animation);
if(settings.transition === 'overlay') {
requestAnimationFrame(transition);
}
else {
if(settings.animation !== 'safe') {
window.scrollTo(0, 0);
if(settings.transition !== 'safe') {
$module.scrollTop(0);
if(settings.workaround === 'scroll') {
window.scrollTo(0, 0);
}
}
module.remove.allVisible();
animation();
requestAnimationFrame(transition);
}
},
pullPage: function(callback) {
var
$transition = (settings.animation == 'safe')
$transition = (settings.transition == 'safe')
? $context
: (settings.animation == 'overlay')
: (settings.transition == 'overlay')
? $module
: $pusher
;
@ -314,7 +322,7 @@ $.fn.sidebar = function(parameters) {
.on(transitionEnd, function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEnd);
module.remove.animation();
module.remove.transition();
module.remove.direction();
module.remove.outward();
module.remove.visible();
@ -338,12 +346,12 @@ $.fn.sidebar = function(parameters) {
visible: function() {
$module.addClass(className.visible);
},
animation: function(animation) {
animation = animation || ( module.is.mobile() )
? settings.mobileAnimation
: settings.animation
transition: function(transition) {
transition = transition || ( module.is.mobile() )
? settings.mobileTransition
: settings.transition
;
$context.addClass(animation);
$context.addClass(transition);
},
inward: function() {
$context.addClass(className.inward);
@ -368,12 +376,12 @@ $.fn.sidebar = function(parameters) {
$sidebars.removeClass(className.visible);
}
},
animation: function(animation) {
animation = animation || ( module.is.mobile() )
? settings.mobileAnimation
: settings.animation
transition: function(transition) {
transition = transition || ( module.is.mobile() )
? settings.mobileTransition
: settings.transition
;
$context.removeClass(animation);
$context.removeClass(transition);
},
pushed: function() {
$context.removeClass(className.pushed);
@ -436,7 +444,7 @@ $.fn.sidebar = function(parameters) {
return true;
}
else {
module.verbose('Browser is not mobile, using regular animation', userAgent);
module.verbose('Browser is not mobile, using regular transition', userAgent);
return false;
}
},
@ -646,8 +654,8 @@ $.fn.sidebar.settings = {
verbose : false,
performance : false,
animation : 'overlay',
mobileAnimation : 'slide along',
transition : 'overlay',
mobileTransition : 'slide along',
context : 'body',
useCSS : true,
@ -664,7 +672,9 @@ $.fn.sidebar.settings = {
onHidden : function(){},
onVisible : function(){},
className : {
workaround : 'scroll',
className : {
pushable : 'pushable',
active : 'active',
visible : 'visible',
@ -676,6 +686,7 @@ $.fn.sidebar.settings = {
selector: {
sidebar : '.ui.sidebar',
pusher : '.pusher',
fixed : '.ui.fixed',
page : '.page',
omitted : 'script, link, style, .ui.modal, .ui.nag'
},

4
build/less/definitions/modules/sidebar.less
View File

@ -303,11 +303,7 @@
---------------*/
/* Set-up */
.pushable.scale.down {
perspective: @perspective;
}
.pushable.scale.down > .pusher {
transform-style: preserve-3d;
z-index: @bottomLayer;
transform-origin: 75% 50%;
overflow: hidden;

2
build/minified/definitions/modules/sidebar.min.css
File diff suppressed because it is too large
View File

2
build/minified/definitions/modules/sidebar.min.js
File diff suppressed because it is too large
View File

6
build/packaged/definitions/css/semantic.css
View File

@ -20640,13 +20640,7 @@ a.ui.nag {
Scale Down
---------------*/
/* Set-up */
.pushable.scale.down {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.pushable.scale.down > .pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 1001;
-webkit-transform-origin: 75% 50%;
-ms-transform-origin: 75% 50%;

2
build/packaged/definitions/css/semantic.min.css
File diff suppressed because it is too large
View File

69
build/packaged/definitions/javascript/semantic.js
View File

@ -11967,6 +11967,11 @@ $.fn.sidebar = function(parameters) {
$fixed = $pusher.find(selector.fixed);
},
repaint: function() {
module.verbose('Forcing repaint event');
var fakeAssignment = $context[0].offsetWidth;
},
setup: {
layout: function() {
if( $context.find(selector.pusher).size() === 0 ) {
@ -12026,9 +12031,9 @@ $.fn.sidebar = function(parameters) {
module.debug('Showing sidebar', callback);
if(module.is.closed()) {
if(settings.overlay) {
settings.animation = 'overlay';
settings.transition = 'overlay';
}
if(settings.animation !== 'overlay') {
if(settings.transition !== 'overlay') {
module.hideAll();
}
module.pushPage(function() {
@ -12080,20 +12085,20 @@ $.fn.sidebar = function(parameters) {
pushPage: function(callback) {
var
$transition = (settings.animation == 'safe')
$transition = (settings.transition == 'safe')
? $context
: (settings.animation == 'overlay')
: (settings.transition == 'overlay')
? $module
: $pusher,
animation
transition
;
callback = $.isFunction(callback)
? callback
: function(){}
;
animation = function() {
transition = function() {
module.set.visible();
module.set.animation();
module.set.transition();
module.set.direction();
requestAnimationFrame(function() {
module.set.active();
@ -12112,23 +12117,26 @@ $.fn.sidebar = function(parameters) {
})
;
module.verbose('Adding context push state', $context);
if(settings.animation === 'overlay') {
requestAnimationFrame(animation);
if(settings.transition === 'overlay') {
requestAnimationFrame(transition);
}
else {
if(settings.animation !== 'safe') {
window.scrollTo(0, 0);
if(settings.transition !== 'safe') {
$module.scrollTop(0);
if(settings.workaround === 'scroll') {
window.scrollTo(0, 0);
}
}
module.remove.allVisible();
animation();
requestAnimationFrame(transition);
}
},
pullPage: function(callback) {
var
$transition = (settings.animation == 'safe')
$transition = (settings.transition == 'safe')
? $context
: (settings.animation == 'overlay')
: (settings.transition == 'overlay')
? $module
: $pusher
;
@ -12142,7 +12150,7 @@ $.fn.sidebar = function(parameters) {
.on(transitionEnd, function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEnd);
module.remove.animation();
module.remove.transition();
module.remove.direction();
module.remove.outward();
module.remove.visible();
@ -12166,12 +12174,12 @@ $.fn.sidebar = function(parameters) {
visible: function() {
$module.addClass(className.visible);
},
animation: function(animation) {
animation = animation || ( module.is.mobile() )
? settings.mobileAnimation
: settings.animation
transition: function(transition) {
transition = transition || ( module.is.mobile() )
? settings.mobileTransition
: settings.transition
;
$context.addClass(animation);
$context.addClass(transition);
},
inward: function() {
$context.addClass(className.inward);
@ -12196,12 +12204,12 @@ $.fn.sidebar = function(parameters) {
$sidebars.removeClass(className.visible);
}
},
animation: function(animation) {
animation = animation || ( module.is.mobile() )
? settings.mobileAnimation
: settings.animation
transition: function(transition) {
transition = transition || ( module.is.mobile() )
? settings.mobileTransition
: settings.transition
;
$context.removeClass(animation);
$context.removeClass(transition);
},
pushed: function() {
$context.removeClass(className.pushed);
@ -12264,7 +12272,7 @@ $.fn.sidebar = function(parameters) {
return true;
}
else {
module.verbose('Browser is not mobile, using regular animation', userAgent);
module.verbose('Browser is not mobile, using regular transition', userAgent);
return false;
}
},
@ -12474,8 +12482,8 @@ $.fn.sidebar.settings = {
verbose : false,
performance : false,
animation : 'overlay',
mobileAnimation : 'slide along',
transition : 'overlay',
mobileTransition : 'slide along',
context : 'body',
useCSS : true,
@ -12492,7 +12500,9 @@ $.fn.sidebar.settings = {
onHidden : function(){},
onVisible : function(){},
className : {
workaround : 'scroll',
className : {
pushable : 'pushable',
active : 'active',
visible : 'visible',
@ -12504,6 +12514,7 @@ $.fn.sidebar.settings = {
selector: {
sidebar : '.ui.sidebar',
pusher : '.pusher',
fixed : '.ui.fixed',
page : '.page',
omitted : 'script, link, style, .ui.modal, .ui.nag'
},

4
build/packaged/definitions/javascript/semantic.min.js
File diff suppressed because it is too large
View File

6
build/uncompressed/definitions/modules/sidebar.css
View File

@ -413,13 +413,7 @@
Scale Down
---------------*/
/* Set-up */
.pushable.scale.down {
-webkit-perspective: 1500px;
perspective: 1500px;
}
.pushable.scale.down > .pusher {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 1001;
-webkit-transform-origin: 75% 50%;
-ms-transform-origin: 75% 50%;

69
build/uncompressed/definitions/modules/sidebar.js
View File

@ -139,6 +139,11 @@ $.fn.sidebar = function(parameters) {
$fixed = $pusher.find(selector.fixed);
},
repaint: function() {
module.verbose('Forcing repaint event');
var fakeAssignment = $context[0].offsetWidth;
},
setup: {
layout: function() {
if( $context.find(selector.pusher).size() === 0 ) {
@ -198,9 +203,9 @@ $.fn.sidebar = function(parameters) {
module.debug('Showing sidebar', callback);
if(module.is.closed()) {
if(settings.overlay) {
settings.animation = 'overlay';
settings.transition = 'overlay';
}
if(settings.animation !== 'overlay') {
if(settings.transition !== 'overlay') {
module.hideAll();
}
module.pushPage(function() {
@ -252,20 +257,20 @@ $.fn.sidebar = function(parameters) {
pushPage: function(callback) {
var
$transition = (settings.animation == 'safe')
$transition = (settings.transition == 'safe')
? $context
: (settings.animation == 'overlay')
: (settings.transition == 'overlay')
? $module
: $pusher,
animation
transition
;
callback = $.isFunction(callback)
? callback
: function(){}
;
animation = function() {
transition = function() {
module.set.visible();
module.set.animation();
module.set.transition();
module.set.direction();
requestAnimationFrame(function() {
module.set.active();
@ -284,23 +289,26 @@ $.fn.sidebar = function(parameters) {
})
;
module.verbose('Adding context push state', $context);
if(settings.animation === 'overlay') {
requestAnimationFrame(animation);
if(settings.transition === 'overlay') {
requestAnimationFrame(transition);
}
else {
if(settings.animation !== 'safe') {
window.scrollTo(0, 0);
if(settings.transition !== 'safe') {
$module.scrollTop(0);
if(settings.workaround === 'scroll') {
window.scrollTo(0, 0);
}
}
module.remove.allVisible();
animation();
requestAnimationFrame(transition);
}
},
pullPage: function(callback) {
var
$transition = (settings.animation == 'safe')
$transition = (settings.transition == 'safe')
? $context
: (settings.animation == 'overlay')
: (settings.transition == 'overlay')
? $module
: $pusher
;
@ -314,7 +322,7 @@ $.fn.sidebar = function(parameters) {
.on(transitionEnd, function(event) {
if( event.target == $transition[0] ) {
$transition.off(transitionEnd);
module.remove.animation();
module.remove.transition();
module.remove.direction();
module.remove.outward();
module.remove.visible();
@ -338,12 +346,12 @@ $.fn.sidebar = function(parameters) {
visible: function() {
$module.addClass(className.visible);
},
animation: function(animation) {
animation = animation || ( module.is.mobile() )
? settings.mobileAnimation
: settings.animation
transition: function(transition) {
transition = transition || ( module.is.mobile() )
? settings.mobileTransition
: settings.transition
;
$context.addClass(animation);
$context.addClass(transition);
},
inward: function() {
$context.addClass(className.inward);
@ -368,12 +376,12 @@ $.fn.sidebar = function(parameters) {
$sidebars.removeClass(className.visible);
}
},
animation: function(animation) {
animation = animation || ( module.is.mobile() )
? settings.mobileAnimation
: settings.animation
transition: function(transition) {
transition = transition || ( module.is.mobile() )
? settings.mobileTransition
: settings.transition
;
$context.removeClass(animation);
$context.removeClass(transition);
},
pushed: function() {
$context.removeClass(className.pushed);
@ -436,7 +444,7 @@ $.fn.sidebar = function(parameters) {
return true;
}
else {
module.verbose('Browser is not mobile, using regular animation', userAgent);
module.verbose('Browser is not mobile, using regular transition', userAgent);
return false;
}
},
@ -646,8 +654,8 @@ $.fn.sidebar.settings = {
verbose : false,
performance : false,
animation : 'overlay',
mobileAnimation : 'slide along',
transition : 'overlay',
mobileTransition : 'slide along',
context : 'body',
useCSS : true,
@ -664,7 +672,9 @@ $.fn.sidebar.settings = {
onHidden : function(){},
onVisible : function(){},
className : {
workaround : 'scroll',
className : {
pushable : 'pushable',
active : 'active',
visible : 'visible',
@ -676,6 +686,7 @@ $.fn.sidebar.settings = {
selector: {
sidebar : '.ui.sidebar',
pusher : '.pusher',
fixed : '.ui.fixed',
page : '.page',
omitted : 'script, link, style, .ui.modal, .ui.nag'
},

2
server/files/stylesheets/semantic.css
View File

@ -1267,7 +1267,7 @@ body#example.index {
}
}
#example .animation.example .ui.button {
#example .transition.example .ui.button {
margin-bottom: 0.5em;
}

2
src/definitions/modules/sidebar.js
View File

@ -209,6 +209,7 @@ $.fn.sidebar = function(parameters) {
module.hideAll();
}
module.pushPage(function() {
module.set.active();
$.proxy(callback, element)();
$.proxy(settings.onShow, element)();
});
@ -273,7 +274,6 @@ $.fn.sidebar = function(parameters) {
module.set.transition();
module.set.direction();
requestAnimationFrame(function() {
module.set.active();
module.set.inward();
module.set.pushed();
});

22
src/definitions/modules/sidebar.less
View File

@ -40,7 +40,7 @@
transition: none;
will-change: transform;
overflow-y: auto !important;
backface-visibility: hidden;
}
/*--------------
@ -115,8 +115,26 @@
opacity: 1 !important;
}
.pushable.pushed > .visible.sidebar {
.pushable.pushed > .pusher {
backface-visibility: hidden;
}
.pushable.active > .visible.sidebar {
-webkit-overflow-scrolling: touch;
overflow-y: auto !important;
}
/*--------------
Animation
---------------*/
.pushable.show > .pusher,
.pushable.hide > .pusher {
backface-visibility: hidden;
}
.pushable.show > .visible.sidebar,
.pushable.hide > .visible.sidebar {
backface-visibility: hidden;
}
/*.pushable.hide > .pusher > .page *,

Write Preview
Loading…
Cancel
Save