diff --git a/core/modules/responsive_preview/css/responsive-preview.icons.css b/core/modules/responsive_preview/css/responsive-preview.icons.css index e616c2c..6ed041e 100644 --- a/core/modules/responsive_preview/css/responsive-preview.icons.css +++ b/core/modules/responsive_preview/css/responsive-preview.icons.css @@ -81,15 +81,15 @@ background-position: left -56px; } .responsive-preview .icon-orientation:before { - background-position: left -68px; + background-position: left -92px; left: 9px; /* LTR */ } .responsive-preview .icon-orientation:hover:before { - background-position: left -80px; + background-position: left -104px; } .responsive-preview .icon-orientation.rotated:before { - background-position: left -92px; + background-position: left -68px; } .responsive-preview .icon-orientation.rotated:hover:before { - background-position: left -104px; + background-position: left -80px; } diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css index 5b19b83..15291cc 100644 --- a/core/modules/responsive_preview/css/responsive-preview.theme.css +++ b/core/modules/responsive_preview/css/responsive-preview.theme.css @@ -166,7 +166,7 @@ -moz-transition: all 150ms ease-out; -o-transition: all 150ms ease-out; transition: all 150ms ease-out; - top: 1em; + margin-top: 2em; } .responsive-preview .frame-container iframe { box-shadow: diff --git a/core/modules/responsive_preview/images/responsive-preview-icons.png b/core/modules/responsive_preview/images/responsive-preview-icons.png index 6eedbbe..0ce06e7 100644 --- a/core/modules/responsive_preview/images/responsive-preview-icons.png +++ b/core/modules/responsive_preview/images/responsive-preview-icons.png @@ -1,10 +1,11 @@ PNG  - IHDR  BqtEXtSoftwareAdobe ImageReadyqe<IDATxXO#G]/6} :HH*>)]R:] -8E4A# -H`wwꄎD(/u"*MA"@m؛[~z(b|f{ofV+H ^z= -#_cccj[[[(LⱺaAcfN&x]㛯1YᴗxyYi-g`zG>9NQfH"rZUU3E{+űXDNs-d 1Y[ ɿҝt -aC N -B,VL巧hHzr:6uMnnnZߡ<w-¤,wvww 6?rJ/0^ǝ8??Ju hF٥6 Dtt*B!PzPX|B`D+`6kEAb;...>O&ߛBn<2Ibķ(D"- 0nB PGjfe|||Ay -}jy"S{GPI CXt`*'ANQ]iAj˩!ga)="'2jHW3cV !?QE <_  bxe\@57_=j! L"+aKIYS +V!R]lNV+XiDbZBrvNNN +A{@lMb6>&6rחa#1NKӉ3if`<}{{;̬ T*"⼧6@7rkE*Ud ׯ8<c#"M')H0u& +yK @0Wl2c)z$\l޳*];wr?~edr n&(ɷ=_phkNa4H([S2PY6zcneK(>]IENDB` \ No newline at end of file diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js index 7183298..16b4b64 100644 --- a/core/modules/responsive_preview/js/responsive-preview.js +++ b/core/modules/responsive_preview/js/responsive-preview.js @@ -80,6 +80,18 @@ Drupal.behaviors.responsivePreview = { // Update the viewport width whenever it is resized, but max 4 times/s. .on('resize.responsivePreview', Drupal.debounce(setViewportWidth, 250)); + $(document) + // Respond to viewport offsetting elements like the Toolbar. + .on('drupalViewportOffsetChange.responsivePreview', function (event, offsets) { + envModel.set('offsets', offsets); + }) + .on('keyup.responsivePreview', function (event) { + // Close the preview if the Esc key is pressed. + if (event.keyCode === 27) { + previewModel.set('isActive', false); + } + }); + // Allow other scripts to respond to responsive preview mode changes. tabModel.on('change:isActive', function (model, isActive) { $(document).trigger((isActive) ? 'drupalResponsivePreviewStarted' : 'drupalResponsivePreviewStopped'); @@ -125,7 +137,14 @@ Drupal.responsivePreview.models.EnvironmentModel = Backbone.Model.extend({ // The viewport width, within which the preview will have to fit. viewportWidth: null, // Text direction of the document, affects some positioning. - dir: 'ltr' + dir: 'ltr', + // Viewport offset values. + offsets: { + top: 0, + right: 0, + bottom: 0, + left: 0 + } } }); @@ -391,7 +410,7 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ this.model.on('change:isActive change:isRotated change:dimensions change:activeDevice', this.render, this); // Recalculate the size of the preview container when the window resizes. - this.envModel.on('change:viewportWidth', this.render, this); + this.envModel.on('change:viewportWidth change:offsets', this.render, this); }, /** @@ -405,10 +424,10 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ this._build(); } - // Early-return if inactive. if (isActive) { // Refresh the preview. this._refresh(); + Drupal.displace(); } // Render the state of the preview. @@ -446,6 +465,7 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ * Builds the preview iframe. */ _build: function () { + var offsets = this.envModel.get('offsets'); var $frameContainer = $(Drupal.theme('responsivePreviewFrameContainer')) .find('#responsive-preview-close span') .text(this.strings.close) @@ -469,11 +489,9 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ .on('load.responsivePreview', $.proxy(this._refresh, this)) // Add the frame to the preview container. .appendTo($frameContainer); - // Adjust the placement of the preview container and insert it into the DOM. + // Insert the container into the DOM. this.$el - .css({ top: this._getDisplacement('top') }) - // Displace the top of the container. - .attr('data-offset-top', this._getDisplacement('top')) + .css('top', offsets.top) // Apend the frame container. .append($frameContainer) // Append the container to the body to initialize the iframe document. @@ -490,6 +508,7 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ var $deviceLink = $(this.model.get('activeDevice')); var $container = this.$el.find('#responsive-preview-frame-container'); var $frame = $container.find('> iframe'); + var offsets = this.envModel.get('offsets'); // Get the static state. var edge = (this.envModel.get('dir') === 'rtl') ? 'right' : 'left'; @@ -525,6 +544,7 @@ Drupal.responsivePreview.views.PreviewView = Backbone.View.extend({ // Resize & reposition the iframe. var position = {}; position[edge] = gutter; // Depends on text direction. + position.top = offsets.top; $frame .css({ width: width,