/t/upfront/scripts/upfront/upfront-media.js
JavaScript | 2868 lines | 2558 code | 158 blank | 152 comment | 275 complexity | 8799fe65b60e14287bb765d5bd21c8a9 MD5 | raw file
Possible License(s): Apache-2.0, GPL-2.0, LGPL-3.0, LGPL-2.1, AGPL-1.0, BSD-3-Clause, MIT, GPL-3.0, MPL-2.0-no-copyleft-exception
Large files files are truncated, but you can click here to view the full file
- (function ($, undefined) {
-
- define([
- 'scripts/upfront/upfront-media/insert-options-item-control',
- 'scripts/perfect-scrollbar/perfect-scrollbar'
- ], function(InsertOptions, perfectScrollbar) {
-
- var MEDIA_SIZES = {
- FULL: "full",
- to_size: function (size) {
- return size.width + 'x' + size.height;
- }
- };
-
- var l10n = Upfront.Settings.l10n.media;
-
- var INSERT_OPTIONS = InsertOptions.INSERT_OPTIONS;
-
- // ----- Models -----
-
- var MediaItem_Model = Backbone.Model.extend({
- defaults: {
- thumbnail: "<span class='upfront-image-upload-placeholder'></span>",
- insert_option: "image_insert"
- }
- });
-
- var MediaCollection_Model = Backbone.Collection.extend({
- defaults:{
- thumbnail: '',
- title: ''
- }
- });
- var MediaCollection_Selection = Backbone.Collection.extend({
- model: MediaItem_Model,
- initialize: function () {
- this.listenTo(Upfront.Events, "media_manager:media:labels_loaded", this.global_labels_loaded);
- },
- get_shared_labels: function () {
- var known_labels = ActiveFilters.get("label"),
- selected_labels = [],
- shared_labels = [],
- tmp_shared = {}
- ;
- this.each(function (item) {
- var labels = item.get("labels") || [];
- labels = _.map(labels, function(each){ return parseInt(each, 10); });
- tmp_shared[item.get("ID")] = labels;
- });
- selected_labels = _.intersection.apply(this, _(tmp_shared).values());
- known_labels.each(function (label) {
- if (
- selected_labels.indexOf(label.get("value")) >= 0
- ||
- selected_labels.indexOf(parseInt(label.get("value"), 10)) >= 0
- ) shared_labels.push(label);
- });
- return shared_labels;
- },
- get_additional_sizes: function () {
- if (!ActiveFilters.multiple_sizes) return false; // Do not use multiple sizes if we're told not to
- var all_item_sizes = this.invoke("get", "additional_sizes"),
- item_sizes = []
- ;
- _(all_item_sizes).each(function (item, idx) {
- var tmp_sizes = [];
- if (!idx) item_sizes = _(item).map(function (size) { return MEDIA_SIZES.to_size(size);});
- _(item).each(function (size) {
- tmp_sizes.push(MEDIA_SIZES.to_size(size));
- });
- item_sizes = _.intersection(item_sizes, tmp_sizes);
- });
- item_sizes.push(MEDIA_SIZES.FULL);
- return item_sizes;
- },
- is_used_label: function (label) {
- return (_(this.get_shared_labels()).invoke("get", "value").indexOf(label.get("value")) >= 0);
- },
- update_label_state: function (label) {
- return this.is_used_label(label)
- ? this.disassociate_label(label)
- : this.associate_label(label)
- ;
- },
- associate_label: function (label) {
- this._update_label('', label);
- },
- disassociate_label: function (label) {
- this._update_label('dis', label);
- },
- _update_label: function (pfx, label) {
- pfx = pfx || '';
- var me = this,
- idx = label.get("value"),
- data = {
- action: "upfront-media-" + pfx + "associate_label",
- term: idx,
- post_ids: this.invoke("get", "ID")
- }
- ;
- Upfront.Util.post(data)
- .success(function (response) {
- me.each(function (model) {
- var labels = response.data[model.get("ID")];
- if (labels) model.set({labels: labels}, {silent: true});
- });
- me.trigger("change");
- })
- ;
- },
- add_new_label: function (label) {
- var me = this,
- data = {
- "action": "upfront-media-add_label",
- "term": label,
- "post_ids": this.invoke("get", "ID")
- }
- ;
- return Upfront.Util.post(data)
- .success(function (response) {
- me.each(function (model) {
- var labels = response.data[model.get("ID")];
- if (labels) model.set({labels: labels}, {silent: true});
- });
- Upfront.Events.trigger("media_manager:media:labels_updated");
- me.trigger("change");
- })
- ;
- },
- delete_media_items: function () {
- var me = this,
- data = {
- "action": "upfront-media-remove_item",
- "post_ids": this.invoke("get", "ID")
- }
- ;
- Upfront.Util.post(data)
- .success(function (response) {
- me.reset([]);
- Upfront.Events.trigger("media_manager:media:list", ActiveFilters);
- })
- ;
- },
- // Same as delete_media_items except for theme/UI images.
- delete_theme_items: function () {
- var me = this,
- data = {
- "action": "upfront-media-remove_theme_item",
- // Theme images use file names rather than post IDs.
- "post_ids": this.invoke("get", "post_title")
- }
- ;
- Upfront.Util.post(data)
- .success(function (response) {
- me.reset([]);
- Upfront.Events.trigger("media_manager:media:list", ActiveFilters);
- })
- ;
- },
- global_labels_loaded: function () {
- this.trigger("change");
- }
- });
-
- var MediaFilter_Item = Backbone.Model.extend({
- });
-
- var MediaFilter_Collection = Backbone.Collection.extend({
- model: MediaFilter_Item
- });
-
- var ActiveMediaFilter_Collection = Backbone.Model.extend({
- CONST: {
- CUTOFF_SIZE: 8,
- CUTOFF_BIT: 3
- },
- labels_cache: false,
- default_media_types: ['images', 'videos', 'audios', 'other'],
- allowed_media_types: [],
- image_sizes: true,
- showing_titles: true,
- current_keys: [],
- current_models: [],
- current_page: 1,
- max_pages: 1,
- max_items: 1,
- media_limit: 60,
- current_filter_control: 0,
- initialize: function () {
- this.to_defaults();
- this.listenTo(Upfront.Events, "media_manager:media:filters_updated", this.update_active_filters);
- this.listenTo(Upfront.Events, "media_manager:media:labels_updated", this.reload_labels);
- this.listenTo(Upfront.Events, "media_manager:media:toggle_titles", this.toggle_titles);
- },
- to_defaults: function () {
- var types = new MediaFilter_Collection([]),
- has_all = (this.allowed_media_types.indexOf('other') >= 0)
- ;
- if (!this.allowed_media_types.length) this.allowed_media_types = this.default_media_types;
-
- if (this.allowed_media_types.indexOf('images') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.images, value: 'images', state: !has_all}), {silent: true});
- if (this.allowed_media_types.indexOf('videos') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.videos, value: 'videos', state: !has_all}), {silent: true});
- if (this.allowed_media_types.indexOf('audios') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.audios, value: 'audios', state: !has_all}), {silent: true});
- if (this.allowed_media_types.indexOf('other') >= 0) types.add(new MediaFilter_Item({filter: l10n.filter.all, value: 'other', state: has_all}), {silent: true});
-
- this.set("type", types, {silent: true});
-
- this.set("recent", new MediaFilter_Collection([
- new MediaFilter_Item({filter: "5", value: 5, state: false}),
- new MediaFilter_Item({filter: "10", value: 10, state: false}),
- new MediaFilter_Item({filter: "20", value: 20, state: false}),
- new MediaFilter_Item({filter: "40", value: 40, state: false}),
- new MediaFilter_Item({filter: "100", value: 100, state: false})
- ]), {silent: true});
-
- this.set("order", new MediaFilter_Collection([
- new MediaFilter_Item({filter: l10n.filter.newest, value: 'date_desc', state: true}),
- new MediaFilter_Item({filter: l10n.filter.oldest, value: 'date_asc', state: false}),
- new MediaFilter_Item({filter: l10n.filter.a_z, value: 'title_asc', state: false}),
- new MediaFilter_Item({filter: l10n.filter.z_a, value: 'title_desc', state: false})
- ]), {silent: true});
-
- this.set({"search": new MediaFilter_Collection([])}, {silent: true});
-
- this.themeImages =false;
- this.current_page = 1;
- this.current_filter_control = 0;
-
- this.set_labels_to_defaults();
- },
- set_max_pages: function (max) {
- this.max_pages = !_.isUndefined(max) ? max : 1;
- },
- set_max_items: function (max) {
- this.max_items = !_.isUndefined(max) ? max : 1;
- },
- prev_page: function () {
- if (this.current_page > 1) return this.set_page(this.current_page-1);
- },
- next_page: function () {
- if (this.current_page < this.max_pages) return this.set_page(this.current_page+1);
- },
- set_page: function (page) {
- if (!page) return false;
- if (page >= 1 && page < this.max_pages) {
- if (page == this.current_page) return false; // Already here.
- this.current_page = page;
- return true;
- } else return false;
- },
- toggle_titles: function () {
- this.showing_titles = !this.showing_titles;
- },
- set_labels_to_defaults: function () {
- if (this.labels_cache) {
- var arr = [];
- _(this.labels_cache).each(function (item) {
- arr.push(new MediaFilter_Item({filter: item.name, value: item.term_id, state: false}));
- });
- this.set("label", new MediaFilter_Collection(arr), {silent: true});
- Upfront.Events.trigger("media_manager:media:labels_loaded");
- } else this.reload_labels();
- },
- reload_labels: function () {
- var me = this;
- Upfront.Util.post({action: "upfront-media-get_labels"})
- .success(function (response) {
- var arr = [];
- if (response.data) {
- me.labels_cache = response.data;
- me.set_labels_to_defaults();
- }
- })
- ;
- },
- update_active_filters: function (filter, data) {
- if (!filter || !this.get(filter)) {
- this.to_defaults();
- Upfront.Events.trigger("media_manager:media:filters_reset");
- } else {
- var collection = data && data.get ? data.get(filter).toArray() : data,
- me = this.get(filter)
- ;
- _(collection).each(function (item) {
- if (item.get("state")) {
- var has = me.where({filter: item.get("filter")});
- if (has.length) {
- has[0].set({state: item.get("state")}, {silent: true});
- }
- }
- });
- // Reset page to 1
- this.set_page(1);
- }
- Upfront.Events.trigger("media_manager:media:list", this);
- },
- to_request_json: function () {
- var data = {},
- me = this
- ;
- _(this.attributes).each(function (collection, idx) {
- var active = me.get(idx).where({state:true});
- data[idx] = _(active).invoke("get", "value");
- });
- data.page = this.current_page;
- return data;
- },
- to_list: function () {
- var data = {},
- me = this
- ;
- _(this.attributes).each(function (collection, idx) {
- var active = me.get(idx).where({state:true}),
- active_non_defaults = []
- ;
- active_non_defaults = _(active).filter(function (filter) {
- var value = filter.get("value");
- return "other" !== value && "date_desc" !== value;
- });
- data[idx] = _(active_non_defaults).invoke("get", "filter");
- });
- return data;
- },
- has_upload: function () {
- if ( Upfront.Settings.Application.PERMS.UPLOAD ) {
- if (!this.themeImages) return true; // Allow when not looking into theme images
- return true === Upfront.plugins.isRequiredByPlugin('media filter upload');
- } else {
- return false; // disabling upload when user role has no permission
- }
- }
- });
-
- var ActiveFilters = new ActiveMediaFilter_Collection();
-
- // ----- Views -----
-
-
- var MediaManager_Controls_View = Backbone.View.extend({
- className: "upfront-media-controls",
- is_search_active: false,
- initialize: function (args) {
- this.listenTo(Upfront.Events, "media:item:selection_changed", this.switch_controls);
- this.listenTo(Upfront.Events, "media:search:requested", this.switch_to_search);
- this.listenTo(Upfront.Events, "media_manager:load:done", this.render_filters);
- this.options = args.options;
- },
- render: function () {
- if (!this.options.show_insert) {
- this.$el.addClass('upfront-media-controls-no-insert');
- }
- this.render_filters();
- },
- render_filters: function () {
- if (this.search) this.search.remove();
- this.search = new MediaManager_SearchControl();
- if (this.control) this.control.remove();
- this.control = this.is_search_active ? new MediaManager_SearchFiltersControl() : new MediaManager_FiltersControl();
- this.search.render();
- this.control.render();
- this.$el.empty().append(this.search.$el).append(this.control.$el);
- if ( this.is_search_active ) this.$el.removeClass('upfront-media-controls-search-selected').addClass('upfront-media-controls-search');
- else this.$el.removeClass('upfront-media-controls-search');
- },
- render_media: function (selected) {
- var item_control = new MediaManager_ItemControl({model: new MediaCollection_Selection(selected), options: this.options});
- item_control.render();
- this.$el.empty();
- if (this.is_search_active) {
- this.control = new MediaManager_SearchFiltersControl();
- this.control.render();
- this.$el.append(this.control.$el);
- this.$el.removeClass('upfront-media-controls-search').addClass('upfront-media-controls-search-selected');
- }
- else
- this.$el.removeClass('upfront-media-controls-search-selected');
- this.$el.append(item_control.$el);
- },
- switch_controls: function (media_collection) {
- var positive = media_collection.where({selected: true});
- if (positive.length) this.render_media(positive);
- else this.render_filters();
- },
- switch_to_search: function (search) {
- this.is_search_active = search && search.get("state");
- //this.render_filters(); // This will be rendered later in another event to prevent double rendering in a row
- },
- remove: function() {
- if (this.control) this.control.remove();
- Backbone.View.prototype.remove.call(this);
- }
- });
-
- var MediaManager_AuxControls_View = Backbone.View.extend({
- className: "upfront-media-aux_controls",
- initialize: function () {
- this.listenTo(Upfront.Events, "media:item:selection_changed", this.switch_controls);
- },
- render: function () {
- //this.render_selection();
- },
- /*render_selection: function () {
- var selection_control = new MediaManager_SelectionControl({model: this.model});
- selection_control.render();
- this.$el.empty().append(selection_control.$el);
- this.$el.removeClass('upfront-media-aux_controls-has-select');
- },*/
- render_delete: function (selected) {
- var delete_control = new MediaManager_DeleteControl({model: new MediaCollection_Selection(selected)});
- delete_control.render();
- //this.render_selection();
- this.$el.empty().append(delete_control.$el);
- this.$el.addClass('upfront-media-aux_controls-has-select');
- },
- switch_controls: function (media_collection) {
- var positive = media_collection && media_collection.where ? media_collection.where({selected: true}) : [];
- if (positive.length) this.render_delete(positive);
- //else this.render_selection();
- }
- });
-
- var MediaManager_SelectionControl = Backbone.View.extend({
- className: "select_control_container",
- events: {
- "click a.none": "select_none",
- "click a.all": "select_all"
- },
- initialize: function () {
- this.display_values = [
- {label: '20', value: 20},
- {label: '40', value: 40},
- {label: '60', value: 60},
- {label: '80', value: 80},
- {label: '100', value: 100}
- ];
- },
- render: function () {
- var me = this;
- me.$el.empty().append(l10n.select + ' <a href="#all" class="all">' + l10n.all + '</a> | <a href="#none" class="none">' + l10n.none + '</a>');
-
- me.select_display_field = new Upfront.Views.Editor.Field.Select({
- label: l10n.display+":",
- className: "upfront-field-wrap upfront-field-wrap-select upfront-filter_display_control",
- name: "display-selection",
- width: '70px',
- values: me.display_values,
- multiple: false,
- default_value: ActiveFilters.media_limit,
- change: function(){
- me.select_display(this.get_value());
- }
- });
- me.select_display_field.render();
- me.$el.append(me.select_display_field.$el);
- },
- select_display: function (limit) {
- ActiveFilters.media_limit = limit;
- Upfront.Events.trigger("media_manager:media:list", ActiveFilters);
- },
- select_none: function (e) {
- e.preventDefault();
- e.stopPropagation();
-
- var positive = this.model.where({selected: true});
- if ( positive.length ) {
- this.model.each(function (item) {
- item.set({selected: false}, {silent: true});
- });
- this.model.trigger("change");
- Upfront.Events.trigger("media:item:selection_changed", this.model);
-
- // run again to apply the new list
- var selected_model = new MediaCollection_Selection(ActiveFilters.current_models);
- Upfront.Events.trigger("media:item:selection_changed", selected_model);
- }
- },
- select_all: function (e) {
- e.preventDefault();
- e.stopPropagation();
- var all = [];
- this.model.each(function (item) {
- item.set({selected: true}, {silent: true});
- all.push(item);
- });
- this.model.trigger("change");
- Upfront.Events.trigger("media:item:selection_changed", this.model);
-
- // run again to apply the new list
- var selected_model = new MediaCollection_Selection(ActiveFilters.current_models);
- Upfront.Events.trigger("media:item:selection_changed", selected_model);
- }
- });
- var MediaManager_DeleteControl = Backbone.View.extend({
- className: "delete_control_container upfront-icon upfront-icon-trash",
- events: {
- click: "delete_selection"
- },
- render: function () {
- this.$el.empty().append('<a href="#delete">' + l10n.del_command + '</a>');
- },
- delete_selection: function (e) {
- e.preventDefault();
- e.stopPropagation();
-
- if ( confirm(l10n.confirm_delete_items) ) {
- var show_nag = false;
- this.model.each(function (item) {
- if (item.get("parent")) show_nag = true;
- });
- if (!show_nag || (show_nag && confirm(l10n.item_in_use_nag))) {
- ActiveFilters.current_keys = [];
- ActiveFilters.current_models = [];
- // If theme image, delete via proper deletion method.
- if (ActiveFilters.themeImages) {
- return this.model.delete_theme_items();
- }
- // Otherwise delete media item.
- return this.model.delete_media_items();
- }
- }
- }
- });
-
- var MediaManager_ItemControl = Backbone.View.extend({
- className: "upfront-item-control",
- options: {
- insert_options: false,
- hide_sizes: false
- },
- templates: {
- caption: _.template('<label class="upfront-field-label upfront-field-label-block">{{title}}</label>'),
- shared_label: _.template('<a href="#remove" class="upfront-icon upfront-icon-media-label-delete" data-idx="{{value}}">{{filter}}</a>'),
- additional_size: _.template('<option value="{{size}}">{{size}}</option>')
- },
- events: {
- //"change .change_title :text": "change_title",
- "click .existing_labels a": "drop_label"//,
- //"change .additional_sizes select": "select_size"
- },
- initialize: function ( opts ) {
- this.listenTo(this.model, "change", this.render);
- this.options = _.extend( this.options, opts.options );
- },
- render: function () {
- var self = this,
- sections = _([
- 'size_hints',
- 'change_title',
- 'change_alt',
- 'copy_url',
- //'existing_labels',
- 'add_labels',
- 'insert_options',
- 'additional_sizes'
- ]),
- renderers = _([
- 'render_size_hint',
- 'render_title',
- 'render_alt',
- 'render_copy_url',
- //'render_shared_labels',
- 'render_labels_adding',
- 'render_insert_options',
- 'render_additional_sizes'
- ]);
-
- // remove prev sections
- this.$el.empty();
-
- // if insert_options is false remove insert options section
- if( !this.options.insert_options ){
- sections = _( sections.reject(function(section){
- return section === "insert_options";
- }) );
-
- renderers = _( renderers.reject(function(renderer){
- return renderer === "render_insert_options";
- }) );
- }
-
- if (_.indexOf(this.options.media_type, 'videos') !== -1) {
- sections = _( sections.reject(function(section){
- return section === "additional_sizes";
- }) );
-
- renderers = _( renderers.reject(function(renderer){
- return renderer === "render_additional_sizes";
- }) );
- }
-
- // add sections
- sections.each(function(section){
- self.$el.append( '<div class="' + section + '" />' );
- });
-
- // render sections
- renderers.each(function(renderer){
- self[renderer]();
- });
-
- },
- _find_gcd: function (a, b) {
- return (b == 0) ? a : this._find_gcd(b, a%b);
- },
- render_size_hint: function() {
- var me = this,
- $hub = this.$el.find('.size_hints'),
- sizeWidth,
- sizeHeight;
-
- $hub.empty();
-
- if(this.model.length === 1) {
- var image = this.model.at(0).get('image'),
- $container = $('<div class="upfront-size-hints upfront-field-wrap upfront-field-wrap-text"><label class="upfront-field-label upfront-field-label-block">'+ l10n.information +'</label></div>')
- ;
- if ( image !== undefined ) {
- var iwidth = parseInt((image || {}).width, 10),
- iheight = parseInt((image || {}).height, 10),
- gcd = me._find_gcd(iwidth, iheight)
- ;
- // Only render size hint if we're actually able to
- if (iwidth && iheight) {
- $container.append(
- '<span class="upfront-size-hint-ratio">' +
- (iwidth/gcd) +
- ':' +
- (iheight/gcd) +
- '</span>'
- );
- $container.append(
- '<span class="upfront-size-hint-width">' +
- l10n.width_label +
- ': <span>' +
- image.width + l10n.px_label +
- '</span></span>'
- );
- $container.append(
- '<span class="upfront-size-hint-height">' +
- l10n.height_label +
- ': <span>' +
- image.height + l10n.px_label +
- '</span></span>'
- );
- $hub.append($container);
- }
- }
- }
- },
- render_alt: function () {
- var me = this,
- $hub = this.$el.find(".change_alt"),
- image = this.model.at(0).get('image');
-
-
- $hub.empty();
- if (this.model.length === 1) {
- this.alt_field = new Upfront.Views.Editor.Field.Text({
- model: this.model.at(0),
- label: l10n.media_alt,
- name: 'alt',
- change: function(){
- me.change_alt();
- }
- });
- this.alt_field.render();
- $hub.append(this.alt_field.$el);
- }
- },
- render_title: function () {
- var me = this,
- $hub = this.$el.find(".change_title")
- ;
- $hub.empty();
- if (this.model.length > 1) {
- var files = '<span class="selected_files">' + l10n.files.replace(/%d/, this.model.length) + '</span>',
- shared_labels = this.model.get_shared_labels()
- ;
- $hub.append('<label class="upfront-field-label upfront-field-label-block">'+ l10n.information +'</label>');
- $hub.append('<span class="selected_length">' + ( shared_labels.length > 0 ? l10n.selected.replace(/%s/, files) : l10n.selected_no_label.replace(/%s/, files) ) + '</span>');
- } else {
- this.title_field = new Upfront.Views.Editor.Field.Text({
- model: this.model.at(0),
- label: l10n.media_title,
- compact: true,
- name: 'post_title',
- change: function(){
- me.change_title();
- }
- });
- this.title_field.render();
- $hub.append(this.title_field.$el);
- }
- },
- render_copy_url: function () {
- var $hub = this.$el.find(".copy_url");
- if (this.model.length > 1) return false;
-
- this.copy_url = new Upfront.Views.Editor.Field.Button({
- model: this.model.at(0),
- label: l10n.copy_url,
- compact: true,
- name: "document_url",
- on_click: function () {
- Upfront.Util.add_to_clipboard(this.model.get('document_url'));
- }
- });
- this.copy_url.render();
- $hub.append(this.copy_url.$el);
- },
- render_labels_adding: function () {
- var me = this,
- $hub = this.$el.find(".add_labels"),
- container = new MediaManager_ItemControl_LabelsContainer({model: this.model})
- ;
- $hub.empty().append(this.templates.caption({title: l10n.media_labels}));
- container.render();
- $hub.append(container.$el);
- this.$el.on("click", function (e) {
- e.stopPropagation();
- container.trigger("filters:selection:click");
- });
- },
- render_shared_labels: function () {
- var me = this,
- $hub = this.$el.find(".existing_labels"),
- shared_labels = this.model.get_shared_labels(),
- title = (shared_labels.length > 1 ? l10n.current_labels : '')
- ;
- $hub.empty()
- .append(this.templates.caption({title: title}))
- ;
- _(shared_labels).each(function (label) {
- $hub.append(me.templates.shared_label(label.toJSON()));
- });
- },
- render_additional_sizes: function () {
- var me = this,
- $hub = this.$el.find(".additional_sizes"),
- additional_sizes = this.model.get_additional_sizes(),
- title = l10n.additional_sizes,
- sizes = []
- ;
- $hub.empty();
-
- if( ( this.options.insert_options && this.model.at(0).get("insert_option") === INSERT_OPTIONS.wp_insert) || ( !this.options.hide_sizes && !this.options.insert_options ) ) {
- if (!additional_sizes.length) return false;
- _(additional_sizes).each(function (size) {
- if (size === MEDIA_SIZES.FULL) return;
- sizes.push({ label: size, value: size });
- });
- this.size_field = new Upfront.Views.Editor.Field.Radios({
- model: this.model.at(0),
- name: 'selected_size',
- width: '100%',
- values: sizes,
- default_value: additional_sizes[0],
- change: function(){
- me.select_size();
- }
- });
- this.size_field.render();
- $hub.append(this.size_field.$el);
- this.size_field.$el.on("click", function (e) {
- e.stopPropagation();
- });
- }
-
- },
- select_size: function (e) {
- //e.stopPropagation();
- var size = this.size_field.get_value() || MEDIA_SIZES.FULL;
- this.model.each(function (model) {
- model.set({selected_size: size}, {silent: true});
- });
- },
- change_title: function (e) {
- //e.stopPropagation();
- var model = this.model.at(0);
- model.set({post_title: this.title_field.get_value()});
- var me = this,
- data = {
- action: "upfront-media-update_media_item",
- data: model.toJSON()
- }
- ;
- Upfront.Util.post(data)
- .done(function () {
- model.trigger("change");
- })
- ;
- model.trigger("appearance:update");
- },
- change_alt: function (e) {
- //e.stopPropagation();
- var model = this.model.at(0);
- model.set({alt: this.alt_field.get_value()});
- var me = this,
- data = {
- action: "upfront-media-update_media_item",
- data: model.toJSON()
- }
- ;
- Upfront.Util.post(data)
- .done(function () {
- model.trigger("change");
- })
- ;
- model.trigger("appearance:update");
- },
- drop_label: function (e) {
- e.preventDefault();
- e.stopPropagation();
- var $label = $(e.target),
- idx = $label.attr("data-idx"),
- shared = this.model.get_shared_labels(),
- label_idx = _(shared).invoke("get", "value").indexOf(idx),
- label = label_idx >= 0 && shared[label_idx] ? shared[label_idx] : false
- ;
- if (label) this.model.update_label_state(label);
- },
- render_insert_options: function(){
- var $this_section = this.$(".insert_options"),
- view = new InsertOptions.Options_Control( {model: this.model} );
- view.render();
-
- $this_section.html(view.el);
- }
- });
-
- var MediaManager_ItemControl_LabelsContainer = Backbone.View.extend({
- className: "upfront-additive_multiselection",
- selection: '',
- events: {
- "click .labels_filter": "stop_prop",
- "keyup .labels_filter :text.filter": "update_selection",
- "click .new_labels .toggle-add-label": "show_add_label",
- "click .new_labels .submit-label": "add_new_labels",
- "focus :text.filter": "add_focus_state",
- "blur :text.filter": "remove_focus_state",
- "keyup .new_labels :text.add-label": "enter_new_labels"
- },
- initialize: function () {
- this.listenTo(Upfront.Events, "media_manager:media:labels_updated", this.render);
- this._adding_label = false;
- },
- stop_prop: function (e) {
- e.stopPropagation();
- // Also let's focus the text field
- this.$el.find(":text.filter").focus();
- },
- add_focus_state: function (e) {
- this.$el.addClass('focus');
- },
- remove_focus_state: function (e) {
- this.$el.removeClass('focus');
- },
- render: function () {
- var sel = this.selection || '';
- this.$el.empty()
- .append('<div class="title">' + l10n.assigned_labels + '</div>')
- .append('<div class="labels_filter"><ul></ul><input type="text" class="filter upfront-field upfront-field-text" value="' + sel + '" placeholder="' + l10n.type_labels_pick + '" /></div>')
- .append('<div class="labels_list"><ul></ul></div>')
- .append('<div class="title">' + l10n.create_new_label + '</div>')
- .append('<div class="new_labels"><a class="toggle-add-label upfront-icon-control upfront-icon-label-add"></a><input type="text" class="add-label upfront-field upfront-field-text" placeholder="' + l10n.type_labels_add + '" /><a class="submit-label upfront-icon-control upfront-icon-label-add-alt"></a></div>')
- ;
- this.render_existing_labels();
- this.render_labels();
- },
- render_existing_labels: function () {
- var me = this,
- $hub = this.$el.find("div.labels_filter ul"),
- count = 0
- ;
- $hub.empty();
-
- _.each(this.model.get_shared_labels(), function (label) {
- var item = new MediaManager_ItemControl_LabelItem({model: label});
- item.media_items = me.model;
- item.render();
- $hub.append(item.$el);
- count++;
- });
-
- if (count > 0) {
- // Remove placeholder
- this.$el.find(".labels_filter :text.filter").attr('placeholder', '');
- }
- },
- render_labels: function () {
- var me = this,
- $hub = this.$el.find(".labels_list ul"),
- known_labels = ActiveFilters.get("label"),
- shared_labels = this.model.get_shared_labels(),
- has_selection = false,
- match = 0
- ;
- $hub.empty();
- if (!this.selection) return false;
-
- known_labels.each(function (label) {
- if (me.model.is_used_label(label)) return;
-
- var item = new MediaManager_ItemControl_LabelItem({model: label});
- item.shared = shared_labels;
- item.media_items = me.model;
- item.selection = me.selection;
- item.render();
- if (item.matched) {
- $hub.append(item.$el);
- match++;
- }
- });
- if (match > 0) this.$el.addClass('has_match');
- else this.$el.removeClass('has_match');
- },
- update_selection: function (e) {
- e.preventDefault();
- e.stopPropagation();
- var $text = this.$el.find(".labels_filter :text.filter"),
- selection = $text.val()
- ;
- this.selection = selection;
-
- this.render_labels();
- },
- show_add_label: function (e) {
- e.preventDefault();
- e.stopPropagation();
- var $hub = this.$el.find(".new_labels"),
- $text = this.$el.find(".new_labels :text.add-label")
- ;
- $hub.addClass('active');
- $text.focus();
- },
- enter_new_labels: function (e) {
- if (e.which == 13) {
- this.add_new_labels();
- }
- },
- add_new_labels: function (e) {
- if (e) {
- e.preventDefault();
- e.stopPropagation();
- }
- if (this._adding_label) return;
- var me = this,
- $hub = this.$el.find(".new_labels"),
- $text = this.$el.find(".new_labels :text.add-label"),
- selection = $text.val()
- ;
- this._adding_label = true;
- $text.attr('disabled', true);
- this.model.add_new_label(selection)
- .always(function(){
- me._adding_label = false;
- $text.val('').attr('disabled', false);
- })
- .fail(function(jqxhr){
- var response = jqxhr.responseJSON;
- if (response && response.error) {
- Upfront.Views.Editor.notify(response.error, 'error');
- }
- });
- }
- });
-
- var MediaManager_ItemControl_LabelItem = Backbone.View.extend({
- tagName: 'li',
- events: {
- click: "toggle_label_assignment"
- },
- render: function () {
- var me = this,
- is_used = this.media_items.is_used_label(this.model),
- used = _.template('<input type="checkbox" id="{{id}}" class="upfront-field-checkbox" value="{{value}}" checked />'),
- free = _.template('<input type="checkbox" id="{{id}}" class="upfront-field-checkbox" value="{{value}}" />'),
- label = _.template('<label for="{{id}}">{{name}}</label>'),
- name = this.model.get("filter") || '',
- match_rx = this.selection ? new RegExp('(' + this.selection + ')', 'i') : false,
- obj = this.model.toJSON()
- ;
- this.matched = false;
- this.$el.empty();
- if (match_rx && !name.match(match_rx)) return false;
- this.matched = true;
- obj.id = this.cid;
- obj.name = name.replace(match_rx, '<span class="selection">$1</span>');
- this.$el
- .append(label(obj))
- .append((is_used ? used : free)(obj))
- ;
- },
- toggle_label_assignment: function (e) {
- e.preventDefault();
- e.stopPropagation();
- this.media_items.update_label_state(this.model);
- }
- });
-
- var MediaManager_SearchFiltersControl = Backbone.View.extend({
- className: "upfront-search_filter-control",
- events: {
- "click a": "clear_search"
- },
- render: function () {
- var search = ActiveFilters.get("search").first(),
- obj = search.toJSON();
- obj.total = ActiveFilters.max_items;
- this.$el.empty().append(
- _.template(l10n.showing_total_results + ' <b class="search-text">{{value}}</b> <a href="#clear" class="clear_search">' + l10n.clear_search + '</a>', obj)
- );
- },
- clear_search: function (e) {
- e.preventDefault();
- e.stopPropagation();
- var search = new MediaFilter_Item({filter: false, value: false, state: false});
- ActiveFilters.set({search: new MediaFilter_Collection([search])});
- Upfront.Events.trigger("media_manager:media:list", ActiveFilters);
- Upfront.Events.trigger("media:search:requested", search);
- }
- });
-
- var MediaManager_FiltersControl = Backbone.View.extend({
- className: "upfront-filter-control",
- events: {
- "click": "stop_prop"
- },
- stop_prop: function (e) {
- e.stopPropagation();
- if (this.filter_selection) this.filter_selection.trigger("filters:outside_click");
- },
- initialize: function () {
- this.filter_selection = new MediaManager_FiltersSelectionControl();
- //this.filters_selected = new MediaManager_FiltersSelectedControl({model: ActiveFilters});
- },
- render: function () {
- this.filter_selection.render();
- //this.filters_selected.render();
- this.$el.empty()
- .append(this.filter_selection.$el)
- //.append(this.filters_selected.$el)
- ;
- },
- toggle_titles: function (e) {
- e.stopPropagation();
- Upfront.Events.trigger("media_manager:media:toggle_titles");
- },
- remove: function() {
- this.filter_selection.remove();
- //this.filters_selected.remove();
- Backbone.View.prototype.remove.call(this);
- }
- });
-
- var MediaManager_FiltersSelectedControl = Backbone.View.extend({
- className: "upfront-filter_selected-control",
- events: {
- "click a.filter": "drop_filter",
- "click a.all_filters": "drop_all"
- },
- initialize: function () {
- this.listenTo(Upfront.Events, "media_manager:media:list", this.set_filters);
- },
- render: function () {
- this.$el.empty();
- var me = this,
- _list = _(this.model.to_list()),
- _to_render = _([]),
- tpl = _.template(' <a href="#" class="filter upfront-icon upfront-icon-media-label-delete" data-type="{{type}}" data-filter="{{filter}}">{{filter}}</a>')
- ;
-
- _list.each(function (filters, type) {
- _(filters).each(function (filter) {
- _to_render.push({filter: filter, type: type});
- });
- });
- if (!_to_render.size()) return false; // Do not render the empty filter array (ie. only defaults)
-
- this.$el.append('<label class="upfront-field-label upfront-field-label-block">' + l10n.active_filters + '</label>');
-
- _to_render.each(function (item) {
- me.$el.append(tpl(item));
- });
- this.$el.append(" <a href='#' class='all_filters'>" + l10n.clear_all_filters + "</a>");
- },
- set_filters: function (filters) {
- this.model = filters;
- this.render();
- },
- drop_filter: function (e) {
- e.preventDefault();
- e.stopPropagation();
- var $el = $(e.target),
- all = this.model,
- type = $el.attr("data-type"),
- filter = $el.attr("data-filter")
- ;
- if (type && all.get(type)) {
- var has = all.get(type).where({filter: filter});
- if (has && has.length) _(has).invoke("set", {state: false}, {silent: true});
- } else {
- _(this.model.attributes).each(function (collection, idx) {
- var has = all.get(idx).where({filter: filter});
- if (has.length) {
- type = idx;
- _(has).invoke("set", {state: false}, {silent: true});
- }
- });
- }
- Upfront.Events.trigger("media_manager:media:filters_updated", type, this.model);
- },
- drop_all: function (e) {
- e.preventDefault();
- e.stopPropagation();
- Upfront.Events.trigger("media_manager:media:filters_updated", false, false);
- }
- });
-
- var MediaManager_FiltersSelectionControl = Backbone.View.extend({
- className: "upfront-filter_selection-control clearfix",
- initialize: function () {
- this.controls = _([
- new Control_MediaType(),
- //new Control_MediaDate(),
- //new Control_MediaFileName(),
- //new Control_MediaRecent(),
- new Control_MediaLabels()
- ]);
- this.on("filters:outside_click", function () {
- this.controls.each(function (ctrl) {
- ctrl.trigger("filters:selection:click");
- });
- }, this);
- },
- render: function () {
- var me = this,
- tpl = _.template("<li style='display:none'><a href='#' data-idx='{{idx}}'>{{name}}</a></li>"),
- values = []
- ;
- this.controls.each(function (ctl, idx) {
- values.push({label: ctl.get_name(), value: idx});
- });
-
- this.$el.empty();
-
- this.$el.append('<div class="upfront-filter_control" />');
- this.$control = this.$el.find("div.upfront-filter_control");
-
- this.control_field = new Upfront.Views.Editor.Field.Radios({
- label: l10n.filter_label,
- name: "filter-selection",
- className: "upfront-field-wrap upfront-field-wrap-multiple upfront-field-wrap-radios upfront-filter_selection-tab",
- values: values,
- multiple: false,
- default_value: ActiveFilters.current_filter_control,
- change: function(){
- me.select_control(this.get_value());
- }
- });
- this.control_field.render();
- this.$el.prepend(this.control_field.$el);
- this.control_field.trigger('changed');
- },
- select_control: function (idx) {
- this.$control.empty();
- if ('false' === idx) return false;
-
- ActiveFilters.current_filter_control = idx;
-
- var control = this.controls.toArray()[idx];
- control.render();
- this.$control.append(control.$el);
- return false;
- },
- remove: function () {
- this.controls.each(function (ctrl) {
- ctrl.remove();
- });
- Backbone.View.prototype.remove.call(this);
- }
- });
-
- var Media_FilterSelection_Multiselection = Backbone.View.extend({
- tagName: "ul",
- get_name: function () {
- return this.filter_name;
- },
- initialize_model: function () {
- this.model = ActiveFilters.get(this.filter_type);
- this.listenTo(this.model, "change", this.apply_changes);
- },
- render: function () {
- var me = this;
- this.$el.empty();
- this.model.each(function (model) {
- if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;
- var item = new Media_FilterSelection_Multiselection_Item({model: model});
- item.render();
- me.$el.append(item.$el);
- });
- },
- apply_changes: function () {
- var data = {},
- values = []
- ;
- data = this.model.where({state:true});
- Upfront.Events.trigger("media_manager:media:filters_updated", this.filter_type, data);
- },
- update_selection: function () {
- var active = ActiveFilters.get(this.filter_type);
- if (!active) {
- this.model.invoke("set", {state: false});
- } else {
- this.model.each(function (model) {
- var has = active.where({filter: model.get("filter"), state: true});
- model.set({state: !!has.length});
- });
- }
- this.render();
- return false;
- }
- });
-
- var Media_FilterSelection_AdditiveMultiselection = Media_FilterSelection_Multiselection.extend({
- tagName: "div",
- className: "upfront-additive_multiselection",
- events: {
- click: "stop_prop",
- "keyup :text.filter": "show_matching_labels",
- "focus :text.filter": "add_focus_state",
- "blur :text.filter": "remove_focus_state"
- },
- stop_prop: function (e) {
- e.stopPropagation();
- // Also let's focus the text field
- this.$el.find(":text.filter").focus();
- },
- add_focus_state: function (e) {
- this.$el.addClass('focus');
- },
- remove_focus_state: function (e) {
- this.$el.removeClass('focus');
- },
- render: function () {
- var me = this,
- sel = this.selection || ''
- ;
- this.$el
- .empty()
- .append('<div class="title">' + l10n.filter_by_labels + '</div>')
- .append('<div class="labels_filter"><ul></ul><input type="text" class="filter upfront-field upfront-field-text" value="' + sel + '" placeholder="' + l10n.type_labels + '" /></div>')
- .append('<div class="labels_list"><ul></ul></div>')
- ;
- this.render_filtered_items();
- this.render_items();
- },
- render_filtered_items: function () {
- var me = this,
- $hub = this.$el.find("div.labels_filter ul"),
- count = 0
- ;
- $hub.empty();
-
- this.model.each(function (model) {
- if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;
- if (!model.get("state")) return false;
- var item = new Media_FilterSelection_AdditiveMultiselection_Item({model: model});
- item.render();
- $hub.append(item.$el);
- count++;
- });
-
- if (count > 0) {
- // Remove placeholder
- this.$el.find(":text.filter").attr('placeholder', '');
- }
- },
- render_items: function () {
- var me = this,
- $hub = this.$el.find("div.labels_list ul"),
- match = 0
- ;
- $hub.empty();
- if (!this.selection) {
- this.$el.removeClass('has_match');
- return false;
- }
- //if (!this.$el.is(".active")) return false; // Only actually render this if we can see it - it takes *a while* to do so
-
- this.model.each(function (model) {
- if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;
- if (model.get("state")) return false;
- var item = new Media_FilterSelection_AdditiveMultiselection_Item({model: model});
- item.selection = me.selection;
- item.render();
- if (item.matched) {
- $hub.append(item.$el);
- match++;
- }
- });
- if (match > 0) this.$el.addClass('has_match');
- else this.$el.removeClass('has_match');
- },
- show_matching_labels: function (e) {
- var $text = this.$el.find(":text.filter"),
- selection = $text.val()
- ;
- this.selection = selection;
- this.render_items();
- }
- });
-
- var Media_FilterSelection_Uniqueselection = Media_FilterSelection_Multiselection.extend({
- render: function () {
- var me = this;
- this.$el.empty();
- this.model.each(function (model) {
- if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;
- var item = new Media_FilterSelection_Uniqueselection_Item({model: model});
- item.render();
- me.$el.append(item.$el);
- me.listenTo(item, "model:unique_state:change", me.change_state);
- });
- },
- change_state: function (model) {
- this.model.each(function (item) {
- if (item.get("value") != model.get("value")) item.set({state: false}, {silent: true});
- });
- model.set({state: true}, {silent: true});
- this.apply_changes(model);
- this.render();
- }
- });
-
- var Media_FilterSelection_Multiselection_Item = Backbone.View.extend({
- tagName: "li",
- events: {
- "click": "on_click"
- },
- initialize: function () {
- this.listenTo(this.model, "change", this.render);
- },
- render: function () {
- var name = this.model.get("filter");
- if ("other" === this.model.get("value")) return false; // DO NOT RENDER "ALL", special case
- if (this.model.get("state")) name = '<b>' + name + '</b>';
- this.$el.empty().append(name);
- },
- on_click: function (e) {
- e.preventDefault();
- e.stopPropagation();
- this.model.set({state: !this.model.get("state")});
- }
- });
-
- var Media_FilterSelection_Uniqueselection_Item = Media_FilterSelection_Multiselection_Item.extend({
- on_click: function (e) {
- e.preventDefault();
- e.stopPropagation();
- this.model.set({state: !this.model.get("state")}, {silent: true});
- this.trigger("model:unique_state:change", this.model);
- }
- });
-
- var Media_FilterSelection_AdditiveMultiselection_Item = Media_FilterSelection_Multiselection_Item.extend({
- render: function () {
- var checked = _.template('<input type="checkbox" for="{{id}}" class="upfront-field-checkbox" name="{{filter}}" value="{{value}}" checked />'),
- unchecked = _.template('<input type="checkbox" for="{{id}}" class="upfront-field-checkbox" name="{{filter}}" value="{{value}}" />'),
- label = _.template('<label for="{{id}}">{{name}}</label>'),
- name = this.model.get("filter") || '',
- match_rx = this.selection ? new RegExp('(' + this.selection + ')', 'i') : false,
- obj = this.model.toJSON()
- ;
- this.matched = false;
- this.$el.empty();
- if (match_rx && !name.match(match_rx)) return false;
- this.matched = true;
- obj.id = this.cid;
- obj.name = name.replace(match_rx, '<span class="selection">$1</span>');
- this.$el
- .append(label(obj))
- .append((this.model.get("state") ? checked : unchecked)(obj))
- ;
- }
- });
-
- var Media_FilterCollection = Backbone.View.extend({
- render: function () {
- var me = this;
- this.$el.empty();
- this.model.each(function (model) {
- var item = new Media_FilterItem({model: model});
- item.render();
- me.$el.append(item.$el);
- });
- }
- });
-
- var Media_FilterItem = Backbone.View.extend({
- render: function () {
- this.$el.empty().append(this.model.get("filter"));
- }
- });
-
- var Control_MediaType = Media_FilterSelection_Uniqueselection.extend({
- initialize: function () {
- this.filter_name = l10n.by_type;
- this.filter_type = "type";
- this.initialize_model();
- this.listenTo(Upfront.Events, "media_manager:media:filters_updated", this.update_selection);
- this.listenTo(Upfront.Events, "media_manager:media:filters_reset", this.initialize_model);
- },
- render: function () {
- var me = this,
- values = [],
- has_all = (this.model.indexOf("other") >= 0)
- ;
- this.$el.empty();
- this.model.each(function (model) {
- if (me.allowed_values && me.allowed_values.indexOf(model.get("value")) < 0) return false;
- values.push({label: model.get("filter"), value: model.get("value")});
- });
- this.select_field = new Upfront.Views.Editor.Field.Select({
- name: "filter-type",
- values: values,
- multiple: false,
- default_value: has_all ? "other" : this.model.findWhere({state: true}).get("value"),
- change: function(){
- var model = me.model.findWhere({value: this.get_value()});
- model.set({state: !model.get("state")}, {silent: true});
- me.change_state(model);
- }
- });
- this.select_field.render();
- this.$el.append(this.select_field.$el);
- },
- /*apply_changes: function (model) {
- return;
- var all = this.model.where({state: true}),
- other = this.model.where({value: 'other'}),
- edited = model.previousAttributes()
- ;
- if (other.length) other = other[0]; // Do the model
- else return;
-
- if (edited && edited.value && "other" === edited.value) {
- var no_other = !!edited.state;
- this.model.each(function (mod) {
- mod.set({state: no_other}, {silent: true});
- });
- other.set({state: !no_other}, {silent: true});
- } else if (other.get("state")) other.set({state: false}, {silent: true});
-
- Media_FilterSelection_Uniqueselection.prototype.apply_changes.call(this);
-
- }*/
- });
-
- var Control_MediaFileName = Media_FilterSelection_Uniqueselection.extend({
- allowed_values: ['title_desc', 'title_asc'],
- initialize: function () {
- this.filter_name = l10n.file_name;
- this.filter_type = "order";
- this.initialize_model();
- this.listenTo(Upfront.Events, "media_manager:media:filters_updated", this.update_selection);
- this.listenTo(Upfront.Events, "media_manager:media:filters_reset", this.initialize_model);
- }
- });
-
- var Control_MediaLabels = Media_FilterSelection_AdditiveMultiselection.extend({
- initialize: func…
Large files files are truncated, but you can click here to view the full file