(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 = $('').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('
'); 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(''); } else { this.parent().append(''); } } }); $('.preview-device-outer').entwine({ onclick: function onclick() { this.toggleClass('rotate'); } }); }); });