diff --git a/core/modules/responsive_preview/css/responsive-preview.icons.css b/core/modules/responsive_preview/css/responsive-preview.icons.css index 01571e9..96b94a8 100644 --- a/core/modules/responsive_preview/css/responsive-preview.icons.css +++ b/core/modules/responsive_preview/css/responsive-preview.icons.css @@ -81,48 +81,48 @@ /** * Responsive preview controls icons. */ -.responsive-preview .responsive-preview-control.responsive-preview-icon:before { +.responsive-preview-control.responsive-preview-icon:before { height: 12px; width: 12px; top: 12px; } -.responsive-preview .responsive-preview-icon-close:before { +.responsive-preview-icon-close:before { background-position: left -44px; right: 9px; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-icon-close:before { +[dir="rtl"] .responsive-preview-icon-close:before { left: 9px; right: auto; } -.responsive-preview .responsive-preview-icon-close:active:before, -.responsive-preview .responsive-preview-icon-close.active:before, -.responsive-preview .responsive-preview-icon-close:hover:before { +.responsive-preview-icon-close:active:before, +.responsive-preview-icon-close.active:before, +.responsive-preview-icon-close:hover:before { background-position: left -56px; } -.responsive-preview .responsive-preview-icon-orientation:before { +.responsive-preview-icon-orientation:before { background-position: left -92px; /* LTR */ left: 9px; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation:before { +[dir="rtl"] .responsive-preview-icon-orientation:before { background-position: left -155px; left: auto; right: 9px; } -.responsive-preview .responsive-preview-icon-orientation:hover:before { +.responsive-preview-icon-orientation:hover:before { background-position: left -104px; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation:hover:before { +[dir="rtl"] .responsive-preview-icon-orientation:hover:before { background-position: left -167px; } -.responsive-preview .responsive-preview-icon-orientation.rotated:before { +.responsive-preview-icon-orientation.rotated:before { background-position: left -68px; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation.rotated:before { +[dir="rtl"] .responsive-preview-icon-orientation.rotated:before { background-position: left -131px; } -.responsive-preview .responsive-preview-icon-orientation.rotated:hover:before { +.responsive-preview-icon-orientation.rotated:hover:before { background-position: left -80px; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-icon-orientation.rotated:hover:before { +[dir="rtl"] .responsive-preview-icon-orientation.rotated:hover:before { background-position: left -143px; } diff --git a/core/modules/responsive_preview/css/responsive-preview.module.css b/core/modules/responsive_preview/css/responsive-preview.module.css index e92f95a..6dd4dcc 100644 --- a/core/modules/responsive_preview/css/responsive-preview.module.css +++ b/core/modules/responsive_preview/css/responsive-preview.module.css @@ -71,10 +71,10 @@ left: auto; right: 0; } -.responsive-preview .responsive-preview-control { +.responsive-preview-control { position: absolute; } -.responsive-preview .responsive-preview-modal-background { +.responsive-preview-modal-background { bottom: 0; height: 100%; left: 0; @@ -91,11 +91,11 @@ /** * Preview iframe. */ -.responsive-preview .responsive-preview-frame-container { +.responsive-preview-frame-container { position: absolute; z-index: 100; } -.responsive-preview .responsive-preview-frame-container iframe { +.responsive-preview-frame-container iframe { position: relative; } diff --git a/core/modules/responsive_preview/css/responsive-preview.theme.css b/core/modules/responsive_preview/css/responsive-preview.theme.css index 33d26d0..ee845f8 100644 --- a/core/modules/responsive_preview/css/responsive-preview.theme.css +++ b/core/modules/responsive_preview/css/responsive-preview.theme.css @@ -134,18 +134,21 @@ * Preview container. */ .responsive-preview { - box-shadow: 0 0 10px 0 black; + opacity: 1; + -moz-transition: opacity 450ms; + -webkit-transition: opacity 450ms; + transition: opacity 450ms; } .responsive-preview .responsive-preview-frame-container { opacity: 0; - -moz-transition: all 450ms; - -webkit-transition: all 450ms; - transition: all 450ms; + -moz-transition: all 250ms; + -webkit-transition: all 250ms; + transition: all 250ms; } .responsive-preview.active .responsive-preview-frame-container { opacity: 1; } -.responsive-preview .responsive-preview-modal-background { +.responsive-preview-modal-background { background-color: black; background-color: rgba(0,0,0,0.92); background-image: -webkit-linear-gradient(left, rgb(20,20,20),rgb(50,50,50) 25%, rgb(100,100,100) 40%, rgb(100,100,100) 60%, rgb(50,50,50) 75%, rgb(20,20,20)); @@ -155,31 +158,30 @@ /** * Responsive preview control placement. */ -.responsive-preview .responsive-preview-control { +.responsive-preview-control { cursor: pointer; height: 40px; position: absolute; top: 0; width: 40px; } -.responsive-preview .responsive-preview-control.responsive-preview-close { +.responsive-preview-control.responsive-preview-close { right: 0; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-control.responsive-preview-close { +[dir="rtl"] .responsive-preview-control.responsive-preview-close { left: 0; right: auto; } -.responsive-preview .responsive-preview-control.responsive-preview-orientation { +.responsive-preview-control.responsive-preview-orientation { left: 0; /* LTR */ } -[dir="rtl"] .responsive-preview .responsive-preview-control.responsive-preview-orientation { +[dir="rtl"] .responsive-preview-control.responsive-preview-orientation { left: auto; right: 0; } -.responsive-preview .responsive-preview-device-label { +.responsive-preview-device-label { bottom: 0; color: #bbbbbb; - cursor: pointer; font-family: sans-serif; font-weight: normal; left: 30px; @@ -192,31 +194,33 @@ text-overflow: ellipsis; white-space: nowrap; } -.responsive-preview .responsive-preview-device-label-text:after { +.responsive-preview-device-details-trigger { color: #666; - content: '\0000A0' attr(data-responsive-preview-label-expand); + cursor: pointer; + text-transform: lowercase; } -.responsive-preview .responsive-preview-device-label-text:hover:after { +.responsive-preview-device-details-trigger:hover { color: #bbb; } -.responsive-preview .responsive-preview-device-label-details { +.responsive-preview-device-label-details, +.responsive-preview-device-details-comma { display: none; } -.responsive-preview .responsive-preview-device-label-details:before { - content: '\0002C\0000A0'; /* ', ' */ +.responsive-preview-expanded.responsive-preview-device-label { + cursor: pointer; } -.responsive-preview-expanded .responsive-preview-device-label-details { +.responsive-preview-expanded .responsive-preview-device-label-details, +.responsive-preview-expanded .responsive-preview-device-details-comma { display: inline; } -.responsive-preview-expanded .responsive-preview-device-label-text:after, -.responsive-preview-expanded .responsive-preview-device-label-text:hover:after { +.responsive-preview-expanded .responsive-preview-device-details-trigger { display: none; } /** * Responsive preview frame. */ -.responsive-preview .responsive-preview-frame-container { +.responsive-preview-frame-container { background-color: #212121; border-radius: 20px; box-shadow: @@ -228,7 +232,7 @@ transition: all 150ms ease-out; margin-top: 2em; } -.responsive-preview .responsive-preview-frame-container iframe { +.responsive-preview-frame-container iframe { box-shadow: 0 0 0 1px #808080; -webkit-transition: all 150ms ease-out; -moz-transition: all 150ms ease-out; diff --git a/core/modules/responsive_preview/js/responsive-preview.js b/core/modules/responsive_preview/js/responsive-preview.js index 6d1e47b..cb68a2c 100644 --- a/core/modules/responsive_preview/js/responsive-preview.js +++ b/core/modules/responsive_preview/js/responsive-preview.js @@ -14,11 +14,11 @@ var options = $.extend({ // therefore it must be defined here instead of in the CSS file. bleed: 30, strings: { - details: Drupal.t('details'), - close: Drupal.t('close'), + details: Drupal.t('Details'), + close: Drupal.t('Close'), orientation: Drupal.t('Change orientation'), - portrait: Drupal.t('portrait'), - landscape: Drupal.t('landscape') + portrait: Drupal.t('Portrait'), + landscape: Drupal.t('Landscape') } }, drupalSettings.responsivePreview || {}); @@ -308,10 +308,10 @@ Drupal.responsivePreview = Drupal.responsivePreview || { */ render: function (previewModel, isActive, options) { // The preview container view. - if (isActive && !this.previewView) { + if (isActive && !Drupal.responsivePreview.views.previewView) { // Holds the Backbone View of the preview. This view is created and destroyed // when the preview is enabled or disabled respectively. - this.previewView = new Drupal.responsivePreview.PreviewView({ + Drupal.responsivePreview.views.previewView = new Drupal.responsivePreview.PreviewView({ el: Drupal.theme('responsivePreviewContainer'), // The previewView model. model: this.model, @@ -322,23 +322,23 @@ Drupal.responsivePreview = Drupal.responsivePreview || { bleed: this.options.bleed, strings: this.options.strings }); + // Remove the inlined opacity style so that the CSS opacity transition + // will fade in the preview view. + window.setTimeout(function () { + Drupal.responsivePreview.views.previewView.el.style.opacity = null; + }, 0); } - else if (!isActive && this.previewView) { - this.previewView.remove(); - delete this.previewView; - } - }, - - /** - * {@inheritdoc} - */ - remove: function () { - // Remove the previewView if it exists. - if (this.previewView) { - this.previewView.remove(); + else if (!isActive && Drupal.responsivePreview.views.previewView) { + // The transitionEnd event is still heavily vendor-prefixed. + var transitionEnd = "transitionEnd.responsivepreview webkitTransitionEnd.responsivepreview transitionend.responsivepreview msTransitionEnd.responsivepreview oTransitionEnd.responsivepreview"; + // When the fade transition is complete, remove the view. + Drupal.responsivePreview.views.previewView.$el.on(transitionEnd, function (event) { + Drupal.responsivePreview.views.previewView.remove(); + delete Drupal.responsivePreview.views.previewView; + }); + // Fade out the preview. + Drupal.responsivePreview.views.previewView.el.style.opacity = 0; } - // Call the parent remove method on this view. - Backbone.View.prototype.remove.call(this); } }), @@ -532,9 +532,10 @@ Drupal.responsivePreview = Drupal.responsivePreview || { PreviewView: Backbone.View.extend({ events: { - 'click #responsive-preview-close': 'onClose', - 'click #responsive-preview-orientation': 'onRotate', - 'click #responsive-preview-frame-label': 'onMoreInfo' + 'click #responsive-preview-close': 'shutdown', + 'click #responsive-preview-modal-background': 'shutdown', + 'click #responsive-preview-orientation': 'rotate', + 'click #responsive-preview-frame-label': 'revealDetails' }, /** @@ -582,16 +583,26 @@ Drupal.responsivePreview = Drupal.responsivePreview || { * * @param jQuery.Event event */ - onClose: function (event) { + shutdown: function (event) { this.model.set('isActive', false); }, /** + * Removes a listener on the document; calls the standard Backbone remove. + */ + remove: function () { + // Unbind transition listeners. + this.$el.off('.responsivepreview'); + // Call the standard remove method on this. + Backbone.View.prototype.remove.call(this); + }, + + /** * Responds to rotation button presses. * * @param jQuery.Event event */ - onRotate: function (event) { + rotate: function (event) { this.model.set('isRotated', !this.model.get('isRotated')); }, @@ -600,7 +611,7 @@ Drupal.responsivePreview = Drupal.responsivePreview || { * * @param jQuery.Event event */ - onMoreInfo: function (event) { + revealDetails: function (event) { this.model.set('isDetailsExpanded', !this.model.get('isDetailsExpanded')); }, @@ -961,7 +972,7 @@ $.extend(Drupal.theme, { * The corresponding HTML. */ responsivePreviewContainer: function () { - return '
'; + return '
'; }, /** @@ -975,7 +986,9 @@ $.extend(Drupal.theme, { responsivePreviewFrameContainer: function (strings) { return '
' + '' + '' +