123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498 |
- (function($, FLBuilder) {
- /**
- * Base prototype for views in the menu
- */
- var PanelView = FLExtendableObject.create({
- templateName: "fl-main-menu-panel-view",
- name: "Untitled View",
- isShowing: false,
- isRootView: false,
- items: {},
- /**
- * Initialize the view
- *
- * @return void
- */
- init: function() {
- this.template = wp.template(this.templateName);
- },
- /**
- * Render the view
- *
- * @return String
- */
- render: function() {
- return this.template(this);
- },
- /**
- * Setup Events
- *
- * @return void
- */
- bindEvents: function() {
- this.$items = this.$el.find('.fl-builder--menu-item');
- },
- /**
- * Make this the current view
- *
- * @return void
- */
- show: function() {
- this.$el.addClass('is-showing');
- this.isShowing = true;
- },
- /**
- * Resign the active view
- *
- * @return void
- */
- hide: function() {
- this.$el.removeClass('is-showing');
- this.isShowing = false;
- },
- /**
- * Handle transitioning the view in
- *
- * @return void
- */
- transitionIn: function(reverse) {
- requestAnimationFrame( this.show.bind(this) );
- },
- /**
- * Handle transition away from the view
- *
- * @return void
- */
- transitionOut: function(reverse) {
- this.hide();
- },
- });
- /**
- * Menu Panel
- */
- var MainMenuPanel = FLExtendableObject.create({
- templateName: 'fl-main-menu-panel',
- template: null,
- menu: null,
- views: {},
- viewNavigationStack: [],
- isShowing: false,
- shouldShowTabs: false,
- /**
- * Setup and render the menu
- *
- * @return void
- */
- init: function() {
- // Render Panel
- this.template = wp.template(this.templateName);
- $( 'body', window.parent.document ).prepend( this.template(this) );
- this.$el = $('.fl-builder--main-menu-panel', window.parent.document);
- this.$el.find('.fl-builder--main-menu-panel-views').html('');
- // Render Views
- for (var key in FLBuilderConfig.mainMenu) {
- this.renderPanel( key );
- }
- // Event Listeners
- $('body', window.parent.document).on('click', '.fl-builder--main-menu-panel .pop-view', this.goToPreviousView.bind(this));
- this.$tabs = this.$el.find('.fl-builder--tabs > span'); /* on purpose */
- this.$tabs.on('click', this.onItemClick.bind(this));
- this.$barTitle = $('.fl-builder-bar-title', window.parent.document); /* on purpose */
- $('body', window.parent.document).on('click', '.fl-builder-bar-title', this.toggle.bind(this));
- var hide = this.hide.bind(this);
- FLBuilder.addHook('didShowPublishActions', hide);
- FLBuilder.addHook('didBeginSearch', hide);
- FLBuilder.addHook('didBeginPreview', hide);
- FLBuilder.addHook('didShowContentPanel', hide);
- FLBuilder.addHook('endEditingSession', hide);
- FLBuilder.addHook('didFocusSearchBox', hide);
- FLBuilder.addHook('didEnterRevisionPreview', hide);
- FLBuilder.addHook('didFailSettingsSave', hide);
- FLBuilder.addHook('showKeyboardShortcuts', hide);
- this.$mask = $('.fl-builder--main-menu-panel-mask', window.parent.document);
- this.$mask.on('click', hide);
- Tools.init();
- Help.init();
- },
- /**
- * Render the panel
- *
- * @param String key
- * @return void
- */
- renderPanel: function( key ) {
- var data, view, $html;
- var current = this.views[ key ];
- data = FLBuilderConfig.mainMenu[ key ];
- data.handle = key;
- view = PanelView.create( data );
- view.init();
- $html = $( view.render() );
- view.$el = $html;
- $( '.fl-builder--main-menu-panel-views', window.parent.document ).append( $html );
- view.bindEvents();
- view.$el.find( '.fl-builder--menu-item' ).on( 'click', this.onItemClick.bind( this ) );
- if ( 'undefined' !== typeof current ) {
- current.$el.remove();
- if ( current.isShowing ) {
- this.currentView = view
- view.show();
- }
- }
- if ( view.isRootView ) {
- this.rootView = view;
- this.currentView = view;
- }
- this.views[ key ] = view;
- },
- /**
- * Show the menu
- *
- * @return void
- */
- show: function() {
- if (this.isShowing) return;
- this.$el.addClass('is-showing');
- this.$barTitle.addClass('is-showing-menu');
- this.currentView.transitionIn();
- this.isShowing = true;
- this.$mask.show();
- FLBuilder.triggerHook('didOpenMainMenu');
- },
- /**
- * Hide the menu
- *
- * @return void
- */
- hide: function() {
- if (!this.isShowing) return;
- this.$el.removeClass('is-showing');
- this.$barTitle.removeClass('is-showing-menu');
- this.isShowing = false;
- this.resetViews();
- this.$mask.hide();
- },
- /**
- * Toggle show/hide the menu
- *
- * @return void
- */
- toggle: function() {
- if (this.isShowing) {
- this.hide();
- } else {
- this.show();
- }
- },
- /**
- * Handle item click
- *
- * @param {Event} e
- * @return void
- */
- onItemClick: function(e) {
- var $item = $(e.currentTarget, window.parent.document),
- type = $item.data('type');
- switch (type) {
- case "view":
- var name = $item.data('view');
- this.goToView(name);
- break;
- case "event":
- var hook = $item.data('event');
- FLBuilder.triggerHook(hook, $item);
- break;
- case "link":
- // follow link
- break;
- }
- },
- /**
- * Display a specific view
- *
- * @param String name
- * @return void
- */
- goToView: function(name) {
- var currentView = this.currentView;
- var newView = this.views[name];
- currentView.transitionOut();
- newView.transitionIn();
- this.currentView = newView;
- this.viewNavigationStack.push(currentView);
- },
- /**
- * Pop a view off the stack
- *
- * @return void
- */
- goToPreviousView: function() {
- var currentView = this.currentView;
- var newView = this.viewNavigationStack.pop();
- currentView.transitionOut(true);
- newView.transitionIn(true);
- this.currentView = newView;
- $('.fl-builder-bar-title-caret', window.parent.document).focus();
- },
- /**
- * Reset to root view
- *
- * @return void
- */
- resetViews: function() {
- if (this.currentView != this.rootView ) {
- this.currentView.hide();
- this.rootView.show();
- this.currentView = this.rootView;
- this.viewNavigationStack = [];
- }
- },
- });
- FLBuilder.MainMenu = MainMenuPanel;
- /**
- * Handle tools menu actions
- */
- var Tools = {
- /**
- * Setup listeners for tools actions
- * @return void
- */
- init: function() {
- FLBuilder.addHook('saveTemplate', this.saveTemplate.bind(this));
- FLBuilder.addHook('saveCoreTemplate', this.saveCoreTemplate.bind(this));
- FLBuilder.addHook('duplicateLayout', this.duplicateLayout.bind(this));
- FLBuilder.addHook('showLayoutSettings', this.showLayoutSettings.bind(this));
- FLBuilder.addHook('showGlobalSettings', this.showGlobalSettings.bind(this));
- FLBuilder.addHook('showGlobalStyles', this.showGlobalStyles.bind(this));
- FLBuilder.addHook('toggleUISkin', this.toggleUISkin.bind(this));
- FLBuilder.addHook('clearLayoutCache', this.clearLayoutCache.bind(this));
- FLBuilder.addHook('launchThemerLayouts', this.launchThemerLayouts.bind(this));
- FLBuilder.addHook('toggleOutlinePanel', this.toggleOutlinePanel.bind(this));
- FLBuilder.addHook('toggleMediaLibrary', this.toggleMediaLibrary.bind(this));
- // Show Keyboard Shortcuts
- if ( 'FL' in window && 'Builder' in FL ) {
- var actions = FL.Builder.data.getSystemActions();
- FLBuilder.addHook( 'showKeyboardShortcuts', function() {
- actions.setShouldShowShortcuts( true );
- });
- }
- },
- /**
- * Show the save template lightbox
- * @return void
- */
- saveTemplate: function() {
- FLBuilder._saveUserTemplateClicked();
- MainMenuPanel.hide();
- },
- /**
- * Show save core template lightbox
- * @return void
- */
- saveCoreTemplate: function() {
- FLBuilderCoreTemplatesAdmin._saveClicked();
- MainMenuPanel.hide();
- },
- /**
- * Trigger duplicate layout
- * @return void
- */
- duplicateLayout: function() {
- FLBuilder._duplicateLayoutClicked();
- MainMenuPanel.hide();
- },
- /**
- * Show the global settings lightbox
- * @return void
- */
- showGlobalSettings: function() {
- FLBuilder._globalSettingsClicked();
- MainMenuPanel.hide();
- },
- /**
- * Show the global style settings lightbox
- * @return void
- */
- showGlobalStyles: function() {
- FLBuilder._globalStylesClicked();
- MainMenuPanel.hide();
- },
- /**
- * Show the layout js/css lightbox
- * @return void
- */
- showLayoutSettings: function() {
- FLBuilder._layoutSettingsClicked();
- MainMenuPanel.hide();
- },
- /**
- * Clear cache for this layout
- * @return void
- */
- clearLayoutCache: function() {
- FLBuilder.ajax({
- action: 'clear_cache'
- }, function() {
- location.href = FLBuilderConfig.editUrl;
- });
- FLBuilder.showAjaxLoader();
- MainMenuPanel.hide();
- },
- /**
- * Toggle between the UI Skins
- * @var Event
- * @return void
- */
- toggleUISkin: function(e) {
- const colorScheme = FL.Builder.data.getSystemState().colorScheme;
- let newColorScheme = ''
- // cycle modes...
- if ( 'light' === colorScheme ) {
- newColorScheme = 'dark';
- } else if ( 'dark' === colorScheme ) {
- newColorScheme = 'auto';
- } else {
- newColorScheme = 'light';
- }
- FL.Builder.data.getSystemActions().setColorScheme( newColorScheme );
- $('.current-mode').html( '(' + newColorScheme + ')' );
- },
- /**
- * @return void
- */
- launchThemerLayouts: function() {
- if ( FLBuilderConfig.lite ) {
- FLBuilder._showProMessage( 'Themer Layouts' );
- } else {
- window.open( FLBuilderConfig.themerLayoutsUrl );
- }
- MainMenuPanel.hide();
- },
- /**
- * @return void
- */
- toggleOutlinePanel: function() {
- FL.Builder.togglePanel('outline');
- },
- /**
- * @return void
- */
- toggleMediaLibrary: function() {
- var mediaLibrary = wp.media( {
- multiple: false
- });
- mediaLibrary.fl_changed = false;
- mediaLibrary.on( 'open', function() {
- $(mediaLibrary.el).find('.media-toolbar').hide();
- });
- mediaLibrary.on( 'selection:toggle', function() {
- $(mediaLibrary.el).find('button.delete-attachment, a.edit-attachment').on('click', function() {
- mediaLibrary.fl_changed = true;
- });
- $(mediaLibrary.el).find('textarea, input').on('change', function() {
- mediaLibrary.fl_changed = true;
- });
- });
- mediaLibrary.on( 'library:selection:add', function() {
- mediaLibrary.fl_changed = true;
- });
- mediaLibrary.on( 'closed, close, escape', function() {
- if ( mediaLibrary.fl_changed ) {
- window.parent.location.reload();
- }
- })
- MainMenuPanel.hide();
- mediaLibrary.open();
- },
- }
- var Help = {
- /**
- * Init the help controller
- * @return void
- */
- init: function() {
- FLBuilder.addHook('beginTour', this.onStartTourClicked.bind(this));
- },
- /**
- * Handle tour item click
- *
- * @return void
- */
- onStartTourClicked: function() {
- FLBuilderTour.start();
- MainMenuPanel.hide();
- },
- }
- })(jQuery, FLBuilder);
|