pro
1 year ago
_acf-compatibility.js
1 year ago
_acf-condition-types.js
1 year ago
_acf-condition.js
1 year ago
_acf-conditions.js
1 year ago
_acf-field-accordion.js
1 year ago
_acf-field-button-group.js
1 year ago
_acf-field-checkbox.js
1 year ago
_acf-field-color-picker.js
1 year ago
_acf-field-date-picker.js
1 year ago
_acf-field-date-time-picker.js
1 year ago
_acf-field-file.js
1 year ago
_acf-field-google-map.js
1 year ago
_acf-field-icon-picker.js
1 year ago
_acf-field-image.js
1 year ago
_acf-field-link.js
1 year ago
_acf-field-oembed.js
1 year ago
_acf-field-page-link.js
1 year ago
_acf-field-post-object.js
1 year ago
_acf-field-radio.js
1 year ago
_acf-field-range.js
1 year ago
_acf-field-relationship.js
1 year ago
_acf-field-select.js
1 year ago
_acf-field-tab.js
1 year ago
_acf-field-taxonomy.js
1 year ago
_acf-field-time-picker.js
1 year ago
_acf-field-true-false.js
1 year ago
_acf-field-url.js
1 year ago
_acf-field-user.js
1 year ago
_acf-field-wysiwyg.js
1 year ago
_acf-field.js
1 year ago
_acf-fields.js
1 year ago
_acf-helpers.js
1 year ago
_acf-hooks.js
1 year ago
_acf-internal-post-type.js
1 year ago
_acf-media.js
1 year ago
_acf-modal.js
1 year ago
_acf-model.js
1 year ago
_acf-notice.js
1 year ago
_acf-panel.js
1 year ago
_acf-popup.js
1 year ago
_acf-postbox.js
1 year ago
_acf-screen.js
1 year ago
_acf-select2.js
1 year ago
_acf-tinymce.js
1 year ago
_acf-tooltip.js
1 year ago
_acf-unload.js
1 year ago
_acf-validation.js
1 year ago
_acf.js
1 year ago
_browse-fields-modal.js
1 year ago
_field-group-compatibility.js
1 year ago
_field-group-conditions.js
1 year ago
_field-group-field.js
1 year ago
_field-group-fields.js
1 year ago
_field-group-locations.js
1 year ago
_field-group-settings.js
1 year ago
_field-group.js
1 year ago
acf-escaped-html-notice.js
1 year ago
acf-field-group.js
1 year ago
acf-input.js
1 year ago
acf-internal-post-type.js
1 year ago
acf.js
1 year ago
_acf-field-accordion.js
244 lines
| 1 | ( function ( $, undefined ) { |
| 2 | var i = 0; |
| 3 | |
| 4 | var Field = acf.Field.extend( { |
| 5 | type: 'accordion', |
| 6 | |
| 7 | wait: '', |
| 8 | |
| 9 | $control: function () { |
| 10 | return this.$( '.acf-fields:first' ); |
| 11 | }, |
| 12 | |
| 13 | initialize: function () { |
| 14 | // Bail early if this is a duplicate of an existing initialized accordion. |
| 15 | if ( this.$el.hasClass( 'acf-accordion' ) ) { |
| 16 | return; |
| 17 | } |
| 18 | |
| 19 | // bail early if is cell |
| 20 | if ( this.$el.is( 'td' ) ) return; |
| 21 | |
| 22 | // enpoint |
| 23 | if ( this.get( 'endpoint' ) ) { |
| 24 | return this.remove(); |
| 25 | } |
| 26 | |
| 27 | // vars |
| 28 | var $field = this.$el; |
| 29 | var $label = this.$labelWrap(); |
| 30 | var $input = this.$inputWrap(); |
| 31 | var $wrap = this.$control(); |
| 32 | var $instructions = $input.children( '.description' ); |
| 33 | |
| 34 | // force description into label |
| 35 | if ( $instructions.length ) { |
| 36 | $label.append( $instructions ); |
| 37 | } |
| 38 | |
| 39 | // table |
| 40 | if ( this.$el.is( 'tr' ) ) { |
| 41 | // vars |
| 42 | var $table = this.$el.closest( 'table' ); |
| 43 | var $newLabel = $( '<div class="acf-accordion-title"/>' ); |
| 44 | var $newInput = $( '<div class="acf-accordion-content"/>' ); |
| 45 | var $newTable = $( |
| 46 | '<table class="' + $table.attr( 'class' ) + '"/>' |
| 47 | ); |
| 48 | var $newWrap = $( '<tbody/>' ); |
| 49 | |
| 50 | // dom |
| 51 | $newLabel.append( $label.html() ); |
| 52 | $newTable.append( $newWrap ); |
| 53 | $newInput.append( $newTable ); |
| 54 | $input.append( $newLabel ); |
| 55 | $input.append( $newInput ); |
| 56 | |
| 57 | // modify |
| 58 | $label.remove(); |
| 59 | $wrap.remove(); |
| 60 | $input.attr( 'colspan', 2 ); |
| 61 | |
| 62 | // update vars |
| 63 | $label = $newLabel; |
| 64 | $input = $newInput; |
| 65 | $wrap = $newWrap; |
| 66 | } |
| 67 | |
| 68 | // add classes |
| 69 | $field.addClass( 'acf-accordion' ); |
| 70 | $label.addClass( 'acf-accordion-title' ); |
| 71 | $input.addClass( 'acf-accordion-content' ); |
| 72 | |
| 73 | // index |
| 74 | i++; |
| 75 | |
| 76 | // multi-expand |
| 77 | if ( this.get( 'multi_expand' ) ) { |
| 78 | $field.attr( 'multi-expand', 1 ); |
| 79 | } |
| 80 | |
| 81 | // open |
| 82 | var order = acf.getPreference( 'this.accordions' ) || []; |
| 83 | if ( order[ i - 1 ] !== undefined ) { |
| 84 | this.set( 'open', order[ i - 1 ] ); |
| 85 | } |
| 86 | |
| 87 | if ( this.get( 'open' ) ) { |
| 88 | $field.addClass( '-open' ); |
| 89 | $input.css( 'display', 'block' ); // needed for accordion to close smoothly |
| 90 | } |
| 91 | |
| 92 | // add icon |
| 93 | $label.prepend( |
| 94 | accordionManager.iconHtml( { open: this.get( 'open' ) } ) |
| 95 | ); |
| 96 | |
| 97 | // classes |
| 98 | // - remove 'inside' which is a #poststuff WP class |
| 99 | var $parent = $field.parent(); |
| 100 | $wrap.addClass( $parent.hasClass( '-left' ) ? '-left' : '' ); |
| 101 | $wrap.addClass( $parent.hasClass( '-clear' ) ? '-clear' : '' ); |
| 102 | |
| 103 | // append |
| 104 | $wrap.append( |
| 105 | $field.nextUntil( '.acf-field-accordion', '.acf-field' ) |
| 106 | ); |
| 107 | |
| 108 | // clean up |
| 109 | $wrap.removeAttr( 'data-open data-multi_expand data-endpoint' ); |
| 110 | }, |
| 111 | } ); |
| 112 | |
| 113 | acf.registerFieldType( Field ); |
| 114 | |
| 115 | /** |
| 116 | * accordionManager |
| 117 | * |
| 118 | * Events manager for the acf accordion |
| 119 | * |
| 120 | * @date 14/2/18 |
| 121 | * @since ACF 5.6.9 |
| 122 | * |
| 123 | * @param void |
| 124 | * @return void |
| 125 | */ |
| 126 | |
| 127 | var accordionManager = new acf.Model( { |
| 128 | actions: { |
| 129 | unload: 'onUnload', |
| 130 | }, |
| 131 | |
| 132 | events: { |
| 133 | 'click .acf-accordion-title': 'onClick', |
| 134 | 'invalidField .acf-accordion': 'onInvalidField', |
| 135 | }, |
| 136 | |
| 137 | isOpen: function ( $el ) { |
| 138 | return $el.hasClass( '-open' ); |
| 139 | }, |
| 140 | |
| 141 | toggle: function ( $el ) { |
| 142 | if ( this.isOpen( $el ) ) { |
| 143 | this.close( $el ); |
| 144 | } else { |
| 145 | this.open( $el ); |
| 146 | } |
| 147 | }, |
| 148 | |
| 149 | iconHtml: function ( props ) { |
| 150 | // Use SVG inside Gutenberg editor. |
| 151 | if ( acf.isGutenberg() ) { |
| 152 | if ( props.open ) { |
| 153 | return '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class="acf-accordion-icon components-panel__arrow" aria-hidden="true" focusable="false"><path d="M6.5 12.4L12 8l5.5 4.4-.9 1.2L12 10l-4.5 3.6-1-1.2z"></path></svg>'; |
| 154 | } else { |
| 155 | return '<svg width="24px" height="24px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" class=" acf-accordion-icon components-panel__arrow" aria-hidden="true" focusable="false"><path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z"></path></svg>'; |
| 156 | } |
| 157 | } else { |
| 158 | if ( props.open ) { |
| 159 | return '<i class="acf-accordion-icon dashicons dashicons-arrow-down"></i>'; |
| 160 | } else { |
| 161 | return '<i class="acf-accordion-icon dashicons dashicons-arrow-right"></i>'; |
| 162 | } |
| 163 | } |
| 164 | }, |
| 165 | |
| 166 | open: function ( $el ) { |
| 167 | var duration = acf.isGutenberg() ? 0 : 300; |
| 168 | |
| 169 | // open |
| 170 | $el.find( '.acf-accordion-content:first' ) |
| 171 | .slideDown( duration ) |
| 172 | .css( 'display', 'block' ); |
| 173 | $el.find( '.acf-accordion-icon:first' ).replaceWith( |
| 174 | this.iconHtml( { open: true } ) |
| 175 | ); |
| 176 | $el.addClass( '-open' ); |
| 177 | |
| 178 | // action |
| 179 | acf.doAction( 'show', $el ); |
| 180 | |
| 181 | // close siblings |
| 182 | if ( ! $el.attr( 'multi-expand' ) ) { |
| 183 | $el.siblings( '.acf-accordion.-open' ).each( function () { |
| 184 | accordionManager.close( $( this ) ); |
| 185 | } ); |
| 186 | } |
| 187 | }, |
| 188 | |
| 189 | close: function ( $el ) { |
| 190 | var duration = acf.isGutenberg() ? 0 : 300; |
| 191 | |
| 192 | // close |
| 193 | $el.find( '.acf-accordion-content:first' ).slideUp( duration ); |
| 194 | $el.find( '.acf-accordion-icon:first' ).replaceWith( |
| 195 | this.iconHtml( { open: false } ) |
| 196 | ); |
| 197 | $el.removeClass( '-open' ); |
| 198 | |
| 199 | // action |
| 200 | acf.doAction( 'hide', $el ); |
| 201 | }, |
| 202 | |
| 203 | onClick: function ( e, $el ) { |
| 204 | // prevent Defailt |
| 205 | e.preventDefault(); |
| 206 | |
| 207 | // open close |
| 208 | this.toggle( $el.parent() ); |
| 209 | }, |
| 210 | |
| 211 | onInvalidField: function ( e, $el ) { |
| 212 | // bail early if already focused |
| 213 | if ( this.busy ) { |
| 214 | return; |
| 215 | } |
| 216 | |
| 217 | // disable functionality for 1sec (allow next validation to work) |
| 218 | this.busy = true; |
| 219 | this.setTimeout( function () { |
| 220 | this.busy = false; |
| 221 | }, 1000 ); |
| 222 | |
| 223 | // open accordion |
| 224 | this.open( $el ); |
| 225 | }, |
| 226 | |
| 227 | onUnload: function ( e ) { |
| 228 | // vars |
| 229 | var order = []; |
| 230 | |
| 231 | // loop |
| 232 | $( '.acf-accordion' ).each( function () { |
| 233 | var open = $( this ).hasClass( '-open' ) ? 1 : 0; |
| 234 | order.push( open ); |
| 235 | } ); |
| 236 | |
| 237 | // set |
| 238 | if ( order.length ) { |
| 239 | acf.setPreference( 'this.accordions', order ); |
| 240 | } |
| 241 | }, |
| 242 | } ); |
| 243 | } )( jQuery ); |
| 244 |