jqueryui
4 years ago
select2
6 years ago
validation
2 years ago
wp-color-picker-alpha
5 years ago
autocomplete.js
6 years ago
autosave.js
7 years ago
button-group.js
3 years ago
clone.js
2 years ago
color.js
3 years ago
date.js
3 years ago
datetime.js
3 years ago
file-input.js
4 years ago
file-upload.js
4 years ago
file.js
3 years ago
icon.js
2 years ago
image-advanced.js
4 years ago
image-select.js
6 years ago
image-upload.js
4 years ago
input-list.js
3 years ago
map-frontend.js
4 years ago
map.js
2 years ago
media.js
3 years ago
modal.js
2 years ago
oembed.js
2 years ago
osm-frontend.js
5 years ago
osm.js
2 years ago
post.js
2 years ago
range.js
4 years ago
script.js
3 years ago
select-advanced.js
2 years ago
select-tree.js
5 years ago
select.js
3 years ago
slider.js
6 years ago
taxonomy.js
2 years ago
time.js
6 years ago
user.js
2 years ago
video.js
6 years ago
wysiwyg.js
2 years ago
select-advanced.js
142 lines
| 1 | ( function ( $, rwmb ) { |
| 2 | 'use strict'; |
| 3 | |
| 4 | // Cache ajax requests: https://github.com/select2/select2/issues/110#issuecomment-419247158 |
| 5 | var cache = {}; |
| 6 | |
| 7 | /** |
| 8 | * Reorder selected values in correct order that they were selected. |
| 9 | * @param $select2 jQuery element of the select2. |
| 10 | */ |
| 11 | function reorderSelected( $select2 ) { |
| 12 | var selected = $select2.data( 'selected' ); |
| 13 | if ( !selected ) { |
| 14 | return; |
| 15 | } |
| 16 | selected.forEach( function ( value ) { |
| 17 | var option = $select2.children( '[value="' + value + '"]' ); |
| 18 | option.detach(); |
| 19 | $select2.append( option ); |
| 20 | } ); |
| 21 | $select2.trigger( 'change' ); |
| 22 | } |
| 23 | |
| 24 | /** |
| 25 | * Transform select fields into beautiful dropdown with select2 library. |
| 26 | */ |
| 27 | function transform() { |
| 28 | var $this = $( this ), |
| 29 | options = $this.data( 'options' ); |
| 30 | |
| 31 | $this.removeClass( 'select2-hidden-accessible' ).removeAttr( 'data-select2-id' ); |
| 32 | $this.siblings( '.select2-container' ).remove(); |
| 33 | $this.find( 'option' ).removeAttr( 'data-select2-id' ); |
| 34 | |
| 35 | if ( options.ajax_data ) { |
| 36 | options.ajax.dataType = 'json'; |
| 37 | options.ajax.data = function ( params ) { |
| 38 | return Object.assign( options.ajax_data, params ); |
| 39 | }; |
| 40 | options.ajax.processResults = function ( response ) { |
| 41 | var items = response.data.items.map( function ( item ) { |
| 42 | return { |
| 43 | id: item.value, |
| 44 | text: _.unescape( item.label ), |
| 45 | }; |
| 46 | } ); |
| 47 | |
| 48 | var results = { |
| 49 | results: items |
| 50 | }; |
| 51 | if ( response.data.hasOwnProperty( 'more' ) ) { |
| 52 | results.pagination = { more: true }; |
| 53 | } |
| 54 | |
| 55 | return results; |
| 56 | }; |
| 57 | |
| 58 | options.ajax.transport = function ( params, success, failure ) { |
| 59 | if ( params.data._type === 'query' ) { |
| 60 | delete params.data.page; |
| 61 | } |
| 62 | |
| 63 | // Create cache key from ajax params from only neccessary keys to make cache available for multiple fields. |
| 64 | var data = $.extend( true, {}, params.data ); |
| 65 | delete data.field.id; |
| 66 | delete data.action; |
| 67 | if ( !data.term ) { |
| 68 | delete data.term; |
| 69 | } |
| 70 | |
| 71 | var key = JSON.stringify( data ); |
| 72 | if ( cache[ key ] ) { |
| 73 | success( cache[ key ] ); |
| 74 | return; |
| 75 | } |
| 76 | |
| 77 | var actions = { |
| 78 | 'post': 'rwmb_get_posts', |
| 79 | 'taxonomy': 'rwmb_get_terms', |
| 80 | 'taxonomy_advanced': 'rwmb_get_terms', |
| 81 | 'user': 'rwmb_get_users' |
| 82 | }; |
| 83 | params.data.action = actions[ params.data.field.type ]; |
| 84 | params.method = 'POST'; |
| 85 | |
| 86 | return $.ajax( params ).then( function ( data ) { |
| 87 | cache[ key ] = data; |
| 88 | return data; |
| 89 | } ).then( success ).fail( failure ); |
| 90 | }; |
| 91 | } |
| 92 | |
| 93 | $this.show(); |
| 94 | |
| 95 | if ( $this.hasClass( 'rwmb-icon' ) ) { |
| 96 | // Initialize select2 with icons for icon field. |
| 97 | $this.trigger( 'init_icon_field', [ options ] ); |
| 98 | } else { |
| 99 | // Initialize select2 normally. |
| 100 | $this.select2( options ); |
| 101 | } |
| 102 | |
| 103 | if ( !$this.attr( 'multiple' ) ) { |
| 104 | return; |
| 105 | } |
| 106 | |
| 107 | reorderSelected( $this ); |
| 108 | |
| 109 | /** |
| 110 | * Preserve the order that options are selected. |
| 111 | * @see https://github.com/select2/select2/issues/3106#issuecomment-255492815 |
| 112 | */ |
| 113 | $this.on( 'select2:select', function ( event ) { |
| 114 | var option = $this.children( '[value="' + event.params.data.id + '"]' ); |
| 115 | option.detach(); |
| 116 | $this.append( option ).trigger( 'change' ); |
| 117 | } ); |
| 118 | } |
| 119 | |
| 120 | function init( e ) { |
| 121 | $( e.target ).find( '.rwmb-select_advanced, .rwmb-icon' ).each( transform ); |
| 122 | } |
| 123 | |
| 124 | function fixDropdownPosition( e ) { |
| 125 | if ( $( "#wpadminbar" ).length === 0 ) { |
| 126 | return; |
| 127 | } |
| 128 | |
| 129 | if ( rwmbSelect2.isAdmin == 1 ) { |
| 130 | $( 'body > .select2-container--open .select2-dropdown--above' ).css( 'top', 0 ); |
| 131 | return; |
| 132 | } |
| 133 | |
| 134 | $( 'body > .select2-container:last-child > .select2-dropdown' ).css( 'top', $( document.body ).offset().top ); |
| 135 | }; |
| 136 | |
| 137 | rwmb.$document |
| 138 | .on( 'mb_ready', init ) |
| 139 | .on( 'clone', '.rwmb-select_advanced, .rwmb-icon', transform ) |
| 140 | .on( 'select2:open', fixDropdownPosition ); |
| 141 | } )( jQuery, rwmb ); |
| 142 |