Initial commit
This commit is contained in:
Gitium
@ -0,0 +1,835 @@
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* Generate Sections Metabox
|
||||
/*
|
||||
/* © Kathy Darling http://www.kathyisawesome.com
|
||||
/* 2016-07-19. */
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* @type {Object} JavaScript namespace for our application.
|
||||
*/
|
||||
var Generate_Sections = {
|
||||
backbone_modal: {
|
||||
__instance: undefined
|
||||
}
|
||||
};
|
||||
|
||||
(function($, Generate_Sections) {
|
||||
|
||||
|
||||
// Model
|
||||
Generate_Sections.Section = Backbone.Model.extend({
|
||||
defaults: {
|
||||
"title": "",
|
||||
"box_type": "",
|
||||
"inner_box_type": "",
|
||||
"custom_classes": "",
|
||||
"custom_id": "",
|
||||
"top_padding": "",
|
||||
"bottom_padding": "",
|
||||
"top_padding_unit": "",
|
||||
"bottom_padding_unit": "",
|
||||
"background_color": "",
|
||||
"background_image": "",
|
||||
"background_image_preview": "",
|
||||
"parallax_effect": "",
|
||||
"background_color_overlay": "",
|
||||
"text_color": "",
|
||||
"link_color": "",
|
||||
"link_color_hover": "",
|
||||
"content": ""
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Collection
|
||||
Generate_Sections.SectionsCollection = Backbone.Collection.extend({
|
||||
model: Generate_Sections.Section,
|
||||
el: "#generate_sections_container",
|
||||
comparator: function(model) {
|
||||
return model.get('index');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Primary Modal Application Class
|
||||
*/
|
||||
Generate_Sections.backbone_modal.Application = Backbone.View.extend({
|
||||
|
||||
attributes: {
|
||||
id: "generate-sections-modal-dialog",
|
||||
class: "generate-sections-modal",
|
||||
role: "dialog"
|
||||
},
|
||||
|
||||
template: wp.template("generate-sections-modal-window"),
|
||||
|
||||
mediaUploader: null,
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* tinyMCE settings
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
tmc_settings: {},
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* tinyMCE defaults
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
tmc_defaults: {
|
||||
theme: "modern",
|
||||
menubar: false,
|
||||
wpautop: true,
|
||||
indent: false,
|
||||
toolbar1: "bold,italic,underline,blockquote,strikethrough,bullist,numlist,alignleft,aligncenter,alignright,undo,redo,link,unlink,fullscreen",
|
||||
plugins: "fullscreen,image,wordpress,wpeditimage,wplink",
|
||||
max_height: 500
|
||||
},
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* quicktags settings
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
qt_settings: {},
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* quicktags defaults
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
qt_defaults: {
|
||||
buttons: "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen"
|
||||
},
|
||||
|
||||
model: Generate_Sections.Section,
|
||||
|
||||
events: {
|
||||
"click .media-modal-backdrop, .media-modal-close, .media-button-close": "closeModal",
|
||||
"click .media-button-insert": "saveModal",
|
||||
"click .media-menu-item": "switchTab",
|
||||
"keydown": "keydown",
|
||||
"click .generate-sections-upload-button": "openMediaUploader",
|
||||
"click .generate-sections-remove-image": "removeImage",
|
||||
"click div.media-frame-title h1": "toggleMenu"
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Simple object to store any UI elements we need to use over the life of the application.
|
||||
*/
|
||||
ui: {
|
||||
nav: undefined,
|
||||
content: undefined
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Instantiates the Template object and triggers load.
|
||||
*/
|
||||
initialize: function() {
|
||||
_.bindAll(this, "render", "closeModal", "saveModal", "switchTab");
|
||||
|
||||
this.focusManager = new wp.media.view.FocusManager({
|
||||
el: this.el
|
||||
});
|
||||
|
||||
this.changeInsertText();
|
||||
this.tinyMCEsettings();
|
||||
this.render();
|
||||
},
|
||||
|
||||
/**
|
||||
* switch the insert button text to "insert section"
|
||||
*/
|
||||
changeInsertText: function(restore) {
|
||||
|
||||
var restore = typeof restore !== 'undefined' && restore == true ? true : false;
|
||||
|
||||
if (restore == false && typeof(wp.media.view.l10n.insertIntoPost) !== "undefined") {
|
||||
this.insertIntoPost = wp.media.view.l10n.insertIntoPost;
|
||||
wp.media.view.l10n.insertIntoPost = generate_sections_metabox_i18n.insert_into_section;
|
||||
// switch the insert button text back
|
||||
} else if (restore == true && typeof(this.insertIntoPost) !== "undefined") {
|
||||
wp.media.view.l10n.insertIntoPost = this.insertIntoPost;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Merge the default TinyMCE settings
|
||||
*/
|
||||
tinyMCEsettings: function() {
|
||||
// get the #content"s tinyMCE settings or use default
|
||||
var init_settings = typeof tinyMCEPreInit == "object" && "mceInit" in tinyMCEPreInit && "content" in tinyMCEPreInit.mceInit ? tinyMCEPreInit.mceInit.content : this.tmc_defaults;
|
||||
|
||||
// get the #content"s quicktags settings or use default
|
||||
var qt_settings = typeof tinyMCEPreInit == "object" && "qtInit" in tinyMCEPreInit && "content" in tinyMCEPreInit.qtInit ? tinyMCEPreInit.qtInit.content : this.qt_defaults;
|
||||
|
||||
var _this = this;
|
||||
var custom_settings = {
|
||||
selector: "#generate-sections-editor",
|
||||
wp_autoresize_on: false,
|
||||
cache_suffix: "",
|
||||
min_height: 400,
|
||||
}
|
||||
|
||||
// merge our settings with WordPress" and store for later use
|
||||
this.tmc_settings = $.extend({}, init_settings, custom_settings);
|
||||
|
||||
this.qt_settings = $.extend({}, qt_settings, {
|
||||
id: "generate-sections-editor"
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Assembles the UI from loaded template.
|
||||
* @internal Obviously, if the template fail to load, our modal never launches.
|
||||
*/
|
||||
render: function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
// Build the base window and backdrop, attaching them to the $el.
|
||||
// Setting the tab index allows us to capture focus and redirect it in Application.preserveFocus
|
||||
this.$el.attr("tabindex", "0")
|
||||
.html(this.template);
|
||||
|
||||
// Handle any attempt to move focus out of the modal.
|
||||
//jQuery(document).on("focusin", this.preserveFocus);
|
||||
|
||||
// set overflow to "hidden" on the body so that it ignores any scroll events while the modal is active
|
||||
// and append the modal to the body.
|
||||
jQuery("body").addClass("generate-modal-open").prepend(this.$el);
|
||||
|
||||
// aria hide the background
|
||||
jQuery("#wpwrap").attr("aria-hidden", "true");
|
||||
|
||||
this.renderContent();
|
||||
|
||||
this.renderPreview();
|
||||
|
||||
this.selected();
|
||||
this.colorPicker();
|
||||
this.startTinyMCE();
|
||||
|
||||
// Set focus on the modal to prevent accidental actions in the underlying page
|
||||
this.$el.focus();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
/**
|
||||
* Make the menu mobile-friendly
|
||||
*/
|
||||
toggleMenu: function() {
|
||||
this.$el.find('.media-menu').toggleClass('visible');
|
||||
},
|
||||
|
||||
/**
|
||||
* Create the nav tabs & panels
|
||||
*/
|
||||
renderContent: function() {
|
||||
|
||||
var model = this.model;
|
||||
|
||||
var menu_item = wp.template("generate-sections-modal-menu-item");
|
||||
|
||||
// Save a reference to the navigation bar"s unordered list and populate it with items.
|
||||
this.ui.nav = this.$el.find(".media-menu");
|
||||
|
||||
// reference to content area
|
||||
this.ui.panels = this.$el.find(".media-frame-content");
|
||||
|
||||
// loop through the tabs
|
||||
if (generate_sections_metabox_i18n.tabs.length) {
|
||||
|
||||
// for...of is nicer, but not supported by minify, so stay with for...in for now
|
||||
for (var tab in generate_sections_metabox_i18n.tabs) {
|
||||
|
||||
if (generate_sections_metabox_i18n.tabs.hasOwnProperty(tab)) {
|
||||
|
||||
tab = generate_sections_metabox_i18n.tabs[tab];
|
||||
|
||||
var $new_tab = $(menu_item({
|
||||
target: tab.target,
|
||||
name: tab.title
|
||||
}));
|
||||
|
||||
var panel = wp.template("generate-sections-edit-" + tab.target);
|
||||
|
||||
var $new_panel = $(panel(model.toJSON()));
|
||||
|
||||
if (tab.active == "true") {
|
||||
$new_tab.addClass("active");
|
||||
$new_panel.addClass("active");
|
||||
}
|
||||
|
||||
jQuery( 'body' ).on( 'generate_section_show_settings', function() {
|
||||
jQuery( '.generate-sections-modal .media-menu-item' ).removeClass('active');
|
||||
jQuery( '.generate-sections-modal .panel' ).removeClass('active');
|
||||
jQuery( '.generate-section-item-style' ).addClass('active');
|
||||
jQuery( '.generate-section-settings' ).addClass('active');
|
||||
});
|
||||
|
||||
this.ui.nav.append($new_tab);
|
||||
this.ui.panels.append($new_panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Render the background image preview
|
||||
*/
|
||||
renderPreview: function(image_id) {
|
||||
|
||||
var image_id = typeof image_id !== 'undefined' ? image_id : this.model.get("background_image");
|
||||
|
||||
var $preview = $("#generate-section-image-preview");
|
||||
$preview.children().remove();
|
||||
|
||||
if (image_id > 0) {
|
||||
this.background = new wp.media.model.Attachment.get(image_id);
|
||||
|
||||
this.background.fetch({
|
||||
success: function(att) {
|
||||
if (_.contains(['png', 'jpg', 'gif', 'jpeg'], att.get('subtype'))) {
|
||||
$("<img/>").attr("src", att.attributes.sizes.thumbnail.url).appendTo($preview);
|
||||
$preview.next().find(".generate-sections-remove-image").show();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Set the default option for the select boxes
|
||||
*/
|
||||
selected: function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.$el.find("select").each(function(index, select) {
|
||||
|
||||
var attribute = jQuery(select).attr("name");
|
||||
var selected = _this.model.get(attribute);
|
||||
jQuery(select).val(selected);
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Start the colorpicker
|
||||
*/
|
||||
colorPicker: function() {
|
||||
this.$el.find(".generate-sections-color").wpColorPicker();
|
||||
},
|
||||
|
||||
/**
|
||||
* Start TinyMCE on the textarea
|
||||
*/
|
||||
startTinyMCE: function() {
|
||||
|
||||
// set the default editor
|
||||
this.ui.panels.find("#wp-generate-sections-editor-wrap").addClass(generate_sections_metabox_i18n.default_editor);
|
||||
|
||||
// remove tool buttons if richedit disabled
|
||||
if (!generate_sections_metabox_i18n.user_can_richedit) {
|
||||
this.ui.panels.find(".wp-editor-tabs").remove();
|
||||
}
|
||||
|
||||
// add our copy to the collection in the tinyMCEPreInit object because switch editors
|
||||
if (typeof tinyMCEPreInit == 'object') {
|
||||
tinyMCEPreInit.mceInit["generate-sections-editor"] = this.tmc_settings;
|
||||
tinyMCEPreInit.qtInit["generate-sections-editor"] = this.qt_settings;
|
||||
tinyMCEPreInit.mceInit["generate-sections-editor"].wp_keep_scroll_position = false;
|
||||
}
|
||||
|
||||
try {
|
||||
|
||||
var rich = (typeof tinyMCE != "undefined");
|
||||
|
||||
// turn on the quicktags editor
|
||||
quicktags(this.qt_settings);
|
||||
|
||||
// attempt to fix problem of quicktags toolbar with no buttons
|
||||
QTags._buttonsInit();
|
||||
|
||||
if (rich !== false) {
|
||||
// turn on tinyMCE
|
||||
tinyMCE.init(this.tmc_settings);
|
||||
}
|
||||
|
||||
} catch (e) {}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Launch Media Uploader
|
||||
*/
|
||||
openMediaUploader: function(e) {
|
||||
|
||||
var _this = this;
|
||||
|
||||
$input = jQuery(e.currentTarget).prev("#generate-sections-background-image");
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// If the uploader object has already been created, reopen the dialog
|
||||
if (this.mediaUploader) {
|
||||
this.mediaUploader.open();
|
||||
return;
|
||||
}
|
||||
// Extend the wp.media object
|
||||
this.mediaUploader = wp.media.frames.file_frame = wp.media({
|
||||
title: generate_sections_metabox_i18n.media_library_title,
|
||||
button: {
|
||||
text: generate_sections_metabox_i18n.media_library_button
|
||||
},
|
||||
multiple: false
|
||||
});
|
||||
|
||||
|
||||
// When a file is selected, grab the URL and set it as the text field"s value
|
||||
this.mediaUploader.on("select", function() {
|
||||
|
||||
attachment = _this.mediaUploader.state().get("selection").first().toJSON();
|
||||
|
||||
$input.val(attachment.id);
|
||||
|
||||
_this.renderPreview(attachment.id);
|
||||
});
|
||||
// Open the uploader dialog
|
||||
this.mediaUploader.open();
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove the background image
|
||||
*/
|
||||
removeImage: function(e) {
|
||||
e.preventDefault();
|
||||
$("#generate-section-image-preview").children().remove();
|
||||
$("#generate-section-image-preview").next().find(".generate-sections-remove-image").hide();
|
||||
$("#generate-sections-background-image").val("");
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Closes the modal and cleans up after the instance.
|
||||
* @param e {object} A jQuery-normalized event object.
|
||||
*/
|
||||
closeModal: function(e) {
|
||||
"use strict";
|
||||
|
||||
e.preventDefault();
|
||||
this.undelegateEvents();
|
||||
jQuery(document).off("focusin");
|
||||
jQuery("body").removeClass("generate-modal-open");
|
||||
jQuery("body").removeClass("generate-section-content");
|
||||
|
||||
// remove restricted media modal tab focus once it's closed
|
||||
this.$el.undelegate('keydown');
|
||||
|
||||
// remove the tinymce editor
|
||||
// this needs to be called before the modal is closed or it will fail in Firefox (that was fun to figure out...)
|
||||
if (typeof tinyMCE != "undefined") {
|
||||
tinymce.EditorManager.execCommand("mceRemoveEditor", true, "generate-sections-editor");
|
||||
}
|
||||
|
||||
// remove modal and unset instances
|
||||
this.remove();
|
||||
Generate_Sections.backbone_modal.__instance = undefined;
|
||||
this.mediaUploader = null;
|
||||
Generate_Sections.modalOpen = null;
|
||||
|
||||
// switch the insert button text back
|
||||
this.changeInsertText(true);
|
||||
|
||||
// send focus back to where it was prior to modal open
|
||||
Generate_Sections.lastFocus.focus();
|
||||
|
||||
// aria unhide the background
|
||||
jQuery("#wpwrap").attr("aria-hidden", "false");
|
||||
|
||||
// Fix bug where the window scrolls down 50px on close
|
||||
var topDistance = jQuery("body").offset().top;
|
||||
if ( topDistance >= jQuery("body").scrollTop() ) {
|
||||
jQuery("body").scrollTop(0);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Responds to the btn-ok.click event
|
||||
* @param e {object} A jQuery-normalized event object.
|
||||
* @todo You should make this your own.
|
||||
*/
|
||||
saveModal: function(e) {
|
||||
"use strict";
|
||||
|
||||
this.model.get("index");
|
||||
|
||||
var model = this.model;
|
||||
|
||||
// send the tinymce content to the textarea
|
||||
if (typeof tinyMCE != "undefined") {
|
||||
tinymce.triggerSave();
|
||||
}
|
||||
|
||||
var $inputs = this.ui.panels.find("input, select, textarea");
|
||||
|
||||
$inputs.each(function(index, input) {
|
||||
|
||||
var name = $(input).attr("name");
|
||||
|
||||
if (model.attributes.hasOwnProperty(name)) {
|
||||
var value = $(input).val();
|
||||
model.set(name, value);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
this.closeModal(e);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles tab clicks and switches to corresponding panel
|
||||
* @param e {object} A jQuery-normalized event object.
|
||||
*/
|
||||
switchTab: function(e) {
|
||||
"use strict";
|
||||
e.preventDefault();
|
||||
|
||||
// close lingering wp link windows
|
||||
if (typeof tinyMCE != "undefined" && 'style' == jQuery( e.currentTarget ).data( 'target' ) && this.ui.panels.find( '#wp-generate-sections-editor-wrap' ).hasClass( 'tmce-active' )) {
|
||||
tinyMCE.activeEditor.execCommand('wp_link_cancel');
|
||||
tinyMCE.activeEditor.execCommand('wp_media_cancel');
|
||||
}
|
||||
|
||||
this.ui.nav.children().removeClass("active");
|
||||
this.ui.panels.children().removeClass("active");
|
||||
|
||||
var target = jQuery(e.currentTarget).addClass("active").data("target");
|
||||
|
||||
this.ui.panels.find("div[data-id=" + target + "]").addClass("active");
|
||||
},
|
||||
|
||||
/**
|
||||
* close on keyboard shortcuts
|
||||
* @param {Object} event
|
||||
*/
|
||||
keydown: function(e) {
|
||||
// Close the modal when escape is pressed.
|
||||
if (27 === e.which && this.$el.is(':visible')) {
|
||||
this.closeModal(e);
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Singular View
|
||||
Generate_Sections.sectionView = Backbone.View.extend({
|
||||
|
||||
model: Generate_Sections.Section,
|
||||
tagName: 'div',
|
||||
|
||||
initialize: function() {
|
||||
// re-render on all changes EXCEPT index
|
||||
this.listenTo(this.model, "change", this.maybeRender);
|
||||
},
|
||||
|
||||
attributes: {
|
||||
class: "ui-state-default section"
|
||||
},
|
||||
|
||||
// Get the template from the DOM
|
||||
template: wp.template("generate-sections-section"),
|
||||
|
||||
events: {
|
||||
'click .edit-section': 'editSection',
|
||||
'click .section-title > span': 'editSection',
|
||||
'click .delete-section': 'removeSection',
|
||||
'click .toggle-section': 'toggleSection',
|
||||
'reorder': 'reorder',
|
||||
},
|
||||
|
||||
maybeRender: function(e) {
|
||||
if (this.model.hasChanged('index')) return;
|
||||
this.render();
|
||||
},
|
||||
|
||||
// Render the single model - include an index.
|
||||
render: function() {
|
||||
this.model.set('index', this.model.collection.indexOf(this.model));
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
|
||||
if (!this.model.get('title')) {
|
||||
this.$el.find('h3.section-title > span').text(generate_sections_metabox_i18n.default_title);
|
||||
}
|
||||
this.$el.find('textarea').val(JSON.stringify(this.model));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
// launch the edit modal
|
||||
editSection: function(e) {
|
||||
|
||||
// stash the current focus
|
||||
Generate_Sections.lastFocus = document.activeElement;
|
||||
Generate_Sections.modalOpen = true;
|
||||
|
||||
e.preventDefault();
|
||||
if (Generate_Sections.backbone_modal.__instance === undefined) {
|
||||
Generate_Sections.backbone_modal.__instance = new Generate_Sections.backbone_modal.Application({
|
||||
model: this.model
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// reorder after sort
|
||||
reorder: function(event, index) {
|
||||
this.$el.trigger('update-sort', [this.model, index]);
|
||||
},
|
||||
|
||||
// remove/destroy a model
|
||||
removeSection: function(e) {
|
||||
e.preventDefault();
|
||||
if (confirm(generate_sections_metabox_i18n.confirm)) {
|
||||
this.model.destroy();
|
||||
Generate_Sections.sectionList.render(); // manually calling instead of listening since listening interferes with sorting
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// List View
|
||||
Generate_Sections.sectionListView = Backbone.View.extend({
|
||||
|
||||
el: "#generate_sections_container",
|
||||
events: {
|
||||
'update-sort': 'updateSort',
|
||||
// 'add-section': 'addOne'
|
||||
},
|
||||
|
||||
// callback for clone button
|
||||
addSection: function(model) {
|
||||
this.collection.add(model);
|
||||
this.addOne(model);
|
||||
},
|
||||
|
||||
addOne: function(model) {
|
||||
var view = new Generate_Sections.sectionView({
|
||||
model: model
|
||||
});
|
||||
this.$el.append(view.render().el);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.children().remove();
|
||||
this.collection.each(this.addOne, this);
|
||||
return this;
|
||||
},
|
||||
|
||||
updateSort: function(event, model, position) {
|
||||
this.collection.remove(model);
|
||||
|
||||
// renumber remaining models around missing model
|
||||
this.collection.each(function(model, index) {
|
||||
|
||||
var new_index = index;
|
||||
if (index >= position) {
|
||||
new_index += 1;
|
||||
}
|
||||
model.set('index', new_index);
|
||||
});
|
||||
|
||||
// set the index of the missing model
|
||||
model.set('index', position);
|
||||
|
||||
// add the model back to the collection
|
||||
this.collection.add(model, {
|
||||
at: position
|
||||
});
|
||||
|
||||
this.render();
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
// The Buttons & Nonce
|
||||
Generate_Sections.ButtonControls = Backbone.View.extend({
|
||||
|
||||
attributes: {
|
||||
class: "generate_sections_buttons"
|
||||
},
|
||||
|
||||
tagName: 'p',
|
||||
|
||||
el: "#_generate_sections_metabox",
|
||||
|
||||
template: wp.template("generate-sections-buttons"),
|
||||
|
||||
// Attach events
|
||||
events: {
|
||||
"click .button-primary": "newSection",
|
||||
"click #generate-delete-sections": "clearAll",
|
||||
'click .edit-section': 'editSection',
|
||||
},
|
||||
|
||||
// create new
|
||||
newSection: function(e) {
|
||||
e.preventDefault();
|
||||
var newSection = new Generate_Sections.Section();
|
||||
Generate_Sections.sectionList.addSection(newSection);
|
||||
},
|
||||
|
||||
// clear all models
|
||||
clearAll: function(e) {
|
||||
e.preventDefault();
|
||||
if (confirm(generate_sections_metabox_i18n.confirm)) {
|
||||
Generate_Sections.sectionCollection.reset();
|
||||
Generate_Sections.sectionList.render();
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.find(".generate_sections_control").append(this.template);
|
||||
return this;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
// init
|
||||
Generate_Sections.initApplication = function() {
|
||||
|
||||
// Create Collection From Existing Meta
|
||||
Generate_Sections.sectionCollection = new Generate_Sections.SectionsCollection(generate_sections_metabox_i18n.sections);
|
||||
|
||||
// Create the List View
|
||||
Generate_Sections.sectionList = new Generate_Sections.sectionListView({
|
||||
collection: Generate_Sections.sectionCollection
|
||||
});
|
||||
Generate_Sections.sectionList.render();
|
||||
|
||||
// Buttons
|
||||
Generate_Sections.Buttons = new Generate_Sections.ButtonControls({
|
||||
collection: Generate_Sections.sectionCollection
|
||||
});
|
||||
Generate_Sections.Buttons.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* Execute the above methods in the Generate_Sections object.
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
Generate_Sections.initApplication();
|
||||
|
||||
$( '#generate_sections_container' ).sortable({
|
||||
axis: "y",
|
||||
opacity: 0.5,
|
||||
grid: [20, 10],
|
||||
tolerance: "pointer",
|
||||
handle: ".move-section",
|
||||
update: function(event, ui) {
|
||||
ui.item.trigger("reorder", ui.item.index());
|
||||
}
|
||||
} );
|
||||
|
||||
if ( $( '.use-sections-switch' ).is( ':checked' ) ) {
|
||||
setTimeout( function() {
|
||||
generateShowSections();
|
||||
}, 200 );
|
||||
} else {
|
||||
generateHideSections();
|
||||
}
|
||||
|
||||
$( '.use-sections-switch' ).on( 'change', function( e ) {
|
||||
var status = ( $(this).is( ':checked' ) ) ? 'checked' : 'unchecked';
|
||||
|
||||
if ( 'checked' == status ) {
|
||||
generateShowSections();
|
||||
} else if ( 'unchecked' == status ) {
|
||||
generateHideSections();
|
||||
}
|
||||
} );
|
||||
|
||||
function generateShowSections() {
|
||||
|
||||
// Hide send to editor button
|
||||
$('.send-to-editor').css('display', 'none');
|
||||
|
||||
// Hide the editor
|
||||
$('#postdivrich').css({
|
||||
'opacity': '0',
|
||||
'height': '0',
|
||||
'overflow': 'hidden'
|
||||
});
|
||||
|
||||
// Show the sections
|
||||
$('#_generate_sections_metabox').css({
|
||||
'opacity': '1',
|
||||
'height': 'auto'
|
||||
});
|
||||
|
||||
// Remove and add the default editor - this removes any visible toolbars etc..
|
||||
// We need to set a timeout for this to work
|
||||
// if (typeof tinyMCE != "undefined") {
|
||||
// tinyMCE.EditorManager.execCommand("mceRemoveEditor", true, "content");
|
||||
// $( '.use-sections-cover' ).css( 'z-index','10000' );
|
||||
// setTimeout('tinyMCE.EditorManager.execCommand("mceAddEditor", true, "content");', 1);
|
||||
// setTimeout('jQuery( ".use-sections-cover" ).css( "z-index","-1" );', 1000);
|
||||
// }
|
||||
|
||||
// Set a trigger
|
||||
$('body').trigger('generate_show_sections');
|
||||
|
||||
}
|
||||
|
||||
function generateHideSections() {
|
||||
|
||||
// Show send to editor button
|
||||
$('.send-to-editor').css('display', 'inline-block');
|
||||
|
||||
// Show the editor
|
||||
$('#postdivrich').css({
|
||||
'opacity': '1',
|
||||
'height': 'auto'
|
||||
});
|
||||
|
||||
// Hide the sections
|
||||
$('#_generate_sections_metabox').css({
|
||||
'opacity': '0',
|
||||
'height': '0',
|
||||
'overflow': 'hidden'
|
||||
});
|
||||
|
||||
$('body').trigger('generate_hide_sections');
|
||||
|
||||
}
|
||||
|
||||
$( document ).on( 'click', '.edit-section.edit-settings', function() {
|
||||
$( 'body' ).trigger( 'generate_section_show_settings' );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
})(jQuery, Generate_Sections);
|
||||
@ -0,0 +1,846 @@
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* Generate Sections Metabox
|
||||
/*
|
||||
/* © Kathy Darling http://www.kathyisawesome.com
|
||||
/* 2016-07-19. */
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
/**
|
||||
* @type {Object} JavaScript namespace for our application.
|
||||
*/
|
||||
var Generate_Sections = {
|
||||
backbone_modal: {
|
||||
__instance: undefined
|
||||
}
|
||||
};
|
||||
|
||||
(function($, Generate_Sections) {
|
||||
|
||||
|
||||
// Model
|
||||
Generate_Sections.Section = Backbone.Model.extend({
|
||||
defaults: {
|
||||
"title": "",
|
||||
"box_type": "",
|
||||
"inner_box_type": "",
|
||||
"custom_classes": "",
|
||||
"custom_id": "",
|
||||
"top_padding": "",
|
||||
"bottom_padding": "",
|
||||
"top_padding_unit": "",
|
||||
"bottom_padding_unit": "",
|
||||
"background_color": "",
|
||||
"background_image": "",
|
||||
"background_image_preview": "",
|
||||
"parallax_effect": "",
|
||||
"background_color_overlay": "",
|
||||
"text_color": "",
|
||||
"link_color": "",
|
||||
"link_color_hover": "",
|
||||
"content": ""
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Collection
|
||||
Generate_Sections.SectionsCollection = Backbone.Collection.extend({
|
||||
model: Generate_Sections.Section,
|
||||
el: "#generate_sections_container",
|
||||
comparator: function(model) {
|
||||
return model.get('index');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
/**
|
||||
* Primary Modal Application Class
|
||||
*/
|
||||
Generate_Sections.backbone_modal.Application = Backbone.View.extend({
|
||||
|
||||
attributes: {
|
||||
id: "generate-sections-modal-dialog",
|
||||
class: "generate-sections-modal",
|
||||
role: "dialog"
|
||||
},
|
||||
|
||||
template: wp.template("generate-sections-modal-window"),
|
||||
|
||||
mediaUploader: null,
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* tinyMCE settings
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
tmc_settings: {},
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* tinyMCE defaults
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
tmc_defaults: {
|
||||
theme: "modern",
|
||||
menubar: false,
|
||||
wpautop: true,
|
||||
indent: false,
|
||||
toolbar1: "bold,italic,underline,blockquote,strikethrough,bullist,numlist,alignleft,aligncenter,alignright,undo,redo,link,unlink,fullscreen",
|
||||
plugins: "fullscreen,image,wordpress,wpeditimage,wplink",
|
||||
max_height: 500
|
||||
},
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* quicktags settings
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
qt_settings: {},
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* quicktags defaults
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
qt_defaults: {
|
||||
buttons: "strong,em,link,block,del,ins,img,ul,ol,li,code,more,close,fullscreen"
|
||||
},
|
||||
|
||||
model: Generate_Sections.Section,
|
||||
|
||||
events: {
|
||||
"click .media-modal-backdrop, .media-modal-close, .media-button-close": "closeModal",
|
||||
"click .media-button-insert": "saveModal",
|
||||
"click .media-menu-item": "switchTab",
|
||||
"keydown": "keydown",
|
||||
"click .generate-sections-upload-button": "openMediaUploader",
|
||||
"click .generate-sections-remove-image": "removeImage",
|
||||
"click div.media-frame-title h1": "toggleMenu"
|
||||
},
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Simple object to store any UI elements we need to use over the life of the application.
|
||||
*/
|
||||
ui: {
|
||||
nav: undefined,
|
||||
content: undefined
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Instantiates the Template object and triggers load.
|
||||
*/
|
||||
initialize: function() {
|
||||
_.bindAll(this, "render", "closeModal", "saveModal", "switchTab");
|
||||
|
||||
this.focusManager = new wp.media.view.FocusManager({
|
||||
el: this.el
|
||||
});
|
||||
|
||||
this.changeInsertText();
|
||||
//this.tinyMCEsettings();
|
||||
this.render();
|
||||
},
|
||||
|
||||
/**
|
||||
* switch the insert button text to "insert section"
|
||||
*/
|
||||
changeInsertText: function(restore) {
|
||||
|
||||
var restore = typeof restore !== 'undefined' && restore == true ? true : false;
|
||||
|
||||
if (restore == false && typeof(wp.media.view.l10n.insertIntoPost) !== "undefined") {
|
||||
this.insertIntoPost = wp.media.view.l10n.insertIntoPost;
|
||||
wp.media.view.l10n.insertIntoPost = generate_sections_metabox_i18n.insert_into_section;
|
||||
// switch the insert button text back
|
||||
} else if (restore == true && typeof(this.insertIntoPost) !== "undefined") {
|
||||
wp.media.view.l10n.insertIntoPost = this.insertIntoPost;
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Assembles the UI from loaded template.
|
||||
* @internal Obviously, if the template fail to load, our modal never launches.
|
||||
*/
|
||||
render: function() {
|
||||
|
||||
"use strict";
|
||||
|
||||
// Build the base window and backdrop, attaching them to the $el.
|
||||
// Setting the tab index allows us to capture focus and redirect it in Application.preserveFocus
|
||||
this.$el.attr("tabindex", "0").html(this.template);
|
||||
|
||||
// Handle any attempt to move focus out of the modal.
|
||||
//jQuery(document).on("focusin", this.preserveFocus);
|
||||
|
||||
// set overflow to "hidden" on the body so that it ignores any scroll events while the modal is active
|
||||
// and append the modal to the body.
|
||||
jQuery("body").addClass("generate-modal-open").prepend(this.$el);
|
||||
|
||||
// aria hide the background
|
||||
jQuery("#wpwrap").attr("aria-hidden", "true");
|
||||
|
||||
this.renderContent();
|
||||
|
||||
this.renderPreview();
|
||||
|
||||
this.selected();
|
||||
this.colorPicker();
|
||||
//this.startTinyMCE();
|
||||
this.launchEditor();
|
||||
|
||||
// Set focus on the modal to prevent accidental actions in the underlying page
|
||||
this.$el.focus();
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
launchEditor: function() {
|
||||
var id = this.ui.panels.find( ".generate-sections-editor-wrap" ).find( 'textarea' ).attr( 'id' ),
|
||||
customButtonsContainer = this.ui.panels.find( '.generate-sections-editor-wrap' ).find( '#custom-media-buttons' );
|
||||
|
||||
customButtonsContainer.find( '.insert-media' ).remove();
|
||||
var customButtons = customButtonsContainer.html();
|
||||
customButtonsContainer.remove();
|
||||
|
||||
var init_settings = true;
|
||||
|
||||
if ( typeof tinyMCEPreInit == "object" && "mceInit" in tinyMCEPreInit && "content" in tinyMCEPreInit.mceInit ) {
|
||||
init_settings = tinyMCEPreInit.mceInit.content;
|
||||
} else if ( typeof window.wpEditorL10n !== "undefined" ) {
|
||||
init_settings = window.wpEditorL10n.tinymce.settings;
|
||||
} else {
|
||||
init_settings = this.tmc_defaults;
|
||||
}
|
||||
|
||||
var thisPanel = this.ui.panels;
|
||||
|
||||
var custom_settings = {
|
||||
wp_autoresize_on: false,
|
||||
cache_suffix: "",
|
||||
min_height: 400,
|
||||
wp_keep_scroll_position: false,
|
||||
setup: function( editor ) {
|
||||
editor.on( 'init', function( e ) {
|
||||
if ( 'html-active' === generate_sections_metabox_i18n.default_editor && generate_sections_metabox_i18n.user_can_richedit ) {
|
||||
thisPanel.find( '#wp-generate-sections-editor-wrap' ).removeClass( 'tmce-active' ).addClass( 'html-active' );
|
||||
editor.hidden = true;
|
||||
}
|
||||
} );
|
||||
}
|
||||
}
|
||||
|
||||
init_settings = $.extend({}, init_settings, custom_settings);
|
||||
|
||||
var qt_settings = true;
|
||||
|
||||
if ( typeof tinyMCEPreInit == "object" && "qtInit" in tinyMCEPreInit && "content" in tinyMCEPreInit.qtInit ) {
|
||||
qt_settings = tinyMCEPreInit.qtInit.content;
|
||||
} else {
|
||||
qt_settings = this.qt_defaults;
|
||||
}
|
||||
|
||||
if ( ! generate_sections_metabox_i18n.user_can_richedit ) {
|
||||
init_settings = false;
|
||||
}
|
||||
|
||||
wp.sectionsEditor.initialize( id, {
|
||||
tinymce: init_settings,
|
||||
quicktags: qt_settings,
|
||||
mediaButtons: true
|
||||
} );
|
||||
|
||||
var buttonsElement = this.ui.panels.find( '#wp-generate-sections-editor-wrap' ).find( '.wp-media-buttons' );
|
||||
buttonsElement.attr( 'id', 'custom-media-buttons' );
|
||||
$( customButtons ).appendTo( buttonsElement );
|
||||
|
||||
if ( ! generate_sections_metabox_i18n.user_can_richedit ) {
|
||||
this.ui.panels.find( '#generate-sections-editor' ).addClass( 'no-rich-edit' );
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* Make the menu mobile-friendly
|
||||
*/
|
||||
toggleMenu: function() {
|
||||
this.$el.find('.media-menu').toggleClass('visible');
|
||||
},
|
||||
|
||||
/**
|
||||
* Create the nav tabs & panels
|
||||
*/
|
||||
renderContent: function() {
|
||||
|
||||
var model = this.model;
|
||||
|
||||
var menu_item = wp.template("generate-sections-modal-menu-item");
|
||||
|
||||
// Save a reference to the navigation bar"s unordered list and populate it with items.
|
||||
this.ui.nav = this.$el.find(".media-menu");
|
||||
|
||||
// reference to content area
|
||||
this.ui.panels = this.$el.find(".media-frame-content");
|
||||
|
||||
// loop through the tabs
|
||||
if (generate_sections_metabox_i18n.tabs.length) {
|
||||
|
||||
// for...of is nicer, but not supported by minify, so stay with for...in for now
|
||||
for (var tab in generate_sections_metabox_i18n.tabs) {
|
||||
|
||||
if (generate_sections_metabox_i18n.tabs.hasOwnProperty(tab)) {
|
||||
|
||||
tab = generate_sections_metabox_i18n.tabs[tab];
|
||||
|
||||
var $new_tab = $(menu_item({
|
||||
target: tab.target,
|
||||
name: tab.title
|
||||
}));
|
||||
|
||||
var panel = wp.template("generate-sections-edit-" + tab.target);
|
||||
|
||||
var $new_panel = $(panel(model.toJSON()));
|
||||
|
||||
if (tab.active == "true") {
|
||||
$new_tab.addClass("active");
|
||||
$new_panel.addClass("active");
|
||||
}
|
||||
|
||||
jQuery( 'body' ).on( 'generate_section_show_settings', function() {
|
||||
jQuery( '.generate-sections-modal .media-menu-item' ).removeClass('active');
|
||||
jQuery( '.generate-sections-modal .panel' ).removeClass('active');
|
||||
jQuery( '.generate-section-item-style' ).addClass('active');
|
||||
jQuery( '.generate-section-settings' ).addClass('active');
|
||||
});
|
||||
|
||||
this.ui.nav.append($new_tab);
|
||||
this.ui.panels.append($new_panel);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Render the background image preview
|
||||
*/
|
||||
renderPreview: function(image_id) {
|
||||
|
||||
var image_id = typeof image_id !== 'undefined' ? image_id : this.model.get("background_image");
|
||||
|
||||
var $preview = $("#generate-section-image-preview");
|
||||
$preview.children().remove();
|
||||
|
||||
if (image_id > 0) {
|
||||
this.background = new wp.media.model.Attachment.get(image_id);
|
||||
|
||||
this.background.fetch({
|
||||
success: function(att) {
|
||||
if (_.contains(['png', 'jpg', 'gif', 'jpeg'], att.get('subtype'))) {
|
||||
$("<img/>").attr("src", att.attributes.sizes.thumbnail.url).appendTo($preview);
|
||||
$preview.next().find(".generate-sections-remove-image").show();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Set the default option for the select boxes
|
||||
*/
|
||||
selected: function() {
|
||||
|
||||
var _this = this;
|
||||
|
||||
this.$el.find("select").each(function(index, select) {
|
||||
|
||||
var attribute = jQuery(select).attr("name");
|
||||
var selected = _this.model.get(attribute);
|
||||
jQuery(select).val(selected);
|
||||
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* Start the colorpicker
|
||||
*/
|
||||
colorPicker: function() {
|
||||
this.$el.find(".generate-sections-color").wpColorPicker();
|
||||
},
|
||||
|
||||
/**
|
||||
* Launch Media Uploader
|
||||
*/
|
||||
openMediaUploader: function(e) {
|
||||
|
||||
var _this = this;
|
||||
|
||||
$input = jQuery(e.currentTarget).prev("#generate-sections-background-image");
|
||||
|
||||
e.preventDefault();
|
||||
|
||||
// If the uploader object has already been created, reopen the dialog
|
||||
if (this.mediaUploader) {
|
||||
this.mediaUploader.open();
|
||||
return;
|
||||
}
|
||||
// Extend the wp.media object
|
||||
this.mediaUploader = wp.media.frames.file_frame = wp.media({
|
||||
title: generate_sections_metabox_i18n.media_library_title,
|
||||
button: {
|
||||
text: generate_sections_metabox_i18n.media_library_button
|
||||
},
|
||||
multiple: false
|
||||
});
|
||||
|
||||
|
||||
// When a file is selected, grab the URL and set it as the text field"s value
|
||||
this.mediaUploader.on("select", function() {
|
||||
|
||||
attachment = _this.mediaUploader.state().get("selection").first().toJSON();
|
||||
|
||||
$input.val(attachment.id);
|
||||
|
||||
_this.renderPreview(attachment.id);
|
||||
});
|
||||
// Open the uploader dialog
|
||||
this.mediaUploader.open();
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Remove the background image
|
||||
*/
|
||||
removeImage: function(e) {
|
||||
e.preventDefault();
|
||||
$("#generate-section-image-preview").children().remove();
|
||||
$("#generate-section-image-preview").next().find(".generate-sections-remove-image").hide();
|
||||
$("#generate-sections-background-image").val("");
|
||||
},
|
||||
|
||||
|
||||
/**
|
||||
* Closes the modal and cleans up after the instance.
|
||||
* @param e {object} A jQuery-normalized event object.
|
||||
*/
|
||||
closeModal: function(e) {
|
||||
"use strict";
|
||||
|
||||
e.preventDefault();
|
||||
this.undelegateEvents();
|
||||
jQuery(document).off("focusin");
|
||||
jQuery("body").removeClass("generate-modal-open");
|
||||
jQuery("body").removeClass("generate-section-content");
|
||||
|
||||
// remove restricted media modal tab focus once it's closed
|
||||
this.$el.undelegate('keydown');
|
||||
|
||||
// remove the tinymce editor
|
||||
// this needs to be called before the modal is closed or it will fail in Firefox (that was fun to figure out...)
|
||||
if (typeof tinyMCE != "undefined") {
|
||||
tinymce.EditorManager.execCommand("mceRemoveEditor", true, "generate-sections-editor");
|
||||
}
|
||||
|
||||
// remove modal and unset instances
|
||||
this.remove();
|
||||
Generate_Sections.backbone_modal.__instance = undefined;
|
||||
this.mediaUploader = null;
|
||||
Generate_Sections.modalOpen = null;
|
||||
|
||||
// switch the insert button text back
|
||||
this.changeInsertText(true);
|
||||
|
||||
// send focus back to where it was prior to modal open
|
||||
Generate_Sections.lastFocus.focus();
|
||||
|
||||
// aria unhide the background
|
||||
jQuery("#wpwrap").attr("aria-hidden", "false");
|
||||
|
||||
// Fix bug where the window scrolls down 50px on close
|
||||
var topDistance = jQuery("body").offset().top;
|
||||
if ( topDistance >= jQuery("body").scrollTop() ) {
|
||||
jQuery("body").scrollTop(0);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Responds to the btn-ok.click event
|
||||
* @param e {object} A jQuery-normalized event object.
|
||||
* @todo You should make this your own.
|
||||
*/
|
||||
saveModal: function(e) {
|
||||
"use strict";
|
||||
|
||||
this.model.get("index");
|
||||
|
||||
var model = this.model;
|
||||
|
||||
// send the tinymce content to the textarea
|
||||
if (typeof tinyMCE != "undefined") {
|
||||
tinymce.triggerSave();
|
||||
}
|
||||
|
||||
var $inputs = this.ui.panels.find("input, select, textarea");
|
||||
|
||||
$inputs.each(function(index, input) {
|
||||
|
||||
var name = $(input).attr("name");
|
||||
|
||||
if (model.attributes.hasOwnProperty(name)) {
|
||||
var value = $(input).val();
|
||||
model.set(name, value);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
this.closeModal(e);
|
||||
},
|
||||
|
||||
/**
|
||||
* Handles tab clicks and switches to corresponding panel
|
||||
* @param e {object} A jQuery-normalized event object.
|
||||
*/
|
||||
switchTab: function(e) {
|
||||
"use strict";
|
||||
e.preventDefault();
|
||||
|
||||
// close lingering wp link windows
|
||||
if (typeof tinyMCE != "undefined" && 'style' == jQuery( e.currentTarget ).data( 'target' ) && this.ui.panels.find( '#wp-generate-sections-editor-wrap' ).hasClass( 'tmce-active' )) {
|
||||
tinyMCE.activeEditor.execCommand('wp_link_cancel');
|
||||
tinyMCE.activeEditor.execCommand('wp_media_cancel');
|
||||
}
|
||||
|
||||
this.ui.nav.children().removeClass("active");
|
||||
this.ui.panels.children().removeClass("active");
|
||||
|
||||
var target = jQuery(e.currentTarget).addClass("active").data("target");
|
||||
|
||||
this.ui.panels.find("div[data-id=" + target + "]").addClass("active");
|
||||
},
|
||||
|
||||
/**
|
||||
* close on keyboard shortcuts
|
||||
* @param {Object} event
|
||||
*/
|
||||
keydown: function(e) {
|
||||
// Close the modal when escape is pressed.
|
||||
if (27 === e.which && this.$el.is(':visible')) {
|
||||
this.closeModal(e);
|
||||
e.stopImmediatePropagation();
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
// Singular View
|
||||
Generate_Sections.sectionView = Backbone.View.extend({
|
||||
|
||||
model: Generate_Sections.Section,
|
||||
tagName: 'div',
|
||||
|
||||
initialize: function() {
|
||||
// re-render on all changes EXCEPT index
|
||||
this.listenTo(this.model, "change", this.maybeRender);
|
||||
},
|
||||
|
||||
attributes: {
|
||||
class: "ui-state-default section"
|
||||
},
|
||||
|
||||
// Get the template from the DOM
|
||||
template: wp.template("generate-sections-section"),
|
||||
|
||||
events: {
|
||||
'click .edit-section': 'editSection',
|
||||
'click .section-title > span': 'editSection',
|
||||
'click .delete-section': 'removeSection',
|
||||
'click .toggle-section': 'toggleSection',
|
||||
'reorder': 'reorder',
|
||||
},
|
||||
|
||||
maybeRender: function(e) {
|
||||
if (this.model.hasChanged('index')) return;
|
||||
this.render();
|
||||
},
|
||||
|
||||
// Render the single model - include an index.
|
||||
render: function() {
|
||||
this.model.set('index', this.model.collection.indexOf(this.model));
|
||||
this.$el.html(this.template(this.model.toJSON()));
|
||||
|
||||
if (!this.model.get('title')) {
|
||||
this.$el.find('h3.section-title > span').text(generate_sections_metabox_i18n.default_title);
|
||||
}
|
||||
this.$el.find('textarea').val(JSON.stringify(this.model));
|
||||
|
||||
return this;
|
||||
},
|
||||
|
||||
|
||||
// launch the edit modal
|
||||
editSection: function(e) {
|
||||
|
||||
// stash the current focus
|
||||
Generate_Sections.lastFocus = document.activeElement;
|
||||
Generate_Sections.modalOpen = true;
|
||||
|
||||
e.preventDefault();
|
||||
if (Generate_Sections.backbone_modal.__instance === undefined) {
|
||||
Generate_Sections.backbone_modal.__instance = new Generate_Sections.backbone_modal.Application({
|
||||
model: this.model
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
// reorder after sort
|
||||
reorder: function(event, index) {
|
||||
this.$el.trigger('update-sort', [this.model, index]);
|
||||
},
|
||||
|
||||
// remove/destroy a model
|
||||
removeSection: function(e) {
|
||||
e.preventDefault();
|
||||
if (confirm(generate_sections_metabox_i18n.confirm)) {
|
||||
this.model.destroy();
|
||||
Generate_Sections.sectionList.render(); // manually calling instead of listening since listening interferes with sorting
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// List View
|
||||
Generate_Sections.sectionListView = Backbone.View.extend({
|
||||
|
||||
el: "#generate_sections_container",
|
||||
events: {
|
||||
'update-sort': 'updateSort',
|
||||
// 'add-section': 'addOne'
|
||||
},
|
||||
|
||||
// callback for clone button
|
||||
addSection: function(model) {
|
||||
this.collection.add(model);
|
||||
this.addOne(model);
|
||||
},
|
||||
|
||||
addOne: function(model) {
|
||||
var view = new Generate_Sections.sectionView({
|
||||
model: model
|
||||
});
|
||||
this.$el.append(view.render().el);
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.children().remove();
|
||||
this.collection.each(this.addOne, this);
|
||||
return this;
|
||||
},
|
||||
|
||||
updateSort: function(event, model, position) {
|
||||
this.collection.remove(model);
|
||||
|
||||
// renumber remaining models around missing model
|
||||
this.collection.each(function(model, index) {
|
||||
|
||||
var new_index = index;
|
||||
if (index >= position) {
|
||||
new_index += 1;
|
||||
}
|
||||
model.set('index', new_index);
|
||||
});
|
||||
|
||||
// set the index of the missing model
|
||||
model.set('index', position);
|
||||
|
||||
// add the model back to the collection
|
||||
this.collection.add(model, {
|
||||
at: position
|
||||
});
|
||||
|
||||
this.render();
|
||||
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
// The Buttons & Nonce
|
||||
Generate_Sections.ButtonControls = Backbone.View.extend({
|
||||
|
||||
attributes: {
|
||||
class: "generate_sections_buttons"
|
||||
},
|
||||
|
||||
tagName: 'p',
|
||||
|
||||
el: "#_generate_sections_metabox",
|
||||
|
||||
template: wp.template("generate-sections-buttons"),
|
||||
|
||||
// Attach events
|
||||
events: {
|
||||
"click .button-primary": "newSection",
|
||||
"click #generate-delete-sections": "clearAll",
|
||||
'click .edit-section': 'editSection',
|
||||
},
|
||||
|
||||
// create new
|
||||
newSection: function(e) {
|
||||
e.preventDefault();
|
||||
var newSection = new Generate_Sections.Section();
|
||||
Generate_Sections.sectionList.addSection(newSection);
|
||||
},
|
||||
|
||||
// clear all models
|
||||
clearAll: function(e) {
|
||||
e.preventDefault();
|
||||
if (confirm(generate_sections_metabox_i18n.confirm)) {
|
||||
Generate_Sections.sectionCollection.reset();
|
||||
Generate_Sections.sectionList.render();
|
||||
}
|
||||
},
|
||||
|
||||
render: function() {
|
||||
this.$el.find(".generate_sections_control").append(this.template);
|
||||
return this;
|
||||
},
|
||||
|
||||
});
|
||||
|
||||
|
||||
// init
|
||||
Generate_Sections.initApplication = function() {
|
||||
|
||||
// Create Collection From Existing Meta
|
||||
Generate_Sections.sectionCollection = new Generate_Sections.SectionsCollection(generate_sections_metabox_i18n.sections);
|
||||
|
||||
// Create the List View
|
||||
Generate_Sections.sectionList = new Generate_Sections.sectionListView({
|
||||
collection: Generate_Sections.sectionCollection
|
||||
});
|
||||
Generate_Sections.sectionList.render();
|
||||
|
||||
// Buttons
|
||||
Generate_Sections.Buttons = new Generate_Sections.ButtonControls({
|
||||
collection: Generate_Sections.sectionCollection
|
||||
});
|
||||
Generate_Sections.Buttons.render();
|
||||
|
||||
};
|
||||
|
||||
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
/* Execute the above methods in the Generate_Sections object.
|
||||
/*-----------------------------------------------------------------------------------*/
|
||||
|
||||
jQuery(document).ready(function($) {
|
||||
|
||||
Generate_Sections.initApplication();
|
||||
|
||||
$( '#generate_sections_container' ).sortable({
|
||||
axis: "y",
|
||||
opacity: 0.5,
|
||||
grid: [20, 10],
|
||||
tolerance: "pointer",
|
||||
handle: ".move-section",
|
||||
update: function(event, ui) {
|
||||
ui.item.trigger("reorder", ui.item.index());
|
||||
}
|
||||
} );
|
||||
|
||||
if ( $( '.use-sections-switch' ).is( ':checked' ) ) {
|
||||
setTimeout( function() {
|
||||
generateShowSections();
|
||||
}, 200 );
|
||||
} else {
|
||||
generateHideSections();
|
||||
}
|
||||
|
||||
$( '.use-sections-switch' ).on( 'change', function( e ) {
|
||||
var status = ( $(this).is( ':checked' ) ) ? 'checked' : 'unchecked';
|
||||
|
||||
if ( 'checked' == status ) {
|
||||
generateShowSections();
|
||||
} else if ( 'unchecked' == status ) {
|
||||
generateHideSections();
|
||||
}
|
||||
} );
|
||||
|
||||
function generateShowSections() {
|
||||
|
||||
// Hide send to editor button
|
||||
$('.send-to-editor').css('display', 'none');
|
||||
|
||||
// Hide the editor
|
||||
$('#postdivrich').css({
|
||||
'opacity': '0',
|
||||
'height': '0',
|
||||
'overflow': 'hidden'
|
||||
});
|
||||
|
||||
$( '.editor-block-list__layout' ).hide();
|
||||
$( '.edit-post-layout__content .edit-post-visual-editor' ).css( {
|
||||
'flex-grow': 'unset',
|
||||
'flex-basis': '0'
|
||||
} );
|
||||
$( '.edit-post-layout__metaboxes:not(:empty)' ).css( 'border-top', '0' );
|
||||
|
||||
// Show the sections
|
||||
$('#_generate_sections_metabox').css({
|
||||
'opacity': '1',
|
||||
'height': 'auto'
|
||||
});
|
||||
|
||||
// Remove and add the default editor - this removes any visible toolbars etc..
|
||||
// We need to set a timeout for this to work
|
||||
// if (typeof tinyMCE != "undefined") {
|
||||
// tinyMCE.EditorManager.execCommand("mceRemoveEditor", true, "content");
|
||||
// $( '.use-sections-cover' ).css( 'z-index','10000' );
|
||||
// setTimeout('tinyMCE.EditorManager.execCommand("mceAddEditor", true, "content");', 1);
|
||||
// setTimeout('jQuery( ".use-sections-cover" ).css( "z-index","-1" );', 1000);
|
||||
// }
|
||||
|
||||
// Set a trigger
|
||||
$('body').trigger('generate_show_sections');
|
||||
|
||||
}
|
||||
|
||||
function generateHideSections() {
|
||||
|
||||
// Show send to editor button
|
||||
$('.send-to-editor').css('display', 'inline-block');
|
||||
|
||||
// Show the editor
|
||||
$('#postdivrich').css({
|
||||
'opacity': '1',
|
||||
'height': 'auto'
|
||||
});
|
||||
|
||||
$( '.editor-block-list__layout' ).show();
|
||||
$( '.edit-post-layout__content .edit-post-visual-editor' ).css( {
|
||||
'flex-grow': '',
|
||||
'flex-basis': ''
|
||||
} );
|
||||
$( '.edit-post-layout__metaboxes:not(:empty)' ).css( 'border-top', '' );
|
||||
|
||||
// Hide the sections
|
||||
$('#_generate_sections_metabox').css({
|
||||
'opacity': '0',
|
||||
'height': '0',
|
||||
'overflow': 'hidden'
|
||||
});
|
||||
|
||||
$('body').trigger('generate_hide_sections');
|
||||
|
||||
}
|
||||
|
||||
$( document ).on( 'click', '.edit-section.edit-settings', function() {
|
||||
$( 'body' ).trigger( 'generate_section_show_settings' );
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
})(jQuery, Generate_Sections);
|
||||
340
wp-content/plugins/gp-premium/sections/functions/metaboxes/js/wp-color-picker-alpha.min.js
vendored
Normal file
340
wp-content/plugins/gp-premium/sections/functions/metaboxes/js/wp-color-picker-alpha.min.js
vendored
Normal file
@ -0,0 +1,340 @@
|
||||
/**!
|
||||
* wp-color-picker-alpha
|
||||
*
|
||||
* Overwrite Automattic Iris for enabled Alpha Channel in wpColorPicker
|
||||
* Only run in input and is defined data alpha in true
|
||||
*
|
||||
* Version: 1.2.2
|
||||
* https://github.com/23r9i0/wp-color-picker-alpha
|
||||
* Copyright (c) 2015 Sergio P.A. (23r9i0).
|
||||
* Licensed under the GPLv2 license.
|
||||
*/
|
||||
( function( $ ) {
|
||||
// Variable for some backgrounds ( grid )
|
||||
var image = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAAHnlligAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHJJREFUeNpi+P///4EDBxiAGMgCCCAGFB5AADGCRBgYDh48CCRZIJS9vT2QBAggFBkmBiSAogxFBiCAoHogAKIKAlBUYTELAiAmEtABEECk20G6BOmuIl0CIMBQ/IEMkO0myiSSraaaBhZcbkUOs0HuBwDplz5uFJ3Z4gAAAABJRU5ErkJggg==',
|
||||
// html stuff for wpColorPicker copy of the original color-picker.js
|
||||
_before = '<button type="button" class="button wp-color-result" aria-expanded="false" style="position:relative;"><span class="wp-color-result-text">' + wpColorPickerL10n.pick + '</span></button>',
|
||||
_after = '<div class="wp-picker-holder" />',
|
||||
_wrap = '<div class="wp-picker-container" />',
|
||||
_button = '<input type="button" class="button button-small" />',
|
||||
_wrappingLabel = '<label></label>',
|
||||
_wrappingLabelText = '<span class="screen-reader-text"></span>';
|
||||
|
||||
/**
|
||||
* Overwrite Color
|
||||
* for enable support rbga
|
||||
*/
|
||||
Color.fn.toString = function() {
|
||||
if ( this._alpha < 1 )
|
||||
return this.toCSS( 'rgba', this._alpha ).replace( /\s+/g, '' );
|
||||
|
||||
var hex = parseInt( this._color, 10 ).toString( 16 );
|
||||
|
||||
if ( this.error )
|
||||
return '';
|
||||
|
||||
if ( hex.length < 6 )
|
||||
hex = ( '00000' + hex ).substr( -6 );
|
||||
|
||||
return '#' + hex;
|
||||
};
|
||||
|
||||
/**
|
||||
* Overwrite wpColorPicker
|
||||
*/
|
||||
$.widget( 'wp.wpColorPicker', $.wp.wpColorPicker, {
|
||||
_create: function() {
|
||||
// bail early for unsupported Iris.
|
||||
if ( ! $.support.iris )
|
||||
return;
|
||||
|
||||
var self = this,
|
||||
el = self.element;
|
||||
|
||||
self.inputWrapper = el.closest( '.wp-picker-input-wrap' );
|
||||
|
||||
$.extend( self.options, el.data() );
|
||||
|
||||
// keep close bound so it can be attached to a body listener
|
||||
self.close = $.proxy( self.close, self );
|
||||
|
||||
self.initialValue = el.val();
|
||||
|
||||
// Set up HTML structure, hide things
|
||||
el.addClass( 'wp-color-picker' ).wrap( _wrap );
|
||||
self.wrap = el.parent();
|
||||
self.toggler = $( _before ).insertBefore( el ).css( { backgroundColor : self.initialValue } ).attr( 'title', wpColorPickerL10n.pick ).attr( 'data-current', wpColorPickerL10n.current );
|
||||
self.pickerContainer = $( _after ).insertAfter( el );
|
||||
self.button = $( _button );
|
||||
|
||||
if ( self.options.defaultColor ) {
|
||||
self.button.addClass( 'wp-picker-default' ).val( wpColorPickerL10n.defaultString );
|
||||
} else {
|
||||
self.button.addClass( 'wp-picker-clear' ).val( wpColorPickerL10n.clear );
|
||||
}
|
||||
|
||||
el.wrap( '<span class="wp-picker-input-wrap hidden" />' ).after( self.button );
|
||||
|
||||
el.iris( {
|
||||
target : self.pickerContainer,
|
||||
hide : self.options.hide,
|
||||
width : self.options.width,
|
||||
mode : self.options.mode,
|
||||
palettes : self.options.palettes,
|
||||
change : function( event, ui ) {
|
||||
if ( self.options.alpha ) {
|
||||
self.toggler.css( { 'background-image' : 'url(' + image + ')' } ).html( '<span class="wp-color-result-text" style="position:relative;z-index:1;">' + wpColorPickerL10n.pick + '</span><span />' );
|
||||
self.toggler.find( 'span' ).last().css( {
|
||||
'width' : '100%',
|
||||
'height' : '100%',
|
||||
'position' : 'absolute',
|
||||
'top' : 0,
|
||||
'left' : 0,
|
||||
'border-top-left-radius' : '3px',
|
||||
'border-bottom-left-radius' : '3px',
|
||||
'background' : ui.color.toString()
|
||||
} );
|
||||
} else {
|
||||
self.toggler.css( { backgroundColor : ui.color.toString() } );
|
||||
}
|
||||
|
||||
// Check for a custom cb
|
||||
if ( $.isFunction( self.options.change ) )
|
||||
self.options.change.call( this, event, ui );
|
||||
}
|
||||
} );
|
||||
|
||||
el.val( self.initialValue );
|
||||
self._addListeners();
|
||||
|
||||
if ( ! self.options.hide ) {
|
||||
self.toggler.click();
|
||||
}
|
||||
},
|
||||
_addListeners: function() {
|
||||
var self = this;
|
||||
|
||||
// prevent any clicks inside this widget from leaking to the top and closing it
|
||||
self.wrap.on( 'click.wpcolorpicker', function( event ) {
|
||||
event.stopPropagation();
|
||||
} );
|
||||
|
||||
self.toggler.on( 'click', function() {
|
||||
if ( self.toggler.hasClass( 'wp-picker-open' ) ) {
|
||||
self.close();
|
||||
} else {
|
||||
self.open();
|
||||
}
|
||||
});
|
||||
|
||||
self.element.on( 'change', function( event ) {
|
||||
// Empty or Error = clear
|
||||
if ( $( this ).val() === '' || self.element.hasClass( 'iris-error' ) ) {
|
||||
if ( self.options.alpha ) {
|
||||
self.toggler.removeAttr( 'style' );
|
||||
self.toggler.find( 'span' ).css( 'backgroundColor', '' );
|
||||
} else {
|
||||
self.toggler.css( 'backgroundColor', '' );
|
||||
}
|
||||
|
||||
// fire clear callback if we have one
|
||||
if ( $.isFunction( self.options.clear ) )
|
||||
self.options.clear.call( this, event );
|
||||
}
|
||||
} );
|
||||
|
||||
// open a keyboard-focused closed picker with space or enter
|
||||
self.toggler.on( 'keyup', function( event ) {
|
||||
if ( event.keyCode === 13 || event.keyCode === 32 ) {
|
||||
event.preventDefault();
|
||||
self.toggler.trigger( 'click' ).next().focus();
|
||||
}
|
||||
});
|
||||
|
||||
self.button.on( 'click', function( event ) {
|
||||
if ( $( this ).hasClass( 'wp-picker-clear' ) ) {
|
||||
self.element.val( '' );
|
||||
if ( self.options.alpha ) {
|
||||
self.toggler.removeAttr( 'style' );
|
||||
self.toggler.find( 'span' ).css( 'backgroundColor', '' );
|
||||
} else {
|
||||
self.toggler.css( 'backgroundColor', '' );
|
||||
}
|
||||
|
||||
if ( $.isFunction( self.options.clear ) )
|
||||
self.options.clear.call( this, event );
|
||||
|
||||
} else if ( $( this ).hasClass( 'wp-picker-default' ) ) {
|
||||
self.element.val( self.options.defaultColor ).change();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Overwrite iris
|
||||
*/
|
||||
$.widget( 'a8c.iris', $.a8c.iris, {
|
||||
_create: function() {
|
||||
this._super();
|
||||
|
||||
// Global option for check is mode rbga is enabled
|
||||
this.options.alpha = this.element.data( 'alpha' ) || false;
|
||||
|
||||
// Is not input disabled
|
||||
if ( ! this.element.is( ':input' ) )
|
||||
this.options.alpha = false;
|
||||
|
||||
if ( typeof this.options.alpha !== 'undefined' && this.options.alpha ) {
|
||||
var self = this,
|
||||
el = self.element,
|
||||
_html = '<div class="iris-strip iris-slider iris-alpha-slider"><div class="iris-slider-offset iris-slider-offset-alpha"></div></div>',
|
||||
aContainer = $( _html ).appendTo( self.picker.find( '.iris-picker-inner' ) ),
|
||||
aSlider = aContainer.find( '.iris-slider-offset-alpha' ),
|
||||
controls = {
|
||||
aContainer : aContainer,
|
||||
aSlider : aSlider
|
||||
};
|
||||
|
||||
if ( typeof el.data( 'custom-width' ) !== 'undefined' ) {
|
||||
self.options.customWidth = parseInt( el.data( 'custom-width' ) ) || 0;
|
||||
} else {
|
||||
self.options.customWidth = 100;
|
||||
}
|
||||
|
||||
// Set default width for input reset
|
||||
self.options.defaultWidth = el.width();
|
||||
|
||||
// Update width for input
|
||||
if ( self._color._alpha < 1 || self._color.toString().indexOf('rgb') != -1 )
|
||||
el.width( parseInt( self.options.defaultWidth + self.options.customWidth ) );
|
||||
|
||||
// Push new controls
|
||||
$.each( controls, function( k, v ) {
|
||||
self.controls[k] = v;
|
||||
} );
|
||||
|
||||
// Change size strip and add margin for sliders
|
||||
self.controls.square.css( { 'margin-right': '0' } );
|
||||
var emptyWidth = ( self.picker.width() - self.controls.square.width() - 20 ),
|
||||
stripsMargin = ( emptyWidth / 6 ),
|
||||
stripsWidth = ( ( emptyWidth / 2 ) - stripsMargin );
|
||||
|
||||
$.each( [ 'aContainer', 'strip' ], function( k, v ) {
|
||||
self.controls[v].width( stripsWidth ).css( { 'margin-left' : stripsMargin + 'px' } );
|
||||
} );
|
||||
|
||||
// Add new slider
|
||||
self._initControls();
|
||||
|
||||
// For updated widget
|
||||
self._change();
|
||||
}
|
||||
},
|
||||
_initControls: function() {
|
||||
this._super();
|
||||
|
||||
if ( this.options.alpha ) {
|
||||
var self = this,
|
||||
controls = self.controls;
|
||||
|
||||
controls.aSlider.slider({
|
||||
orientation : 'vertical',
|
||||
min : 0,
|
||||
max : 100,
|
||||
step : 1,
|
||||
value : parseInt( self._color._alpha * 100 ),
|
||||
slide : function( event, ui ) {
|
||||
// Update alpha value
|
||||
self._color._alpha = parseFloat( ui.value / 100 );
|
||||
self._change.apply( self, arguments );
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_change: function() {
|
||||
this._super();
|
||||
|
||||
var self = this,
|
||||
el = self.element;
|
||||
|
||||
if ( this.options.alpha ) {
|
||||
var controls = self.controls,
|
||||
alpha = parseInt( self._color._alpha * 100 ),
|
||||
color = self._color.toRgb(),
|
||||
gradient = [
|
||||
'rgb(' + color.r + ',' + color.g + ',' + color.b + ') 0%',
|
||||
'rgba(' + color.r + ',' + color.g + ',' + color.b + ', 0) 100%'
|
||||
],
|
||||
defaultWidth = self.options.defaultWidth,
|
||||
customWidth = self.options.customWidth,
|
||||
target = self.picker.closest( '.wp-picker-container' ).find( '.wp-color-result' );
|
||||
|
||||
// Generate background slider alpha, only for CSS3 old browser fuck!! :)
|
||||
controls.aContainer.css( { 'background' : 'linear-gradient(to bottom, ' + gradient.join( ', ' ) + '), url(' + image + ')' } );
|
||||
|
||||
if ( target.hasClass( 'wp-picker-open' ) ) {
|
||||
// Update alpha value
|
||||
controls.aSlider.slider( 'value', alpha );
|
||||
|
||||
/**
|
||||
* Disabled change opacity in default slider Saturation ( only is alpha enabled )
|
||||
* and change input width for view all value
|
||||
*/
|
||||
if ( self._color._alpha < 1 ) {
|
||||
controls.strip.attr( 'style', controls.strip.attr( 'style' ).replace( /rgba\(([0-9]+,)(\s+)?([0-9]+,)(\s+)?([0-9]+)(,(\s+)?[0-9\.]+)\)/g, 'rgb($1$3$5)' ) );
|
||||
el.width( parseInt( defaultWidth + customWidth ) );
|
||||
} else {
|
||||
el.width( defaultWidth );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
var reset = el.data( 'reset-alpha' ) || false;
|
||||
|
||||
if ( reset ) {
|
||||
self.picker.find( '.iris-palette-container' ).on( 'click.palette', '.iris-palette', function() {
|
||||
self._color._alpha = 1;
|
||||
self.active = 'external';
|
||||
self._change();
|
||||
} );
|
||||
}
|
||||
},
|
||||
_addInputListeners: function( input ) {
|
||||
var self = this,
|
||||
debounceTimeout = 100,
|
||||
callback = function( event ) {
|
||||
var color = new Color( input.val() ),
|
||||
val = input.val();
|
||||
|
||||
input.removeClass( 'iris-error' );
|
||||
// we gave a bad color
|
||||
if ( color.error ) {
|
||||
// don't error on an empty input
|
||||
if ( val !== '' )
|
||||
input.addClass( 'iris-error' );
|
||||
} else {
|
||||
if ( color.toString() !== self._color.toString() ) {
|
||||
// let's not do this on keyup for hex shortcodes
|
||||
if ( ! ( event.type === 'keyup' && val.match( /^[0-9a-fA-F]{3}$/ ) ) )
|
||||
self._setOption( 'color', color.toString() );
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
input.on( 'change', callback ).on( 'keyup', self._debounce( callback, debounceTimeout ) );
|
||||
|
||||
// If we initialized hidden, show on first focus. The rest is up to you.
|
||||
if ( self.options.hide ) {
|
||||
input.on( 'focus', function() {
|
||||
self.show();
|
||||
} );
|
||||
}
|
||||
}
|
||||
} );
|
||||
}( jQuery ) );
|
||||
|
||||
// Auto Call plugin is class is color-picker
|
||||
jQuery( document ).ready( function( $ ) {
|
||||
$( '.color-picker' ).wpColorPicker();
|
||||
} );
|
||||
Reference in New Issue
Block a user