Your IP : 13.58.110.182
/* global document, Backbone */
/* jshint unused:false, newcap: false */
/**
* Slide Model
*/
var SoliloquySlide = Backbone.Model.extend({
/**
* Defaults
* As we always populate this model with existing data, we
* leave these blank to just show how this model is structured.
*/
defaults: {
'id': '',
'title': '',
'caption': '',
'alt': '',
'link': '',
'type': '',
},
});
/**
* Images Collection
* - Comprises of all slides in an Soliloquy Slider
* - Each image is represented by an SoliloquySlides Model
*/
var SoliloquySlides = new Backbone.Collection();
/**
* Modal Window
*/
var SoliloquyModalWindow = new wp.media.view.Modal({
controller: {
trigger: function () {
}
}
});
/**
* View
*/
var SoliloquyView = wp.Backbone.View.extend({
/**
* The Tag Name and Tag's Class(es)
*/
id: 'soliloquy-meta-edit',
tagName: 'div',
className: 'edit-attachment-frame mode-select hide-menu hide-router',
/**
* Template
* - The template to load inside the above tagName element
*/
template: wp.template('soliloquy-meta-editor'),
/**
* Events
* - Functions to call when specific events occur
*/
events: {
'click .edit-media-header .left': 'loadPreviousItem',
'click .edit-media-header .right': 'loadNextItem',
'keyup input': 'updateItem',
'keyup textarea': 'updateItem',
'change input': 'updateItem',
'change textarea': 'updateItem',
'keyup .CodeMirror': 'updateCode',
'blur textarea': 'updateItem',
'change select': 'updateItem',
'click a.soliloquy-meta-submit': 'saveItem',
'keyup input#link-search': 'searchLinks',
'click div.query-results li': 'insertLink',
'click a.soliloquy-thumbnail': 'insertThumb',
'click a.soliloquy-thumbnail-delete': 'removeThumb',
'click button.media-file': 'insertMediaFileLink',
'click button.attachment-page': 'insertAttachmentPageLink',
},
/**
* Initialize
*
* @param object model SoliloquyImage Backbone Model
*/
initialize: function (args) {
// Set some flags
this.is_loading = false;
this.collection = args.collection;
this.child_views = args.child_views;
this.attachment_id = args.attachment_id;
this.attachment_index = 0;
this.search_timer = '';
// Get the model from the collection
var count = 0;
this.collection.each(function (model) {
// If this model's id matches the attachment id, this is the model we want, also make sure both are int
if (String(model.get('id')) == String(this.attachment_id)) {
this.model = model;
this.attachment_index = count;
return false;
}
// Increment the index count
count++;
}, this);
},
updateCode: function (e) {
$model = this.model;
$textarea = this.$el.find('.soliloquy-html-slide-code');
$model.set('code', this.editor.getValue(), { silent: true });
$textarea.text();
},
insertThumb: function (e) {
$model = this.model;
e.preventDefault();
// Get input field class name
var fieldClassName = this.$el.data('field');
var soliloquy_media_frame = wp.media.frames.soliloquy_media_frame = wp.media({
className: 'media-frame soliloquy-media-frame',
frame: 'select',
multiple: false,
title: soliloquy_metabox_local.videoframe,
library: {
type: 'image'
},
button: {
text: soliloquy_metabox_local.videouse
}
});
soliloquy_media_frame.on('select', function () {
// Grab our attachment selection and construct a JSON representation of the model.
var thumbnail = soliloquy_media_frame.state().get('selection').first().toJSON();
$model.set('src', thumbnail.url, { silent: true });
jQuery('div.thumbnail > img', $parent.find('.media-frame-content')).attr('src', thumbnail.url);
});
// Now that everything has been set, let's open up the frame.
soliloquy_media_frame.open();
},
removeThumb: function (e) {
e.preventDefault();
$model = this.model;
$parent = this.$el.parent();
jQuery('div.thumbnail > img', $parent.find('.media-frame-content')).attr('src', '');
$model.set('src', '', { silent: true });
},
/**
* Render
* - Binds the model to the view, so we populate the view's fields and data
*/
render: function () {
// Get HTML
this.$el.html(this.template(this.model.attributes));
// If any child views exist, render them now
if (this.child_views.length > 0) {
this.child_views.forEach(function (view) {
// Init with model
var child_view = new view({
model: this.model
});
// Render view within our main view
this.$el.find('div.addons').append(child_view.render().el);
}, this);
}
// Set caption
this.$el.find('textarea[name=caption]').val(this.model.get('caption'));
// Init QuickTags on the caption editor
// Delay is required for the first load for some reason
setTimeout(function () {
quicktags({
id: 'caption',
buttons: 'strong,em,link,ul,ol,li,close'
});
QTags._buttonsInit();
}, 500);
// Init Link Searching
wpLink.init;
// Enable / disable the buttons depending on the index
if (this.attachment_index === 0) {
// Disable left button
this.$el.find('button.left').addClass('disabled');
}
if (this.attachment_index == (this.collection.length - 1)) {
// Disable right button
this.$el.find('button.right').addClass('disabled');
}
textarea = this.$el.find('.soliloquy-html-slide-code');
if (textarea.length) {
this.editor = CodeMirror.fromTextArea(textarea[0], {
enterMode: 'keep',
indentUnit: 4,
electricChars: false,
lineNumbers: true,
lineWrapping: true,
matchBrackets: true,
mode: 'php',
smartIndent: false,
tabMode: 'shift',
theme: 'ttcn'
});
}
this.$el.trigger('soliloquyRenderMeta');
// Return
return this;
},
/**
* Tells the view we're loading by displaying a spinner
*/
loading: function () {
// Set a flag so we know we're loading data
this.is_loading = true;
// Show the spinner
this.$el.find('.spinner').css('visibility', 'visible');
},
/**
* Hides the loading spinner
*/
loaded: function (response) {
// Set a flag so we know we're not loading anything now
this.is_loading = false;
// Hide the spinner
this.$el.find('.spinner').css('visibility', 'hidden');
// Display the error message, if it's provided
if (typeof response !== 'undefined') {
alert(response);
}
},
/**
* Load the previous model in the collection
*/
loadPreviousItem: function () {
// Decrement the index
this.attachment_index--;
// Get the model at the new index from the collection
this.model = this.collection.at(this.attachment_index);
// Update the attachment_id
this.attachment_id = this.model.get('id');
// Re-render the view
this.render();
},
/**
* Load the next model in the collection
*/
loadNextItem: function () {
// Increment the index
this.attachment_index++;
// Get the model at the new index from the collection
this.model = this.collection.at(this.attachment_index);
// Update the attachment_id
this.attachment_id = this.model.get('id');
// Re-render the view
this.render();
},
/**
* Updates the model based on the changed view data
*/
updateItem: function (event) {
// Check if the target has a name. If not, it's not a model value we want to store
if (event.target.name == '') {
return;
}
// Update the model's value, depending on the input type
if (event.target.type == 'checkbox') {
value = (event.target.checked ? 1 : 0);
} else {
value = event.target.value;
}
// Update the model
this.model.set(event.target.name, value);
},
/**
* Saves the image metadata
*/
saveItem: function (event) {
event.preventDefault();
// Tell the View we're loading
this.trigger('loading');
// Make an AJAX request to save the image metadata
wp.media.ajax('soliloquy_save_meta', {
context: this,
data: {
nonce: soliloquy_metabox_local.save_nonce,
post_id: soliloquy_metabox_local.id,
attach_id: this.model.get('id'),
meta: this.model.attributes,
},
success: function (response) {
// Tell the view we've finished successfully
this.trigger('loaded loaded:success');
// Assign the model's JSON string back to the underlying item
var item = JSON.stringify(this.model.attributes);
jQuery('ul#soliloquy-output li#' + this.model.get('id')).attr('data-soliloquy-image-model', item);
// Show the user the 'saved' notice for 1.5 seconds
var saved = this.$el.find('.saved');
saved.fadeIn();
setTimeout(function () {
saved.fadeOut();
}, 1500);
},
error: function (error_message) {
// Tell wp.media we've finished, but there was an error
this.trigger('loaded loaded:error', error_message);
}
});
},
/**
* Searches Links
*/
searchLinks: function (event) {
},
/**
* Inserts the clicked link into the URL field
*/
insertLink: function (event) {
},
/**
* Inserts the direct media link for the Media Library item
*
* The button triggering this event is only displayed if we are editing a
* Media Library item, so there's no need to perform further checks
*/
insertMediaFileLink: function (event) {
// Tell the View we're loading
this.trigger('loading');
// Make an AJAX request to get the media link
wp.media.ajax('soliloquy_get_attachment_links', {
context: this,
data: {
nonce: soliloquy_metabox_local.save_nonce,
attachment_id: this.model.get('id'),
},
success: function (response) {
// Update model
this.model.set('link', response.media_link);
// Tell the view we've finished successfully
this.trigger('loaded loaded:success');
// Re-render the view
this.render();
},
error: function (error_message) {
// Tell wp.media we've finished, but there was an error
this.trigger('loaded loaded:error', error_message);
}
});
},
/**
* Inserts the attachment page link for the Media Library item
*
* The button triggering this event is only displayed if we are editing a
* Media Library item, so there's no need to perform further checks
*/
insertAttachmentPageLink: function (event) {
// Tell the View we're loading
this.trigger('loading');
// Make an AJAX request to get the media link
wp.media.ajax('soliloquy_get_attachment_links', {
context: this,
data: {
nonce: soliloquy_metabox_local.save_nonce,
attachment_id: this.model.get('id'),
},
success: function (response) {
// Update model
this.model.set('link', response.attachment_page);
// Tell the view we've finished successfully
this.trigger('loaded loaded:success');
// Re-render the view
this.render();
},
error: function (error_message) {
// Tell wp.media we've finished, but there was an error
this.trigger('loaded loaded:error', error_message);
}
});
}
});
/**
* Sub Views
* - Addons must populate this array with their own Backbone Views, which will be appended
* to the settings region
*/
var SoliloquyChildViews = [];
var SoliloquyContentViews = [];
/**
* DOM
*/
; (function ($) {
$(document).ready(function () {
soliloquy_edit = {
init: function () {
// Populate the collection
SoliloquySlidesUpdate();
// Edit Image
$('#soliloquy-settings-content').on('click.soliloquyModify', '.soliloquy-modify-slide', function (e) {
// Prevent default action
e.preventDefault();
// Get the selected attachment
var attachment_id = $(this).parent().data('soliloquy-slide');
// Pass the collection of images for this gallery to the modal view, as well
// as the selected attachment
SoliloquyModalWindow.content(new SoliloquyView({
collection: SoliloquySlides,
child_views: SoliloquyChildViews,
attachment_id: attachment_id,
}));
// Open the modal window
SoliloquyModalWindow.open();
$(document).trigger('soliloquyEditOpen');
$('.CodeMirror').each(function (i, el) {
el.CodeMirror.refresh();
});
});
}
};
soliloquy_edit.init();
});
$(document).on('soliloquyUploaded', function () {
soliloquy_edit.init();
});
})(jQuery);
/**
* Populates the SoliloquySlides Backbone collection
*
* Called when images are added, deleted or reordered
* Doesn't need to be called when an image is edited, as the model will be updated automatically in the collection
*/
function SoliloquySlidesUpdate(selected) {
// Clear the collection
SoliloquySlides.reset();
var $items = 'ul#soliloquy-output li.soliloquy-slide' + (selected ? '.selected' : '');
// Iterate through the gallery images in the DOM, adding them to the collection
jQuery($items).each(function () {
// Build an SoliloquyImage Backbone Model from the JSON supplied in the element
var soliloquy_slide = jQuery.parseJSON(jQuery(this).attr('data-soliloquy-image-model'));
// Add the model to the collection
SoliloquySlides.add(new SoliloquySlide(soliloquy_slide));
});
}