silverstripe-framework/admin/client/dist/js/LeftAndMain.Preview.js

(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define('ss.LeftAndMain.Preview', ['jQuery', 'i18n'], factory);
  } else if (typeof exports !== "undefined") {
    factory(require('jQuery'), require('i18n'));
  } else {
    var mod = {
      exports: {}
    };
    factory(global.jQuery, global.i18n);
    global.ssLeftAndMainPreview = mod.exports;
  }
})(this, function (_jQuery, _i18n) {
  'use strict';

  var _jQuery2 = _interopRequireDefault(_jQuery);

  var _i18n2 = _interopRequireDefault(_i18n);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

  _jQuery2.default.entwine('ss.preview', function ($) {
    $('.cms-preview').entwine({
      AllowedStates: ['StageLink', 'LiveLink', 'ArchiveLink'],

      CurrentStateName: null,

      CurrentSizeName: 'auto',

      IsPreviewEnabled: false,

      DefaultMode: 'split',

      Sizes: {
        auto: {
          width: '100%',
          height: '100%'
        },
        mobile: {
          width: '335px',
          height: '568px'
        },
        mobileLandscape: {
          width: '583px',
          height: '320px'
        },
        tablet: {
          width: '783px',
          height: '1024px'
        },
        tabletLandscape: {
          width: '1039px',
          height: '768px'
        },
        desktop: {
          width: '1024px',
          height: '800px'
        }
      },

      changeState: function changeState(stateName, save) {
        var self = this,
            states = this._getNavigatorStates();
        if (save !== false) {
          $.each(states, function (index, state) {
            self.saveState('state', stateName);
          });
        }

        this.setCurrentStateName(stateName);
        this._loadCurrentState();
        this.redraw();

        return this;
      },

      changeMode: function changeMode(modeName, save) {
        var container = $('.cms-container');

        if (modeName == 'split') {
          container.entwine('.ss').splitViewMode();
          this.setIsPreviewEnabled(true);
          this._loadCurrentState();
        } else if (modeName == 'content') {
          container.entwine('.ss').contentViewMode();
          this.setIsPreviewEnabled(false);
        } else if (modeName == 'preview') {
            container.entwine('.ss').previewMode();
            this.setIsPreviewEnabled(true);
            this._loadCurrentState();
          } else {
            throw 'Invalid mode: ' + modeName;
          }

        if (save !== false) this.saveState('mode', modeName);

        this.redraw();

        return this;
      },

      changeSize: function changeSize(sizeName) {
        var sizes = this.getSizes();

        this.setCurrentSizeName(sizeName);
        this.removeClass('auto desktop tablet mobile').addClass(sizeName);
        this.find('.preview-device-outer').width(sizes[sizeName].width).height(sizes[sizeName].height);
        this.find('.preview-device-inner').width(sizes[sizeName].width);

        this.saveState('size', sizeName);

        this.redraw();

        return this;
      },

      redraw: function redraw() {

        if (window.debug) console.log('redraw', this.attr('class'), this.get(0));

        var currentStateName = this.getCurrentStateName();
        if (currentStateName) {
          this.find('.cms-preview-states').changeVisibleState(currentStateName);
        }

        var layoutOptions = $('.cms-container').entwine('.ss').getLayoutOptions();
        if (layoutOptions) {
          $('.preview-mode-selector').changeVisibleMode(layoutOptions.mode);
        }

        var currentSizeName = this.getCurrentSizeName();
        if (currentSizeName) {
          this.find('.preview-size-selector').changeVisibleSize(this.getCurrentSizeName());
        }

        return this;
      },

      saveState: function saveState(name, value) {
        if (this._supportsLocalStorage()) window.localStorage.setItem('cms-preview-state-' + name, value);
      },

      loadState: function loadState(name) {
        if (this._supportsLocalStorage()) return window.localStorage.getItem('cms-preview-state-' + name);
      },

      disablePreview: function disablePreview() {
        this.setPendingURL(null);
        this._loadUrl('about:blank');
        this._block();
        this.changeMode('content', false);
        this.setIsPreviewEnabled(false);
        return this;
      },

      enablePreview: function enablePreview() {
        if (!this.getIsPreviewEnabled()) {
          this.setIsPreviewEnabled(true);

          if ($.browser.msie && $.browser.version.slice(0, 3) <= 7) {
            this.changeMode('content');
          } else {
            this.changeMode(this.getDefaultMode(), false);
          }
        }
        return this;
      },

      getOrAppendFontFixStyleElement: function getOrAppendFontFixStyleElement() {
        var style = $('#FontFixStyleElement');
        if (!style.length) {
          style = $('<style type="text/css" id="FontFixStyleElement" disabled="disabled">' + ':before,:after{content:none !important}' + '</style>').appendTo('head');
        }

        return style;
      },

      onadd: function onadd() {
        var self = this,
            layoutContainer = this.parent(),
            iframe = this.find('iframe');

        iframe.addClass('center');
        iframe.bind('load', function () {
          self._adjustIframeForPreview();

          self._loadCurrentPage();

          $(this).removeClass('loading');
        });

        if ($.browser.msie && 8 === parseInt($.browser.version, 10)) {
          iframe.bind('readystatechange', function (e) {
            if (iframe[0].readyState == 'interactive') {
              self.getOrAppendFontFixStyleElement().removeAttr('disabled');
              setTimeout(function () {
                self.getOrAppendFontFixStyleElement().attr('disabled', 'disabled');
              }, 0);
            }
          });
        }

        this.append('<div class="cms-preview-overlay ui-widget-overlay-light"></div>');
        this.find('.cms-preview-overlay').hide();

        this.disablePreview();

        this._super();
      },

      _supportsLocalStorage: function _supportsLocalStorage() {
        var uid = new Date();
        var storage;
        var result;
        try {
          (storage = window.localStorage).setItem(uid, uid);
          result = storage.getItem(uid) == uid;
          storage.removeItem(uid);
          return result && storage;
        } catch (exception) {
          console.warn('localStorge is not available due to current browser / system settings.');
        }
      },

      onenable: function onenable() {
        var $viewModeSelector = $('.preview-mode-selector');

        $viewModeSelector.removeClass('split-disabled');
        $viewModeSelector.find('.disabled-tooltip').hide();
      },

      ondisable: function ondisable() {
        var $viewModeSelector = $('.preview-mode-selector');

        $viewModeSelector.addClass('split-disabled');
        $viewModeSelector.find('.disabled-tooltip').show();
      },

      _block: function _block() {
        this.addClass('blocked');
        this.find('.cms-preview-overlay').show();
        return this;
      },

      _unblock: function _unblock() {
        this.removeClass('blocked');
        this.find('.cms-preview-overlay').hide();
        return this;
      },

      _initialiseFromContent: function _initialiseFromContent() {
        var mode, size;

        if (!$('.cms-previewable').length) {
          this.disablePreview();
        } else {
          mode = this.loadState('mode');
          size = this.loadState('size');

          this._moveNavigator();
          if (!mode || mode != 'content') {
            this.enablePreview();
            this._loadCurrentState();
          }
          this.redraw();

          if (mode) this.changeMode(mode);
          if (size) this.changeSize(size);
        }
        return this;
      },

      'from .cms-container': {
        onafterstatechange: function onafterstatechange(e, data) {
          if (data.xhr.getResponseHeader('X-ControllerURL')) return;

          this._initialiseFromContent();
        }
      },

      PendingURL: null,

      oncolumnvisibilitychanged: function oncolumnvisibilitychanged() {
        var url = this.getPendingURL();
        if (url && !this.is('.column-hidden')) {
          this.setPendingURL(null);
          this._loadUrl(url);
          this._unblock();
        }
      },

      'from .cms-container .cms-edit-form': {
        onaftersubmitform: function onaftersubmitform() {
          this._initialiseFromContent();
        }
      },

      _loadUrl: function _loadUrl(url) {
        this.find('iframe').addClass('loading').attr('src', url);
        return this;
      },

      _getNavigatorStates: function _getNavigatorStates() {
        var urlMap = $.map(this.getAllowedStates(), function (name) {
          var stateLink = $('.cms-preview-states .state-name[data-name=' + name + ']');
          if (stateLink.length) {
            return {
              name: name,
              url: stateLink.attr('href'),
              active: stateLink.hasClass('active')
            };
          } else {
            return null;
          }
        });

        return urlMap;
      },

      _loadCurrentState: function _loadCurrentState() {
        if (!this.getIsPreviewEnabled()) return this;

        var states = this._getNavigatorStates();
        var currentStateName = this.getCurrentStateName();
        var currentState = null;

        if (states) {
          currentState = $.grep(states, function (state, index) {
            return currentStateName === state.name || !currentStateName && state.active;
          });
        }

        var url = null;

        if (currentState[0]) {
          url = currentState[0].url;
        } else if (states.length) {
          this.setCurrentStateName(states[0].name);
          url = states[0].url;
        } else {
          this.setCurrentStateName(null);
        }

        if (url) {
          url += (url.indexOf('?') === -1 ? '?' : '&') + 'CMSPreview=1';
        }

        if (this.is('.column-hidden')) {
          this.setPendingURL(url);
          this._loadUrl('about:blank');
          this._block();
        } else {
          this.setPendingURL(null);

          if (url) {
            this._loadUrl(url);
            this._unblock();
          } else {
            this._block();
          }
        }

        return this;
      },

      _moveNavigator: function _moveNavigator() {
        var previewEl = $('.cms-preview .cms-preview-controls');
        var navigatorEl = $('.cms-edit-form .cms-navigator');

        if (navigatorEl.length && previewEl.length) {
          previewEl.html($('.cms-edit-form .cms-navigator').detach());
        } else {
          this._block();
        }
      },

      _loadCurrentPage: function _loadCurrentPage() {
        if (!this.getIsPreviewEnabled()) return;

        var doc,
            containerEl = $('.cms-container');
        try {
          doc = this.find('iframe')[0].contentDocument;
        } catch (e) {
          console.warn('Unable to access iframe, possible https mis-match');
        }
        if (!doc) {
          return;
        }

        var id = $(doc).find('meta[name=x-page-id]').attr('content');
        var editLink = $(doc).find('meta[name=x-cms-edit-link]').attr('content');
        var contentPanel = $('.cms-content');

        if (id && contentPanel.find(':input[name=ID]').val() != id) {
          $('.cms-container').entwine('.ss').loadPanel(editLink);
        }
      },

      _adjustIframeForPreview: function _adjustIframeForPreview() {
        var iframe = this.find('iframe')[0],
            doc;
        if (!iframe) {
          return;
        }

        try {
          doc = iframe.contentDocument;
        } catch (e) {
          console.warn('Unable to access iframe, possible https mis-match');
        }
        if (!doc) {
          return;
        }

        var links = doc.getElementsByTagName('A');
        for (var i = 0; i < links.length; i++) {
          var href = links[i].getAttribute('href');
          if (!href) continue;

          if (href.match(/^http:\/\//)) links[i].setAttribute('target', '_blank');
        }

        var navi = doc.getElementById('SilverStripeNavigator');
        if (navi) navi.style.display = 'none';
        var naviMsg = doc.getElementById('SilverStripeNavigatorMessage');
        if (naviMsg) naviMsg.style.display = 'none';

        this.trigger('afterIframeAdjustedForPreview', [doc]);
      }
    });

    $('.cms-edit-form').entwine({
      onadd: function onadd() {
        this._super();
        $('.cms-preview')._initialiseFromContent();
      }
    });

    $('.cms-preview-states').entwine({
      changeVisibleState: function changeVisibleState(state) {
        this.find('[data-name="' + state + '"]').addClass('active').siblings().removeClass('active');
      }
    });

    $('.cms-preview-states .state-name').entwine({
      onclick: function onclick(e) {
        if (e.which == 1) {
          var targetStateName = $(this).attr('data-name');

          this.addClass('active').siblings().removeClass('active');

          $('.cms-preview').changeState(targetStateName);

          e.preventDefault();
        }
      }
    });

    $('.preview-mode-selector').entwine({
      changeVisibleMode: function changeVisibleMode(mode) {
        this.find('select').val(mode).trigger('chosen:updated')._addIcon();
      }
    });

    $('.preview-mode-selector select').entwine({
      onchange: function onchange(e) {
        this._super(e);
        e.preventDefault();

        var targetStateName = $(this).val();
        $('.cms-preview').changeMode(targetStateName);
      }
    });

    $('.cms-preview.column-hidden').entwine({
      onmatch: function onmatch() {
        $('#preview-mode-dropdown-in-content').show();

        if ($('.cms-preview .result-selected').hasClass('font-icon-columns')) {
          statusMessage(_i18n2.default._t('LeftAndMain.DISABLESPLITVIEW', "Screen too small to show site preview in split mode"), "error");
        }
        this._super();
      },

      onunmatch: function onunmatch() {
        $('#preview-mode-dropdown-in-content').hide();
        this._super();
      }
    });

    $('#preview-mode-dropdown-in-content').entwine({
      onmatch: function onmatch() {
        if ($('.cms-preview').is('.column-hidden')) {
          this.show();
        } else {
          this.hide();
        }
        this._super();
      },
      onunmatch: function onunmatch() {
        this._super();
      }
    });

    $('.preview-size-selector').entwine({
      changeVisibleSize: function changeVisibleSize(size) {
        this.find('select').val(size).trigger('chosen:updated')._addIcon();
      }
    });

    $('.preview-size-selector select').entwine({
      onchange: function onchange(e) {
        e.preventDefault();

        var targetSizeName = $(this).val();
        $('.cms-preview').changeSize(targetSizeName);
      }
    });

    $('.preview-selector select.preview-dropdown').entwine({
      'onchosen:ready': function onchosenReady() {
        this._super();
        this._addIcon();
      },

      _addIcon: function _addIcon() {
        var selected = this.find(':selected');
        var iconClass = selected.attr('data-icon');

        var target = this.parent().find('.chosen-container a.chosen-single');
        var oldIcon = target.attr('data-icon');
        if (typeof oldIcon !== 'undefined') {
          target.removeClass(oldIcon);
        }
        target.addClass(iconClass);
        target.attr('data-icon', iconClass);

        return this;
      }
    });

    $('.preview-mode-selector .chosen-drop li:last-child').entwine({
      onmatch: function onmatch() {
        if ($('.preview-mode-selector').hasClass('split-disabled')) {
          this.parent().append('<div class="disabled-tooltip"></div>');
        } else {
          this.parent().append('<div class="disabled-tooltip" style="display: none;"></div>');
        }
      }
    });

    $('.preview-device-outer').entwine({
      onclick: function onclick() {
        this.toggleClass('rotate');
      }
    });
  });
});