Why Gemfury?
Push, build, and install
RubyGems
npm packages
Python packages
Maven artifacts
PHP packages
Go Modules
Debian packages
RPM packages
NuGet packages
jsarnowski
jsarnowski / jsarnowski/oxygen php
Repository URL to install this package:
|
Version:
3.7.1 ▾
|
/**
* All UI staff here
*
*/
var CTFrontendBuilderUI = angular.module('CTFrontendBuilderUI', [angularDragula(angular),'ngAnimate','ui.codemirror', 'CTCommonDirectives', 'ui.sortable']);
CTFrontendBuilderUI.controller("ControllerUI", function($controller, $anchorScroll, $location, $scope, $timeout, $interval, $window, dragulaService, $compile, ctScopeService) {
ctScopeService.store('uiscope', $scope);
window.$scope = $scope;
/**
* Include other controllers
*/
$controller('ControllerDragnDrop', {
$scope: $scope,
$timeout: $timeout,
dragulaService: dragulaService
});
$controller('ControllerSlider', {
$scope: $scope,
$timeout: $timeout,
$interval: $interval
});
// Background Layers
$scope.ctBgLayerType = 'image';
$scope.bgLayersSortableOptions = {
update: function(e, ui) {
setTimeout(function() {
var layers = $scope.iframeScope.getOption('background-layers');
$scope.iframeScope.setOptionModel('background-layers', layers);
}, 100);
}
};
$scope.media_uploader = {};
$scope.oxygenUIElement = jQuery("#oxygen-ui");
$scope.toolbarElement = jQuery("#oxygen-topbar");
$scope.viewportContainer = jQuery("#ct-viewport-container");
$scope.artificialViewport = jQuery("#ct-artificial-viewport");
$scope.viewportRulerWrap = jQuery("#ct-viewport-ruller-wrap");
$scope.sidePanelElement = jQuery("#ct-sidepanel");
$scope.settingsPanelElement = jQuery("#oxygen-global-settings");
$scope.verticalSidebar = jQuery("#oxygen-sidebar");
// load viewport iframe only after UI app is initialized
$scope.artificialViewport.prop("src", function(){
return angular.element(this).data("src");
});
$scope.viewportScale = 1;
$scope.viewportScaleLocked = false;
window.$scope = $scope;
// variable to show/hide toolbar elements
$scope.showEmptyMessage = true;
$scope.showAllStyles = true;
$scope.showClasses = true;
$scope.showLeftSidebar = true;
$scope.showButtonFlashing = false;
$scope.showComponentBar = false;
$scope.showDOMTreeNavigator = false;
$scope.dialogWindow = false;
$scope.viewportRullerShown = false;
$scope.showSidePanel = false;
$scope.showSettingsPanel = false;
$scope.styleTabAdvance = false;
$scope.activeForEditBgLayer = false;
$scope.statusBarActive = false;
$scope.showDataPanel = false;
$scope.showSidebarLoader = false;
$scope.copySelectorFromClass = false;
$scope.copySelectorFromID = false;
$scope.builtinContentEditing = false;
$scope.conditionsDialogOptions = {
selectedIndex : 0,
userCondition:'',
};
$scope.currentBorder = "all";
$scope.actionTabs = {
"componentBrowser" : false,
"advancedSettings" : false,
"contentEditing" : false,
"settings" : false,
"styleSheet" : false,
"codeEditor" : false
};
$scope.highlight = [];
$scope.tabs = [];
$scope.tabs.components = [];
$scope.tabs.components.fundamentals = true;
$scope.tabs.advanced = [];
// Background tab
$scope.tabs.advanced.Background = [];
// Position & Size tab
$scope.tabs.advanced.positionSize = [];
$scope.tabs.settings = [];
//$scope.tabs.settings.page = true;
$scope.tabs.navMenu = [];
$scope.tabs.slider = [];
$scope.tabs.sidePanel = [];
$scope.tabs.sidePanel.DOMTree = true;
$scope.tabs.sidePanel.History = true;
$scope.tabs.codeEditor = [];
$scope.tabs.codeEditor["code-php"] = true;
$scope.isSelectableEnabled = false;
$scope.isDOMNodesSelected = false;
// start with no overlays
$scope.overlaysCount = 0;
$scope.dialogForms = [];
$scope.iframeScope = false;
// default to Global Colors
$scope.colorSetIDToAdd = 0;
// toolbar search bar begin
// search bar query
$scope.componentsSearchQuery = '';
// cached elements for client-side search
var searchElementOriginalList = jQuery('#oxygen-toolbar-original-panels');
var searchElementFilteredList = jQuery('#oxygen-toolbar-search-panels');
var searchElementNoResultsText = searchElementFilteredList.find('.oxygen-add-panels-no-search-results');
var searchElementSearchResultsContainer = jQuery('#oxygen-toolbar-search-results');
var searchElementSearchResults = jQuery('#oxygen-toolbar-search-results > div');
function getSearchElementFirstVisible() {
return jQuery('#oxygen-toolbar-search-results > div:visible:first');
}
// name of the data-* key used to retrieve searchable elements ids
var searchIdKey = 'searchid';
var searchCategoryKey = 'searchcat';
var searchNameKey = 'searchname';
var searchElementSearchInput = jQuery('#oxygen-add-sidebar .oxygen-add-searchbar');
// internal search cache
// id should match data-`searchIdKey` attribute of the searchable elements
// search is done on both title and category
// you can write custom text inside items to enhance search
var searchCache = {
items: [
{ title: 'Section', category: 'Basics Containers', id: 'section' },
{ title: 'Div', category: 'Basics Containers', id: 'div' },
{ title: 'Columns', category: 'Basics Containers', id: 'columns' },
{ title: 'Heading', category: 'Basics Text', id: 'heading' },
{ title: 'Text', category: 'Basics Text', id: 'text' },
{ title: 'Rich Text', category: 'Basics Text', id: 'rich_text' },
{ title: 'Text Link', category: 'Basics Links', id: 'text_link' },
{ title: 'Link Wrapper', category: 'Basics Links', id: 'link_wrapper' },
{ title: 'Button', category: 'Basics Links', id: 'button' },
{ title: 'Image', category: 'Basics Visual', id: 'image' },
{ title: 'Video', category: 'Basics Visual', id: 'video' },
{ title: 'Icon', category: 'Basics Visual', id: 'icon' },
{ title: 'Code Block', category: 'Basics Other', id: 'code_block' },
{ title: 'Inner Content', category: 'Basics Other', id: 'inner_content' },
{ title: 'Header Builder', category: 'Helpers Composite', id: 'header_builder' },
{ title: 'Social Icons', category: 'Helpers Composite', id: 'social_icons' },
{ title: 'Testimonial', category: 'Helpers Composite', id: 'testimonial' },
{ title: 'Icon Box', category: 'Helpers Composite', id: 'icon_box' },
{ title: 'Pricing Box', category: 'Helpers Composite', id: 'pricing_box' },
{ title: 'Progress Bar', category: 'Helpers Composite', id: 'progress_bar' },
{ title: 'Modals', category: 'Helpers Composite', id: 'modal' },
{ title: 'Easy Posts', category: 'Helpers Dynamic', id: 'easy_posts' },
{ title: 'Gallery', category: 'Helpers Dynamic', id: 'gallery' },
{ title: 'Repeater', category: 'Helpers Dynamic', id: 'repeater' },
{ title: 'Slider', category: 'Helpers Interactive elements', id: 'slider' },
{ title: 'Tabs', category: 'Helpers Interactive elements', id: 'tabs' },
{ title: 'Superbox', category: 'Helpers Interactive elements', id: 'superbox' },
{ title: 'Toggle', category: 'Helpers Interactive elements', id: 'toggle' },
{ title: 'Google Maps', category: 'Helpers External', id: 'google_maps' },
{ title: 'SoundCloud', category: 'Helpers External', id: 'soundcloud' },
{ title: 'Menu', category: 'Wordpress', id: 'menu' },
{ title: 'Shortcode', category: 'Wordpress', id: 'shortcode' },
{ title: 'Shortcode Wrapper', category: 'Wordpress', id: 'shortcode_wrapper' },
{ title: 'Comments List', category: 'Wordpress', id: 'comments_list' },
{ title: 'Comment Form', category: 'Wordpress', id: 'comment_form' },
{ title: 'Login Form', category: 'Wordpress', id: 'login_form' },
{ title: 'Search Form', category: 'Wordpress', id: 'search_form' },
{ title: 'Title', category: 'Dynamic data', id: 'dynamic_data_title' },
{ title: 'Content', category: 'Dynamic data', id: 'dynamic_data_content' },
{ title: 'Date', category: 'Dynamic data', id: 'dynamic_data_date' },
{ title: 'Categories', category: 'Dynamic data', id: 'dynamic_data_categories' },
{ title: 'Tags', category: 'Dynamic data', id: 'dynamic_data_tags' },
{ title: 'Featured Image', category: 'Dynamic data', id: 'dynamic_data_featured_image' },
{ title: 'Author', category: 'Dynamic data', id: 'dynamic_data_author' },
{ title: 'Author Avatar', category: 'Dynamic data', id: 'dynamic_data_author_avatar' },
{ title: 'Custom Field', category: 'Dynamic data', id: 'dynamic_data_custom_field' },
{ title: 'Title', category: 'Widgets', id: 'dynamic_data_title' },
{ title: 'Content', category: 'Widgets', id: 'dynamic_data_content' },
{ title: 'Date', category: 'Widgets', id: 'dynamic_data_date' },
{ title: 'Categories', category: 'Widgets', id: 'dynamic_data_categories' },
{ title: 'Tags', category: 'Widgets', id: 'dynamic_data_tags' },
{ title: 'Featured Image', category: 'Widgets', id: 'dynamic_data_featured_image' },
{ title: 'Author', category: 'Widgets', id: 'dynamic_data_author' },
{ title: 'Author Avatar', category: 'Widgets', id: 'dynamic_data_author_avatar' },
{ title: 'Custom Field', category: 'Widgets', id: 'dynamic_data_custom_field' },
{ title: "Widget Pages", category: "Widgets", id: "widget_pages" },
{ title: "Widget Calendar", category: "Widgets", id: "widget_calendar" },
{ title: "Widget Archives", category: "Widgets", id: "widget_archives" },
{ title: "Widget Audio", category: "Widgets", id: "widget_audio" },
{ title: "Widget Image", category: "Widgets", id: "widget_image" },
{ title: "Widget Gallery", category: "Widgets", id: "widget_gallery" },
{ title: "Widget Video", category: "Widgets", id: "widget_video" },
{ title: "Widget Meta", category: "Widgets", id: "widget_meta" },
{ title: "Widget Search", category: "Widgets", id: "widget_search" },
{ title: "Widget Text", category: "Widgets", id: "widget_text" },
{ title: "Widget Categories", category: "Widgets", id: "widget_categories" },
{ title: "Widget Recent Posts", category: "Widgets", id: "widget_recent_posts" },
{ title: "Widget Recent Comments", category: "Widgets", id: "widget_recent_comments" },
{ title: "Widget Rss", category: "Widgets", id: "widget_rss" },
{ title: "Widget Tag Cloud", category: "Widgets", id: "widget_tag_cloud" },
{ title: "Widget Navigation Menu", category: "Widgets", id: "widget_navigation_menu" },
{ title: "Widget Custom Html", category: "Widgets", id: "widget_custom_html" },
],
};
var searchIds = {};
for (var i = 0; i < searchCache.items.length; i++) {
searchIds[searchCache.items[i].id] = true;
}
// hack that waits until the html with searchable elements is rendered
// some elements are dynamic so we wait until the data is rendered
// and then inject it into a client-side list of searchable elements
var loaderInterval = window.setInterval(function() {
if (searchElementSearchResults.length == 0) return;
searchElementSearchResults.each(function() {
var searchId = angular.element(this).data(searchIdKey);
if (searchIds.hasOwnProperty(searchId)) return;
var searchCategory = angular.element(this).data(searchCategoryKey);
var searchName = angular.element(this).data(searchNameKey);
if (typeof searchName === 'undefined') {
searchName = angular.element(this).text().trim();
}
searchCache.items.push({
title: searchName,
category: searchCategory,
id: searchId,
});
});
// exclude category Widgets, Dynamic Data and uncategorized (i.e., sidebars)
searchCache.items = _.filter(searchCache.items, function(item) {
return (item.category != 'Widgets' && item.category != 'Dynamic data' && typeof(item.category) !== 'undefined');
});
searchCache.fuse = new Fuse(searchCache.items, {
shouldSort: true,
tokenize: true,
matchAllTokens: true,
findAllMatches: true,
threshold: 0.05,
includeScore: true,
location: 0,
distance: 0,
maxPatternLength: 36,
minMatchCharLength: 1,
keys: [
{ name: "title", weight: 0.7 },
{ name: "category", weight: 0.3 },
],
});
clearTimeout(loaderInterval);
}, 350);
// toolbar search bar end
/**
* Handle visibility of empty sidebar message
*/
$scope.$watch(function() {
$scope.showEmptyMessage = $scope.iframeScope && $scope.showLeftSidebar !== false && !(
$scope.isActiveName('root') === false ||
$scope.isActiveActionTab('componentBrowser') === true ||
$scope.iframeScope.selectedNodeType === 'stylesheet' ||
$scope.iframeScope.selectedNodeType === 'selectorfolder' ||
$scope.iframeScope.selectedNodeType === 'cssfolder' ||
$scope.iframeScope.selectedNodeType === 'styleset'
);
});
/**
* Get iframe scope and save within UI scope
*
*/
$scope.$on('iframe-scope', function(e, iframeScope) {
$scope.iframeScope = iframeScope;
});
$scope.stopPropagation = function($event) {
$event.stopPropagation();
}
/**
* Triggered from iframe to apply UI scope
*
* @since 2.0
* @author Ilya K.
*/
$scope.safeApply = function() {
applySceduled = true;
if ($scope.$root.$$phase != '$apply' && $scope.$root.$$phase != '$digest') {
$scope.$apply();
}
applySceduled = false;
}
/**
* Apply iframe scope on UI scope digest
*
* @since 2.0
* @author Ilya K.
*/
var applySceduled = false;
$scope.$watch(function() {
if (applySceduled) return;
applySceduled = true;
$scope.$$postDigest(function() {
applySceduled = false;
if ($scope.iframeScope){
$scope.iframeScope.safeApply();
}
});
});
/**
* Check if component active by component id
*
* @since 0.1.6
* @return {bool}
*/
$scope.isActiveId = function(id) {
if (!$scope.iframeScope) {
return false;
}
return ( id == $scope.iframeScope.component.active.id ) ? true : false;
}
$scope.insertShortcodeToLink = function(text) {
text=text.replace(/\"/ig, "'");
angular.element('input#wp-link-url').val(text);
}
/**
* Check if component active by component name
*
* @since 0.1
* @return {bool}
*/
$scope.isActiveName = function(name) {
if (!$scope.iframeScope) {
return false;
}
return (name == $scope.iframeScope.component.active.name) ? true : false;
}
/**
* Check if component parent active by component id
*
* @since 2.0
* @return {bool}
*/
$scope.isActiveParentId = function(id) {
if (!$scope.iframeScope) {
return false;
}
return ( id == $scope.iframeScope.component.active.parent.id ) ? true : false;
}
/**
* Check if component parent active by component id
*
* @since 2.0
* @return {bool}
*/
$scope.isActiveParentName = function(name) {
if (!$scope.iframeScope) {
return false;
}
return ( name == $scope.iframeScope.component.active.parent.name ) ? true : false;
}
/**
* Set a tab to show
*
* @since 0.1.7
*/
$scope.switchTab = function(tabGroup, tabName) {
if (tabGroup=="advanced") {
$scope.showAllStyles = false;
if (["custom-js","custom-css","code-js","code-css","code-php"].indexOf(tabName)>=0) {
$scope.expandSidebar();
}
else {
$scope.toggleSidebar(true);
}
} else {
$scope.iframeScope.selectedNodeType = null;
}
if (tabGroup=="sidePanel") {
if ( $scope.tabs[tabGroup][tabName] != true ) {
$scope.toggleSidePanel(true);
}
else {
$scope.toggleSidePanel();
}
if (tabName=='DOMTree') {
$scope.iframeScope.highlightDOMNode($scope.iframeScope.component.active.id);
}
}
$scope.tabs[tabGroup] = [];
if (tabGroup !== "effects") {
$scope.tabs["effects"] = [];
}
if (tabGroup=="components") {
$scope.iframeScope.closeAllFolders();
}
switch (tabName) {
// all tabs with children
case "position" :
$scope.tabs[tabGroup][tabName] = {margin_padding:true};
break;
case "background" :
$scope.tabs[tabGroup][tabName] = {color:true};
break;
case "borders" :
$scope.tabs[tabGroup][tabName] = {border:true};
break;
case "cssjs" :
$scope.tabs[tabGroup][tabName] = {css:true};
break;
case "code" :
$scope.tabs[tabGroup][tabName] = {'code-php':true};
break;
// other regular tabs
default :
$scope.tabs[tabGroup][tabName] = ($scope.tabs[tabGroup][tabName]) ? false : true;
}
// if advanced/background tab is opened, collapse the background layers to default state
if(tabGroup === 'advanced' && tabName === 'background')
$scope.activeForEditBgLayer = false;
$scope.showSVGIcons = false;
$scope.disableSelectable();
}
/**
* Check if any subtab open
*
* @since 2.0
* @author Ilya K.
*/
$scope.hasOpenTabs = function(name) {
if (undefined===$scope.tabs[name])
return false;
return Object.keys($scope.tabs[name]).length > 0;
}
/**
* Check if any subtab open
*
* @since 2.0
* @author Ilya K.
*/
$scope.hasOpenChildTabs = function(name,child) {
if ($scope.tabs[name]===undefined||$scope.tabs[name][child]===undefined)
return false;
if ($scope.tabs[name][child] == undefined)
return false;
return Object.keys($scope.tabs[name][child]).length > 0;
}
/**
* Set advanced settings tab to show
*
* @since 0.3.0
*/
$scope.switchChildTab = function(tabGroup, tabName, childTabName) {
if ( tabName=="cssjs" ) {
$scope.tabs[tabGroup][tabName] = [];
$scope.tabs[tabGroup][tabName][childTabName] = true;
$scope.adjustCodeMirrorHeight();
return false;
}
if ( !$scope.tabs[tabGroup] ) {
$scope.tabs[tabGroup] = [];
}
if ( !$scope.tabs[tabGroup][tabName] || typeof $scope.tabs[tabGroup][tabName] !== "object") {
$scope.tabs[tabGroup][tabName] = [];
}
$scope.tabs[tabGroup][tabName][childTabName] = ($scope.tabs[tabGroup][tabName][childTabName]) ? false : true;
$scope.showSVGIcons = false;
$scope.showAddGlobalColorPanel = false;
$scope.addGlobalColorSetPanel = false;
$scope.disableSelectable();
}
/**
* Set advanced settings tab to show
*
* @since 2.0
*/
$scope.adjustCodeMirrorHeight = function() {
var timeout = $timeout(function() {
var codeMirrorElement = jQuery(".CodeMirror", "#ct-vertical-sidebar");
if (codeMirrorElement.length===0) {
return false;
};
var codeMirrorGutterElement = jQuery(".CodeMirror-gutters", "#ct-vertical-sidebar"),
fakeCodeMirror = jQuery(".fake-code-mirror-last", "#ct-vertical-sidebar"),
offset = codeMirrorElement.offset(),
height = window.innerHeight - offset.top - fakeCodeMirror.outerHeight() - 40;
codeMirrorElement.height(height);
codeMirrorGutterElement.height(height);
// cancel timeout
$timeout.cancel(timeout);
}, 0, false);
}
/**
* Check if opened tab is not available for current component and switch to default
*
* @since 0.2.4
*/
$scope.checkTabs = function() {
if ($scope.iframeScope.log) {
console.log("checkTabs()")
}
if ( $scope.isActiveName("root") ) {
$scope.closeAllTabs();
return;
}
// check code block tabs
if ( $scope.isActiveName("ct_code_block")
&& ( $scope.tabs.advanced['custom-js'] ||
$scope.tabs.advanced['custom-css'] )
) {
$scope.showAllStylesFunc();
}
// check code block tabs
if ( !$scope.isActiveName("ct_code_block")
&& ( $scope.tabs.advanced['code-js'] ||
$scope.tabs.advanced['code-css'] ||
$scope.tabs.advanced['code-php'] )
) {
$scope.showAllStylesFunc();
}
// check widget
/*else if ( $scope.isActiveName("ct_widget") ) {
$scope.closeAllTabs(["componentBrowser"]);
}
// check shortcode
else if ( $scope.isActiveName("ct_shortcode") ) {
$scope.closeAllTabs(["componentBrowser"]);
}*/
// check others
else if ( $scope.tabs.advanced['code'] && ( $scope.tabs.advanced['code']['code-php'] ||
$scope.tabs.advanced['code']['code-js'] ||
$scope.tabs.advanced['code']['code-css'] ) && $scope.iframeScope.component.active.name != "ct_code_block" ) {
$scope.switchChildTab("advanced", "background", "color");
}
// check custom JS tab
/*if ($scope.tabs.advanced['cssjs'] && $scope.tabs.advanced['cssjs']['js'] && ($scope.iframeScope.isEditing('media') || $scope.iframeScope.isEditing('class') || $scope.iframeScope.isEditing('state'))) {
$scope.switchChildTab('advanced', 'cssjs', 'css');
}*/
}
/**
* Close all action tabs, except the tabs specified in keepTabs array
*
* @since 0.1.7
*/
$scope.closeAllTabs = function(keepTabs) {
if ($scope.iframeScope.log) {
console.log("closeAllTabs()", keepTabs);
}
if (keepTabs==undefined){
keepTabs = [];
}
angular.forEach($scope.actionTabs, function(value, tab) {
if (keepTabs.indexOf(tab) == -1) {
$scope.actionTabs[tab] = false;
}
});
$scope.showSVGIcons = false;
$scope.adjustViewportContainer();
}
/**
* Close a list of tabs or all of them
*
* @since 2.0
* @author Ilya K.
*/
$scope.closeTabs = function(tabs) {
if ($scope.iframeScope.log) {
console.log("closeTabs()", tabs);
}
for (var key in $scope.tabs) {
if ($scope.tabs.hasOwnProperty(key)) {
if (tabs==undefined){
$scope.tabs[key] = false;
}
else if (tabs.indexOf(key) >= 0) {
$scope.tabs[key] = false;
}
}
}
}
/**
* Switch to code editor if Code Block is active
*
* @since 1.3
* @author Ilya K.
*/
$scope.possibleSwitchToCodeEditor = function(tabGroup, tabName) {
if ( $scope.isActiveName("ct_code_block") ) {
$scope.switchActionTab("codeEditor");
$scope.switchTab("codeEditor","code-css");
}
else {
$scope.switchTab(tabGroup, tabName);
}
}
$scope.activateCopySelectorMode = function(className, event) {
event.stopPropagation();
if (className) {
$scope.copySelectorFromClass = className;
}
else {
$scope.copySelectorFromID = $scope.iframeScope.component.active.id;
}
}
$scope.deactivateCopySelectorMode = function(event) {
event.stopPropagation();
$scope.copySelectorFromClass = false;
$scope.copySelectorFromID = false;
}
/**
* Show all styles tabs
*
* @since 2.0
* @author Ilya K.
*/
$scope.showAllStylesFunc = function() {
$scope.showAllStyles=true;
$scope.tabs['advanced'] = [];
$scope.tabs['effects'] = [];
$scope.toggleSidebar(true);
}
/**
* Toggle sidebar to/from 50%
*
* @since 2.0
* @author Ilya K.
*/
$scope.toggleSidebar = function(forceCollapse) {
if ($scope.iframeScope.log) {
console.log("toggleSidebar()", forceCollapse);
}
var isExpanded = $scope.verticalSidebar.data("expanded"),
button = jQuery('.oxygen-code-editor-expand', $scope.verticalSidebar);
if (isExpanded) {
// collapse
$scope.verticalSidebar.css({'width': '300px'});
$scope.adjustViewportContainer()
$scope.verticalSidebar.data("expanded", false);
jQuery(button).text(jQuery(button).attr('data-expand'));
}
else if (!forceCollapse) {
// expand
$scope.verticalSidebar.css({'width': '50%'});
$scope.adjustViewportContainer();
$scope.verticalSidebar.data("expanded", true);
jQuery(button).text(jQuery(button).attr('data-collapse'));
}
}
/**
* Open sidebar to 50%
*
* @since 2.0
* @author Ilya K.
*/
$scope.expandSidebar = function() {
var timeout = $timeout(function() {
var button = jQuery('.oxygen-code-editor-expand', $scope.verticalSidebar);
$scope.verticalSidebar.css({'width': '50%'});
$scope.adjustViewportContainer();
$scope.verticalSidebar.data("expanded", true);
jQuery(button).text(jQuery(button).attr('data-collapse'));
$timeout.cancel(timeout);
}, 0, false);
}
/**
* Show add new color dialog window
*
* @since 2.1
* @author Ilya K.
*/
$scope.showAddNewColorDialog = function($event) {
$scope.addNewColorDialog = true;
$scope.addNewColorDialogEvent = $event;
var input = jQuery($event.currentTarget).parents('.oxygen-color-picker').find('.oxygen-color-picker-color + input'),
color = input.val();
var timeout = $timeout(function() {
jQuery('input', '#oxygen-global-colors-new-color-dialog').focus();
$timeout.cancel(timeout);
}, 0, false);
$scope.addNewColorDialogValue = color;
jQuery(document).on('keydown', $scope.colorDialogKeyDown);
}
/**
* Hide add new color dialog window
*
* @since 2.1
* @author Ilya K.
*/
$scope.hideAddNewColorDialog = function() {
$scope.addNewColorDialog = false;
$scope.addNewColorDialogEvent = false;
$scope.addNewColorDialogValue = "";
jQuery(document).off('keydown', $scope.colorDialogKeyDown);
}
/**
* Keydown callback for global color dialog
*
* @since 2.1
* @author Ilya K.
*/
$scope.colorDialogKeyDown = function($event) {
// if Enter key pressed
if ($event.which === 13) {
$scope.iframeScope.addNewColor($scope.newGlobalSettingsColorName, $scope.colorSetIDToAdd, 'latest');
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
}
/**
* Keydpress callback for Global Settings > New global color set
*
* @since 2.1
* @author Ilya K.
*/
$scope.addGlobalColorSetKeyPress = function($event) {
// if Enter key pressed
if ($event.which === 13) {
$scope.iframeScope.addNewColorSet($scope.newGlobalColorSetName);
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
}
/**
* Keydpress callback for Global Settings > new global color
*
* @since 2.1
* @author Ilya K.
*/
$scope.newGlobalColorNameKeyPress = function($event, setID) {
// if Enter key pressed
if ($event.which === 13) {
$scope.iframeScope.addNewColor($scope.newGlobalColorName, setID, $scope.newGlobalColorValue);
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
}
/**
* Set global color to the param
*
* @since 2.1
* @author Ilya K.
*/
$scope.setGlobalColor = function(colorID, $event) {
if ($event===undefined) {
$event = $scope.addNewColorDialogEvent;
}
if ($scope.iframeScope.log){
console.log("setGlobalColor()", colorID, $event)
}
if ($event===undefined) {
return;
}
var input = jQuery($event.currentTarget).parents('.oxygen-color-picker').find('.oxygen-color-picker-color + input'),
color = $scope.iframeScope.getGlobalColor(colorID);
$scope.activeGlobalColor = color;
if ("color("+colorID+")"!==input.val()) {
input.val("color("+colorID+")");
}
else {
// do nothing if global color already set
return;
}
// make angular trigger the ng-change
angular.element(input).triggerHandler('input');
}
/**
* Update global color name and set
*
* @since 2.1
* @author Ilya K.
*/
$scope.updateGlobalColorValue = function(newValue) {
$scope.globalColorToEdit.value = newValue;
}
/**
* Update global color name and set
*
* @since 2.1
* @author Ilya K.
*/
$scope.updateGlobalColor = function(name, set) {
if ($scope.iframeScope.log){
console.log("updateGlobalColor()", name, set)
}
if (name!==undefined) {
$scope.globalColorToEdit.name = name;
}
if (set!==undefined) {
$scope.globalColorToEdit.set = set;
}
}
/**
* Unset global color
*
* @since 2.1
* @author Ilya K.
*/
$scope.unsetGlobalColor = function($event) {
var input = jQuery($event.currentTarget).parents('.oxygen-color-picker').find('.oxygen-color-picker-color + input');
input.val("");
// make angular trigger the ng-change
angular.element(input).triggerHandler('input');
}
/**
* Trigger on Settings -> Global Styles -> Colors update
*
* @since 2.1
* @author Ilya K.
*/
$scope.globalColorChange = function(id) {
$scope.iframeScope.classesCached = false;
$scope.iframeScope.updateAllComponentsCacheStyles();
$scope.iframeScope.outputCSSOptions();
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
/**
* Check is to show tab
*
* @since 0.1.7
* @return {bool}
*/
$scope.isShowTab = function(tabGroup, tabName) {
if ( $scope.tabs[tabGroup] ) {
return ( $scope.tabs[tabGroup][tabName] ) ? true : false;
}
else {
return false;
}
}
$scope.isShowTabOfGroup = function(tabGroup) {
return $scope.tabs[tabGroup] && Object.keys($scope.tabs[tabGroup]).length > 0;
}
/**
* Check is to show child tab
*
* @since 0.3.0
* @return {bool}
*/
$scope.isShowChildTab = function(tabGroup, tabName, childTabName) {
if ( $scope.tabs[tabGroup] ) {
return ( $scope.tabs[tabGroup][tabName] && $scope.tabs[tabGroup][tabName][childTabName] ) ? true : false;
}
else {
return false;
}
}
/**
* Toggle Side Panel
*
* @since 0.1.5
*/
$scope.toggleSidePanel = function(forceOpen) {
if (forceOpen==true&&$scope.showSidePanel) {
return
}
$scope.showSidePanel = !$scope.showSidePanel;
if (!$scope.showSettingsPanel) {
if ($scope.showSidePanel) {
$scope.sidePanelElement.css({width:"300px"});
}
else {
$scope.sidePanelElement.css({width:"0px"});
}
}
else {
$scope.showSettingsPanel = false;
}
$scope.adjustViewportContainer();
if (!$scope.showSidePanel) {
$scope.disableSelectable();
}
}
/**
* Toggle Settings Panel
*
* @since 2.0
* @author Ilya K.
*/
$scope.toggleSettingsPanel = function(forceOpen) {
if (forceOpen===true) {
$scope.showSettingsPanel = true;
}
else {
$scope.showSettingsPanel = !$scope.showSettingsPanel;
}
if (!$scope.showSidePanel) {
if ($scope.showSettingsPanel) {
$scope.settingsPanelElement.css({right:"0px"});
}
else {
$scope.settingsPanelElement.css({right:"-300px"});
}
}
else {
$scope.settingsPanelElement.css({
right: "0px"
});
$scope.showSidePanel = false;
}
$scope.adjustViewportContainer();
if (!$scope.showSettingsPanel) {
$scope.disableSelectable();
}
}
/**
* Show editor panel for contenteditable elements
*
* @since 0.1.5
*/
$scope.enableContentEdit = function(element) {
if ( $scope.actionTabs["contentEditing"] == true ) {
return false;
}
// Pause undo/redo watcher
$scope.iframeScope.pauseDataWatcher();
// switch edit to id
$scope.iframeScope.switchEditToId();
var activeComponent = $scope.iframeScope.getActiveComponent();
if ( !element.is(activeComponent) ){
activeComponent=element;
$scope.builtinContentEditing = true;
}
else {
$scope.builtinContentEditing = false;
}
if ( activeComponent[0].attributes['contenteditable'] ) {
// FireFox fix for the invisible cursor issue
if ( $scope.isActiveName("ct_link_text") ) {
jQuery("<input style='position:fixed;top:40%;left:40%' type='text'>").appendTo("body").focus().remove();
}
activeComponent[0].setAttribute("contenteditable", "true");
activeComponent[0].setAttribute("spellcheck", "true");
if(!$scope.iframeScope.isChrome) {
$scope.iframeScope.disableElementDraggable(true);
}
activeComponent.focus();
$scope.iframeScope.setEndOfContenteditable(activeComponent[0]);
$scope.actionTabs["contentEditing"] = true;
}
$scope.iframeScope.hideResizeBox(0.1);
}
/**
* Hide editor panel for contenteditable elements
*
* @since 0.1.5
*/
$scope.disableContentEdit = function() {
if ( !$scope.actionTabs["contentEditing"] )
return false;
if ($scope.iframeScope.log) {
console.log('disableContentEdit()');
}
var activeComponent = $scope.iframeScope.getActiveComponent();
var activeComponentID = $scope.iframeScope.component.active.id;
$scope.builtinContentEditing = false;
// clear selection
if (window.getSelection) {
if (window.getSelection().empty) { // Chrome
window.getSelection().empty();
} else if (window.getSelection().removeAllRanges) { // Firefox
window.getSelection().removeAllRanges();
}
} else if (document.selection) { // IE?
document.selection.empty();
}
$scope.iframeScope.dynamicListTextChanged = false;
if($scope.iframeScope.contentEditableData.beingEdited != $scope.iframeScope.getOption('ct_content')) {
$scope.iframeScope.dynamicListTextChanged = true;
}
var oxyDynamicList;
if ( activeComponent[0].attributes['contenteditable'] ) {
if(!$scope.iframeScope.isChrome) {
$scope.iframeScope.disableElementDraggable(false);
}
var content = activeComponent.html();
activeComponent.html("");
/* var el = activeComponent[0];
while ((el = el.parentElement) && !el.classList.contains('ct_link'));
if(el)
el.setAttribute("href", ''); */
activeComponent[0].setAttribute("contenteditable", "false");
activeComponent[0].removeAttribute("spellcheck");
activeComponent.html(content);
oxyDynamicList = activeComponent.closest('.oxy-dynamic-list');
if ($scope.iframeScope.component.active.name != 'ct_span') {
if(typeof(activeComponent[0].attributes['plaintext']) === 'undefined' || activeComponent[0].attributes['plaintext'] !== "true") {
var content = $scope.iframeScope.getOption('ct_content');
content = content.replace(/\[oxygen[^\]]*\]/ig, function(match) {
// create a span component out of match
// embed it in the tree as a child of $scope.iframeScope.component.active.id
// get the new component's id
var newComponent = {
id : $scope.iframeScope.dynamicSpanCycleIDs.length > 0?$scope.iframeScope.dynamicSpanCycleIDs.shift():$scope.iframeScope.component.id++,
name : "ct_span"
}
// set default options first
$scope.iframeScope.applyComponentDefaultOptions(newComponent.id, "ct_span");
// insert new component to Components Tree
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.insertComponentToTree, newComponent);
// update span options
$scope.iframeScope.component.options[newComponent.id]["model"]["ct_content"] = match;
$scope.iframeScope.setOption(newComponent.id, "ct_span", "ct_content");
return "<span id=\"ct-placeholder-"+newComponent.id+"\"></span>"
});
$scope.iframeScope.setOptionModel('ct_content', content, $scope.iframeScope.component.active.id, $scope.iframeScope.component.active.name);
}
if($scope.iframeScope.dynamicListTextChanged) {
if(oxyDynamicList.length > 0 && !$scope.iframeScope.component.options[parseInt(oxyDynamicList.attr('ng-attr-component-id'))]['model']['listrendertype']) {
$scope.iframeScope.updateRepeaterQuery(parseInt(oxyDynamicList.attr('ng-attr-component-id')));
} else {
$scope.iframeScope.rebuildDOM($scope.iframeScope.component.active.id);
}
}
else {
$scope.iframeScope.rebuildDOM($scope.iframeScope.component.active.id);
}
} else {
if(oxyDynamicList.length > 0) {
var id = oxyDynamicList.attr('ng-attr-component-id');
angular.element('#ct-artificial-viewport').contents().find('[ng-attr-component-id="'+activeComponentID+'"][disabled="disabled"]').text(activeComponent.text());
//$scope.iframeScope.dynamicListAction(id, activeComponentID);
//$scope.iframeScope.dynamicListAction(id);
// if($scope.iframeScope.contentEditableData.original.replace(/<span[^\/]*\/span>/ig, '') != $scope.iframeScope.getOption('ct_content', activeComponentID).replace(/<span[^\/]*\/span>/ig, '')) {
// $scope.iframeScope.rebuildDOM(id);
// }
}
if($scope.iframeScope.contentEditableData.beingEdited != $scope.iframeScope.getOption('ct_content'))
$scope.iframeScope.rebuildDOM($scope.iframeScope.component.active.parent.id);
}
}
else {
var element = activeComponent.find("[contenteditable=true]");
if (element.length > 0) {
if(!$scope.iframeScope.isChrome) {
$scope.iframeScope.disableElementDraggable(false);
}
var content = element.html();
element.html("");
element[0].setAttribute("contenteditable", "false");
element[0].removeAttribute("spellcheck");
element.html(content);
var option = element.data('optionname'),
content = $scope.iframeScope.getOption(option);
content = content.replace(/\[oxygen[^\]]*\]/ig, function(match) {
var newComponent = {
id : $scope.iframeScope.dynamicSpanCycleIDs.length > 0?$scope.iframeScope.dynamicSpanCycleIDs.shift():$scope.iframeScope.component.id++,
name : "ct_span"
}
// set default options first
$scope.iframeScope.applyComponentDefaultOptions(newComponent.id, "ct_span");
// insert new component to Components Tree
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.insertComponentToTree, newComponent);
// update span options
$scope.iframeScope.component.options[newComponent.id]["model"]["ct_content"] = match;
$scope.iframeScope.setOption(newComponent.id, "ct_span", "ct_content");
return "<span id=\"ct-placeholder-"+newComponent.id+"\"></span>"
});
$scope.iframeScope.setOptionModel(option, content, $scope.iframeScope.component.active.id, $scope.iframeScope.component.active.name);
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
}
/*if($scope.iframeScope.component.active.name != 'ct_text_block')
$scope.rebuildDOM($scope.iframeScope.component.active.id);*/
$scope.actionTabs["contentEditing"] = false;
$scope.showDataPanel = false;
if(oxyDynamicList === undefined || oxyDynamicList === null || oxyDynamicList.length < 1) {
$scope.iframeScope.adjustResizeBox();
}
// Resume undo/redo watcher
$scope.iframeScope.resumeDataWatcher();
}
/**
* Open TinyMCE dialog window and set the text from ct_content
*
* @since 2.0
* @author Ilya K.
*/
$scope.openTinyMCEDialog = function() {
$scope.tinyMCEWindow = true;
var content = $scope.iframeScope.getOption("ct_content");
if ( jQuery('#wp-oxygen_vsb_tinymce-wrap').hasClass('tmce-active') && tinyMCE.get("oxygen_vsb_tinymce") ) {
tinyMCE.get("oxygen_vsb_tinymce").setContent(content);
} else{
jQuery('#oxygen_vsb_tinymce').val(content);
}
}
/**
* Close TinyMCE dialog window and set the text to ct_content
*
* @since 2.0
* @author Ilya K.
*/
$scope.closeTinyMCEDialog = function() {
$scope.tinyMCEWindow = false;
var content = "";
if ( jQuery('#wp-oxygen_vsb_tinymce-wrap').hasClass('tmce-active') && tinyMCE.get("oxygen_vsb_tinymce") ) {
content = tinyMCE.get("oxygen_vsb_tinymce").getContent();
}
else {
content = jQuery('#oxygen_vsb_tinymce').val();
}
$scope.iframeScope.setOptionModel("ct_content", content);
$scope.iframeScope.setOption($scope.component.active.id, $scope.component.active.name, "ct_content");
}
/**
* Trigger the "click" event on "browse" button for mediaurl if the user clicks
* the INPUT element. Only for Attachment ID version of mediaurl
*
* @since 2.2
*
*/
$scope.triggerBrowseButton = function($event) {
var timeout = $timeout(function() {
angular.element($event.target).next().click()
$timeout.cancel(timeout);
}, 0, false);
return false;
}
/**
* Wrap active component with link (if not already a link) and show settings
*
* @since 0.1.6
* @author Ilya K.
*/
$scope.processLink = function() {
$scope.iframeScope.cancelDeleteUndo();
if ($scope.iframeScope.log){
console.log("processLink()");
}
var linkComponentId = $scope.iframeScope.getLinkId();
if (!linkComponentId) {
// convert to Text Link
if ($scope.isActiveName("ct_text_block")) {
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTreeComponentTag, "ct_link_text");
}
else
// convert to Link Wrapper
if ($scope.isActiveName("ct_div_block")) {
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTreeComponentTag, "ct_link");
// convert all links inside div block
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTagsByName,
{from:"ct_link_text",to:"ct_text_block"});
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTagsByName,
{from:"ct_link",to:"ct_div_block"});
}
else
if ($scope.iframeScope.component.active.name === 'ct_span') {
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTreeComponentTag, "ct_link_text");
// rebuild parent
var timeout = $timeout(function() {
$scope.iframeScope.rebuildDOM($scope.iframeScope.component.active.parent.id);
$timeout.cancel(timeout);
}, 0, false);
}
// wrap with Link Wrapper
else {
var newComponentId = $scope.iframeScope.wrapComponentWith("ct_link");
$scope.iframeScope.activateComponent(newComponentId, "ct_link");
}
}
else {
$scope.iframeScope.activateComponent(linkComponentId, "ct_link");
}
var button = jQuery('.oxygen-link-button');
var timeout = $timeout(function() {
jQuery('<textarea>')
.attr('id', 'ct-link-dialog-txt')
.css('display', 'none')
.attr('data-linkProperty', button.attr('data-linkProperty'))
.attr('data-linkTarget', button.attr('data-linkTarget'))
.appendTo('body');
wpLink.open('ct-link-dialog-txt'); //open the link popup*/
jQuery('#wp-link-url').val($scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['url']);
jQuery('#wp-link-target').prop( 'checked', '_blank' === $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['target'] );
jQuery('#wp-link-wrap').removeClass('has-text-field');
jQuery('#oxygen-link-data-dialog-opener').insertAfter(jQuery('#wp-link-wrap.has-text-field #wp-link-url'));
jQuery('#oxygen-link-data-dialog').insertAfter(jQuery('#wp-link-wrap.has-text-field'));
$scope.showLinkDataDialog = false;
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
/**
* Convert link components from link Div or Text Block
*
* @since 0.3.3
* @author Ilya K.
*/
$scope.removeLink = function() {
// handle Text Link
if ($scope.isActiveName("ct_link_text")) {
var componentParent = $scope.getComponentById($scope.iframeScope.component.active.parent.id);
if ( !componentParent[0] || componentParent[0].attributes['contenteditable'] ) {
// convert a ct_link_text to ct_span
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTreeComponentTag, "ct_span");
var placeholderID = $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['selector'];
var parentContent = $scope.iframeScope.component.options[$scope.iframeScope.component.active.parent.id]["id"]['ct_content'];
$scope.cleanReplace(placeholderID, "<span id=\"ct-placeholder-"+$scope.iframeScope.component.active.id+"\"></span>");
}
else {
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTreeComponentTag, "ct_text_block");
}
}
// handle Link Wrapper
if ($scope.isActiveName("ct_link")) {
$scope.iframeScope.findComponentItem($scope.iframeScope.componentsTree.children, $scope.iframeScope.component.active.id, $scope.iframeScope.updateTreeComponentTag, "ct_div_block");
}
}
/**
* Show overlay to prevent user action when save the page, etc
*
* @since 0.1.3
*/
$scope.showLoadingOverlay = function(trigger) {
var pageOverlay = document.getElementById("ct-page-overlay");
pageOverlay = angular.element(pageOverlay);
$scope.overlaysCount++;
//console.log("showLoadingOverlay()", trigger, $scope.overlaysCount);
pageOverlay.show();
}
/**
* Remove overlay
*
* @since 0.1.3
*/
$scope.hideLoadingOverlay = function(trigger) {
var pageOverlay = document.getElementById("ct-page-overlay");
pageOverlay = angular.element(pageOverlay);
$scope.overlaysCount--;
//console.log("hideLoadingOverlay()", trigger, $scope.overlaysCount);
// hide spinner only when all overlays closed
if ($scope.overlaysCount === 0) {
if( trigger == 'savePage()' && window.parent ){
window.parent.postMessage({
type: 'blockSaved'
},'*');
}
if( !pageOverlay.hasClass("transparent") ){
pageOverlay.fadeOut(200, function(){
pageOverlay.addClass("transparent");
});
} else {
pageOverlay.hide();
}
}
}
/**
* Show widget loading overlay
*
* @since 2.0
*/
$scope.showWidgetOverlay = function(id) {
if ($scope.iframeScope.log) {
console.log("showWidgetOverlay()", id);
}
var widget = $scope.iframeScope.getComponentById(id),
position = widget.css("position");
if (position == "static") {
widget.addClass("oxygen-positioned-element");
}
widget.append("<div class='oxygen-widget-overlay'><i class='fa fa-cog fa-2x fa-spin'></i></div>");
}
/**
* Hide widget loading overlay
*
* @since 2.0
*/
$scope.hideWidgetOverlay = function(id) {
var widget = $scope.iframeScope.getComponentById(id);
jQuery(".oxygen-widget-overlay", widget).remove();
if(widget.length > 0) {
widget.removeClass("oxygen-positioned-element");
}
}
/**
* Switch action tabs
*
* @since 0.1.7
*/
$scope.switchActionTab = function(action) {
if ($scope.iframeScope.log) {
console.log("switchActionTab()", action);
}
$scope.iframeScope.selectedNodeType = null;
// Do not allow to edit the settings while editing inner_content
if( action === 'settings' && jQuery('body').hasClass('ct_inner')) {
alert('To edit the settings for this page, load the containing template in the builder.');
return;
}
// on open Add+ section
var forceComponentBrowser = false;
if ( action == "componentBrowser" ) {
$scope.showAllStylesFunc();
$scope.iframeScope.stylesheetToEdit = false;
$scope.styleTabAdvance = false;
$scope.toggleSidebar(true);
$scope.resetComponentsSearch();
if ($scope.showLeftSidebar == false) {
$scope.doShowLeftSidebar(false);
forceComponentBrowser = true;
}
}
// Check Code Block tabs
if ( $scope.tabs.advanced['cssjs'] && (
$scope.tabs.advanced['cssjs']['js'] ||
$scope.tabs.advanced['cssjs']['css'] ) &&
$scope.iframeScope.component.active.name == "ct_code_block" ) {
//$scope.switchChildTab("advanced", "background", "color");
}
// check content editing
if ( action == "contentEditing" ) {
if ( !$scope.actionTabs["contentEditing"]) {
$scope.enableContentEdit();
}
else {
$scope.disableContentEdit();
}
}
else if ( action === 'styleSheet') {
if($scope.iframeScope.stylesheetToEdit && $scope.iframeScope.stylesheetToEdit !== $scope.actionTabs[action]) {
$scope.actionTabs = {};
$scope.actionTabs[action] = $scope.iframeScope.stylesheetToEdit;
}
else {
$scope.actionTabs[action] = false;
}
}
else {
// disable content editing
$scope.disableContentEdit();
// set tab flag
if ( action == "componentBrowser" && forceComponentBrowser ) {
$scope.actionTabs[action] = true;
} else {
if ( $scope.actionTabs[action] ) {
$scope.actionTabs[action] = false;
}
else {
$scope.actionTabs = {};
$scope.actionTabs[action] = true;
}
}
}
$scope.adjustViewportContainer();
$scope.disableSelectable();
}
/**
* Activate action tabs
*
* @since 0.1.7
*/
$scope.activateActionTab = function(action) {
// check content editing
if ( action == "contentEditing" ) {
// close all tabs before enable
$scope.actionTabs = {};
$scope.enableContentEdit();
}
else {
// disable content editing
$scope.disableContentEdit();
$scope.actionTabs = {};
$scope.actionTabs[action] = true;
}
}
/**
* Client-side components filtering based on search query.
*/
$scope.filterComponents = function($event) {
var query = $scope.componentsSearchQuery;
var displayOriginalList = query ? 'none' : 'flex';
var displayFilteredList = query ? 'flex' : 'none';
searchElementOriginalList.css('display', displayOriginalList);
searchElementFilteredList.css('display', displayFilteredList);
searchElementNoResultsText.css('display', 'none');
if (!query) return;
var items = searchCache.fuse.search(query);
if (items.length === 0) {
searchElementNoResultsText.css('display', 'block');
searchElementSearchResults.css('display', 'none');
return;
}
searchElementSearchResults.removeClass('oxygen-add-search-result-highlighted');
var scores = {};
for (var i = 0; i < items.length; i++) {
scores[items[i].item.id] = items[i].score;
}
searchElementSearchResults.sort(function(a, b) {
var sa = scores[jQuery(a).data(searchIdKey)];
var sb = scores[jQuery(b).data(searchIdKey)];
// if not found, push to the end of sorted list
if (typeof(sa) === 'undefined') sa = 1.0;
if (typeof(sb) === 'undefined') sb = 1.0;
return sa - sb;
}).appendTo(searchElementSearchResultsContainer);
searchElementSearchResults.css('display', 'flex')
.each(function() {
if (!scores.hasOwnProperty(jQuery(this).data(searchIdKey))) {
jQuery(this).css('display', 'none');
}
});
getSearchElementFirstVisible().addClass('oxygen-add-search-result-highlighted');
}
/**
* Reset component search.
*/
$scope.resetComponentsSearch = function() {
searchElementSearchInput.val('');
angular.element(searchElementSearchInput).triggerHandler('change');
var timeout = $timeout(function() {
searchElementSearchInput.focus();
});
}
/**
* Adds first filtered component from the toolbar, if search query is not empty.
*/
$scope.addFilteredComponent = function($event) {
if (!$scope.componentsSearchQuery) return;
$timeout(function() {
var firstSearchResult = getSearchElementFirstVisible();
if (firstSearchResult.data(searchIdKey).startsWith('__reusable_')) {
// reusable components click "Single" option on Enter
angular.element(firstSearchResult.find('.oxygen-add-section-element-option:first')[0]).triggerHandler('click')
} else {
angular.element(firstSearchResult[0]).triggerHandler('click');
}
});
}
/**
* Check if action tab is active
*
* @since 0.1.7
*/
$scope.isActiveActionTab = function(action) {
return ( $scope.actionTabs[action] ) ? true : false;
}
$scope.showBackgroundLayer = function($event) {
angular.element($event.target).closest('ul').find('> li > div').hide();
angular.element($event.target).siblings('div').toggle();
}
$scope.toggleActiveForEditBgLayer = function(index, $event) {
if($scope.activeForEditBgLayer === index) {
$scope.activeForEditBgLayer = false;
}
else {
$scope.activeForEditBgLayer = index;
}
}
$scope.addBackgroundLayer = function(layerType) {
var type = typeof($scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['background-layers']);
if(type === 'string' || type === 'undefined') {
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['background-layers'] = [];
}
var layer = {
type: layerType
}
if(layerType === 'image') {
//units
layer['background-size-width-unit'] = 'px';
layer['background-size-height-unit'] = 'px';
//units
layer['background-position-left-unit'] = 'px';
layer['background-position-top-unit'] = 'px';
}
else if(layerType === 'gradient') {
layer['colors'] = [];
layer['radial-position-top-unit'] = '%';
layer['radial-position-left-unit'] = '%';
}
var layers = $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['background-layers'];
layers.push(layer);
$scope.iframeScope.setOptionModel('background-layers', layers);
}
$scope.addGradientColor = function() {
var id = $scope.iframeScope.component.active.id;
var name = $scope.iframeScope.component.active.name;
var gradient = $scope.iframeScope.component.options[id]['model']['gradient'];
var type = typeof(gradient);
if(type === 'string' || type === 'undefined') {
gradient = {};
}
gradient['colors'] = gradient['colors'] || [];
gradient['colors'].push({
'position-unit': 'px'
})
$scope.iframeScope.component.options[id]['model']['gradient'] = gradient;
$scope.iframeScope.setOption(id, name, 'gradient');
}
$scope.removeBackgroundLayer = function($event) {
var index = angular.element($event.target).closest('li').index();
var layers = $scope.iframeScope.getOption('background-layers');
layers.splice(index, 1);
$scope.iframeScope.setOptionModel('background-layers', layers);
}
$scope.removeGradientColor = function($event, index) {
var gradient = $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['gradient'];
gradient['colors'].splice(index, 1);
$scope.iframeScope.setOptionModel('gradient', gradient);
}
$scope.setGradientForBG = function() {
var gradient = $scope.iframeScope.getOption('gradient');
$scope.iframeScope.setOptionModel('gradient', gradient);
}
$scope.toggleGradientRadio = function(param, value, index, $event) {
// specific to background layers
var gradient = $scope.iframeScope.getOption('gradient');
if(gradient[param] === value) {
delete(gradient[param]);
angular.element($event.target).prop('checked', false);
}
else {
gradient[param] = value;
}
$scope.iframeScope.setOptionModel('gradient', gradient);
}
$scope.removeCustomAttribute = function($event, index) {
var customAttributes = $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['custom-attributes'];
customAttributes.splice(index, 1);
$scope.iframeScope.setOptionModel('custom-attributes', customAttributes);
}
$scope.toggleCustomAttribute = function(index) {
if ($scope.isCustomAttributePinned(index)) {
$scope.unpinCustomAttribute(index)
}
else {
$scope.pinCustomAttribute(index)
}
}
$scope.pinCustomAttribute = function(index) {
var customAttributes = $scope.iframeScope.getOption('custom-attributes');
if (customAttributes[index]) {
customAttributes[index].pinned = true;
$scope.iframeScope.setOptionModel('custom-attributes', customAttributes);
}
}
$scope.unpinCustomAttribute = function(index) {
var customAttributes = $scope.iframeScope.getOption('custom-attributes');
if (customAttributes[index]) {
customAttributes[index].pinned = false;
$scope.iframeScope.setOptionModel('custom-attributes', customAttributes);
}
}
$scope.isCustomAttributePinned = function(index) {
var customAttributes = $scope.iframeScope.getOption('custom-attributes');
if (!customAttributes[index]) {
return false
}
return customAttributes[index].pinned;
}
$scope.addCustomAttribute = function() {
var id = $scope.iframeScope.component.active.id;
var name = $scope.iframeScope.component.active.name;
var customAttributes = $scope.iframeScope.component.options[id]['model']['custom-attributes'];
var type = typeof(customAttributes);
if(type === 'string' || type === 'undefined') {
customAttributes = [];
}
customAttributes.push({
name: "",
value: "",
})
$scope.iframeScope.component.options[id]['model']['custom-attributes'] = customAttributes;
$scope.iframeScope.setOption(id, name, 'custom-attributes');
}
/**
* Uncheck radio button
*
* @since 0.2.3
*/
$scope.radioButtonClick = function(componentName, paramName, paramValue) {
if ($scope.iframeScope.log) {
console.log("radioButtonClick()", componentName, paramName, paramValue);
}
var modelValue = $scope.iframeScope.getOption(paramName),
defaultValue = $scope.iframeScope.defaultOptions[componentName][paramName];
if ($scope.iframeScope.isEditing("custom-selector")) {
var idValue = $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]["model"][paramName];
}
else {
var idValue = $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]["id"][paramName];
}
//console.log(modelValue, defaultValue, paramValue, idValue);
if ($scope.iframeScope.isEditing("id") && !$scope.iframeScope.isEditing("media") && !$scope.iframeScope.isEditing("state")) {
// set
if ( modelValue == paramValue && !idValue ) {
$scope.iframeScope.setOptionModel(paramName, paramValue);
}
}
else {
idValue = true;
}
// unset
if ( modelValue == paramValue && idValue ) {
$scope.iframeScope.setOptionModel(paramName, "");
}
// Only one modal can be in "live preview" model at once
if( componentName == "ct_modal" ) {
if( typeof $scope.currentModal === 'undefined' ) {
$scope.currentModal = $scope.iframeScope.component.active.id;
} else if( $scope.currentModal != $scope.iframeScope.component.active.id ) {
if(paramValue == "2") {
if($scope.iframeScope.component.options[$scope.currentModal]["model"]["behavior"] == "2") $scope.iframeScope.setOptionModel( "behavior", "1", $scope.currentModal );
$scope.currentModal = $scope.iframeScope.component.active.id;
}
}
}
}
$scope.acfRepeaterDynamicDialogProcess = function(id) {
$scope.iframeScope.dynamicShortcodesContentMode[0]['children'] = _.reject($scope.iframeScope.dynamicShortcodesContentMode[0]['children'], function(item) { return item.data == 'acfreparray'});
$scope.iframeScope.dynamicShortcodesImageMode[0]['children'] = _.reject($scope.iframeScope.dynamicShortcodesImageMode[0]['children'], function(item) { return item.data == 'acfreparray'});
$scope.iframeScope.dynamicShortcodesLinkMode[0]['children'] = _.reject($scope.iframeScope.dynamicShortcodesLinkMode[0]['children'], function(item) { return item.data == 'acfreparray'});
if(!id) {
return;
}
var repeater = $scope.iframeScope.component.options[id]['model'] ? $scope.iframeScope.component.options[id]['model']['acf_repeater'] : null;
if(repeater && repeater != '') {
var fields = {};
$scope.iframeScope.acfRepeaters[repeater]['fields'].forEach(function(item) {
fields[item.label] = item.name;
});
var data = {
name: "Repeater Field",
data:"acfreparray",
properties: [
{
data: "field",
name:"Field",
type:"select",
options: fields
},
{
data: "repeater",
type: "hidden",
value: repeater
}
]
};
$scope.iframeScope.dynamicShortcodesContentMode[0]['children'].push(data);
$scope.iframeScope.dynamicShortcodesImageMode[0]['children'].push(data);
$scope.iframeScope.dynamicShortcodesLinkMode[0]['children'].push(data);
}
}
/**
* Uncheck radio button
*
* @since 2.0
* @author Ilya K.
*/
$scope.globalSettingsRadioButtonClick = function(obj, param, value) {
if ($scope.iframeScope.log) {
console.log("globalSettingsRadioButtonClick()", param, value);
}
if (obj[param] == value) {
obj[param] = "";
}
}
/**
* Show pop-up dialog with options
*
* @since 0.2.3
*/
$scope.showDialogWindow = function() {
$scope.dialogWindow = true;
}
/**
* Hide pop-up dialog with options
*
* @since 0.2.3
*/
$scope.hideDialogWindow = function() {
$scope.dialogWindow = false;
// hide forms
$scope.dialogForms = [];
jQuery(document).off("keydown", $scope.switchComponent);
}
/**
* Enable/disable selectable for DOM Tree
*
* @since 0.2.4
* @deprecated
*/
$scope.switchSelectable = function() {
if ( $scope.isSelectableEnabled ) {
$scope.disableSelectable();
}
else {
$scope.enableSelectable();
}
}
/**
* Enable selectable for DOM Tree
*
* @since 0.2.4
* @deprecated
*/
$scope.enableSelectable = function() {
if ( $scope.isSelectableEnabled ) {
return;
}
if ($scope.iframeScope.log) {
console.log("enableSelectable()");
}
// fake component
$scope.activateComponent(-2); // "-1" is for custom selectors
$scope.isSelectableEnabled = true;
// init nuSelecatble plugin
$scope.selectable = angular.element("#ct-dom-tree").nuSelectable({
items: '.ct-dom-tree-name',
selectionClass: 'ct-selection-box',
selectedClass: 'ct-selected-dom-node',
autoRefresh: 'true',
onMove: function(selected) {
if (selected.length > 0 ) {
$scope.isDOMNodesSelected = true;
}
else {
$scope.isDOMNodesSelected = false;
};
$scope.$apply();
},
onMouseDown: function() {
$scope.isDOMNodesSelected = false;
$scope.$apply();
}
});
}
/**
* Disable selectable for DOM Tree
*
* @since 0.2.4
* @deprecated
*/
$scope.disableSelectable = function() {
return false;
if ( !$scope.isSelectableEnabled ) {
return;
}
$scope.isSelectableEnabled = false;
// remove data and events
if ( $scope.selectable ) {
$scope.selectable.removeData();
$scope.selectable.unbind('mousedown mouseup');
}
// clear selection
$scope.selectable.find('.ct-selected-dom-node').removeClass('ct-selected-dom-node');
// activate root
$scope.activateComponent(0, 'root');
}
/**
* Check if componenet is in viewport
*
* @since 0.3.0
*/
$scope.isElementInViewport = function(el, threshold) {
//special bonus for those using jQuery
if (typeof jQuery === "function" && el instanceof jQuery) {
el = el[0];
}
if (typeof el.getBoundingClientRect !== "function") {
return false;
}
var rect = el.getBoundingClientRect();
if ( rect.top >= ($scope.artificialViewport[0].contentWindow.innerHeight || $scope.artificialViewport[0].contentWindow.document.documentElement.clientHeight) ) {
return "below";
}
var bottom = threshold ? (rect.top+threshold):rect.bottom;
if ( bottom <= 0 ) {
return "above";
}
return "visible";
//rect.top >= 0 &&
//rect.left >= 0 &&
//rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) //&& /*or $(window).height() */
//rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
}
/**
* Smooth scroll window to component by selector
*
* @since 0.3.0
*/
$scope.scrollToComponent = function(selector, threshold) {
if(typeof(threshold) === 'undefined') {
threshold = 100;
}
if ($scope.iframeScope.log) {
console.log("scrollToComponent() #"+ selector);
}
var target = false;
try {
target = $scope.artificialViewport.contents().find('#'+selector);
}
catch(e) {
return;
}
if ( $scope.isElementInViewport(target, threshold) == "above" ) {
$scope.artificialViewport.contents().find('html,body').stop().animate({
scrollTop: target.offset().top - 100
}, 500);
}
if ( $scope.isElementInViewport(target, threshold) == "below" ) {
$scope.artificialViewport.contents().find('html,body').stop().animate({
scrollTop: target.offset().top - window.innerHeight + target.outerHeight() + 100
}, 500);
}
};
/**
* Programmatically trigger CodeMirror editor blur event
* to make code apply when clicking in DOM Tree
*
* @since 0.4.0
* @author Ilya K.
*/
$scope.triggerCodeMirrorBlur = function(id) {
if ( !$scope.bubble ) {
var editor = jQuery('.CodeMirror', $scope.oxygenUIElement)[0];
if (editor) {
/**
* Taken from codemirror.js onBlur() function
*/
var cm = editor.CodeMirror;
if (cm.state.focused) {
var handlers = editor.CodeMirror._handlers && editor.CodeMirror._handlers["blur"];
for (var i = 0; i < handlers.length; ++i) handlers[i].apply(null);
cm.state.focused = false;
jQuery(cm.display.wrapper).removeClass("CodeMirror-focused");
}
clearInterval(cm.display.blinker);
setTimeout(function() {if (!cm.state.focused) cm.display.shift = false;}, 150);
}
}
// prevent propagation
$scope.bubble = true;
if (id==0) {
$scope.bubble = false;
}
};
/**
* Add CodeMirror events
*
* @since 0.4.0
* @author Ilya K.
*/
$scope.codemirrorLoaded = function(_editor){
var timeout = $timeout(function() {
// make sure gutter height is updated
_editor.refresh();
$timeout.cancel(timeout);
}, 0, false);
_editor.on("change", function(){
var timeout = $timeout(function() {
//console.log("codemirrorChangeTimeout()", $scope.iframeScope.component.active.id, $scope.latesetCodeEditorComponentId)
$scope.latesetCodeEditorComponentId = $scope.iframeScope.component.active.id;
$timeout.cancel(timeout);
}, 0, false);
})
_editor.on("focus", function(){
console.log("Editor focus");
$scope.iframeScope.pauseDataWatcher();
});
_editor.on("blur", function(){
console.log("Editor blur");
$scope.iframeScope.resumeDataWatcher();
});
// Update Code Block on Codemirror editor focus out
_editor.on("blur", function(){
//console.log("codemirrorBlur()", $scope.latesetCodeEditorComponentId)
switch (_editor.options.type) {
// Code Block
case "css":
//$scope.applyCodeBlockCSS(); // Live edit enabled at the moment
break;
case "js":
$scope.iframeScope.applyCodeBlockJS($scope.latesetCodeEditorComponentId);
break;
case "php":
$scope.iframeScope.applyCodeBlockPHP($scope.latesetCodeEditorComponentId);
break;
// Component
case "custom-css":
//$scope.applyComponentCSS(); // Live edit enabled at the moment
break;
case "custom-js":
$scope.iframeScope.applyComponentJS($scope.latesetCodeEditorComponentId);
break;
// Stylesheet
case "stylesheet":
//$scope.applyStyleSheet($scope.stylesheetToEdit); // Live edit enabled at the moment
break;
}
});
};
/**
* Show status with a status message
*
* @since 2.0
* @author Ilya K.
*/
$scope.showStatusBar = function(status) {
$scope.statusMessage = status;
$scope.statusBarActive = true;
}
/**
* Hide status bar
*
* @since 2.0
* @author Ilya K.
*/
$scope.hideStatusBar = function() {
$scope.statusBarActive = false;
var timeout = $timeout(function() {
$scope.statusMessage = "";
$timeout.cancel(timeout);
}, 400, false);
}
/**
* Insert HTML
*
* @since 2.0
* @author Ilya K.
*/
$scope.cleanInsertUI = function(element, parentElement, index) {
if ($scope.iframeScope.log) {
console.log("cleanInsertUI()",parentElement,index);
}
if ( parentElement ) {
parentElement = jQuery(parentElement);
parentElement.html("");
$scope.insertAtIndexUI(element, parentElement, index);
}
else {
angular.element(element).replaceWith(element);
}
}
/**
* Compile and insert HTML with ng-attrs
*
* @since 3.0
* @author Ilya K.
*/
$scope.compileInsertUI = function(element, parentElement, index) {
angular.element(document).injector().invoke(['$compile',function($compile) {
var newScope = $scope.$new();
var compiledElement = $compile(element)(newScope);
if ( parentElement ) {
parentElement = jQuery(parentElement);
$scope.insertAtIndexUI(compiledElement, parentElement, index);
}
else {
angular.element(element).replaceWith(compiledElement);
}
}]);
}
/**
* Insert child DOM element at a specific index in a parent element
*
* @since 0.1.7
* @author Ilya K.
*/
$scope.insertAtIndexUI = function(child, parent, index) {
if ( index === 0 ) {
parent.prepend(child);
}
else if ( index > 0 ) {
jQuery(">*:nth-child("+index+")", parent).after(child);
}
else {
parent.append(child);
}
}
$scope.applyMenuAim = function() {
jQuery('.oxygen-add-section-library-flyout-panel').off('mouseleave');
jQuery('.oxygen-add-section-library-flyout-panel').off('mouseenter');
jQuery('.oxygen-add-section-library-flyout-panel').on('mouseenter', function() {
jQuery(this).addClass('oxygen-add-section-library-flyout-panel-open');
});
jQuery('.oxygen-add-section-library-flyout-panel').on('mouseleave', function() {
jQuery(this).removeClass('oxygen-add-section-library-flyout-panel-open');
jQuery('.oxygen-add-section-library-menu-subcategories a.oxygen-add-section-library-menu-subcategories-active').removeClass('oxygen-add-section-library-menu-subcategories-active');
});
setTimeout(function() {
jQuery('.oxygen-add-section-library-menu-subcategories').menuAim({
activate: function(e) {
jQuery('.oxygen-add-section-library-flyout-category').css('display', 'none');
jQuery('#category-' + jQuery(e).data('cat')).css('display', 'block');
jQuery(e).addClass('oxygen-add-section-library-menu-subcategories-active');
jQuery('.oxygen-add-section-library-flyout-panel').addClass('oxygen-add-section-library-flyout-panel-open');
},
deactivate: function(e) {
jQuery('.oxygen-add-section-library-menu-subcategories a.oxygen-add-section-library-menu-subcategories-active').removeClass('oxygen-add-section-library-menu-subcategories-active');
jQuery('.oxygen-add-section-library-flyout-panel').removeClass('oxygen-add-section-library-flyout-panel-open');
},
exitMenu: function(e) {
setTimeout(function() {
if(!jQuery('.oxygen-add-section-library-flyout-panel').hasClass('oxygen-add-section-library-flyout-panel-open')) {
jQuery('.oxygen-add-section-library-menu-subcategories a.oxygen-add-section-library-menu-subcategories-active').removeClass('oxygen-add-section-library-menu-subcategories-active');
}
}, 100);
jQuery('.oxygen-add-section-library-flyout-panel').removeClass('oxygen-add-section-library-flyout-panel-open');
},
rowSelector: "> a",
});
}, 100);
}
/**
* All UI/jQuery stuff here
*
* @since 0.3
*/
$scope.setupUI = function() {
// unfocus colorpicker to prevent digest infinte loop on Enter keydown
jQuery('body').on('mouseup', function() {
jQuery('.iris-square-value:focus').blur();
});
/**
* Hide Colorpicker on iframe document click
*/
jQuery($scope.artificialViewport[0].contentWindow.document)
.on("click", function(e) {
// needed to hide colorpicker
if(!e.target.getAttribute('contenteditable')&&!jQuery(e.target).closest('.ct-active').attr('contenteditable'))
jQuery("html,body").trigger("click");
})
jQuery(document).ready(function() {
jQuery('body').on('change', '#oxygen-stylesheet-folder-dropdown', function(e) {
$scope.iframeScope.stylesheetToEdit['parent'] = jQuery(e.target).val();
$scope.$apply();
});
});
/**
* Apply sticky-header class if scrolled enough
*/
$scope.scrollTopOld = 0;
jQuery($scope.artificialViewport[0].contentWindow).scroll(function() {
$scope.adjustStickyHeaders($scope.artificialViewport[0].contentWindow)
})
$scope.adjustStickyHeaders = function(windowObj) {
$scope.artificialViewport.contents().find(".oxy-sticky-header").each(function(){
// skip header with no ng-attributes, this is reusable part and have js code in place already
if (jQuery(this).attr("ng-attr-component-id")===undefined) {
return;
}
var headerID = jQuery(this).attr("ng-attr-component-id"),
selector = "#"+$scope.iframeScope.component.options[headerID]["selector"],
header = $scope.artificialViewport.contents().find(selector),
scrollval = $scope.iframeScope.component.options[headerID]["model"]["sticky_scroll_distance"],
onlyUpward = $scope.iframeScope.component.options[headerID]["model"]["sticky_header_upward"],
isFade = $scope.iframeScope.component.options[headerID]["model"]["sticky_header_fade_in"] == 'yes',
stickySize = parseInt($scope.iframeScope.getMediaMinSize($scope.iframeScope.component.options[headerID]['model']['sticky-media'])) || 0;
if (onlyUpward=='yes') { // easiest but not the most intelegnece way
if ( (!scrollval || scrollval < 1 || jQuery(windowObj).scrollTop() > scrollval) &&
jQuery(windowObj).scrollTop() < $scope.scrollTopOld ){
if ($scope.artificialViewport.width() > stickySize && !header.hasClass("oxy-sticky-header-active")){
if (header.css('position')!='absolute') {
$scope.artificialViewport.contents().find("body").css("margin-top", header.outerHeight());
}
header.addClass("oxy-sticky-header-active");
if (isFade) {
header.addClass("oxy-sticky-header-fade-in");
}
}
}
else {
header.removeClass("oxy-sticky-header-fade-in").removeClass("oxy-sticky-header-active");
if (header.css('position')!='absolute') {
$scope.artificialViewport.contents().find("body").css("margin-top", "");
}
}
}
else {
if (!scrollval || scrollval < 1 || jQuery(windowObj).scrollTop() > scrollval ){
if ($scope.artificialViewport.width() > stickySize && !header.hasClass("oxy-sticky-header-active")){
if (header.css('position')!='absolute') {
$scope.artificialViewport.contents().find("body").css("margin-top", header.outerHeight());
}
header.addClass("oxy-sticky-header-active");
if (isFade) {
header.addClass("oxy-sticky-header-fade-in");
}
}
}
else {
header.removeClass("oxy-sticky-header-fade-in").removeClass("oxy-sticky-header-active");
if (header.css('position')!='absolute') {
$scope.artificialViewport.contents().find("body").css("margin-top", "");
}
}
}
$scope.scrollTopOld = jQuery(windowObj).scrollTop();
})
}
/**
* Highlight components on hover
*/
// DOM
$scope.builderElement
.on("mouseover", ".ct-component:not(.ct-contains-oxy)", function(e){
e.stopPropagation();
$scope.artificialViewport.contents().find('.ct-highlight').removeClass('ct-highlight');
// in case we are editing the ct_inner content, then no need to hilight the outer template elements
if(jQuery('body').hasClass('ct_inner')
&& (jQuery(this).hasClass('ct-inner-content') || jQuery(this).closest('.ct-component.ct-inner-content').length < 1 )) {
return;
}
if (jQuery(this).parent().is('.oxy-header-container')) {
// highlight header row when hover left/right/center sections
jQuery(this).parents('.oxy-header-row').addClass('ct-highlight');
}
else {
jQuery(this).addClass('ct-highlight');
}
})
.on("mouseout", ".ct-component", function(e){
e.stopPropagation();
if (jQuery(this).parent().is('.oxy-header-container')) {
// highlight header row when hover left/right/center sections
jQuery(this).parents('.oxy-header-row').removeClass('ct-highlight');
}
jQuery(this).removeClass('ct-highlight');
})
$scope.oxygenUIElement
// DOM Tree
.on("mouseover", ".ct-dom-tree-node-anchor", function(e){
var componentId = jQuery(this).attr("ng-attr-node-id");
$scope.artificialViewport.contents().find('.ct-component[ng-attr-component-id="'+componentId+'"]').addClass('ct-highlight');
})
.on("mouseout", ".ct-dom-tree-node-anchor", function(e){
var componentId = jQuery(this).attr("ng-attr-node-id");
$scope.artificialViewport.contents().find('.ct-component[ng-attr-component-id="'+componentId+'"]').removeClass('ct-highlight');
})
// Resize box titlebar
$scope.artificialViewport.contents().find('body')
.on("mouseover", "#oxygen-resize-box-parent-titlebar, .oxygen-resize-box-top", function(e){
var componentId = $scope.iframeScope.component.active.parent.id;
$scope.artificialViewport.contents().find('.ct-component[ng-attr-component-id="'+componentId+'"]').addClass('ct-highlight');
})
.on("mouseout", "#oxygen-resize-box-parent-titlebar, .oxygen-resize-box-top", function(e){
var componentId = $scope.iframeScope.component.active.parent.id;
$scope.artificialViewport.contents().find('.ct-component[ng-attr-component-id="'+componentId+'"]').removeClass('ct-highlight');
})
/*
* Open colorpciker on Global color label click
*/
$scope.oxygenUIElement
.on("click", ".oxy-global-color-label", function(e){
if(CtBuilderAjax.freeVersion) {
$scope.showDialogWindow();
$scope.dialogForms['showProGlobalColorEditDialog'] = true;
return;
}
if (jQuery(e.target).is('.oxy-global-color-label-remove')) {
// skip if just removing the global color
return;
}
var activeColorPicker = jQuery('.wp-picker-active');
if (activeColorPicker.length===0) {
$scope.editGlobalColor = true;
}
jQuery(e.target).siblings(".oxygen-color-picker-color").find(".wp-color-result").trigger('click');
e.stopPropagation();
})
/*
* Global colors panel
*/
jQuery('body').on('click.wpcolorpicker', function(e) {
var activeColorPicker = jQuery('.wp-picker-active'),
input = activeColorPicker.parents('.oxygen-color-picker').find('.oxygen-color-picker-color + input'),
globalColorID = $scope.iframeScope.getGlobalColorID(input.val());
$scope.globalColorToEdit = {};
if (globalColorID && $scope.editGlobalColor) {
$scope.activeGlobalColor = $scope.iframeScope.getGlobalColor(globalColorID);
$scope.globalColorToEdit = $scope.iframeScope.getGlobalColor(globalColorID);
}
else {
$scope.activeGlobalColor = false;
}
$scope.editGlobalColor = false;
// safely apply scope
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
if ($scope.globalColorToEdit.id!==undefined) {
jQuery(".oxygen-global-colors-wrap",activeColorPicker).remove();
return false;
}
// don't show for Settings > Global Colors
if (jQuery(".oxy-settings-global-styles-color",activeColorPicker).length) {
return false;
}
var globalColorsHTML =
'<div class="oxygen-global-colors-wrap">' +
'<div class="oxygen-global-colors-sets">' +
'<div class="oxygen-global-colors-set" ' +
'ng-repeat="(setID,set) in iframeScope.globalColorSets.sets" ' +
'ng-show="iframeScope.globalColorSetHasColors(set.id)">' +
'<div class="oxygen-global-colors-set-heading">' +
'<h2>{{set.name}}</h2>' +
'</div>' +
'<div class="oxygen-global-colors">' +
//'<div class="oxygen-add-global-color-button" ' +
//'ng-click="$parent.colorSetNameToAdd=set.name;$parent.colorSetIDToAdd=set.id">+ add color</div>' +
'<div class="oxygen-global-color" title="{{color.name}}"' +
'ng-repeat="(key,color) in iframeScope.globalColorSets.colors | filter: {set: set.id}" ' +
'ng-style="{backgroundColor:color.value}" '+
'ng-class="{\'oxygen-active-global-color\':color.id==activeGlobalColor.id}" '+
'ng-click="setGlobalColor(color.id,$event)"></div>' +
'</div>' +
'</div>' +
'</div>' +
'<div class="oxygen-manage-global-colors-link" ' +
'ng-click="toggleSettingsPanel(true);switchTab(\'settings\',\'colors\')">Manage Colors</div>' +
'</div>';
jQuery('.wp-picker-holder', activeColorPicker).each(function(){
var picker = jQuery(this);
// add if global colors is not yet added for this colorpicker
if (jQuery(".oxygen-global-colors-wrap",picker).length===0) {
picker.append($compile(globalColorsHTML)($scope))
}
});
});
// Global Color label close
jQuery('body').on('click', '.oxy-global-color-label-remove', function(e) {
var input = jQuery(this).parents('.oxygen-color-picker').find('input');
input.val("");
angular.element(input).triggerHandler('input');
})
/**
* Special property messages
*/
jQuery("body")
// Not available for classes
.on("mouseover", ".oxygen-editing-class:not(.oxygen-editing-media) .not-available-for-classes:not(.oxygen-active-select)", function(e){
var $this = jQuery(this);
if ($this.find('.oxygen-active-select').length) {
return;
}
jQuery('#oxy-no-class-msg').css({
"display": "block",
"top": $this.offset().top + $this.height(),
});
})
.on("mouseleave", ".oxygen-editing-class:not(.oxygen-editing-media) .not-available-for-classes", function(e){
jQuery('#oxy-no-class-msg').css({
"display": "none",
});
})
// not available for media
.on("mouseover", ".oxygen-editing-media:not(.oxygen-editing-class) .not-available-for-media:not(.oxygen-active-select)", function(e){
var $this = jQuery(this);
if ($this.find('.oxygen-active-select').length) {
return;
}
jQuery('#oxy-no-media-msg').css({
"display": "block",
"top": $this.offset().top + $this.height(),
});
})
.on("mouseleave", ".oxygen-editing-media:not(.oxygen-editing-class) .not-available-for-media", function(e){
jQuery('#oxy-no-media-msg').css({
"display": "none",
});
})
// not available for classes and media
.on("mouseover", ".oxygen-editing-class.oxygen-editing-media .not-available-for-media.not-available-for-classes:not(.oxygen-active-select)", function(e){
var $this = jQuery(this);
if ($this.find('.oxygen-active-select').length) {
return;
}
jQuery('#oxy-no-class-no-media-msg').css({
"display": "block",
"top": $this.offset().top + $this.height(),
});
})
.on("mouseleave", ".oxygen-editing-class.oxygen-editing-media .not-available-for-media.not-available-for-classes", function(e){
jQuery('#oxy-no-class-no-media-msg').css({
"display": "none",
});
})
.on("mouseover", ".oxygen-editing-class.oxygen-editing-media .not-available-for-media:not(.not-available-for-classes, .oxygen-active-select)", function(e){
var $this = jQuery(this);
if ($this.find('.oxygen-active-select').length) {
return;
}
jQuery('#oxy-no-media-msg').css({
"display": "block",
"top": $this.offset().top + $this.height(),
});
})
.on("mouseleave", ".oxygen-editing-class.oxygen-editing-media .not-available-for-media:not(.not-available-for-classes)", function(e){
jQuery('#oxy-no-media-msg').css({
"display": "none",
});
})
.on("mouseover", ".oxygen-editing-class.oxygen-editing-media :not(.not-available-for-media, .oxygen-active-select).not-available-for-classes", function(e){
var $this = jQuery(this);
if ($this.find('.oxygen-active-select').length) {
return;
}
jQuery('#oxy-no-class-msg').css({
"display": "block",
"top": $this.offset().top + $this.height(),
});
})
.on("mouseleave", ".oxygen-editing-class.oxygen-editing-media :not(.not-available-for-media).not-available-for-classes", function(e){
jQuery('#oxy-no-class-msg').css({
"display": "none",
});
})
/**
* Selector Choose Input
*/
$scope.oxygenUIElement
.on('click', '.oxygen-selector-browse', function(e) {
jQuery('body').addClass('choosing-selector');
$scope.iframeScope.enterChoosingSelectorMode( jQuery(e.target).data('option') );
})
jQuery('#ct-ui-overlay')
.on('click' ,function(e) {
jQuery('body').removeClass('choosing-selector');
$scope.iframeScope.exitChoosingSelectorMode( jQuery(e.target).data('option') );
})
$scope.exitChoosingSelectorMode = function() {
jQuery('body').removeClass('choosing-selector');
}
/**
* Media upload
*/
/**
* In order to make this functionality available for foreground images as well,
* this function relies on data- attributes provided in the .oxygen-file-input-browse html element
* this attributes can be as follows
* data-mediaTitle for the title of the media dialog
* data-mediaButton for the text of the 'insert' button on the media dialog
* data-mediaProperty for specifying the model's param that will be updated with the url
* data-heightProperty for updating the height
* data-widthProperty for updating the width
*
*/
$scope.oxygenUIElement
.on('click', '.oxygen-file-input-browse', function(e) {
// save the target in scope
$scope.mediaUploadTarget = jQuery(e.target);
var mediaType = $scope.mediaUploadTarget.attr('data-mediaType');
if(!$scope.media_uploader[mediaType]) {
var options = {
title: $scope.mediaUploadTarget.attr('data-mediaTitle') || 'Set Image',
button:{
text: $scope.mediaUploadTarget.attr('data-mediaButton') || 'Set Image',
},
library:{
type: $scope.mediaUploadTarget.attr('data-mediaContent') || 'image'
},
multiple: $scope.mediaUploadTarget.attr('data-mediaMultiple') || false,
}
if ($scope.mediaUploadTarget.attr('data-mediaMultiple')=='true') {
options.state = 'gallery';
options.frame = 'post';
}
$scope.media_uploader[mediaType] = wp.media(options);
// gallery
$scope.media_uploader[mediaType].on("update", function(selection){
var ids = [];
selection.each( function( image ) {
ids.push( image.get( 'id' ) );
} );
$scope.iframeScope.setOptionModel($scope.mediaUploadTarget.attr('data-mediaProperty'), ids.join(","));
$scope.iframeScope.renderComponentWithAJAX('oxy_render_gallery');
$scope.$apply();
});
// single
$scope.media_uploader[mediaType].on("select", function(){
var json = $scope.media_uploader[mediaType].state().get("selection").first().toJSON();
var returnValue = $scope.mediaUploadTarget.attr('data-returnValue') || 'url';
//console.log(json);
// update scope and model
if($scope.mediaUploadTarget.attr('data-fieldId')) {
jQuery('#'+$scope.mediaUploadTarget.attr('data-fieldId')).val(json[returnValue]).trigger('change');
}
else {
$scope.iframeScope.setOptionModel($scope.mediaUploadTarget.attr('data-mediaProperty'), json[returnValue]);
if( returnValue == 'id' ) {
// Actual object with width and height data for each attachment size
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id].sizes = json.sizes;
// For the attachment size dropdown
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id].size_labels = Object.keys( json.sizes );
if( typeof $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['attachment_size'] === 'undefined' ||
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id].size_labels.indexOf( $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['attachment_size'] ) == -1) {
$scope.iframeScope.setOptionModel('attachment_size', $scope.iframeScope.component.options[$scope.iframeScope.component.active.id].size_labels[0]);
}
$scope.iframeScope.setOptionModel('attachment_height', json.sizes[ $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['attachment_size'] ].height);
$scope.iframeScope.setOptionModel('attachment_width', json.sizes[ $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['attachment_size'] ].width);
$scope.iframeScope.setOptionModel('attachment_url', json.sizes[ $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['attachment_size'] ].url);
}
if ($scope.mediaUploadTarget.attr('data-mediaProperty')=='video_background') {
$scope.iframeScope.rebuildDOM($scope.iframeScope.component.active.id);
}
}
if($scope.mediaUploadTarget.attr('data-heightProperty'))
$scope.iframeScope.setOptionModel($scope.mediaUploadTarget.attr('data-heightProperty'), json.height);
if($scope.mediaUploadTarget.attr('data-widthProperty'))
$scope.iframeScope.setOptionModel($scope.mediaUploadTarget.attr('data-widthProperty'), json.width);
// set image alt attr
$scope.iframeScope.setOptionModel("alt", json.alt);
$scope.$apply();
});
}
$scope.media_uploader[mediaType].open();
})
jQuery('body')
.on('click', '#wp-link-submit', function(e) {
var attrs = wpLink.getAttrs();
$scope.iframeScope.setOptionModel(jQuery('#ct-link-dialog-txt').attr('data-linkProperty'), attrs.href);
$scope.iframeScope.setOptionModel(jQuery('#ct-link-dialog-txt').attr('data-linkTarget'), attrs.target);
$scope.$apply();
if( attrs.href.trim() === '') {
$scope.removeLink();
}
jQuery('body #ct-link-dialog-txt').remove();
wpLink.close();
})
.on('click', '#wp-link-cancel, #wp-link-close, #wp-link-backdrop', function(e) {
jQuery('body #ct-link-dialog-txt').remove();
$scope.showLinkDataDialog = false;
wpLink.close();
$scope.$apply();
});
/**
* Builder handle move
*/
var dragging = false;
// handle move start
jQuery('#ct-viewport-handle')
.mousedown(function(e){
e.preventDefault();
dragging = true;
var ghostbar = jQuery('<div>',{id: 'ct-ghost-viewport-handle'}).prependTo('#ct-viewport-ruller-wrap');
// init ghost position
var position = e.pageX-$scope.artificialViewport.offset().left-3;
ghostbar.css("left", position/$scope.viewportScale);
// adjust ghost position on move
jQuery(document).mousemove(function(e){
position = e.pageX-$scope.artificialViewport.offset().left-3;
ghostbar.css("left", position/$scope.viewportScale);
});
})
.dblclick(function(){
if ($scope.iframeScope.getCurrentMedia()!= "default") {
$scope.iframeScope.setCurrentMedia("default");
}
else {
$scope.artificialViewport.css("width", "");
$scope.hideViewportRuller();
$scope.adjustArtificialViewport();
}
});
// handle move end
jQuery(document).mouseup(function(e){
if (dragging) {
var width = e.pageX-$scope.artificialViewport.offset().left;
$scope.setMediaByWidth(width/$scope.viewportScale);
jQuery('#ct-ghost-viewport-handle').remove();
jQuery(document).unbind('mousemove');
dragging = false;
$scope.$apply();
}
});
$scope.setMediaByWidth = function(width) {
if (undefined==width) {
width = $scope.viewportContainer[0].scrollWidth;
}
var mediaName = $scope.iframeScope.getMediaNameBySize(width);
if (mediaName) {
$scope.iframeScope.setCurrentMedia(mediaName, false);
}
// adjust viewport
$scope.adjustViewport(width + "px");
$scope.adjustArtificialViewport();
$scope.adjustViewportRuller();
}
$scope.showViewportRuller = function() {
$scope.viewportRulerWrap.css("display", "block");
$scope.viewportRullerShown = true;
}
$scope.hideViewportRuller = function() {
$scope.viewportRulerWrap.css("display", "");
$scope.viewportRullerShown = false;
}
$scope.adjustViewportRuller = function() {
$scope.viewportRulerWrap.css("width", 0);
var offset = 0,
width = ($scope.viewportRullerWidth > $scope.viewportContainer.width()) ? $scope.viewportRullerWidth : $scope.viewportContainer.width() - offset - 1;
$scope.viewportRulerWrap.css({
left : offset,
width : width/$scope.viewportScale,
transform : "scale("+$scope.viewportScale+")",
});
//console.log("adjustViewportRuller()", offset, container.width() - offset);
jQuery('#ct-viewport-handle').css("left", $scope.artificialViewport.width()-3);
$scope.viewportRullerWidth = $scope.artificialViewport.width();
}
/**
* Adjust artificial viewport
*
* @since 0.3.2
*/
$scope.adjustViewport = function(size) {
//console.log("adjustViewport()", size);
$scope.artificialViewport.css("width", size);
$scope.adjustViewportRuller();
}
/**
* Adjust viewport container
*
* @since 0.3.2
*/
$scope.adjustViewportContainer = function(artificialViewportWidth) {
if ($scope.iframeScope.log) {
console.log("adjustViewportContainer()", artificialViewportWidth);
}
var sidebarWidth = $scope.verticalSidebar.width();
// DOM Tree opened, Add+ opened
if ( ($scope.showSidePanel || $scope.showSettingsPanel ) && $scope.isActiveActionTab('componentBrowser') ) {
if (artificialViewportWidth===undefined) {
artificialViewportWidth = window.innerWidth - 300 - sidebarWidth - 12
}
$scope.viewportContainer.css({
marginLeft: sidebarWidth,
width: window.innerWidth - 300 - sidebarWidth,
})
$scope.adjustArtificialViewport(artificialViewportWidth);
$scope.adjustViewportRuller();
$scope.sidePanelElement.css({
width: "300px"
});
}
else
// DOM Tree opened, Add+ closed
if ( ($scope.showSidePanel || $scope.showSettingsPanel ) && !$scope.isActiveActionTab('componentBrowser') ) {
if (artificialViewportWidth===undefined) {
artificialViewportWidth = window.innerWidth - 300 - sidebarWidth - 12
}
$scope.viewportContainer.css({
marginLeft: sidebarWidth,
width: window.innerWidth - 300 - sidebarWidth,
paddingTop: 0
});
$scope.adjustArtificialViewport(artificialViewportWidth);
$scope.adjustViewportRuller();
$scope.sidePanelElement.css({
width: "300px"
});
}
else
// DOM Tree closed, Add+ opened
if ( ( !$scope.showSidePanel && !$scope.showSettingsPanel ) && $scope.isActiveActionTab('componentBrowser') ) {
if (artificialViewportWidth===undefined) {
artificialViewportWidth = window.innerWidth - sidebarWidth - 12
}
$scope.viewportContainer.css({
marginLeft: sidebarWidth,
width: window.innerWidth - sidebarWidth,
});
$scope.adjustArtificialViewport(artificialViewportWidth);
$scope.adjustViewportRuller();
$scope.sidePanelElement.css({
width: "0"
});
}
else
// All closed
{
if (artificialViewportWidth===undefined) {
artificialViewportWidth = window.innerWidth - sidebarWidth - 12
}
$scope.viewportContainer.css({
marginLeft: sidebarWidth,
width: window.innerWidth - sidebarWidth,
paddingTop: 0
});
$scope.adjustArtificialViewport(artificialViewportWidth);
$scope.adjustViewportRuller();
$scope.sidePanelElement.css({
width: "0"
});
}
}
/**
* Adjust artificial viewport
*/
$scope.adjustArtificialViewport = function(artificialViewportWidth) {
//console.log(artificialViewportWidth);
var heightOffset = 71;
if ($scope.viewportRullerShown) {
heightOffset += 16;
}
// adjust artificial viewport based on "Page width"
if (!$scope.viewportRullerShown) {
var viewportContainerWidth = $scope.viewportContainer.width();
pageWidth = $scope.iframeScope.getWidth($scope.iframeScope.getPageWidth());
if (artificialViewportWidth===undefined) {
artificialViewportWidth = $scope.artificialViewport.width();
}
if ( pageWidth.value > artificialViewportWidth ) {
var neededSpace = parseInt($scope.iframeScope.getPageWidth()) + 20;
$scope.artificialViewport.css({
"width": neededSpace,
"min-width": ""
});
// rescale iframe if not fit
if ( !$scope.viewportScaleLocked ) {
if ( neededSpace > artificialViewportWidth ) {
var scale = artificialViewportWidth / neededSpace;
$scope.artificialViewport.css({
transform: "scale("+scale+")",
height: "calc("+(100/scale)+"vh - "+(heightOffset/scale)+"px)"});
$scope.viewportScale = scale;
}
$scope.viewportContainer.css("overflow-x","");
}
else {
$scope.artificialViewport.css({
"transform": "scale(1)",
"height": "calc(100vh - "+heightOffset+"px)",
});
$scope.viewportContainer.css("overflow-x","auto");
$scope.viewportScale = 1;
}
}
else
if ( pageWidth.value < viewportContainerWidth - 12 ) {
$scope.artificialViewport.css({
"transform": "scale(1)",
"height": "calc(100vh - "+heightOffset+"px)",
});
$scope.viewportContainer.css("overflow-x","auto");
if ( !$scope.viewportRullerShown ) {
$scope.artificialViewport.css({
"width": "",
"min-width": ""
});
}
$scope.viewportScale = 1;
//console.log("adjustArtificialViewport()", "")
}
// unset builder width
$scope.builderElement.css("width", "");
}
else {
// unset builder width
$scope.builderElement.css("width", "");
//console.log("adjustArtificialViewport()", "")
var viewportContainertWidth = $scope.viewportContainer.width(),
artificialViewportWidth = $scope.artificialViewport.width() + 20,
scale = viewportContainertWidth / artificialViewportWidth;
// rescale iframe if not fit
if ( artificialViewportWidth > viewportContainertWidth ) {
if ( !$scope.viewportScaleLocked ) {
$scope.artificialViewport.css({
transform: "scale("+scale+")",
height: "calc("+(100/scale)+"vh - "+(heightOffset/scale)+"px)"
});
$scope.viewportContainer.css("overflow-x","");
$scope.viewportScale = scale;
}
else {
$scope.artificialViewport.css({
transform: "scale(1)",
height: "calc(100vh - "+heightOffset+"px)",
marginBottom: 23
});
$scope.viewportContainer.css("overflow-x","auto");
$scope.viewportScale = 1;
}
}
else {
$scope.artificialViewport.css({
transform: "scale(1)",
height: "calc(100vh - "+heightOffset+"px)",
marginBottom: 23
});
$scope.viewportContainer.css("overflow-x","auto");
$scope.viewportScale = 1;
}
}
$scope.iframeScope.adjustResizeBox();
// safely apply scope
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
}
/**
* Lock/unlock viewport scale qo 100%
*
* @since 2.0
* @author Ilya K.
*/
$scope.lockViewportScale = function() {
$scope.viewportScaleLocked = !$scope.viewportScaleLocked;
$scope.adjustViewportContainer();
$scope.viewportContainer.scrollLeft(0);
}
/**
* Hide left sidebar
*
* @since 3.3
* @author Abdelouahed E.
*/
$scope.doHideLeftSidebar = function(adjustViewport) {
$scope.showLeftSidebar = false;
$scope.verticalSidebar.addClass('ui-collapse');
if (adjustViewport) {
$scope.adjustViewportContainer();
}
}
/**
* Show left sidebar
*
* @since 3.3
* @author Abdelouahed E.
*/
$scope.doShowLeftSidebar = function(adjustViewport) {
$scope.showLeftSidebar = true;
$scope.showButtonFlashing = false;
$scope.verticalSidebar.removeClass('ui-collapse');
if (adjustViewport) {
$scope.adjustViewportContainer();
}
}
/**
* Measureboxes
*/
$scope.oxygenUIElement
.on("click", ".oxygen-measure-box-unit-selector", function(e) {
// hide all boxes
jQuery(".oxygen-measure-box", $scope.oxygenUIElement)
.removeClass("oxygen-measure-box-unit-selector-active")
// show the box
jQuery(this).closest(".oxygen-measure-box", $scope.oxygenUIElement).addClass("oxygen-measure-box-unit-selector-active");
measureboxOutsideClick();
})
.on("click", ".oxygen-measure-box-unit", function(e) {
// hide the box
jQuery(this).closest(".oxygen-measure-box", $scope.oxygenUIElement).removeClass("oxygen-measure-box-unit-selector-active");
})
.on("click", "div:not(.oxygen-measure-box-options)>.oxygen-measure-box>input", function(e) {
// hide all boxes
jQuery(".oxygen-measure-box", $scope.oxygenUIElement)
.removeClass("oxygen-measure-box-unit-selector-active");
// show one box
jQuery(this).closest(".oxygen-measure-box", $scope.oxygenUIElement)
.find('input').focus();
measureboxOutsideClick();
})
.on("focus", ".oxygen-measure-box>input", function(e) {
// select all text
this.setSelectionRange(0, this.value.length)
jQuery(".oxygen-measure-box>input")
.removeClass("oxygen-measure-box-focused-input");
jQuery(this)
.addClass("oxygen-measure-box-focused-input")
.parents(".oxygen-four-sides-measure-box").addClass("oxygen-measure-box-focused");
})
.on("focusout", ".oxygen-measure-box>input", function(e) {
if ($scope.applyAllInProgress !== true) {
jQuery(".oxygen-measure-box-focused").removeClass("oxygen-measure-box-focused");
}
})
// make box not closed when ('html').click triggered
.on("click", ".oxygen-measure-box", function(e){
e.stopPropagation();
})
.on("click", ".oxygen-measure-box-units", function(e){
e.stopPropagation();
});
function measureboxOutsideClick() {
// close the box if user click outside it
jQuery('html').click(function(clickEvent) {
// hide all boxes
jQuery(".oxygen-measure-box", $scope.oxygenUIElement)
.removeClass("oxygen-measure-box-unit-selector-active")
.removeClass("oxygen-measure-box-active");
// unbid it immideately
jQuery(this).unbind(clickEvent);
});
}
/**
* Apply all/opposite options
*/
// mark/unmark measurebox as 'apply all'
$scope.oxygenUIElement
.on("mousedown", ".oxygen-apply-all-trigger", function(e) {
$scope.applyAllInProgress = true;
})
.on("mouseup", ".oxygen-apply-all-trigger", function(e) {
$scope.applyAllInProgress = false;
applyAll(this);
// reselect value
jQuery(".oxygen-measure-box-focused-input").focus();
// make it show again
jQuery(this).parents(".oxygen-four-sides-measure-box").addClass("oxygen-measure-box-focused");
})
function applyAll(element, value, unit) {
if ($scope.iframeScope.log) {
console.log("applyAll()");
$scope.iframeScope.functionStart("applyAll()");
}
var sizeBox = jQuery(element).parents(".oxygen-four-sides-measure-box"),
option = jQuery(".oxygen-measure-box-focused-input").data("option");
// get values from $scope if not defined
if (undefined === value) {
value = $scope.iframeScope.getOption(option);
}
if (undefined === unit) {
unit = $scope.iframeScope.getOptionUnit(option);
}
// loop all size box values to apply currently editing value
jQuery(".oxygen-measure-box>input", sizeBox).each(function(){
var option = jQuery(this).data("option"),
currentValue = $scope.iframeScope.getOption(option),
currentUnit = $scope.iframeScope.getOptionUnit(option);
if (currentValue != value) {
$scope.iframeScope.setOptionModel(option, value, $scope.iframeScope.component.active.id, $scope.iframeScope.component.active.name, true);
}
if (currentUnit != unit) {
$scope.iframeScope.setOptionUnit(option, unit, true);
}
})
// safely apply scope
var timeout = $timeout(function() {
$scope.$apply();
$timeout.cancel(timeout);
}, 0, false);
// update styles
$scope.iframeScope.outputCSSOptions($scope.iframeScope.component.active.id);
$scope.iframeScope.functionEnd("applyAll()");
}
/**
* Selects
*/
$scope.oxygenUIElement
.on("click", ".ct-select:not(.ct-ui-disabled,.ct-custom-selector)", function(e) {
if ( jQuery(this).parents('.ct-style-set-dropdown') ) {
jQuery(".ct-new-component-class-input",this).focus();
}
e.stopPropagation();
})
.on("click", ".oxygen-select", function(e) {
$scope.toggleOxygenSelectBox(e, this);
})
// don't hide the box on input click
.on("click", ".oxygen-select-box-option input", function(e) {
e.stopPropagation();
})
// media icon click
.on("click", ".oxygen-media-query-box, .oxygen-active-selector-box-state, .oxygen-active-selector-box, .oxygen-copy-to-trigger", function(e) {
var select = jQuery(this).closest('.oxygen-select'),
isActive = select.hasClass("oxygen-active-select"),
isActiveStates = select.hasClass("oxygen-active-states-select"),
isActiveClasses = select.hasClass("oxygen-active-classes-select");
$scope.closeOxygenDropdowns();
// show certain dropdown
if (!isActive) {
select.addClass("oxygen-active-select");
selectOutsideClick();
}
if (!isActiveStates && jQuery(this).hasClass('oxygen-active-selector-box-state')) {
select.addClass("oxygen-active-states-select");
selectOutsideClick();
}
if (!isActiveClasses && jQuery(this).hasClass('oxygen-active-selector-box')) {
select.addClass("oxygen-active-classes-select");
selectOutsideClick();
}
if (jQuery(this).hasClass('oxygen-copy-to-trigger')) {
var select = jQuery(this).siblings('.oxygen-copy-to-dropdown');
select.addClass("oxygen-active-copy-to-select");
selectOutsideClick();
}
e.stopPropagation();
})
// media item click
.on("click", ".oxygen-media-query-dropdown li, .oxygen-copy-to-dropdown li", function(e) {
$scope.closeOxygenDropdowns();
e.stopPropagation();
})
function selectOutsideClick() {
// close the box if user click outside it
jQuery('html').click(function(clickEvent) {
// close
jQuery(".ct-select", $scope.oxygenUIElement).removeClass("ct-active").removeClass("ct-active-media").removeClass("ct-active-states");
$scope.copySelectorFromID = false;
$scope.copySelectorFromClass = false;
// unbid it immideately
jQuery(this).unbind(clickEvent);
});
// close the box if user click outside it
jQuery('html').click(function(clickEvent) {
$scope.closeOxygenDropdowns();
// unbid it immideately
jQuery(this).unbind(clickEvent);
});
}
/**
* Helper to close media queries/classes/copy-to dropdowns
*/
$scope.closeOxygenDropdowns = function() {
jQuery(".oxygen-select", $scope.oxygenUIElement)
.removeClass("oxygen-active-select")
.removeClass("oxygen-active-copy-to-select")
.removeClass("oxygen-active-classes-select")
.removeClass("oxygen-active-states-select");
}
/**
* .on('click') callback for Select box wrapped in a function to use in templates
*/
$scope.toggleOxygenSelectBox = function(e, $this) {
if ($this == undefined) {
$this = e.currentTarget;
}
// if the click was inside a text input for new classname, do not hide the select dropdown
if(jQuery(e.target).hasClass('oxygen-classes-dropdown-input')) {
e.stopPropagation();
return;
}
var isActive = jQuery($this).hasClass("oxygen-active-select");
$scope.closeOxygenDropdowns();
// show dropdown
if (!isActive) {
jQuery($this).addClass("oxygen-active-select");
jQuery(".oxygen-overlay-property-msg").hide();
selectOutsideClick();
}
// focus on search
jQuery(".oxygen-select-box-option input",$this).focus();
e.stopPropagation();
}
/**
* Increase descrease measure values with top/bottom key press
*/
$scope.oxygenUIElement
.on("keydown", ".oxygen-measure-box>input", function(e) {
// increase
if (e.keyCode==38) {
if (this.value == parseFloat(this.value, 10)){
this.value++;
var input = jQuery(this);
input.trigger("change").trigger("input");
}
};
// decrease
if (e.keyCode==40) {
if (this.value == parseFloat(this.value, 10)){
this.value--;
var input = jQuery(this);
input.trigger("change").trigger("input");
}
}
});
// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
/**
* Open/close DOM tree node options
*/
// toggle on icon click
$scope.oxygenUIElement
.on("mousedown", ".ct-more-options-icon", function(e) {
var isExpanted = jQuery(this).parent().hasClass("ct-more-options-expanded");
$scope.optionsToOpen = jQuery(this);
// close all options
jQuery(".ct-more-options-expanded", $scope.sidePanelElement).removeClass("ct-more-options-expanded");
// open this option
if ( !isExpanted ) {
var timeout = $timeout(function(_self) {
$scope.optionsToOpen.parent().addClass("ct-more-options-expanded");
// cancel timeout
$timeout.cancel(timeout);
}, 100, false);
}
})
.on("click", ":not(.ct-more-options-icon)", function(e) {
// close all options
jQuery(".ct-more-options-expanded", $scope.sidePanelElement).removeClass("ct-more-options-expanded");
})
// fix for templates dropdown click in content edit mode
.on("mousedown", ".oxygen-template-previewing-control", function(e) {
$scope.disableContentEdit();
})
$scope.builderElement
.on("click", '.ct-active:not([contenteditable="true"])', function(e) {
$scope.disableContentEdit();
})
.on("click", '[contenteditable="true"]', function(e) {
e.stopPropagation();
})
// This is not working as ng-click triggered first. TODO: find a fix
// close on item click
//.on("click", ".ct-more-options-expanded li", function(e) {
// jQuery(this).closest('.ct-node-options').removeClass("ct-more-options-expanded");
//})
// window resize
jQuery(window).resize(function() {
$scope.adjustViewportContainer();
$scope.adjustCodeMirrorHeight();
});
jQuery(window).on('click', function(e) {
if(jQuery(e.target).closest('.ct-active').length < 1 &&
jQuery(e.target).closest('.oxygen-formatting-toolbar').length < 1 &&
jQuery(e.target).closest('#ctdynamicdata-popup').length < 1)
{
$scope.disableContentEdit();
}
/*var clickedComponent = parseInt(jQuery(e.target).closest('.ct-component').attr('ng-attr-component-id'));
$scope.iframeScope.component.active.id = clickedComponent;*/
/*if(clickedComponent === 0) {
$scope.activateComponent(0, 'root');
} else if(clickedComponent > 100000) {
$scope.activateComponent(clickedComponent, 'ct_inner_content');
}*/
// console.log($scope.iframeScope.component.active.id, parseInt(jQuery(e.target).closest('.ct-component').attr('ng-attr-component-id')));
});
/**
* Show/hide Reusable button options
*/
$scope.oxygenUIElement.on("click", ".oxygen-add-section-element", function(e) {
jQuery(this).siblings().removeClass('oxygen-add-section-element-active');
jQuery(this).toggleClass('oxygen-add-section-element-active');
});
}
/**
* Updates dynamically the contents of the Custom Fields dropdown
*
* @since 2.0
*/
$scope.updateMetaDropdown = function( ) {
var keys = $scope.current_post_meta_keys;
var keysList = "";
for( var i = 0; i < keys.length; i++ ) keysList += "<li ng-click=\"iframeScope.setOptionModel('meta_key','" + keys[ i ] + "');\">" + keys[ i ] + "</li>";
jQuery( '.ct-ct_data_custom_field-meta_key' ).find('ul.ct-dropdown-list').html( $compile( keysList )($scope) );
};
/**
* Init Select2 after $scope being loaded
*
* @since 2.0
*/
$scope.initSelect2 = function(id, placeholder) {
var select2 = jQuery("#"+id).select2({
placeholder: placeholder,
});
var timeout = $timeout(function(_self) {
select2.trigger('change');
$timeout.cancel(timeout);
}, 0, false);
}
// these are dynamic conditions specific
$scope.assignOxyCodeToCondition = function(data) {
$scope.conditionsDialogOptions.userCondition = data;
if($scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['name']!=='ZZOXYVSBDYNAMIC') {
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['value'] = '';
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['operator'] = 0;
}
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['name']='ZZOXYVSBDYNAMIC';
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['oxycode']=$scope.conditionsDialogOptions.userCondition;
$scope.dialogForms['showAddGlobalConditionName'] = null;
$scope.iframeScope.setOptionModel('globalconditions', $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions']);
$scope.evalGlobalConditions();
}
$scope.assignOxyCodeToConditionValue = function(data) {
$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['value']=data;
$scope.iframeScope.setOptionModel('globalconditions', $scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions']);
$scope.evalGlobalConditions();
}
$scope.hasGlobalConditionsUserText = function() {
return $scope.iframeScope.globalConditions[$scope.iframeScope.component.options[$scope.iframeScope.component.active.id]['model']['globalconditions'][$scope.conditionsDialogOptions.selectedIndex]['name']]['values'].find(function(item) { return item == 'USERTEXT' });
}
$scope.getConditionsResult = function(callback, conditions, id) {
if(typeof(id) === 'undefined') {
id = $scope.iframeScope.component.active.id;
}
if(typeof(conditions) === 'undefined' || conditions === null) {
conditions = $scope.iframeScope.component.options[id]['model']['globalconditions'];
}
var results = {};
var result = true;
var evaledLocaly = false;
var needsToBeEvaled = true
conditions.forEach( function(condition, index) {
//if(condition['preview'] === true) {
//needsToBeEvaled = true;
results[index] = condition;
// }
// else {
// evaledLocaly = true;
// results[index] = true;
// result = result && results[index];
// }
})
var saneConditions = conditions.filter(function(item) { return item.name != '' && item.operator !== null && item.value !== null;})
if(saneConditions.length > 0 && needsToBeEvaled) {
$scope.iframeScope.evalConditionsViaAjax({conditions: results, type: $scope.iframeScope.component.options[id]['model']['conditionstype']}, function(data) {
if(typeof(data['value']) !== 'undefined') {
result = data['value'];
}
else {
result = null;
}
if(callback) {
callback(result);
}
});
} else { // if all conditions were being previewed, then the calculation is already stored in the variable result
if(evaledLocaly) {
if(callback) {
callback(result);
}
}
else {
if(callback) {
callback(null);
}
}
}
}
$scope.evalGlobalConditionsInList = function() {
id = $scope.iframeScope.component.active.id;
if(!id) {
return;
}
var activeComponent = $scope.iframeScope.getComponentById(id);
var oxyList = activeComponent.closest('.oxy-dynamic-list');
if(oxyList.length > 0) {
$scope.iframeScope.updateRepeaterQuery(parseInt(oxyList.attr('ng-attr-component-id')));
}
}
$scope.evalGlobalConditions = function(id) {
if(typeof(id) === 'undefined') {
id = $scope.iframeScope.component.active.id;
}
if(!id) {
return;
}
var activeComponent = $scope.iframeScope.getComponentById(id);
var oxyDynamicList;
if(activeComponent) {
oxyDynamicList = activeComponent.closest('.oxy-dynamic-list');
if(oxyDynamicList.length > 0) {
var conditionspreview = parseInt($scope.iframeScope.component.options[id]['model']['conditionspreview']);
if(conditionspreview === 2) {
$scope.iframeScope.component.options[id]['model']['globalConditionsResult'] = true;
}
else if (conditionspreview === 0 && activeComponent.closest('.oxy_repeater_original').length < 1) {
$scope.iframeScope.component.options[id]['model']['globalConditionsResult'] = false;
}
return;
}
if($scope.iframeScope.component.options[id]['model'] && $scope.iframeScope.component.options[id]['model']['conditionspreview']) {
var conditionspreview = parseInt($scope.iframeScope.component.options[id]['model']['conditionspreview']);
if(conditionspreview === 2) {
$scope.iframeScope.component.options[id]['model']['globalConditionsResult'] = true;
$scope.iframeScope.setOptionModel('globalConditionsResult', true, id);
}
else if (conditionspreview === 0) {
$scope.iframeScope.component.options[id]['model']['globalConditionsResult'] = false;
$scope.iframeScope.setOptionModel('globalConditionsResult', false, id);
}
else if($scope.iframeScope.component.options[id]['model']['globalconditions']) {
$scope.getConditionsResult(function(result) {
$scope.iframeScope.component.options[id]['model']['globalConditionsResult'] = result;
$scope.iframeScope.setOptionModel('globalConditionsResult', result, id);
}, null, id);
}
}
}
}
});
/**
* Animation
*
* @since 0.2.2
*/
/**
* Animate DOM Tree Details
*
*/
animateDOMTreeNodeDetails = function($window) {
return {
addClass: function(element, className, doneFn) {
if (className!="ct-dom-tree-node-active") {
doneFn();
return false;
}
var details = jQuery(".ct-dom-tree-node-details", element);
details.hide();
details.stop().slideDown({
duration: 250,
easing: "linear",
complete: function(){
doneFn();
}
});
},
removeClass: function(element, className, doneFn) {
if (className!="ct-dom-tree-node-active") {
doneFn();
return false;
}
var details = jQuery(".ct-dom-tree-node-details", element);
details.stop().slideUp({
duration: 250,
easing: "linear",
complete: function(){
doneFn();
}
});
},
}
}
CTFrontendBuilderUI.animation('.ct-dom-tree-node-anchor', animateDOMTreeNodeDetails);
/**
* Animate DOM Tree Node
*
*/
animateDOMTreeNode = function($window) {
return {
addClass: function(element, className, doneFn) {
console.log("add",className);
if (className!="ct-dom-tree-node-expanded") {
doneFn();
return false;
}
var details = jQuery(element).children(".ct-dom-tree-node");
details.hide();
details.stop().slideDown(250, function(){
doneFn();
});
},
removeClass: function(element, className, doneFn) {
console.log("remove",className);
if (className!="ct-dom-tree-node-expanded") {
doneFn();
return false;
}
var details = jQuery(element).children(".ct-dom-tree-node");
details.stop().slideUp(250, function(){
doneFn();
});
},
}
}
CTFrontendBuilderUI.animation('.ct-dom-tree-node', animateDOMTreeNode);
/**
* Animate DOM Tree Details
*
*/
animateStyleSetNode = function($window) {
return {
addClass: function(element, className, doneFn) {
if (className!="ct-style-set-expanded") {
doneFn();
return false;
}
var details = jQuery(element).nextAll(".ct-style-set-child-selector");
details.hide();
details.stop().slideDown(250, function(){
details.css("height","");
doneFn();
});
},
removeClass: function(element, className, doneFn) {
if (className!="ct-style-set-expanded") {
doneFn();
return false;
}
var details = jQuery(element).nextAll(".ct-style-set-child-selector");
details.stop().slideUp(250, function(){
doneFn();
});
},
}
}
// CTFrontendBuilderUI.animation('.ct-style-set-node', animateStyleSetNode);
// CTFrontendBuilderUI.animation('.ct-css-node-header', animateStyleSetNode);
/**
* Disable ng-animate for elements with "ct-no-animate" class
*
* @since 0.2.2
*/
CTFrontendBuilderUI.config(['$animateProvider', function($animateProvider){
// disable animation for elements with the ct-no-animate css class with a regexp.
// note: "ct-*" is our css namespace
$animateProvider.classNameFilter(/^((?!(ct-no-animate)).)*$/);
}]);
/**
* Used to set componentize screenshots
*
*/
CTFrontendBuilderUI.directive('fileModel', ['$parse', function ($parse) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var model = $parse(attrs.fileModel);
var modelSetter = model.assign;
element.bind('change', function(){
scope.$apply(function(){
modelSetter(scope, element[0].files[0]);
});
});
}
};
}]);
CTFrontendBuilderUI.directive('oxygenResizableSidebar', function($timeout,$interval) {
return {
restrict: 'AE',
link: function(scope, element, attr) {
var style = window.getComputedStyle(element[0], null),
dir = ['right'],
w,
vx = 1, // if centered double velocity
vy = 1, // if centered double velocity
inner = '<span></span>',
start,
dragDir,
axis,
info = {};
var getClientX = function(e) {
return e.touches ? e.touches[0].clientX : e.clientX;
};
var getClientY = function(e) {
return e.touches ? e.touches[0].clientY : e.clientY;
};
var dragging = function(e) {
var offset = axis === 'x' ? start - getClientX(e) : start - getClientY(e);
var newValue, prop;
switch(dragDir) {
case 'right':
prop = 'width';
newValue = w - (offset * vx);
var button = jQuery('.oxygen-code-editor-expand', scope.verticalSidebar);
if (newValue<300) {
// collapse
scope.verticalSidebar.data("expanded", false);
jQuery(button).text(jQuery(button).attr('data-expand'));
break;
}
else {
// expand
scope.verticalSidebar.data("expanded", true);
jQuery(button).text(jQuery(button).attr('data-collapse'));
}
console.log(offset, w);
element[0].style[prop] = w - (offset * vx) + 'px';
break;
}
};
var dragEnd = function(e) {
scope.adjustViewportContainer();
jQuery("#resize-overlay").hide();
document.removeEventListener('mouseup', dragEnd, false);
document.removeEventListener('mousemove', dragging, false);
document.removeEventListener('touchend', dragEnd, false);
document.removeEventListener('touchmove', dragging, false);
element.removeClass('rg-no-transition');
};
var dragStart = function(e, direction) {
jQuery("#resize-overlay").show();
dragDir = direction;
axis = ( dragDir.indexOf('left') >= 0 || dragDir.indexOf('right') >= 0 ) ? 'x' : 'y';
start = axis === 'x' ? getClientX(e) : getClientY(e);
w = parseInt(style.getPropertyValue('width'));
//prevent transition while dragging
element.addClass('rg-no-transition');
document.addEventListener('mouseup', dragEnd, false);
document.addEventListener('mousemove', dragging, false);
document.addEventListener('touchend', dragEnd, false);
document.addEventListener('touchmove', dragging, false);
// Disable highlighting while dragging
if(e.stopPropagation) e.stopPropagation();
if(e.preventDefault) e.preventDefault();
e.cancelBubble = true;
e.returnValue = false;
scope.$apply();
};
dir.forEach(function (direction) {
var grabber = document.createElement('div');
// add class for styling purposes
grabber.setAttribute('class', 'rg-' + direction);
grabber.innerHTML = inner;
element[0].appendChild(grabber);
grabber.ondragstart = function() { return false; };
var down = function(e) {
var disabled = (scope.rDisabled === 'true');
if (!disabled && (e.which === 1 || e.touches)) {
// left mouse click or touch screen
dragStart(e, direction);
}
};
grabber.addEventListener('mousedown', down, false);
grabber.addEventListener('touchstart', down, false);
});
}
};
});
/**
* Attach actions to content editor buttons
*
*/
CTFrontendBuilderUI.directive('ctEditButton', function($timeout,$interval) {
return {
link:function(scope,element,attrs) {
element.bind('mousedown', function(event) {
event.preventDefault();
var role = attrs.ngEditRole;
switch(role) {
case 'link':
var sLnk=prompt('Write the URL','http:\/\/');
if(sLnk&&sLnk!=''){
scope.artificialViewport[0].contentWindow.document.execCommand('createlink', false, sLnk);
}
case 'p':
scope.artificialViewport[0].contentWindow.document.execCommand('formatBlock', false, role);
break;
default:
scope.artificialViewport[0].contentWindow.document.execCommand(role, false, null);
break;
}
scope.$apply();
// timeout for angular
var timeout = $timeout(function() {
scope.iframeScope.setOption(scope.iframeScope.component.active.id, scope.iframeScope.component.active.name, 'ct_content');
$interval.cancel(timeout);
}, 0, false);
})
}
}
})