From e855cc5f759a9b1a793b34255d49c1a94e0579fe Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:53:34 +1100 Subject: [PATCH 01/30] Added styles for modal Ported over from my demo app, tried to match coding style --- lib/css/modals.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 lib/css/modals.css diff --git a/lib/css/modals.css b/lib/css/modals.css new file mode 100644 index 0000000..f188c7e --- /dev/null +++ b/lib/css/modals.css @@ -0,0 +1,37 @@ +/* Modals +-------------------------------------------------- */ +.modal { + position: fixed; top: 0; + background-color: #fff; + width: 100%; + + -webkit-transform: translateY(100%); + transform: translateY(100%); + + -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; + transition: transform .25s ease-in-out, opacity 1ms .25s; + + opacity: 0; + overflow: hidden; + + /* + Normally, we'd use '1', … ratchet uses '10' + for the title bar, so deal with that. + */ + z-index: 11; + + min-height: 100%; +} + +/* Modal - When active +-------------------------------------------------- */ +.modal.active { + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform: .25 ease-in-out; + + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + height: 100%; +} \ No newline at end of file From 5731c1c8151a566ef8982f5f8a62d045819b610d Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:55:27 +1100 Subject: [PATCH 02/30] Added script for modals * Follows existing conventions throughout --- lib/js/modals.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 lib/js/modals.js diff --git a/lib/js/modals.js b/lib/js/modals.js new file mode 100644 index 0000000..d938c53 --- /dev/null +++ b/lib/js/modals.js @@ -0,0 +1,40 @@ +/* ---------------------------------- + * MODAL v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + findModals = function ( target ) { + var i, + modals = document.querySelectorAll( 'a' ); + + for ( ; target && target !== document; target = target.parentNode ) { + for ( i = modals.length; i--; ) { if ( modals[i] === target ) return target; } + } + }; + + getModal = function ( event ) { + var modal, + modalToggle = findModals( event.target ); + + if ( !modalToggle || !modalToggle.hash ) return; + + modal = document.querySelector( modalToggle.hash ) + + if ( !modal ) return; + return modal; + }; + + window.addEventListener( 'touchend', function ( event ) { + var modal = getModal( event ); + + if ( !modal ) return; + modal.offsetHeight; + modal.classList.toggle( 'active' ); + } ); + + window.addEventListener( 'click', function ( event ) { + if ( getModal( event ) ) event.preventDefault(); + } ); +}(); \ No newline at end of file From 8381707ce4762118ea39c7904ba8700d06afcfec Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:55:54 +1100 Subject: [PATCH 03/30] Added a test page for the modal component --- test/components/modals.html | 73 +++++++++++++++++++++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 test/components/modals.html diff --git a/test/components/modals.html b/test/components/modals.html new file mode 100644 index 0000000..b094550 --- /dev/null +++ b/test/components/modals.html @@ -0,0 +1,73 @@ + + + + + Modal slideup + + + + + + + + + + + + + + + + + + + + + + + + + +
+

Modal slideup

+
+ +
+ Open modal +
+ + + + + \ No newline at end of file From 555b6b7c5f592a2a959b952c38880c7967fc7507 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:56:12 +1100 Subject: [PATCH 04/30] Added modal.(css|js) to build --- Makefile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Makefile b/Makefile index 5f2b8d6..313cd57 100644 --- a/Makefile +++ b/Makefile @@ -4,7 +4,7 @@ build: mkdir -p dist - cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css + cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/modals.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css cat lib/js/*.js > ./dist/ratchet.tmp.js @echo "/**\n * ==================================\n * Ratchet v1.0.0\n * Licensed under The MIT License\n * http://opensource.org/licenses/MIT\n * ==================================\n */\n" > ./dist/copywrite.txt cat ./dist/copywrite.txt ./dist/ratchet.tmp.js > ./dist/ratchet.js From 6781b635ee490a8525d35a79ca839a518b8fa79b Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:56:26 +1100 Subject: [PATCH 05/30] Rebuilt ratchet --- dist/ratchet.css | 36 ++++++++++++++++++++++++++++++++++++ dist/ratchet.js | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 75 insertions(+) diff --git a/dist/ratchet.css b/dist/ratchet.css index ca7fd80..41445d6 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1128,6 +1128,42 @@ select { border: 1px solid #000; border-radius: 3px; -webkit-overflow-scrolling: touch; +}/* Modals +-------------------------------------------------- */ +.modal { + position: fixed; top: 0; + background-color: #fff; + width: 100%; + + -webkit-transform: translateY(100%); + transform: translateY(100%); + + -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; + transition: transform .25s ease-in-out, opacity 1ms .25s; + + opacity: 0; + overflow: hidden; + + /* + Normally, we'd use '1', … ratchet uses '10' + for the title bar, so deal with that. + */ + z-index: 11; + + min-height: 100%; +} + +/* Modal - When active +-------------------------------------------------- */ +.modal.active { + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform: .25 ease-in-out; + + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + height: 100%; }/* Slider styles (to be used with sliders.js) -------------------------------------------------- */ diff --git a/dist/ratchet.js b/dist/ratchet.js index 515392d..2443542 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -7,6 +7,45 @@ */ /* ---------------------------------- + * MODAL v1.0.0 + * Licensed under The MIT License + * http://opensource.org/licenses/MIT + * ---------------------------------- */ + +!function () { + findModals = function ( target ) { + var i, + modals = document.querySelectorAll( 'a' ); + + for ( ; target && target !== document; target = target.parentNode ) { + for ( i = modals.length; i--; ) { if ( modals[i] === target ) return target; } + } + }; + + getModal = function ( event ) { + var modal, + modalToggle = findModals( event.target ); + + if ( !modalToggle || !modalToggle.hash ) return; + + modal = document.querySelector( modalToggle.hash ) + + if ( !modal ) return; + return modal; + }; + + window.addEventListener( 'touchend', function ( event ) { + var modal = getModal( event ); + + if ( !modal ) return; + + modal.classList.toggle( 'active' ); + } ); + + window.addEventListener( 'click', function ( event ) { + if ( getModal( event ) ) event.preventDefault(); + } ); +}();/* ---------------------------------- * POPOVER v1.0.0 * Licensed under The MIT License * http://opensource.org/licenses/MIT From 9ad8b23b36538dad953720f39a09264b7d8eb5e9 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:57:10 +1100 Subject: [PATCH 06/30] Documented modals First run - we could probably extend this * Used some custom CSS to make the position: fixed demo absolute. --- docs/index.html | 35 +++++++++++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/docs/index.html b/docs/index.html index 96c1c6f..85bbcd1 100644 --- a/docs/index.html +++ b/docs/index.html @@ -58,6 +58,7 @@
  • Forms
  • Toggles
  • Popovers
    • +
  • Modals
  • Sliders
  • Push
    • @@ -976,6 +977,40 @@ document + + +
    + +

    Modals

    + +
    + +
    + +
    +<a href="#myModal" class="button">Open modal</a>
+
+<div id="myModal" class="modal">
+  <header class="bar-title">
+    <h1 class="title">Modal</h1>
+    <a class="button" href="#myModal">
+      Close
+    </a>
+  </header>
+  
+  <div class="content content-padded">
+    <p>The contents of my modal</p>
+  </div>
+</div>
+
    + +

    Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.

    + +
    From 086e1f7e43f1f4ca4ab802acce6ad51266ac3a44 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:39:59 +1100 Subject: [PATCH 07/30] Remove spaces around arguments --- docs/modal-demo.html | 32 ++++++++++++++++++++++++++++++++ lib/js/modals.js | 38 +++++++++++++++++++------------------- 2 files changed, 51 insertions(+), 19 deletions(-) create mode 100644 docs/modal-demo.html diff --git a/docs/modal-demo.html b/docs/modal-demo.html new file mode 100644 index 0000000..bdaca17 --- /dev/null +++ b/docs/modal-demo.html @@ -0,0 +1,32 @@ + + + + + Modal slideup + + + + + + + + + +
    + Open modal +
    + + + + \ No newline at end of file diff --git a/lib/js/modals.js b/lib/js/modals.js index d938c53..1939493 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -5,36 +5,36 @@ * ---------------------------------- */ !function () { - findModals = function ( target ) { - var i, - modals = document.querySelectorAll( 'a' ); + var findModals = function (target) { + var i; + var modals = document.querySelectorAll('a'); - for ( ; target && target !== document; target = target.parentNode ) { - for ( i = modals.length; i--; ) { if ( modals[i] === target ) return target; } + for (; target && target !== document; target = target.parentNode) { + for (i = modals.length; i--;) { if (modals[i] === target) return target; } } }; - getModal = function ( event ) { - var modal, - modalToggle = findModals( event.target ); + var getModal = function (event) { + var modal; + var modalToggle = findModals(event.target); - if ( !modalToggle || !modalToggle.hash ) return; + if (!modalToggle || !modalToggle.hash) return; - modal = document.querySelector( modalToggle.hash ) + modal = document.querySelector(modalToggle.hash); - if ( !modal ) return; + if (!modal) return; return modal; }; - window.addEventListener( 'touchend', function ( event ) { - var modal = getModal( event ); + window.addEventListener('touchend', function (event) { + var modal = getModal(event); - if ( !modal ) return; + if (!modal) return; modal.offsetHeight; - modal.classList.toggle( 'active' ); - } ); + modal.classList.toggle('active'); + }); - window.addEventListener( 'click', function ( event ) { - if ( getModal( event ) ) event.preventDefault(); - } ); + window.addEventListener('click', function (event) { + if (getModal(event)) event.preventDefault(); + }); }(); \ No newline at end of file From 825cd2ea64f527796644f27484ac672fa2aa1bd0 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:41:07 +1100 Subject: [PATCH 08/30] Styles on their own lines --- lib/css/modals.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/css/modals.css b/lib/css/modals.css index f188c7e..2253a6b 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -1,7 +1,8 @@ /* Modals -------------------------------------------------- */ .modal { - position: fixed; top: 0; + position: fixed; + top: 0; background-color: #fff; width: 100%; From 865426849c71c6017b30bc05852df0a9d8b8b3ef Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:41:12 +1100 Subject: [PATCH 09/30] Remove comment --- lib/css/modals.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/lib/css/modals.css b/lib/css/modals.css index 2253a6b..9fcc795 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -14,11 +14,6 @@ opacity: 0; overflow: hidden; - - /* - Normally, we'd use '1', … ratchet uses '10' - for the title bar, so deal with that. - */ z-index: 11; min-height: 100%; From b2335909a7ebd185492d31118079bf1ce1ee48f4 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:42:11 +1100 Subject: [PATCH 10/30] Correct whitespace --- lib/css/modals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/css/modals.css b/lib/css/modals.css index 9fcc795..17f330c 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -23,7 +23,7 @@ -------------------------------------------------- */ .modal.active { -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform: .25 ease-in-out; + transition: transform: .25 ease-in-out; -webkit-transform: translateY(0); transform: translateY(0); From d1df28c5fdcb1d5cd450b596dc212f9177126605 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:43:03 +1100 Subject: [PATCH 11/30] Whitespace --- lib/css/modals.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/css/modals.css b/lib/css/modals.css index 17f330c..7be30d5 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -23,7 +23,7 @@ -------------------------------------------------- */ .modal.active { -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform: .25 ease-in-out; + transition: transform: .25 ease-in-out; -webkit-transform: translateY(0); transform: translateY(0); From 1a51645c3319e4c9a24830ff9b85803edbddd2ec Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:44:11 +1100 Subject: [PATCH 12/30] Not required --- lib/js/modals.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index 1939493..debdc03 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -30,7 +30,6 @@ var modal = getModal(event); if (!modal) return; - modal.offsetHeight; modal.classList.toggle('active'); }); From c8ed7e861df948968caac0c5c00c8bebb79147dc Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:45:23 +1100 Subject: [PATCH 13/30] Always return the result of querySelector --- lib/js/modals.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index debdc03..6a0e6ef 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -15,15 +15,10 @@ }; var getModal = function (event) { - var modal; var modalToggle = findModals(event.target); - if (!modalToggle || !modalToggle.hash) return; - - modal = document.querySelector(modalToggle.hash); - if (!modal) return; - return modal; + return document.querySelector(modalToggle.hash); }; window.addEventListener('touchend', function (event) { From f0231577d2910f4beacb525b913442e8b3249603 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:46:43 +1100 Subject: [PATCH 14/30] Test for truth --- lib/js/modals.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index 6a0e6ef..4f1f40d 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -23,9 +23,7 @@ window.addEventListener('touchend', function (event) { var modal = getModal(event); - - if (!modal) return; - modal.classList.toggle('active'); + if (modal) modal.classList.toggle('active'); }); window.addEventListener('click', function (event) { From 0428e45b9ad1629a4c0a8f37a2fc73ad57da5b76 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:48:57 +1100 Subject: [PATCH 15/30] Use translate3d as well --- lib/css/modals.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/lib/css/modals.css b/lib/css/modals.css index 7be30d5..e98f892 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -8,6 +8,8 @@ -webkit-transform: translateY(100%); transform: translateY(100%); + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; @@ -27,6 +29,8 @@ -webkit-transform: translateY(0); transform: translateY(0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; height: 100%; From c0813f157a8e2c378f7b65d672fab1438f115068 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 12:49:28 +1100 Subject: [PATCH 16/30] Rebuild ratchet --- dist/ratchet.css | 14 +++++++------- dist/ratchet.js | 40 ++++++++++++++++------------------------ 2 files changed, 23 insertions(+), 31 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 41445d6..500b297 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1131,23 +1131,21 @@ select { }/* Modals -------------------------------------------------- */ .modal { - position: fixed; top: 0; + position: fixed; + top: 0; background-color: #fff; width: 100%; -webkit-transform: translateY(100%); transform: translateY(100%); + -webkit-transform: translate3d(0, 100%, 0); + transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; opacity: 0; overflow: hidden; - - /* - Normally, we'd use '1', … ratchet uses '10' - for the title bar, so deal with that. - */ z-index: 11; min-height: 100%; @@ -1157,10 +1155,12 @@ select { -------------------------------------------------- */ .modal.active { -webkit-transition: -webkit-transform .25s ease-in-out; - transition: transform: .25 ease-in-out; + transition: transform: .25 ease-in-out; -webkit-transform: translateY(0); transform: translateY(0); + -webkit-transform: translate3d(0, 0, 0); + transform: translate3d(0, 0, 0); opacity: 1; height: 100%; diff --git a/dist/ratchet.js b/dist/ratchet.js index 2443542..d19d1ea 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -13,38 +13,30 @@ * ---------------------------------- */ !function () { - findModals = function ( target ) { - var i, - modals = document.querySelectorAll( 'a' ); + var findModals = function (target) { + var i; + var modals = document.querySelectorAll('a'); - for ( ; target && target !== document; target = target.parentNode ) { - for ( i = modals.length; i--; ) { if ( modals[i] === target ) return target; } + for (; target && target !== document; target = target.parentNode) { + for (i = modals.length; i--;) { if (modals[i] === target) return target; } } }; - getModal = function ( event ) { - var modal, - modalToggle = findModals( event.target ); - - if ( !modalToggle || !modalToggle.hash ) return; - - modal = document.querySelector( modalToggle.hash ) + var getModal = function (event) { + var modalToggle = findModals(event.target); + if (!modalToggle || !modalToggle.hash) return; - if ( !modal ) return; - return modal; + return document.querySelector(modalToggle.hash); }; - window.addEventListener( 'touchend', function ( event ) { - var modal = getModal( event ); - - if ( !modal ) return; - - modal.classList.toggle( 'active' ); - } ); + window.addEventListener('touchend', function (event) { + var modal = getModal(event); + if (modal) modal.classList.toggle('active'); + }); - window.addEventListener( 'click', function ( event ) { - if ( getModal( event ) ) event.preventDefault(); - } ); + window.addEventListener('click', function (event) { + if (getModal(event)) event.preventDefault(); + }); }();/* ---------------------------------- * POPOVER v1.0.0 * Licensed under The MIT License From d06b6fdbd72c7851c63f39bef7bec00783afa638 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 13:25:14 +1100 Subject: [PATCH 17/30] Drop newline --- lib/js/modals.js | 1 - 1 file changed, 1 deletion(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index 4f1f40d..2d8c7a9 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -17,7 +17,6 @@ var getModal = function (event) { var modalToggle = findModals(event.target); if (!modalToggle || !modalToggle.hash) return; - return document.querySelector(modalToggle.hash); }; From 12cd8acfe53a6d23f00891ff89e004fd636f2882 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 13:26:49 +1100 Subject: [PATCH 18/30] Minimising getModal further Thanks @fat! --- lib/js/modals.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index 2d8c7a9..51f0770 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -16,8 +16,7 @@ var getModal = function (event) { var modalToggle = findModals(event.target); - if (!modalToggle || !modalToggle.hash) return; - return document.querySelector(modalToggle.hash); + if (!modalToggle || !modalToggle.hash) return document.querySelector(modalToggle.hash); }; window.addEventListener('touchend', function (event) { From c3b360968db6f40755465c511f19a8d016cba112 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 13:28:42 +1100 Subject: [PATCH 19/30] Only use translate3d --- lib/css/modals.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/lib/css/modals.css b/lib/css/modals.css index e98f892..0cf6e43 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -6,8 +6,6 @@ background-color: #fff; width: 100%; - -webkit-transform: translateY(100%); - transform: translateY(100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); @@ -27,8 +25,6 @@ -webkit-transition: -webkit-transform .25s ease-in-out; transition: transform: .25 ease-in-out; - -webkit-transform: translateY(0); - transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); From 6e1c9f7984ad50daa4198c6f296e2059e08493b4 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 13:28:58 +1100 Subject: [PATCH 20/30] Rebuild ratchet --- dist/ratchet.css | 4 ---- dist/ratchet.js | 4 +--- 2 files changed, 1 insertion(+), 7 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 500b297..9de25c4 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1136,8 +1136,6 @@ select { background-color: #fff; width: 100%; - -webkit-transform: translateY(100%); - transform: translateY(100%); -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); @@ -1157,8 +1155,6 @@ select { -webkit-transition: -webkit-transform .25s ease-in-out; transition: transform: .25 ease-in-out; - -webkit-transform: translateY(0); - transform: translateY(0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); diff --git a/dist/ratchet.js b/dist/ratchet.js index d19d1ea..36d84e8 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -24,9 +24,7 @@ var getModal = function (event) { var modalToggle = findModals(event.target); - if (!modalToggle || !modalToggle.hash) return; - - return document.querySelector(modalToggle.hash); + if (!modalToggle || !modalToggle.hash) return document.querySelector(modalToggle.hash); }; window.addEventListener('touchend', function (event) { From 9a13996c60ec0fc91121fc8a3f7a1bf4e8c848da Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 10:58:30 +1100 Subject: [PATCH 21/30] Move documentation styles to docs.css --- docs/css/docs.css | 5 +++++ docs/index.html | 5 ----- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/css/docs.css b/docs/css/docs.css index fbf2ca2..5d20464 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -648,6 +648,11 @@ h6 { opacity: 1 !important; } +/* Modal example */ +.iphone .iphone-content .modal { position: absolute; } +.iphone .iphone-content .modal .content { margin-top: 44px; } +.iphone .iphone-content #myModal.active { background: #cecece; } + /* Slider examples */ .component-example-fullbleed .slider, .component-example-fullbleed .slider li, diff --git a/docs/index.html b/docs/index.html index 85bbcd1..fd2a413 100644 --- a/docs/index.html +++ b/docs/index.html @@ -980,11 +980,6 @@ document
    -

    Modals

    From ff3808b37b6f48da2b49ca57f14ed0bbeec26b1f Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 10:59:18 +1100 Subject: [PATCH 22/30] Correct turn of the modal window from getModal * Looks like I hastily changed it during review with @fat. Oops! :-) --- lib/js/modals.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/js/modals.js b/lib/js/modals.js index 51f0770..c796d48 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -8,7 +8,6 @@ var findModals = function (target) { var i; var modals = document.querySelectorAll('a'); - for (; target && target !== document; target = target.parentNode) { for (i = modals.length; i--;) { if (modals[i] === target) return target; } } @@ -16,7 +15,7 @@ var getModal = function (event) { var modalToggle = findModals(event.target); - if (!modalToggle || !modalToggle.hash) return document.querySelector(modalToggle.hash); + if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); }; window.addEventListener('touchend', function (event) { From fc36bf1ffe9424d1f58c0ceb6d11058e216d885b Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 10:59:42 +1100 Subject: [PATCH 23/30] Rebuilt ratchet to reflect last changes --- dist/ratchet.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dist/ratchet.js b/dist/ratchet.js index 36d84e8..9871e0f 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -16,7 +16,6 @@ var findModals = function (target) { var i; var modals = document.querySelectorAll('a'); - for (; target && target !== document; target = target.parentNode) { for (i = modals.length; i--;) { if (modals[i] === target) return target; } } @@ -24,7 +23,7 @@ var getModal = function (event) { var modalToggle = findModals(event.target); - if (!modalToggle || !modalToggle.hash) return document.querySelector(modalToggle.hash); + if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash); }; window.addEventListener('touchend', function (event) { From 25a9e7883d8468b3a0f811d69826e2eb488e403a Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 11:04:00 +1100 Subject: [PATCH 24/30] Reorder style declarations and remove new lines. --- dist/ratchet.css | 19 +++++++------------ lib/css/modals.css | 19 +++++++------------ 2 files changed, 14 insertions(+), 24 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 9de25c4..6e987c3 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1133,33 +1133,28 @@ select { .modal { position: fixed; top: 0; - background-color: #fff; + opacity: 0; + z-index: 11; width: 100%; - + overflow: hidden; + min-height: 100%; + background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; - - opacity: 0; - overflow: hidden; - z-index: 11; - - min-height: 100%; } /* Modal - When active -------------------------------------------------- */ .modal.active { + opacity: 1; + height: 100%; -webkit-transition: -webkit-transform .25s ease-in-out; transition: transform: .25 ease-in-out; - -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - - opacity: 1; - height: 100%; }/* Slider styles (to be used with sliders.js) -------------------------------------------------- */ diff --git a/lib/css/modals.css b/lib/css/modals.css index 0cf6e43..356a62a 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -3,31 +3,26 @@ .modal { position: fixed; top: 0; - background-color: #fff; + opacity: 0; + z-index: 11; width: 100%; - + overflow: hidden; + min-height: 100%; + background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; - - opacity: 0; - overflow: hidden; - z-index: 11; - - min-height: 100%; } /* Modal - When active -------------------------------------------------- */ .modal.active { + opacity: 1; + height: 100%; -webkit-transition: -webkit-transform .25s ease-in-out; transition: transform: .25 ease-in-out; - -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); - - opacity: 1; - height: 100%; } \ No newline at end of file From 10a912a24c30ade799d86c71778811a232d4b3ca Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 12:35:53 +1100 Subject: [PATCH 25/30] Removed last newline (How'd that hide there?) && reordered properties --- lib/css/modals.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/lib/css/modals.css b/lib/css/modals.css index 356a62a..e0debc2 100644 --- a/lib/css/modals.css +++ b/lib/css/modals.css @@ -6,12 +6,11 @@ opacity: 0; z-index: 11; width: 100%; - overflow: hidden; min-height: 100%; + overflow: hidden; background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); - -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; } From 615a21e7bcc4b21d8effcd6e03020463816782d2 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 12:42:57 +1100 Subject: [PATCH 26/30] Give modal demo button padding --- docs/css/docs.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/css/docs.css b/docs/css/docs.css index 5d20464..69f046a 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -651,7 +651,8 @@ h6 { /* Modal example */ .iphone .iphone-content .modal { position: absolute; } .iphone .iphone-content .modal .content { margin-top: 44px; } -.iphone .iphone-content #myModal.active { background: #cecece; } +#myModal.active { background: #cecece; } +#modalsInPhone #iwindow > .button { margin: 10px; }; /* Gives the button some room so it isn't right up against the edge of the iPhone */ /* Slider examples */ .component-example-fullbleed .slider, From a8895639324b2135e241fcd2292e4d11ba092dc0 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 12:43:03 +1100 Subject: [PATCH 27/30] Rebuilt doc css --- dist/ratchet.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/dist/ratchet.css b/dist/ratchet.css index 6e987c3..4fe7f49 100644 --- a/dist/ratchet.css +++ b/dist/ratchet.css @@ -1136,12 +1136,11 @@ select { opacity: 0; z-index: 11; width: 100%; - overflow: hidden; min-height: 100%; + overflow: hidden; background-color: #fff; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); - -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; transition: transform .25s ease-in-out, opacity 1ms .25s; } From ce64df000ef40f8dd530d9ccd98d623ca5564078 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 12:43:18 +1100 Subject: [PATCH 28/30] Remove unused demo. --- docs/modal-demo.html | 32 -------------------------------- 1 file changed, 32 deletions(-) delete mode 100644 docs/modal-demo.html diff --git a/docs/modal-demo.html b/docs/modal-demo.html deleted file mode 100644 index bdaca17..0000000 --- a/docs/modal-demo.html +++ /dev/null @@ -1,32 +0,0 @@ - - - - - Modal slideup - - - - - - - - - -
    - Open modal -
    - - - - \ No newline at end of file From 748a15ca327cad34acee59b1195e8dd5f352e372 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 13:03:46 +1100 Subject: [PATCH 29/30] Removed superflous `;`. * Also removed comment, I think its self-explanatory. --- docs/css/docs.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/css/docs.css b/docs/css/docs.css index 69f046a..8cb6847 100644 --- a/docs/css/docs.css +++ b/docs/css/docs.css @@ -652,7 +652,7 @@ h6 { .iphone .iphone-content .modal { position: absolute; } .iphone .iphone-content .modal .content { margin-top: 44px; } #myModal.active { background: #cecece; } -#modalsInPhone #iwindow > .button { margin: 10px; }; /* Gives the button some room so it isn't right up against the edge of the iPhone */ +#modalsInPhone #iwindow > .button { margin: 10px; } /* Slider examples */ .component-example-fullbleed .slider, From 438a177661bcf65e32115372303696650cdc1999 Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Sun, 13 Jan 2013 14:31:56 +1100 Subject: [PATCH 30/30] Remove capture of click handler * We're using finger blast, so we shouldn't need to set a click event anyway. --- dist/ratchet.js | 4 ---- lib/js/modals.js | 4 ---- 2 files changed, 8 deletions(-) diff --git a/dist/ratchet.js b/dist/ratchet.js index 9871e0f..4059da3 100644 --- a/dist/ratchet.js +++ b/dist/ratchet.js @@ -30,10 +30,6 @@ var modal = getModal(event); if (modal) modal.classList.toggle('active'); }); - - window.addEventListener('click', function (event) { - if (getModal(event)) event.preventDefault(); - }); }();/* ---------------------------------- * POPOVER v1.0.0 * Licensed under The MIT License diff --git a/lib/js/modals.js b/lib/js/modals.js index c796d48..4448107 100644 --- a/lib/js/modals.js +++ b/lib/js/modals.js @@ -22,8 +22,4 @@ var modal = getModal(event); if (modal) modal.classList.toggle('active'); }); - - window.addEventListener('click', function (event) { - if (getModal(event)) event.preventDefault(); - }); }(); \ No newline at end of file