.../css/responsive-preview.base-rtl.css | 22 ++++++ .../css/responsive-preview.base.css | 5 ++ .../css/responsive-preview.theme-rtl.css | 14 ++++ .../css/responsive-preview.theme.css | 15 ++-- core/modules/responsive_preview/images/close.png | 6 +- .../images/icon-responsive-preview-active.png | 13 +--- .../images/icon-responsive-preview.png | 14 +--- .../responsive_preview/js/responsive-preview.js | 77 ++++++++++++-------- .../responsive_preview/responsive_preview.module | 3 +- 9 files changed, 100 insertions(+), 69 deletions(-) diff --git a/core/modules/responsive_preview/css/responsive-preview.base-rtl.css b/core/modules/responsive_preview/css/responsive-preview.base-rtl.css new file mode 100644 index 0000000..d969346 --- /dev/null +++ b/core/modules/responsive_preview/css/responsive-preview.base-rtl.css @@ -0,0 +1,22 @@ +/** + * @file + * RTL base styling for responsive preview. + */ + +.js .toolbar .bar .responsive-preview-toolbar-tab.tab { + float: right; +} + +@media only screen and (min-width: 36em) { + .js .toolbar .bar .responsive-preview-toolbar-tab.tab { + float: left; + } +} + +#responsive-preview-container { + left: 0; + right: -200%; +} +#responsive-preview-container.active { + right: 0; +} diff --git a/core/modules/responsive_preview/css/responsive-preview.base.css b/core/modules/responsive_preview/css/responsive-preview.base.css index 35845a1..2fc1a40 100644 --- a/core/modules/responsive_preview/css/responsive-preview.base.css +++ b/core/modules/responsive_preview/css/responsive-preview.base.css @@ -1,4 +1,9 @@ /** + * @file + * Base styling for responsive preview. + */ + +/** * Constrain the window height to the client height when the preview is active. */ .responsive-preview-active { diff --git a/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css b/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css new file mode 100644 index 0000000..f5e1339 --- /dev/null +++ b/core/modules/responsive_preview/css/responsive-preview.theme-rtl.css @@ -0,0 +1,14 @@ +/** + * @file + * RTL styling for responsive preview. + */ + +.toolbar .bar .responsive-preview-toolbar-tab .icon-responsive-preview:before { + left: 0; + right: 1em; +} + +.responsive-preview-toolbar-tab .trigger:after { + right: 0; + left: 1.2em; +} diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css index af3d899..f2a648c 100644 --- a/core/modules/responsive_preview/css/responsive-preview.theme.css +++ b/core/modules/responsive_preview/css/responsive-preview.theme.css @@ -1,4 +1,9 @@ /** + * @file + * Styling for responsive preview. + */ + +/** * Toolbar tab. */ .responsive-preview-toolbar-tab .responsive-preview-options { @@ -10,7 +15,7 @@ margin-right: 0; padding-left: 0; padding-right: 0; - text-indent: -9999px; /* LTR */ + text-indent: -9999px; width: 5em; } .icon-responsive-preview:before { @@ -19,7 +24,7 @@ .toolbar .bar .responsive-preview-toolbar-tab .icon-responsive-preview:before { left: 1em; /* LTR */ } -.responsive-preview-toolbar-tab .open .icon-responsive-preview:before, +.responsive-preview-toolbar-tab.open .icon-responsive-preview:before, .responsive-preview-toolbar-tab .icon-responsive-preview.active:before { background-image: url("../images/icon-responsive-preview-active.png"); } @@ -30,7 +35,6 @@ } /* Device preview options. */ .responsive-preview-toolbar-tab .responsive-preview-options { - border-right: none; /* LTR */ box-shadow: 0 0 2em 0 rgba(0, 0, 0, 0.75); position: absolute; white-space: nowrap; @@ -45,7 +49,7 @@ padding-top: 1em; } .toolbar .responsive-preview-toolbar-tab.tab .responsive-preview-options a { - color: #777777; + color: #777; } .toolbar .responsive-preview-toolbar-tab.tab .responsive-preview-options a:hover { color: black; @@ -94,10 +98,9 @@ cursor: pointer; font-size: 1em; height: 2.333em; - left: 0; /* LTR */ margin-left: 10px; margin-top: 9px; - text-indent: -9999em; /* LTR */ + text-indent: -9999px; width: 2.333em; } #responsive-preview-close:hover { diff --git a/core/modules/responsive_preview/images/close.png b/core/modules/responsive_preview/images/close.png index 2203cbb..538518e 100644 --- a/core/modules/responsive_preview/images/close.png +++ b/core/modules/responsive_preview/images/close.png @@ -1,7 +1,3 @@ PNG  - IHDRatEXtSoftwareAdobe ImageReadyqe<IDATx|R=LZa}!T%MvpWt $kͩZ;Cn&j*1&jæE14`C=!{߹~]DLDwVWWMcccJrJcLA.Oe5 uIkJ>hXq7F"Z}^ -N~vR䜘l6|nZݲ,[4M# x5Vdr2Q\mF*ToBKگ tJr?wϋ||PqkUݞ,/s_n ^z({!-sSS3oRlYgE/S 9d,H+_ϲ5}PrgY{ST⫑V k{,p2D*kfj5Nd2Z>%o=$4֘5FhhfPnoҗ1_M|6]!mf-!K}H2N|S \*6BQ1 #(&INʕr;Sd #Z IENDB` \ No newline at end of file diff --git a/core/modules/responsive_preview/images/icon-responsive-preview-active.png b/core/modules/responsive_preview/images/icon-responsive-preview-active.png index ff89708..f6e8a16 100644 --- a/core/modules/responsive_preview/images/icon-responsive-preview-active.png +++ b/core/modules/responsive_preview/images/icon-responsive-preview-active.png @@ -1,14 +1,3 @@ PNG  - IHDR $ 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_FkIDATx쓱 0 $1(Rd) 4 7)'Y./-$1TܝÓR7wohkSM;L!FgZk 'x|S댞 |IENDB` \ No newline at end of file + IHDR $cIDAT8c L@HL0#! W?&m"mр0?|?! ?bG(!)dF,~(.teIENDB` \ No newline at end of file diff --git a/core/modules/responsive_preview/images/icon-responsive-preview.png b/core/modules/responsive_preview/images/icon-responsive-preview.png index d1d6aef..3e22cb8 100644 --- a/core/modules/responsive_preview/images/icon-responsive-preview.png +++ b/core/modules/responsive_preview/images/icon-responsive-preview.png @@ -1,14 +1,4 @@ PNG  - IHDR $ 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_FIDATx >RK*p B% button') + .toggleClass('active', activate); $container - .toggleClass('active', activate) + .toggleClass('active', activate); $('body') .toggleClass('responsive-preview-active', activate); } @@ -102,18 +108,14 @@ // Attach the iframe that will hold the preview. $frame = $(Drupal.theme('layoutFrame')) - .css({ - 'width': size - }) + .css({ width: size }) .appendTo($container); // Append the container to the window. $container.appendTo(window.top.document.body); // Displace the top of the container. $container - .css({ - top: getDisplacement('top'), - }) + .css({ top: getDisplacement('top') }) .attr('data-offset-top', getDisplacement('top')); // The contentDocument property is not supported in IE until IE8. @@ -138,10 +140,11 @@ * Updates the dimension variables of the preview components. * * @param {Object} dimensions - * - An object with the following properties: - * - {Number} width: The width the preview should be set to. - * - {Number} height (optional): The height the preview should be set to. - * Currently this is not used. + * An object with the following properties: + * - {Number} width: The width the preview should be set to. + * - {Number} height (optional): The height the preview should be set to. + * + * @todo dimensions.height is not yet being used. */ function updateDimensions () { var width = device.width || NaN; @@ -166,7 +169,7 @@ * Handles refreshing the layout toolbar tab positioning. * * @param {Object} event - * - jQuery Event object. + * jQuery Event object. */ function handleWindowToolbarResize (event) { var options = $toolbarTab @@ -176,7 +179,7 @@ .find('.responsive-preview-device') // Hide layout options that are wider than the current screen .drupalLayout('prunePreviewChoices', edgeTolerance) - // The lis will be toggled. Assign them to options. + // The
  • s will be toggled. Assign them to options. .parent('li'); $toolbarTab.toggle(options.not('.element-hidden').length > 0); @@ -186,14 +189,14 @@ * Resizes the preview iframe to the configured dimensions of a device. * * @param {Object} event - * - A jQuery event object. + * A jQuery event object. */ function loadDevicePreview (event) { event.preventDefault(); var $link = $(event.target); device.width = $link.data('responsive-preview-width'); device.height = $link.data('responsive-preview-height'); - // Toggle tbe preview on. + // Toggle the preview on. toggleLayoutPreview(event, true); updateDimensions(); } @@ -202,7 +205,7 @@ * Redraws the layout preview component based on the stored dimensions. * * @param {Object} event - * - A jQuery event object. + * A jQuery event object. */ function refreshPreviewSizing (event) { $frame @@ -221,17 +224,17 @@ /** * Get the total displacement of given region. * - * @param String region + * @param {String} region * Region name. Either "top" or "bottom". * - * @return + * @return {Number} * The total displacement of given region in pixels. */ function getDisplacement (region) { var displacement = 0; var lastDisplaced = $('[data-offset-' + region + ']'); if (lastDisplaced.length) { - displacement = parseInt(lastDisplaced.attr('data-offset-' + region)); + displacement = parseInt(lastDisplaced.attr('data-offset-' + region), 10); } return displacement; } @@ -240,7 +243,7 @@ * A jQuery plugin that contains element manipulation utilities. * * @return {Function} - * - The method to invoke this plugin. + * The method to invoke this plugin. */ $.fn.drupalLayout = (function () { @@ -316,7 +319,7 @@ } /** - * Hides device prevview options that are too wide for the current window. + * Hides device preview options that are too wide for the current window. * * @param {Number} tolerance * - The distance from the edge of the window that a device cannot exceed @@ -327,7 +330,7 @@ tolerance = (typeof tolerance === 'number' && tolerance > 0) ? tolerance : 0; return this.each(function () { var $this = $(this); - var width = parseInt($this.data('responsive-preview-width')); + var width = parseInt($this.data('responsive-preview-width'), 10); var fits = ((width + (tolerance * 2)) < docWidth); $this.parent('li').toggleClass('element-hidden', !fits); }); @@ -357,24 +360,34 @@ */ $.extend(Drupal.theme, { /** - * Returns the preview container element. + * Theme function for the preview container element. + * + * @return + * The corresponding HTML. */ layoutContainer: function () { return '
    '; }, /** - * Returns the close button for the preview container. + * Theme function for the close button for the preview container. + * + * @return + * The corresponding HTML. */ layoutClose: function () { return ''; }, /** - * Returns an overlay iframe element. + * Theme function for a responsive preview iframe element. + * + * @return + * The corresponding HTML. */ layoutFrame: function (url) { return ''; } }); -}(Drupal, jQuery)); + +}(jQuery, Drupal)); diff --git a/core/modules/responsive_preview/responsive_preview.module b/core/modules/responsive_preview/responsive_preview.module index 5fc94e8..ac67170 100644 --- a/core/modules/responsive_preview/responsive_preview.module +++ b/core/modules/responsive_preview/responsive_preview.module @@ -104,8 +104,7 @@ function responsive_preview_library_info() { ), 'dependencies' => array( array('system', 'jquery'), - array('system', 'drupal.ajax'), - array('system', 'drupalSettings'), + array('system', 'drupal'), ), );