foogallery.selectize.js
116 lines
| 1 | var FOOGALLERY_SELECTIZE = function(element) { |
| 2 | var $selectize = jQuery(element), |
| 3 | taxonomy = $selectize.data('taxonomy'), |
| 4 | taxonomy_data = window.FOOGALLERY_TAXONOMY_DATA[taxonomy], |
| 5 | options = []; |
| 6 | |
| 7 | taxonomy_data.terms.forEach(function(term) { |
| 8 | options.push({ |
| 9 | value: term.slug, |
| 10 | text: term.name, |
| 11 | parents: term.parents |
| 12 | }); |
| 13 | }); |
| 14 | |
| 15 | //add a class to the table row so that it can be styled correctly |
| 16 | $selectize.closest('tr').addClass('compat-field-selectize'); |
| 17 | |
| 18 | $selectize.selectize({ |
| 19 | plugins: ['remove_button'], |
| 20 | options: options, |
| 21 | placeholder: taxonomy_data.labels.placeholder, |
| 22 | delimiter: ', ', |
| 23 | createOnBlur: true, |
| 24 | preload: 'focus', |
| 25 | create: function(input, callback) { |
| 26 | this.close(); |
| 27 | var $wrapper = this.$wrapper; |
| 28 | $wrapper.addClass('loading'); |
| 29 | jQuery.ajax({ |
| 30 | url: ajaxurl, |
| 31 | cache: false, |
| 32 | type: 'POST', |
| 33 | data: { |
| 34 | action: 'foogallery-taxonomies-add-term', |
| 35 | nonce: window.FOOGALLERY_TAXONOMY_DATA['nonce'], |
| 36 | taxonomy: taxonomy, |
| 37 | term_label: input |
| 38 | }, |
| 39 | success: function(response) { |
| 40 | $wrapper.removeClass('loading'); |
| 41 | try { |
| 42 | window.FOOGALLERY_TAXONOMY_DATA[taxonomy].terms = response.all_terms; |
| 43 | } catch(e) {}; |
| 44 | |
| 45 | if (typeof response.new_term !== 'undefined') { |
| 46 | callback({ |
| 47 | value: response.new_term.slug, |
| 48 | text: response.new_term.name |
| 49 | }); |
| 50 | } else { |
| 51 | callback(false); |
| 52 | } |
| 53 | } |
| 54 | }); |
| 55 | }, |
| 56 | render: { |
| 57 | option_create: function(data, escape) { |
| 58 | return '<div class="create">' + taxonomy_data.labels.add + ': <strong>' + escape(data.input) + '</strong></div>'; |
| 59 | }, |
| 60 | option: function(data, escape) { |
| 61 | var label = (data.parents.length ? '<span class="parent-label">' + escape(data.parents.join(' / ')) + ' /</span> ' : '') + escape(data.text); |
| 62 | |
| 63 | return '<div>' + label + '</div>'; |
| 64 | }, |
| 65 | item: function(data, escape) { |
| 66 | var isNewTerm = typeof data.parents === 'undefined'; |
| 67 | |
| 68 | if(isNewTerm) { |
| 69 | data.parents = []; |
| 70 | } |
| 71 | |
| 72 | var sortStringArray = data.parents.slice(0); |
| 73 | sortStringArray.push(data.text); |
| 74 | var sort_string = sortStringArray.join('-').toLowerCase(); |
| 75 | var label = (data.parents.length ? '<span class="parent-label">' + escape(data.parents.join(' / ')) + ' /</span> ' : '') + escape(data.text); |
| 76 | |
| 77 | return '<div data-sort-string="' + escape(sort_string) + '">' + label + '</div>'; |
| 78 | } |
| 79 | }, |
| 80 | onItemAdd: function(value, $element) { |
| 81 | $element.parent().children(':not(input)').sort(function(a, b) { |
| 82 | var upA = jQuery(a).attr('data-sort-string'); |
| 83 | var upB = jQuery(b).attr('data-sort-string'); |
| 84 | return (upA < upB) ? -1 : (upA > upB) ? 1 : 0; |
| 85 | }).removeClass('active').insertBefore($element.parent().children('input')); |
| 86 | }, |
| 87 | onBlur : function() { |
| 88 | if ( $selectize.data('original-value') === this.getValue() ) { |
| 89 | //no change - no save |
| 90 | return; |
| 91 | } |
| 92 | //only save if the value has changed |
| 93 | this.close(); |
| 94 | var $wrapper = this.$wrapper; |
| 95 | $wrapper.addClass('loading'); |
| 96 | jQuery.ajax({ |
| 97 | url: ajaxurl, |
| 98 | cache: false, |
| 99 | type: 'POST', |
| 100 | data: { |
| 101 | action: 'foogallery-taxonomies-save-terms', |
| 102 | nonce: window.FOOGALLERY_TAXONOMY_DATA['nonce'], |
| 103 | taxonomy: taxonomy, |
| 104 | terms: $selectize.val(), |
| 105 | attachment_id: $selectize.data('attachment_id') |
| 106 | }, |
| 107 | success: function(response) { |
| 108 | $wrapper.removeClass('loading'); |
| 109 | if (response) { |
| 110 | $selectize.data('original-value', response); |
| 111 | } |
| 112 | } |
| 113 | }); |
| 114 | } |
| 115 | }); |
| 116 | }; |