From 06afb6ab2676dd2c0bd92679b05d600be9bd765c Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Thu, 25 Feb 2016 19:58:21 +0200 Subject: [PATCH 01/15] jqt.menusheet.js Fixes to jqt.menusheet.js jqt.menusheet.css files. --- extensions/jqt.menusheet.js | 51 +++++++++++++++++++++++++++++++------ 1 file changed, 43 insertions(+), 8 deletions(-) diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index d5bfc4a3..905e7ad6 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -19,24 +19,55 @@ jQTouch may be freely distributed under the MIT license. */ + +var transition = { + + // Determines proper transition property per browser + whichTransitionEvent: function(){ + + var el = document.createElement('menuelement'); + + var transitions = { + 'WebkitTransition':'webkitTransitionEnd', // Saf 6, Android Browser + 'OTransition':'oTransitionEnd otransitionend', + 'MozTransition':'transitionend', // only for FF < 15 + 'transition':'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+ + }; + + for(t in transitions){ + if( el.style[t] !== undefined ){ + return transitions[t]; + } + } + + return false; + } + +}; + (function($) { var src = $("head script").last().attr("src") || ''; var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/'; var csspath = scriptpath + 'jqt.menusheet.css'; var link = $(''); + + $('head').append($(link)); function hide(callback) { var $target = $(this); var data = $(this).data('menusheet'); + if (data.shown) { $(this).data('menusheet', {}); var $source = data.source; + var transitionEnd = transition.whichTransitionEvent(); + $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true }); $source.unbind('touchstart mousedown', data.closehandler); - $source.one('webkitTransitionEnd', function() { + $source.one(transitionEnd , function(event) { $source.removeClass('inmotion transition in'); $target.removeClass('inmotion out'); $target.trigger('pageAnimationEnd', { @@ -44,8 +75,8 @@ }); !callback || callback.apply(this, arguments); }); - - $source.addClass('inmotion transition in'); + + $source.addClass('inmotion transition in'); $target.addClass('inmotion out').removeClass('current'); $('#jqt').removeClass('menuopened'); } @@ -55,6 +86,8 @@ function show(callback) { var $target = $(this); var data = $(this).data('menusheet') || {}; + var transitionEnd = transition.whichTransitionEvent(); + if (!data.shown) { var $source = $('#jqt .current:not(.menusheet)'); $target.trigger('pageAnimationStart', { @@ -65,22 +98,24 @@ return false; }; - $source.one('webkitTransitionEnd', function() { + $source.one(transitionEnd , function(event) { $source.one('touchstart mousedown', closehandler); $source.removeClass('inmotion transition out'); + $target.removeClass('inmotion in'); $target.trigger('pageAnimationEnd', { direction: 'in', animation: undefined, back: false }); !callback || callback.apply(this, arguments); }); - + data.shown = true; data.closehandler = closehandler; data.source = $source; $(this).data('menusheet', data); - + $source.addClass('inmotion transition out'); + $target.addClass('current in'); $('#jqt').addClass('menuopened'); } @@ -119,7 +154,7 @@ }, fn: function(e, params) { params.$el.removeClass('active'); - + var $target = $(params.hash); $target.menusheet('show'); @@ -149,4 +184,4 @@ } else { console.error('Extension `jqt.menusheet` failed to load. jQT not found'); } -})($); +}( Zepto )); // jQuery or jQuery-like library, such as Zepto From 4869ca318c2f95979d62428cf5424e62d597df51 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Thu, 25 Feb 2016 19:59:52 +0200 Subject: [PATCH 02/15] jqt.menusheet.css Fixes to jqt.menusheet.js jqt.menusheet.css files. --- extensions/jqt.menusheet.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/extensions/jqt.menusheet.css b/extensions/jqt.menusheet.css index 73a3b60f..d9827e39 100644 --- a/extensions/jqt.menusheet.css +++ b/extensions/jqt.menusheet.css @@ -3,7 +3,6 @@ #jqt > div.menusheet { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; - width: 260px; } #jqt.black-translucent > div.menusheet { padding-top: 20px; @@ -21,7 +20,7 @@ } #jqt.menuopened > .current { - -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1); + -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); border-left: 0.5px solid rgba(127, 127, 127, 0.01); z-index: 20; From f1286d7400dcc4c5874c1a8c5f138eee8f38b857 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Fri, 26 Feb 2016 00:04:28 +0200 Subject: [PATCH 03/15] jqt.menusheet.js fix chrome menusheet bug --- extensions/jqt.menusheet.js | 55 +++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index 905e7ad6..af9190e9 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -51,7 +51,6 @@ var transition = { var csspath = scriptpath + 'jqt.menusheet.css'; var link = $(''); - $('head').append($(link)); function hide(callback) { @@ -66,16 +65,27 @@ var transition = { $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true }); + + var watchdogTimer; + $source.unbind('touchstart mousedown', data.closehandler); - $source.one(transitionEnd , function(event) { - $source.removeClass('inmotion transition in'); - $target.removeClass('inmotion out'); - $target.trigger('pageAnimationEnd', { - direction: 'out', animation: undefined, back: true - }); - !callback || callback.apply(this, arguments); + $source.on(transitionEnd , function menu(event) { + if (event.target === this) { + $(this).off(transitionEnd, menu); + clearTimeout(watchdogTimer); + $source.removeClass('inmotion transition in'); + $target.removeClass('inmotion out'); + $target.trigger('pageAnimationEnd', { + direction: 'out', animation: undefined, back: true + }); + !callback || callback.apply(this, arguments); + } }); + watchdogTimer = setTimeout(function() { + $source.trigger(transitionEnd); + }, 750); + $source.addClass('inmotion transition in'); $target.addClass('inmotion out').removeClass('current'); $('#jqt').removeClass('menuopened'); @@ -86,6 +96,7 @@ var transition = { function show(callback) { var $target = $(this); var data = $(this).data('menusheet') || {}; + var watchdogTimer; var transitionEnd = transition.whichTransitionEvent(); if (!data.shown) { @@ -98,16 +109,24 @@ var transition = { return false; }; - $source.one(transitionEnd , function(event) { - $source.one('touchstart mousedown', closehandler); - $source.removeClass('inmotion transition out'); - - $target.removeClass('inmotion in'); - $target.trigger('pageAnimationEnd', { - direction: 'in', animation: undefined, back: false - }); - !callback || callback.apply(this, arguments); + $source.on(transitionEnd , function menu(event) { + if (event.target === this) { + $(this).off(transitionEnd, menu); + clearTimeout(watchdogTimer); + $source.one('touchstart mousedown', closehandler); + $source.removeClass('inmotion transition out'); + + $target.removeClass('inmotion in'); + $target.trigger('pageAnimationEnd', { + direction: 'in', animation: undefined, back: false + }); + !callback || callback.apply(this, arguments); + } }); + + watchdogTimer = setTimeout(function() { + $source.trigger(transitionEnd); + }, 750); data.shown = true; data.closehandler = closehandler; @@ -184,4 +203,4 @@ var transition = { } else { console.error('Extension `jqt.menusheet` failed to load. jQT not found'); } -}( Zepto )); // jQuery or jQuery-like library, such as Zepto +}( jQuery || $ )); // jQuery or jQuery-like library, such as Zepto From c9c6ced98bdd3968709ee49fdb9b8db1fbf31ebc Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Thu, 25 Feb 2016 19:59:52 +0200 Subject: [PATCH 04/15] jqt.menusheet.css Fixes to jqt.menusheet.js jqt.menusheet.css files. --- extensions/jqt.menusheet.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/extensions/jqt.menusheet.css b/extensions/jqt.menusheet.css index 73a3b60f..d9827e39 100644 --- a/extensions/jqt.menusheet.css +++ b/extensions/jqt.menusheet.css @@ -3,7 +3,6 @@ #jqt > div.menusheet { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; - width: 260px; } #jqt.black-translucent > div.menusheet { padding-top: 20px; @@ -21,7 +20,7 @@ } #jqt.menuopened > .current { - -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1); + -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); border-left: 0.5px solid rgba(127, 127, 127, 0.01); z-index: 20; From c6ad11a5ec506112726559c892f52ce6b55c0ec4 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Fri, 26 Feb 2016 00:04:28 +0200 Subject: [PATCH 05/15] rebase --- extensions/jqt.menusheet.js | 55 +++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index 905e7ad6..af9190e9 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -51,7 +51,6 @@ var transition = { var csspath = scriptpath + 'jqt.menusheet.css'; var link = $(''); - $('head').append($(link)); function hide(callback) { @@ -66,16 +65,27 @@ var transition = { $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true }); + + var watchdogTimer; + $source.unbind('touchstart mousedown', data.closehandler); - $source.one(transitionEnd , function(event) { - $source.removeClass('inmotion transition in'); - $target.removeClass('inmotion out'); - $target.trigger('pageAnimationEnd', { - direction: 'out', animation: undefined, back: true - }); - !callback || callback.apply(this, arguments); + $source.on(transitionEnd , function menu(event) { + if (event.target === this) { + $(this).off(transitionEnd, menu); + clearTimeout(watchdogTimer); + $source.removeClass('inmotion transition in'); + $target.removeClass('inmotion out'); + $target.trigger('pageAnimationEnd', { + direction: 'out', animation: undefined, back: true + }); + !callback || callback.apply(this, arguments); + } }); + watchdogTimer = setTimeout(function() { + $source.trigger(transitionEnd); + }, 750); + $source.addClass('inmotion transition in'); $target.addClass('inmotion out').removeClass('current'); $('#jqt').removeClass('menuopened'); @@ -86,6 +96,7 @@ var transition = { function show(callback) { var $target = $(this); var data = $(this).data('menusheet') || {}; + var watchdogTimer; var transitionEnd = transition.whichTransitionEvent(); if (!data.shown) { @@ -98,16 +109,24 @@ var transition = { return false; }; - $source.one(transitionEnd , function(event) { - $source.one('touchstart mousedown', closehandler); - $source.removeClass('inmotion transition out'); - - $target.removeClass('inmotion in'); - $target.trigger('pageAnimationEnd', { - direction: 'in', animation: undefined, back: false - }); - !callback || callback.apply(this, arguments); + $source.on(transitionEnd , function menu(event) { + if (event.target === this) { + $(this).off(transitionEnd, menu); + clearTimeout(watchdogTimer); + $source.one('touchstart mousedown', closehandler); + $source.removeClass('inmotion transition out'); + + $target.removeClass('inmotion in'); + $target.trigger('pageAnimationEnd', { + direction: 'in', animation: undefined, back: false + }); + !callback || callback.apply(this, arguments); + } }); + + watchdogTimer = setTimeout(function() { + $source.trigger(transitionEnd); + }, 750); data.shown = true; data.closehandler = closehandler; @@ -184,4 +203,4 @@ var transition = { } else { console.error('Extension `jqt.menusheet` failed to load. jQT not found'); } -}( Zepto )); // jQuery or jQuery-like library, such as Zepto +}( jQuery || $ )); // jQuery or jQuery-like library, such as Zepto From babd1d75e6b9eacd9ca928e90ace6afc5cabbae0 Mon Sep 17 00:00:00 2001 From: "Thomas @ BeeDesk" Date: Sat, 31 Jan 2015 16:58:10 -0800 Subject: [PATCH 06/15] Updated release version. --- extensions/jqt.menusheet.css | 3 +-- extensions/jqt.menusheet.js | 51 ++++++++++++++++++++++++++++++------ package.json | 4 +-- 3 files changed, 46 insertions(+), 12 deletions(-) diff --git a/extensions/jqt.menusheet.css b/extensions/jqt.menusheet.css index 73a3b60f..d9827e39 100644 --- a/extensions/jqt.menusheet.css +++ b/extensions/jqt.menusheet.css @@ -3,7 +3,6 @@ #jqt > div.menusheet { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; - width: 260px; } #jqt.black-translucent > div.menusheet { padding-top: 20px; @@ -21,7 +20,7 @@ } #jqt.menuopened > .current { - -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1); + -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); border-left: 0.5px solid rgba(127, 127, 127, 0.01); z-index: 20; diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index d5bfc4a3..905e7ad6 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -19,24 +19,55 @@ jQTouch may be freely distributed under the MIT license. */ + +var transition = { + + // Determines proper transition property per browser + whichTransitionEvent: function(){ + + var el = document.createElement('menuelement'); + + var transitions = { + 'WebkitTransition':'webkitTransitionEnd', // Saf 6, Android Browser + 'OTransition':'oTransitionEnd otransitionend', + 'MozTransition':'transitionend', // only for FF < 15 + 'transition':'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+ + }; + + for(t in transitions){ + if( el.style[t] !== undefined ){ + return transitions[t]; + } + } + + return false; + } + +}; + (function($) { var src = $("head script").last().attr("src") || ''; var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/'; var csspath = scriptpath + 'jqt.menusheet.css'; var link = $(''); + + $('head').append($(link)); function hide(callback) { var $target = $(this); var data = $(this).data('menusheet'); + if (data.shown) { $(this).data('menusheet', {}); var $source = data.source; + var transitionEnd = transition.whichTransitionEvent(); + $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true }); $source.unbind('touchstart mousedown', data.closehandler); - $source.one('webkitTransitionEnd', function() { + $source.one(transitionEnd , function(event) { $source.removeClass('inmotion transition in'); $target.removeClass('inmotion out'); $target.trigger('pageAnimationEnd', { @@ -44,8 +75,8 @@ }); !callback || callback.apply(this, arguments); }); - - $source.addClass('inmotion transition in'); + + $source.addClass('inmotion transition in'); $target.addClass('inmotion out').removeClass('current'); $('#jqt').removeClass('menuopened'); } @@ -55,6 +86,8 @@ function show(callback) { var $target = $(this); var data = $(this).data('menusheet') || {}; + var transitionEnd = transition.whichTransitionEvent(); + if (!data.shown) { var $source = $('#jqt .current:not(.menusheet)'); $target.trigger('pageAnimationStart', { @@ -65,22 +98,24 @@ return false; }; - $source.one('webkitTransitionEnd', function() { + $source.one(transitionEnd , function(event) { $source.one('touchstart mousedown', closehandler); $source.removeClass('inmotion transition out'); + $target.removeClass('inmotion in'); $target.trigger('pageAnimationEnd', { direction: 'in', animation: undefined, back: false }); !callback || callback.apply(this, arguments); }); - + data.shown = true; data.closehandler = closehandler; data.source = $source; $(this).data('menusheet', data); - + $source.addClass('inmotion transition out'); + $target.addClass('current in'); $('#jqt').addClass('menuopened'); } @@ -119,7 +154,7 @@ }, fn: function(e, params) { params.$el.removeClass('active'); - + var $target = $(params.hash); $target.menusheet('show'); @@ -149,4 +184,4 @@ } else { console.error('Extension `jqt.menusheet` failed to load. jQT not found'); } -})($); +}( Zepto )); // jQuery or jQuery-like library, such as Zepto diff --git a/package.json b/package.json index 6ef177b1..968b475d 100644 --- a/package.json +++ b/package.json @@ -2,8 +2,8 @@ "author": "David Kaneda", "name": "jqt", "description": "Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).", - "version": "1.0.0", - "versionId": "R", + "version": "1.0.1", + "versionId": "", "repository": { "type": "git", "url": "git://github.com/senchalabs/jQTouch.git" From 1f50d406a415f5973654415c3baa4884be52577f Mon Sep 17 00:00:00 2001 From: illucent Date: Fri, 26 Feb 2016 00:37:31 +0200 Subject: [PATCH 07/15] # This is a combination of 2 commits. # The first commit's message is: menu*js zepto jquery # The 2nd commit message will be skipped: # jqt.menusheet.css # # Fixes to jqt.menusheet.js jqt.menusheet.css files. --- extensions/jqt.menusheet.js | 55 +++++++++++++++++++++++++------------ 1 file changed, 37 insertions(+), 18 deletions(-) diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index 905e7ad6..af9190e9 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -51,7 +51,6 @@ var transition = { var csspath = scriptpath + 'jqt.menusheet.css'; var link = $(''); - $('head').append($(link)); function hide(callback) { @@ -66,16 +65,27 @@ var transition = { $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true }); + + var watchdogTimer; + $source.unbind('touchstart mousedown', data.closehandler); - $source.one(transitionEnd , function(event) { - $source.removeClass('inmotion transition in'); - $target.removeClass('inmotion out'); - $target.trigger('pageAnimationEnd', { - direction: 'out', animation: undefined, back: true - }); - !callback || callback.apply(this, arguments); + $source.on(transitionEnd , function menu(event) { + if (event.target === this) { + $(this).off(transitionEnd, menu); + clearTimeout(watchdogTimer); + $source.removeClass('inmotion transition in'); + $target.removeClass('inmotion out'); + $target.trigger('pageAnimationEnd', { + direction: 'out', animation: undefined, back: true + }); + !callback || callback.apply(this, arguments); + } }); + watchdogTimer = setTimeout(function() { + $source.trigger(transitionEnd); + }, 750); + $source.addClass('inmotion transition in'); $target.addClass('inmotion out').removeClass('current'); $('#jqt').removeClass('menuopened'); @@ -86,6 +96,7 @@ var transition = { function show(callback) { var $target = $(this); var data = $(this).data('menusheet') || {}; + var watchdogTimer; var transitionEnd = transition.whichTransitionEvent(); if (!data.shown) { @@ -98,16 +109,24 @@ var transition = { return false; }; - $source.one(transitionEnd , function(event) { - $source.one('touchstart mousedown', closehandler); - $source.removeClass('inmotion transition out'); - - $target.removeClass('inmotion in'); - $target.trigger('pageAnimationEnd', { - direction: 'in', animation: undefined, back: false - }); - !callback || callback.apply(this, arguments); + $source.on(transitionEnd , function menu(event) { + if (event.target === this) { + $(this).off(transitionEnd, menu); + clearTimeout(watchdogTimer); + $source.one('touchstart mousedown', closehandler); + $source.removeClass('inmotion transition out'); + + $target.removeClass('inmotion in'); + $target.trigger('pageAnimationEnd', { + direction: 'in', animation: undefined, back: false + }); + !callback || callback.apply(this, arguments); + } }); + + watchdogTimer = setTimeout(function() { + $source.trigger(transitionEnd); + }, 750); data.shown = true; data.closehandler = closehandler; @@ -184,4 +203,4 @@ var transition = { } else { console.error('Extension `jqt.menusheet` failed to load. jQT not found'); } -}( Zepto )); // jQuery or jQuery-like library, such as Zepto +}( jQuery || $ )); // jQuery or jQuery-like library, such as Zepto From 42f6e9c994d358008abec3e88d96812ea6ae8afd Mon Sep 17 00:00:00 2001 From: illucent Date: Mon, 29 Feb 2016 21:28:31 +0200 Subject: [PATCH 08/15] jqt.menusheet.js fixes from comments --- extensions/jqt.menusheet.css | 5 +++- extensions/jqt.menusheet.js | 44 +++++++----------------------------- 2 files changed, 12 insertions(+), 37 deletions(-) diff --git a/extensions/jqt.menusheet.css b/extensions/jqt.menusheet.css index d9827e39..c3e940c0 100644 --- a/extensions/jqt.menusheet.css +++ b/extensions/jqt.menusheet.css @@ -3,10 +3,13 @@ #jqt > div.menusheet { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; height: 100%; + width: 260px; } + #jqt.black-translucent > div.menusheet { padding-top: 20px; } + #jqt.menuopened { width: 100%; overflow: hidden; @@ -20,7 +23,7 @@ } #jqt.menuopened > .current { - -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); + -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1); -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); border-left: 0.5px solid rgba(127, 127, 127, 0.01); z-index: 20; diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index af9190e9..25a4dcc0 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -19,31 +19,7 @@ jQTouch may be freely distributed under the MIT license. */ - -var transition = { - - // Determines proper transition property per browser - whichTransitionEvent: function(){ - - var el = document.createElement('menuelement'); - - var transitions = { - 'WebkitTransition':'webkitTransitionEnd', // Saf 6, Android Browser - 'OTransition':'oTransitionEnd otransitionend', - 'MozTransition':'transitionend', // only for FF < 15 - 'transition':'transitionend' // IE10, Opera, Chrome, FF 15+, Saf 7+ - }; - - for(t in transitions){ - if( el.style[t] !== undefined ){ - return transitions[t]; - } - } - - return false; - } - -}; +var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; (function($) { var src = $("head script").last().attr("src") || ''; @@ -60,7 +36,6 @@ var transition = { if (data.shown) { $(this).data('menusheet', {}); var $source = data.source; - var transitionEnd = transition.whichTransitionEvent(); $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true @@ -69,9 +44,9 @@ var transition = { var watchdogTimer; $source.unbind('touchstart mousedown', data.closehandler); - $source.on(transitionEnd , function menu(event) { + $source.one(TRANSITION_NAMES, function() { if (event.target === this) { - $(this).off(transitionEnd, menu); + $(this).off('webkitTransitionEnd transitionend'); clearTimeout(watchdogTimer); $source.removeClass('inmotion transition in'); $target.removeClass('inmotion out'); @@ -83,7 +58,7 @@ var transition = { }); watchdogTimer = setTimeout(function() { - $source.trigger(transitionEnd); + $source.trigger('transitionend'); }, 750); $source.addClass('inmotion transition in'); @@ -97,7 +72,6 @@ var transition = { var $target = $(this); var data = $(this).data('menusheet') || {}; var watchdogTimer; - var transitionEnd = transition.whichTransitionEvent(); if (!data.shown) { var $source = $('#jqt .current:not(.menusheet)'); @@ -109,13 +83,12 @@ var transition = { return false; }; - $source.on(transitionEnd , function menu(event) { + $source.one(TRANSITION_NAMES, function() { if (event.target === this) { - $(this).off(transitionEnd, menu); + $(this).off('webkitTransitionEnd transitionend'); clearTimeout(watchdogTimer); $source.one('touchstart mousedown', closehandler); $source.removeClass('inmotion transition out'); - $target.removeClass('inmotion in'); $target.trigger('pageAnimationEnd', { direction: 'in', animation: undefined, back: false @@ -124,8 +97,8 @@ var transition = { } }); - watchdogTimer = setTimeout(function() { - $source.trigger(transitionEnd); + watchdogTimer = setTimeout(function() { + $source.trigger('transitionend'); }, 750); data.shown = true; @@ -134,7 +107,6 @@ var transition = { $(this).data('menusheet', data); $source.addClass('inmotion transition out'); - $target.addClass('current in'); $('#jqt').addClass('menuopened'); } From 0075567f00fda4d5d391be21a02e212f3f25c7d8 Mon Sep 17 00:00:00 2001 From: illucent Date: Mon, 29 Feb 2016 23:58:42 +0200 Subject: [PATCH 09/15] A jqt.menusheet.js jqt.menusheet.css --- extensions/jqt.menusheet.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index 25a4dcc0..580323b5 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -32,6 +32,8 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; function hide(callback) { var $target = $(this); var data = $(this).data('menusheet'); + var watchdogTimer; + var $this = this; if (data.shown) { $(this).data('menusheet', {}); @@ -41,11 +43,9 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; direction: 'out', animation: undefined, back: true }); - var watchdogTimer; - $source.unbind('touchstart mousedown', data.closehandler); - $source.one(TRANSITION_NAMES, function() { - if (event.target === this) { + $source.one(TRANSITION_NAMES, function(event) { + if (event.target.name === this) { $(this).off('webkitTransitionEnd transitionend'); clearTimeout(watchdogTimer); $source.removeClass('inmotion transition in'); @@ -72,6 +72,7 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; var $target = $(this); var data = $(this).data('menusheet') || {}; var watchdogTimer; + var $this = this; if (!data.shown) { var $source = $('#jqt .current:not(.menusheet)'); @@ -83,8 +84,8 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; return false; }; - $source.one(TRANSITION_NAMES, function() { - if (event.target === this) { + $source.one(TRANSITION_NAMES, function(event) { + if (event.target.name === this) { $(this).off('webkitTransitionEnd transitionend'); clearTimeout(watchdogTimer); $source.one('touchstart mousedown', closehandler); From e0202e20f0125dd542e5940007c0975481d33439 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Fri, 4 Mar 2016 16:35:11 +0200 Subject: [PATCH 10/15] changed jqt.themeswitcher.js .live at line 5 to more compatible .on remove $ from function wrapper --- extensions/jqt.menusheet.js | 43 ++++++++++++++++++--------------- extensions/jqt.themeswitcher.js | 24 ++++++++++++++++++ 2 files changed, 47 insertions(+), 20 deletions(-) create mode 100644 extensions/jqt.themeswitcher.js diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index 580323b5..f5b7a240 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -19,14 +19,14 @@ jQTouch may be freely distributed under the MIT license. */ -var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; -(function($) { +$(function() { + var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; var src = $("head script").last().attr("src") || ''; var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/'; var csspath = scriptpath + 'jqt.menusheet.css'; var link = $(''); - + $('head').append($(link)); function hide(callback) { @@ -34,18 +34,19 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; var data = $(this).data('menusheet'); var watchdogTimer; var $this = this; - + if (data.shown) { $(this).data('menusheet', {}); var $source = data.source; - + $target.trigger('pageAnimationStart', { direction: 'out', animation: undefined, back: true }); - + $source.unbind('touchstart mousedown', data.closehandler); $source.one(TRANSITION_NAMES, function(event) { - if (event.target.name === this) { + event.preventDefault(); + if (event.target === this) { $(this).off('webkitTransitionEnd transitionend'); clearTimeout(watchdogTimer); $source.removeClass('inmotion transition in'); @@ -56,19 +57,20 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; !callback || callback.apply(this, arguments); } }); - + watchdogTimer = setTimeout(function() { $source.trigger('transitionend'); }, 750); - - $source.addClass('inmotion transition in'); + + $source.addClass('inmotion transition in'); $target.addClass('inmotion out').removeClass('current'); $('#jqt').removeClass('menuopened'); } return $target; } - + function show(callback) { + var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; var $target = $(this); var data = $(this).data('menusheet') || {}; var watchdogTimer; @@ -83,9 +85,10 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; $target.menusheet('hide'); return false; }; - + $source.one(TRANSITION_NAMES, function(event) { - if (event.target.name === this) { + event.preventDefault(); + if (event.target === this) { $(this).off('webkitTransitionEnd transitionend'); clearTimeout(watchdogTimer); $source.one('touchstart mousedown', closehandler); @@ -97,7 +100,7 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; !callback || callback.apply(this, arguments); } }); - + watchdogTimer = setTimeout(function() { $source.trigger('transitionend'); }, 750); @@ -106,14 +109,14 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; data.closehandler = closehandler; data.source = $source; $(this).data('menusheet', data); - + $source.addClass('inmotion transition out'); $target.addClass('current in'); $('#jqt').addClass('menuopened'); } return $target; } - + var methods = { init: function(options) { $(this).addClass('menusheet'); @@ -122,7 +125,7 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; show: show, hide: hide }; - + $.fn.menusheet = function(method) { if (methods[method]) { if ($(this).is('.menusheet')) { @@ -135,7 +138,7 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; return methods.init.apply(this, arguments); } else { $.error('Method "' + method + '" does not exist on jqt.menusheet' ); - } + } }; if ($.jQT) { @@ -146,7 +149,7 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; }, fn: function(e, params) { params.$el.removeClass('active'); - + var $target = $(params.hash); $target.menusheet('show'); @@ -176,4 +179,4 @@ var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; } else { console.error('Extension `jqt.menusheet` failed to load. jQT not found'); } -}( jQuery || $ )); // jQuery or jQuery-like library, such as Zepto +}()); diff --git a/extensions/jqt.themeswitcher.js b/extensions/jqt.themeswitcher.js new file mode 100644 index 00000000..b51a857b --- /dev/null +++ b/extensions/jqt.themeswitcher.js @@ -0,0 +1,24 @@ +(function() { + if ($.jQT) { + $.jQT.addExtension(function(jQT) { + var switchStyleSheet; + $('[data-switch-stylesheet]').on('tap', function() { + switchStyleSheet($(this).attr('data-stylesheet-title'), $(this).attr('data-switch-stylesheet')); + $('[data-switch-stylesheet]').removeClass('selected'); + $(this).addClass('selected'); + return false; + }); + switchStyleSheet = function(newStyleTitle, newStyle) { + var $link, newHref; + $link = $("link[title=\"" + newStyleTitle + "\"]"); + newHref = $link.length ? $link.attr('href') : newStyle; + $('link[data-jqt-theme]').attr('href', newHref); + return $('#jqt').attr('data-jqt-theme', newStyleTitle); + }; + return { + switchStyleSheet: switchStyleSheet + }; + }); + } + +}).call(this); From 4bf04336750b1db2a8d77b1dc45a83a18c6332c3 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Fri, 4 Mar 2016 22:22:35 +0200 Subject: [PATCH 11/15] fixed -webkit* prefixes --- extensions/jqt.menusheet.css | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/extensions/jqt.menusheet.css b/extensions/jqt.menusheet.css index c3e940c0..e2e37869 100644 --- a/extensions/jqt.menusheet.css +++ b/extensions/jqt.menusheet.css @@ -1,7 +1,7 @@ /* @group Menu Sheet */ #jqt > div.menusheet { - -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; + box-sizing: border-box; height: 100%; width: 260px; } @@ -16,15 +16,17 @@ } #jqt > .transition { - -webkit-transition-property: translate3d, opacity, background-color; - -webkit-transition-duration: 250ms; - -webkit-transition-fill-mode: both; - -webkit-transition-timing-function: ease-in-out; + transition-property: translate3d, opacity, background-color; + transition-duration: 250ms; + transition-fill-mode: both; + transition-timing-function: ease-in-out; } #jqt.menuopened > .current { - -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1); - -webkit-box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); + transform: translate3d(260px, 0, 0) rotate(0) scale(1); + box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); + transform-origin: 50% 50% 50%; + transform-style: flat; border-left: 0.5px solid rgba(127, 127, 127, 0.01); z-index: 20; } @@ -40,8 +42,10 @@ } #jqt.menuopened > .menusheet.current { - -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); - -webkit-box-shadow: none; + transform: translate3d(0, 0, 0) rotate(0) scale(1); + box-shadow: none; + transform-origin: 50% 50% 50%; + transform-style: flat; border-left: none; z-index: 0; } @@ -64,6 +68,8 @@ border-top: 1px solid #333; background-color: rgba(0, 0, 0, 0.25); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(160, 168, 172, 0.75)), color-stop(0.08, rgba(112, 120, 128, 0.5)), color-stop(0.08, rgba(96, 102, 114, 0.5)), to(rgba(96, 102, 114, 0.5))); + background: -moz-linear-gradient(top, #A0A8AC 75%, #707880 50%, #606672 50%, #606672 50%); /* FF3.6+ */ + background: -ms-linear-gradient(top, #A0A8AC 75%, #707880 50%, #606672 50%, #606672 50%); /* IE10+ */ } /* @end */ From 4b846680f84fe728a7f2dd3f892faf216e8d5c2c Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Sat, 5 Mar 2016 20:57:03 +0200 Subject: [PATCH 12/15] fixed uppercase to lowercasevars --- extensions/jqt.menusheet.js | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) diff --git a/extensions/jqt.menusheet.js b/extensions/jqt.menusheet.js index f5b7a240..2d704554 100644 --- a/extensions/jqt.menusheet.js +++ b/extensions/jqt.menusheet.js @@ -21,7 +21,7 @@ $(function() { - var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; + var src = $("head script").last().attr("src") || ''; var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/'; var csspath = scriptpath + 'jqt.menusheet.css'; @@ -30,10 +30,11 @@ $(function() { $('head').append($(link)); function hide(callback) { - var $target = $(this); - var data = $(this).data('menusheet'); - var watchdogTimer; - var $this = this; + var $target = $(this), + data = $(this).data('menusheet'), + watchdogTimer = 0, + $this = this, + transition_names = 'webkitTransitionEnd msTransitionEnd transitionend'; if (data.shown) { $(this).data('menusheet', {}); @@ -44,7 +45,7 @@ $(function() { }); $source.unbind('touchstart mousedown', data.closehandler); - $source.one(TRANSITION_NAMES, function(event) { + $source.one(transition_names, function(event) { event.preventDefault(); if (event.target === this) { $(this).off('webkitTransitionEnd transitionend'); @@ -70,11 +71,11 @@ $(function() { } function show(callback) { - var TRANSITION_NAMES = 'webkitTransitionEnd msTransitionEnd transitionend'; - var $target = $(this); - var data = $(this).data('menusheet') || {}; - var watchdogTimer; - var $this = this; + $target = $(this), + data = $(this).data('menusheet') || {}, + watchdogTimer = 0, + $this = this, + transition_names = 'webkitTransitionEnd msTransitionEnd transitionend'; if (!data.shown) { var $source = $('#jqt .current:not(.menusheet)'); @@ -86,7 +87,7 @@ $(function() { return false; }; - $source.one(TRANSITION_NAMES, function(event) { + $source.one(transition_names, function(event) { event.preventDefault(); if (event.target === this) { $(this).off('webkitTransitionEnd transitionend'); From 51483cab8802b68202784f054d46a929a344b20c Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Sat, 5 Mar 2016 21:40:58 +0200 Subject: [PATCH 13/15] added transition names and updated compatible function wrapper --- extensions/jqt.actionsheet.js | 47 ++++++++++++++++++++++++----------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/extensions/jqt.actionsheet.js b/extensions/jqt.actionsheet.js index 756d5421..9a11a6bf 100644 --- a/extensions/jqt.actionsheet.js +++ b/extensions/jqt.actionsheet.js @@ -19,7 +19,7 @@ jQTouch may be freely distributed under the MIT license. */ -(function($) { +$(function() { // load css var src = $("head script").last().attr("src") || ''; var scriptpath = src.split('?')[0].split('/').slice(0, -1).join('/')+'/'; @@ -29,20 +29,30 @@ function hide(callback) { var $target = $(this), - $jqt = $('#jqt'); + $jqt = $('#jqt'), + watchdogTimer = 0, + $this = this, + transition_names = 'webkitTransitionEnd msTransitionEnd transitionend'; $target .addClass('transition') .removeClass('shown') - .one('webkitTransitionEnd', function(event) { + .one(transition_names, function(event) { + event.preventDefault(); if (event.target === this) { - $target.removeClass('transition'); + $(this).off('webkitTransitionEnd transitionend'); + clearTimeout(watchdogTimer); + $target.removeClass('transition'); !callback || callback.apply(this, arguments); } }); + watchdogTimer = setTimeout(function() { + $target.trigger('transitionend'); + }, 750); + $jqt - .addClass('transition') + .addClass('transition') .removeClass('modal') .find('.current') .one('webkitTransitionEnd watchdog', function(event) { @@ -56,25 +66,34 @@ var $current = $(this); setTimeout(function() { $current.trigger('watchdog'); - }, 500); + }, 500); }); return $target; } - + function show(callback) { var $target = $(this), - $jqt = $('#jqt'); + $jqt = $('#jqt'), + watchdogTimer = 0, + $this = this, + transition_names = 'webkitTransitionEnd msTransitionEnd transitionend'; $target .addClass('transition') - .one('webkitTransitionEnd', function(event) { + .one(transition_names, function(event) { + event.preventDefault(); if (event.target === this) { - $target.removeClass('transition'); + $(this).off('webkitTransitionEnd transitionend'); + clearTimeout(watchdogTimer); !callback || callback.apply(this, arguments); } }); + watchdogTimer = setTimeout(function() { + $target.trigger('transitionend'); + }, 750); + $jqt .addClass('transition') .find('.current') @@ -90,7 +109,7 @@ }, 25); return $target; } - + var methods = { init: function(options) { $(this).addClass('actionsheet'); @@ -98,7 +117,7 @@ show: show, hide: hide }; - + $.fn.actionsheet = function(method) { if (methods[method]) { if ($(this).is('.actionsheet')) { @@ -111,7 +130,7 @@ return methods.init.apply(this, arguments); } else { $.error('Method "' + method + '" does not exist on jqt.actionsheet' ); - } + } }; if ($.jQT) { @@ -155,4 +174,4 @@ } else { console.error('Extension `jqt.actionsheet` failed to load. jQT not found'); } -})($); +}()); From 23a0000c7c49ed821af0ab35b1e6c90198ca21c0 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Sat, 5 Mar 2016 23:46:10 +0200 Subject: [PATCH 14/15] floaty -webkit-transition to mmmmore compatible transition prefix --- extensions/jqt.floaty.js | 62 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 62 insertions(+) create mode 100644 extensions/jqt.floaty.js diff --git a/extensions/jqt.floaty.js b/extensions/jqt.floaty.js new file mode 100644 index 00000000..32761d89 --- /dev/null +++ b/extensions/jqt.floaty.js @@ -0,0 +1,62 @@ +(function() { + if ($.jQT) { + $.jQT.addExtension(function(jQT) { + $.fn.makeFloaty = function(options) { + var settings; + settings = $.extend({}, { + align: 'top', + spacing: 20, + time: '.3s' + }, options); + if (settings.align !== 'top') { + settings.align = 'bottom'; + } + return this.each(function() { + var $el; + $el = $(this); + $el.css({ + 'transition': 'top ' + settings.time + ' ease-in-out', + 'display': 'block', + 'min-height': '0 !important' + }).data('settings', settings); + $(document).scroll(function() { + if ($el.data('floatyVisible')) { + return $el.scrollFloaty(); + } + }); + return $el.scrollFloaty(); + }); + }; + $.fn.scrollFloaty = function() { + return this.each(function() { + var $el, newY, settings, wHeight; + $el = $(this); + settings = $el.data('settings'); + wHeight = $('html').attr('clientHeight'); + newY = window.pageYOffset + (settings.align === 'top' ? settings.spacing : wHeight - settings.spacing - $el.get(0).offsetHeight); + return $el.css('top', newY).data('floatyVisible', true); + }); + }; + $.fn.hideFloaty = function() { + return this.each(function() { + var $el, oh; + $el = $(this); + oh = $el.get(0).offsetHeight; + return $el.css('top', -oh - 10).data('floatyVisible', false); + }); + }; + return $.fn.toggleFloaty = function() { + return this.each(function() { + var $el; + $el = $(this); + if ($el.data('floatyVisible')) { + return $el.hideFloaty(); + } else { + return $el.scrollFloaty(); + } + }); + }; + }); + } + +}).call(this); From 5b3e7855e1055bec76d77185d0692e92d6086202 Mon Sep 17 00:00:00 2001 From: Andrew Starodubtsev Date: Sat, 12 Mar 2016 01:39:40 +0200 Subject: [PATCH 15/15] update prefixes in jqt.menusheet.css --- extensions/jqt.menusheet.css | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/extensions/jqt.menusheet.css b/extensions/jqt.menusheet.css index e2e37869..b3340b83 100644 --- a/extensions/jqt.menusheet.css +++ b/extensions/jqt.menusheet.css @@ -16,17 +16,23 @@ } #jqt > .transition { + -webkit-transition-property: translate3d, opacity, background-color; transition-property: translate3d, opacity, background-color; - transition-duration: 250ms; + -webkit-transition-duration: 250ms; + transition-duration: 250ms; transition-fill-mode: both; - transition-timing-function: ease-in-out; + -webkit-transition-timing-function: ease-in-out; + transition-timing-function: ease-in-out; } #jqt.menuopened > .current { - transform: translate3d(260px, 0, 0) rotate(0) scale(1); + -webkit-transform: translate3d(260px, 0, 0) rotate(0) scale(1); + transform: translate3d(260px, 0, 0) rotate(0) scale(1); box-shadow: -3px 0px 3px rgba(63, 63, 63, 0.5); - transform-origin: 50% 50% 50%; - transform-style: flat; + -webkit-transform-origin: 50% 50% 50%; + transform-origin: 50% 50% 50%; + -webkit-transform-style: flat; + transform-style: flat; border-left: 0.5px solid rgba(127, 127, 127, 0.01); z-index: 20; } @@ -42,10 +48,13 @@ } #jqt.menuopened > .menusheet.current { - transform: translate3d(0, 0, 0) rotate(0) scale(1); + -webkit-transform: translate3d(0, 0, 0) rotate(0) scale(1); + transform: translate3d(0, 0, 0) rotate(0) scale(1); box-shadow: none; - transform-origin: 50% 50% 50%; - transform-style: flat; + -webkit-transform-origin: 50% 50% 50%; + transform-origin: 50% 50% 50%; + -webkit-transform-style: flat; + transform-style: flat; border-left: none; z-index: 0; } @@ -67,8 +76,7 @@ padding-bottom: 10px; border-top: 1px solid #333; background-color: rgba(0, 0, 0, 0.25); - background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(160, 168, 172, 0.75)), color-stop(0.08, rgba(112, 120, 128, 0.5)), color-stop(0.08, rgba(96, 102, 114, 0.5)), to(rgba(96, 102, 114, 0.5))); - background: -moz-linear-gradient(top, #A0A8AC 75%, #707880 50%, #606672 50%, #606672 50%); /* FF3.6+ */ + background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(160, 168, 172, 0.75)), color-stop(0.08, rgba(112, 120, 128, 0.5)), color-stop(0.08, rgba(96, 102, 114, 0.5)), to(rgba(96, 102, 114, 0.5))); /* FF3.6+ */ background: -ms-linear-gradient(top, #A0A8AC 75%, #707880 50%, #606672 50%, #606672 50%); /* IE10+ */ }