From 1c20786fbe4e4ea0eb75ed8e4506f81645a72bdb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?"J.=20Rene=CC=81e=20Beach"?= Date: Wed, 6 Feb 2013 14:24:22 -0500 Subject: [PATCH] Issue #1829326 by jessebeach: Convert Overlay to leverage core breakpoints and media queries to determine its presence and styling MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: J. Renée Beach --- .../modules/overlay/config/overlay.breakpoints.yml | 1 + core/modules/overlay/config/overlay.config.yml | 2 + core/modules/overlay/images/close-rtl.png | 5 --- core/modules/overlay/images/close.png | 14 ++++++- core/modules/overlay/overlay-child-rtl.css | 18 +++++---- core/modules/overlay/overlay-child.css | 35 ++++++++++++----- core/modules/overlay/overlay-parent.js | 40 +++++++++++--------- core/modules/overlay/overlay.module | 15 ++++++++ 8 files changed, 87 insertions(+), 43 deletions(-) create mode 100644 core/modules/overlay/config/overlay.breakpoints.yml create mode 100644 core/modules/overlay/config/overlay.config.yml delete mode 100644 core/modules/overlay/images/close-rtl.png diff --git a/core/modules/overlay/config/overlay.breakpoints.yml b/core/modules/overlay/config/overlay.breakpoints.yml new file mode 100644 index 0000000..f27fd62 --- /dev/null +++ b/core/modules/overlay/config/overlay.breakpoints.yml @@ -0,0 +1 @@ +standard: 'all and (min-width: 40em)' diff --git a/core/modules/overlay/config/overlay.config.yml b/core/modules/overlay/config/overlay.config.yml new file mode 100644 index 0000000..af477ef --- /dev/null +++ b/core/modules/overlay/config/overlay.config.yml @@ -0,0 +1,2 @@ +breakpoints: + - 'module.overlay.standard' diff --git a/core/modules/overlay/images/close-rtl.png b/core/modules/overlay/images/close-rtl.png deleted file mode 100644 index ae05d11..0000000 --- a/core/modules/overlay/images/close-rtl.png +++ /dev/null @@ -1,5 +0,0 @@ -PNG - - IHDRgAMA|QQPLTEooo```ppp000"tRNS0/@?IDAT(υ DIAЂMVS܁Q*{>J<)/ߨQųI;x!I9V` `j',>?~|ѧFGg'/A9aW<㺏eE16ŚcoT" -Y -)շ :59]IENDB` \ No newline at end of file diff --git a/core/modules/overlay/images/close.png b/core/modules/overlay/images/close.png index 436985e..cee3bc0 100644 --- a/core/modules/overlay/images/close.png +++ b/core/modules/overlay/images/close.png @@ -1,4 +1,14 @@ PNG  - IHDRQPLTE000oooppp```:qtRNS0/@?IDATx^}҉ aynkˡnV ?F(Vt}ꌒY)5l7V9Yɀf<'_<(0 -nxAh7 25~1:[+!p+Py2}6Ґ9\DM)iMJ>-Rja~[N'epv.IENDB` \ No newline at end of file + IHDR(-S pHYs   +OiCCPPhotoshop ICC profilexڝSgTS=BKKoR RB&*! J!QEEȠQ, +!{kּ> H3Q5 B.@ +$pd!s#~<<+"x M0B\t8K@zB@F&S`cbP-`'{[! eDh;VEX0fK9-0IWfH  0Q){`##xFW<+*x<$9E[-qWW.(I+6aa@.y24x6_-"bbϫp@t~,/;m%h^ uf@Wp~<5j>{-]cK'Xto(hw?G%fIq^D$.Tʳ?D*A, `6B$BB +dr`)B(Ͱ*`/@4Qhp.U=pa( Aa!ڈbX#!H$ ɈQ"K5H1RT UH=r9\F;2G1Q= C7F dt1r=6Ыhڏ>C03l0.B8, c˱" VcϱwE 6wB aAHXLXNH $4 7 Q'"K&b21XH,#/{C7$C2'ITFnR#,4H#dk9, +ȅ3![ +b@qS(RjJ4e2AURݨT5ZBRQ4u9̓IKhhitݕNWGw Ljg(gwLӋT071oUX**| +J&*/Tު UUT^S}FU3S ԖUPSSg;goT?~YYLOCQ_ cx,!k u5&|v*=9C3J3WRf?qtN (~))4L1e\kXHQG6EYAJ'\'GgSSݧ +M=:.kDwn^Loy}/TmG X $ <5qo</QC]@Caaᄑ.ȽJtq]zۯ6iܟ4)Y3sCQ? 0k߬~OCOg#/c/Wװwa>>r><72Y_7ȷOo_C#dz%gA[z|!?:eAAA!h쐭!ΑiP~aa~ 'W?pX15wCsDDDޛg1O9-J5*>.j<74?.fYXXIlK9.*6nl {/]py.,:@LN8A*%w% +yg"/6шC\*NH*Mz쑼5y$3,幄'L Lݛ:v m2=:1qB!Mggfvˬen/kY- +BTZ(*geWf͉9+̳ې7ᒶKW-X潬j9(xoʿܔĹdff-[n ڴ VE/(ۻCɾUUMfeI?m]Nmq#׹=TR+Gw- 6 U#pDy  :v{vg/jBFS[b[O>zG499?rCd&ˮ/~јѡ򗓿m|x31^VwwO| (hSЧc3- cHRMz%u0`:o_FPLTE000oooppp``` !!!"""###$$$%%%&&&'''((()))***+++,,,---...///000111222333444555666777888999:::;;;<<<===>>>???@@@AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKKLLLMMMNNNOOOPPPQQQRRRSSSTTTUUUVVVWWWXXXYYYZZZ[[[\\\]]]^^^___```aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnnooopppqqqrrrssstttuuuvvvwwwxxxyyyzzz{{{|||}}}~~~QftRNS@fIDATxlϱj0JT`-1%CqRTuYB8ýMN7\ >n͋K"y[@lS|=c#LtL4\ AFc0G@Nex)nsGڡoYZ7 ;/{P6IENDB` \ No newline at end of file diff --git a/core/modules/overlay/overlay-child-rtl.css b/core/modules/overlay/overlay-child-rtl.css index eeff66c..e3573b9 100644 --- a/core/modules/overlay/overlay-child-rtl.css +++ b/core/modules/overlay/overlay-child-rtl.css @@ -12,18 +12,20 @@ html { float: right; left: auto; } -#overlay { - padding: 0.2em; - padding-left: 26px; -} #overlay-close-wrapper { left: 0; right: auto; } -#overlay-close, -#overlay-close:hover { - background: transparent url(images/close-rtl.png) no-repeat; - border-top-right-radius: 0; + +@media screen and (min-width: 50em) { + #overlay { + padding-left: 0.2em; + padding-right: 26px; + } + #overlay-close, + #overlay-close:hover { + border-radius: 100% 0 0 100%; + } } /** diff --git a/core/modules/overlay/overlay-child.css b/core/modules/overlay/overlay-child.css index 48f217d..7358c01 100644 --- a/core/modules/overlay/overlay-child.css +++ b/core/modules/overlay/overlay-child.css @@ -17,15 +17,14 @@ #overlay { display: table; - margin: 0 auto; - min-height: 100px; - min-width: 700px; + margin: 2em auto; + min-height: 6em; position: relative; - padding: .2em; + padding: 0.2em; padding-bottom: 2em; - padding-right: 26px; /* LTR */ - width: 88%; + width: 90%; } + #overlay-titlebar { padding: 0 20px; position: relative; @@ -68,17 +67,33 @@ } #overlay-close, #overlay-close:hover { - background: transparent url(images/close.png) no-repeat; /* LTR */ - border-top-left-radius: 0; /* LTR */ + background-attachment: scroll; + background-color: #ffffff; + background-image: url("images/close.png"); + background-repeat: no-repeat; + background-position: center center; display: block; height: 26px; margin: 0; padding: 0; - /* Replace with position:fixed to get a scrolling close button. */ - position: absolute; width: 26px; } +@media screen and (min-width: 50em) { + #overlay { + display: block; + padding-right: 26px; /* LTR */ + max-width: 80em; + min-width: 50em; + } + #overlay-close, + #overlay-close:hover { + border-radius: 0 100% 100% 0; /* LTR */ + /* Replace with position:fixed to get a scrolling close button. */ + position: absolute; + } +} + /** * Tabs on the overlay. */ diff --git a/core/modules/overlay/overlay-parent.js b/core/modules/overlay/overlay-parent.js index caf9336..3dc162d 100644 --- a/core/modules/overlay/overlay-parent.js +++ b/core/modules/overlay/overlay-parent.js @@ -12,6 +12,8 @@ */ Drupal.behaviors.overlayParent = { attach: function (context, settings) { + var options = $.extend(this.defaults, settings.overlay || {}); + if (Drupal.overlay.isOpen) { Drupal.overlay.makeDocumentUntabbable(context); } @@ -21,25 +23,27 @@ Drupal.behaviors.overlayParent = { } this.processed = true; - $(window) - // When the hash (URL fragment) changes, open the overlay if needed. - .bind('hashchange.drupal-overlay', $.proxy(Drupal.overlay, 'eventhandlerOperateByURLFragment')) - // Trigger the hashchange handler once, after the page is loaded, so that - // permalinks open the overlay. - .triggerHandler('hashchange.drupal-overlay'); - - // Do not use the overlay on devices with low screen width. - // @todo Replace with conditional loading. - if(!Drupal.checkWidthBreakpoint()) { - return; + // Use the overlay on devices with sufficient screen width. + if (matchMedia(options.breakpoints['module.overlay.standard']).matches) { + $(window) + // When the hash (URL fragment) changes, open the overlay if needed. + .bind('hashchange.drupal-overlay', $.proxy(Drupal.overlay, 'eventhandlerOperateByURLFragment')) + // Trigger the hashchange handler once, after the page is loaded, so that + // permalinks open the overlay. + .triggerHandler('hashchange.drupal-overlay'); + + $(document) + // Instead of binding a click event handler to every link we bind one to + // the document and only handle events that bubble up. This allows other + // scripts to bind their own handlers to links and also to prevent + // overlay's handling. + .bind('click.drupal-overlay mouseup.drupal-overlay', $.proxy(Drupal.overlay, 'eventhandlerOverrideLink')); + } + }, + defaults: { + breakpoints: { + 'module.overlay.standard': '' } - - $(document) - // Instead of binding a click event handler to every link we bind one to - // the document and only handle events that bubble up. This allows other - // scripts to bind their own handlers to links and also to prevent - // overlay's handling. - .bind('click.drupal-overlay mouseup.drupal-overlay', $.proxy(Drupal.overlay, 'eventhandlerOverrideLink')); } }; diff --git a/core/modules/overlay/overlay.module b/core/modules/overlay/overlay.module index 383f08a..cf950ac 100644 --- a/core/modules/overlay/overlay.module +++ b/core/modules/overlay/overlay.module @@ -200,6 +200,15 @@ function overlay_exit() { function overlay_library_info() { $module_path = drupal_get_path('module', 'overlay'); + // Get the configured breakpoints. + $breakpoints = array(); + $breakpoint_config = entity_load('breakpoint_group', 'module.overlay.overlay'); + if (!empty($breakpoint_config)) { + foreach ($breakpoint_config->breakpoints as $key => $breakpoint) { + $breakpoints[$key] = $breakpoint->mediaQuery; + } + } + // Overlay parent. $libraries['drupal.overlay.parent'] = array( 'title' => 'Overlay: Parent', @@ -207,11 +216,17 @@ function overlay_library_info() { 'version' => '1.0', 'js' => array( $module_path . '/overlay-parent.js' => array(), + array('data' => array( + 'overlay' => array( + 'breakpoints' => $breakpoints, + ), + ), 'type' => 'setting',), ), 'css' => array( $module_path . '/overlay-parent.css' => array(), ), 'dependencies' => array( + array('system', 'matchmedia'), array('system', 'jquery'), array('system', 'drupal'), array('system', 'drupalSettings'), -- 1.7.10.4