editor.js
390 lines
| 1 | /** |
| 2 | * Initialize all modules |
| 3 | */ |
| 4 | ;(function($, window, document, undefined){ |
| 5 | |
| 6 | $( window ).on( 'elementor:init', function() { |
| 7 | |
| 8 | // Add auxin specific css class to elementor body |
| 9 | $('.elementor-editor-active').addClass('auxin'); |
| 10 | |
| 11 | // Make our custom css visible in the panel's front-end |
| 12 | if( typeof elementorPro == 'undefined' ) { |
| 13 | elementor.hooks.addFilter( 'editor/style/styleText', function( css, view ){ |
| 14 | var model = view.getEditModel(), |
| 15 | customCSS = model.get( 'settings' ).get( 'custom_css' ); |
| 16 | |
| 17 | if ( customCSS ) { |
| 18 | css += customCSS.replace( /selector/g, '.elementor-element.elementor-element-' + view.model.id ); |
| 19 | } |
| 20 | |
| 21 | return css; |
| 22 | }); |
| 23 | } |
| 24 | |
| 25 | var AuxControlBaseDataView = elementor.modules.controls.BaseData; |
| 26 | |
| 27 | /*! |
| 28 | * ================== Auxin Visual Select Controller =================== |
| 29 | **/ |
| 30 | var AuxControlVisualSelectItemView = AuxControlBaseDataView.extend( { |
| 31 | onReady: function() { |
| 32 | this.ui.select.avertaVisualSelect(); |
| 33 | }, |
| 34 | onBeforeDestroy: function() { |
| 35 | this.ui.select.avertaVisualSelect( 'destroy' ); |
| 36 | } |
| 37 | } ); |
| 38 | elementor.addControlView( 'aux-visual-select', AuxControlVisualSelectItemView ); |
| 39 | |
| 40 | |
| 41 | /*! |
| 42 | * ================== Auxin Media Select Controller =================== |
| 43 | **/ |
| 44 | var AuxControlMediaSelectItemView = AuxControlBaseDataView.extend( { |
| 45 | ui: function() { |
| 46 | var ui = AuxControlBaseDataView.prototype.ui.apply( this, arguments ); |
| 47 | |
| 48 | ui.controlMedia = '.aux-elementor-control-media'; |
| 49 | ui.mediaImage = '.aux-elementor-control-media-attachment'; |
| 50 | ui.frameOpeners = '.aux-elementor-control-media-upload-button, .aux-elementor-control-media-attachment'; |
| 51 | ui.deleteButton = '.aux-elementor-control-media-delete'; |
| 52 | |
| 53 | return ui; |
| 54 | }, |
| 55 | |
| 56 | events: function() { |
| 57 | return _.extend( AuxControlBaseDataView.prototype.events.apply( this, arguments ), { |
| 58 | 'click @ui.frameOpeners': 'openFrame', |
| 59 | 'click @ui.deleteButton': 'deleteImage' |
| 60 | } ); |
| 61 | }, |
| 62 | |
| 63 | applySavedValue: function() { |
| 64 | var control = this.getControlValue(); |
| 65 | |
| 66 | this.ui.mediaImage.css( 'background-image', control.img ? 'url(' + control.img + ')' : '' ); |
| 67 | |
| 68 | this.ui.controlMedia.toggleClass( 'elementor-media-empty', ! control.img ); |
| 69 | }, |
| 70 | |
| 71 | openFrame: function() { |
| 72 | if ( ! this.frame ) { |
| 73 | this.initFrame(); |
| 74 | } |
| 75 | |
| 76 | this.frame.open(); |
| 77 | }, |
| 78 | |
| 79 | deleteImage: function() { |
| 80 | this.setValue( { |
| 81 | url: '', |
| 82 | img: '', |
| 83 | id : '' |
| 84 | } ); |
| 85 | |
| 86 | this.applySavedValue(); |
| 87 | }, |
| 88 | |
| 89 | /** |
| 90 | * Create a media modal select frame, and store it so the instance can be reused when needed. |
| 91 | */ |
| 92 | initFrame: function() { |
| 93 | this.frame = wp.media( { |
| 94 | button: { |
| 95 | text: elementor.translate( 'insert_media' ) |
| 96 | }, |
| 97 | states: [ |
| 98 | new wp.media.controller.Library( { |
| 99 | title: elementor.translate( 'insert_media' ), |
| 100 | library: wp.media.query( { type: this.ui.controlMedia.data('media-type') } ), |
| 101 | multiple: false, |
| 102 | date: false |
| 103 | } ) |
| 104 | ] |
| 105 | } ); |
| 106 | |
| 107 | // When a file is selected, run a callback. |
| 108 | this.frame.on( 'insert select', this.select.bind( this ) ); |
| 109 | }, |
| 110 | |
| 111 | /** |
| 112 | * Callback handler for when an attachment is selected in the media modal. |
| 113 | * Gets the selected image information, and sets it within the control. |
| 114 | */ |
| 115 | select: function() { |
| 116 | this.trigger( 'before:select' ); |
| 117 | |
| 118 | // Get the attachment from the modal frame. |
| 119 | var attachment = this.frame.state().get( 'selection' ).first().toJSON(); |
| 120 | |
| 121 | if ( attachment.url ) { |
| 122 | this.setValue( { |
| 123 | url: attachment.url, |
| 124 | img: attachment.image.src, |
| 125 | id : attachment.id |
| 126 | } ); |
| 127 | |
| 128 | this.applySavedValue(); |
| 129 | } |
| 130 | |
| 131 | this.trigger( 'after:select' ); |
| 132 | }, |
| 133 | |
| 134 | onBeforeDestroy: function() { |
| 135 | this.$el.remove(); |
| 136 | } |
| 137 | } ); |
| 138 | elementor.addControlView( 'aux-media', AuxControlMediaSelectItemView ); |
| 139 | |
| 140 | /*! |
| 141 | * ================== Auxin Icon Select Controller =================== |
| 142 | **/ |
| 143 | var AuxControlSelect2 = elementor.modules.controls.Select2; |
| 144 | |
| 145 | var ControlIconSelectItemView = AuxControlSelect2.extend( { |
| 146 | initialize: function() { |
| 147 | AuxControlSelect2View.prototype.initialize.apply( this, arguments ); |
| 148 | |
| 149 | this.filterIcons(); |
| 150 | }, |
| 151 | |
| 152 | filterIcons: function() { |
| 153 | var icons = this.model.get( 'options' ), |
| 154 | include = this.model.get( 'include' ), |
| 155 | exclude = this.model.get( 'exclude' ); |
| 156 | |
| 157 | if ( include ) { |
| 158 | var filteredIcons = {}; |
| 159 | |
| 160 | _.each( include, function( iconKey ) { |
| 161 | filteredIcons[ iconKey ] = icons[ iconKey ]; |
| 162 | } ); |
| 163 | |
| 164 | this.model.set( 'options', filteredIcons ); |
| 165 | return; |
| 166 | } |
| 167 | |
| 168 | if ( exclude ) { |
| 169 | _.each( exclude, function( iconKey ) { |
| 170 | delete icons[ iconKey ]; |
| 171 | } ); |
| 172 | } |
| 173 | }, |
| 174 | |
| 175 | iconsList: function( icon ) { |
| 176 | if ( ! icon.id ) { |
| 177 | return icon.text; |
| 178 | } |
| 179 | |
| 180 | return jQuery( |
| 181 | '<span><i class="' + icon.id + '"></i> ' + icon.text + '</span>' |
| 182 | ); |
| 183 | }, |
| 184 | |
| 185 | getSelect2Options: function() { |
| 186 | return { |
| 187 | allowClear: true, |
| 188 | templateResult: this.iconsList.bind( this ), |
| 189 | templateSelection: this.iconsList.bind( this ) |
| 190 | }; |
| 191 | } |
| 192 | } ); |
| 193 | elementor.addControlView( 'aux-icon', ControlIconSelectItemView ); |
| 194 | |
| 195 | // ControlSelect2View prototype |
| 196 | var AuxControlSelect2View = AuxControlSelect2.extend( { |
| 197 | getSelect2Options: function() { |
| 198 | return { |
| 199 | dir: elementor.config.is_rtl ? 'rtl' : 'ltr' |
| 200 | }; |
| 201 | }, |
| 202 | |
| 203 | templateHelpers: function() { |
| 204 | var helpers = AuxControlSelect2View.prototype.templateHelpers.apply( this, arguments ), |
| 205 | fonts = this.model.get( 'options' ); |
| 206 | |
| 207 | helpers.getFontsByGroups = function( groups ) { |
| 208 | var filteredFonts = {}; |
| 209 | |
| 210 | _.each( fonts, function( fontType, fontName ) { |
| 211 | if ( _.isArray( groups ) && _.contains( groups, fontType ) || fontType === groups ) { |
| 212 | filteredFonts[ fontName ] = fontName; |
| 213 | } |
| 214 | } ); |
| 215 | |
| 216 | return filteredFonts; |
| 217 | }; |
| 218 | |
| 219 | console.log(helpers); |
| 220 | |
| 221 | return helpers; |
| 222 | } |
| 223 | } ); |
| 224 | |
| 225 | /*! |
| 226 | * ================== Auxin Query Controller =================== |
| 227 | **/ |
| 228 | var ControlQueryPostsItemView = AuxControlSelect2.extend( { |
| 229 | cache: null, |
| 230 | |
| 231 | isTitlesReceived: false, |
| 232 | |
| 233 | getSelect2Placeholder: function getSelect2Placeholder() { |
| 234 | return { |
| 235 | id: '', |
| 236 | text: 'All' |
| 237 | }; |
| 238 | }, |
| 239 | |
| 240 | getControlValueByName: function getControlValueByName(controlName) { |
| 241 | var name = this.model.get('group_prefix') + controlName; |
| 242 | return this.elementSettingsModel.attributes[name]; |
| 243 | }, |
| 244 | |
| 245 | getSelect2DefaultOptions: function getSelect2DefaultOptions() { |
| 246 | var self = this; |
| 247 | |
| 248 | return jQuery.extend(AuxControlSelect2.prototype.getSelect2DefaultOptions.apply(this, arguments), { |
| 249 | ajax: { |
| 250 | transport: function transport(params, success, failure) { |
| 251 | var data = { |
| 252 | q: params.data.q, |
| 253 | filter_type: self.model.get('filter_type'), |
| 254 | object_type: self.model.get('object_type'), |
| 255 | include_type: self.model.get('include_type'), |
| 256 | query: self.model.get('query') |
| 257 | }; |
| 258 | |
| 259 | if ('cpt_taxonomies' === data.filter_type) { |
| 260 | data.query = { |
| 261 | post_type: self.getControlValueByName('post_type') |
| 262 | }; |
| 263 | } |
| 264 | |
| 265 | return elementorCommon.ajax.addRequest('panel_posts_control_filter_autocomplete', { |
| 266 | data: data, |
| 267 | success: success, |
| 268 | error: failure |
| 269 | }); |
| 270 | }, |
| 271 | data: function data(params) { |
| 272 | return { |
| 273 | q: params.term, |
| 274 | page: params.page |
| 275 | }; |
| 276 | }, |
| 277 | cache: true |
| 278 | }, |
| 279 | escapeMarkup: function escapeMarkup(markup) { |
| 280 | return markup; |
| 281 | }, |
| 282 | minimumInputLength: 1 |
| 283 | }); |
| 284 | }, |
| 285 | |
| 286 | getValueTitles: function getValueTitles() { |
| 287 | var self = this, |
| 288 | ids = this.getControlValue(), |
| 289 | filterType = this.model.get('filter_type'); |
| 290 | |
| 291 | if (!ids || !filterType) { |
| 292 | return; |
| 293 | } |
| 294 | |
| 295 | if (!_.isArray(ids)) { |
| 296 | ids = [ids]; |
| 297 | } |
| 298 | |
| 299 | elementorCommon.ajax.loadObjects({ |
| 300 | action: 'query_control_value_titles', |
| 301 | ids: ids, |
| 302 | data: { |
| 303 | filter_type: filterType, |
| 304 | object_type: self.model.get('object_type'), |
| 305 | include_type: self.model.get('include_type'), |
| 306 | unique_id: '' + self.cid + filterType, |
| 307 | query: self.model.get('query') |
| 308 | }, |
| 309 | before: function before() { |
| 310 | self.addControlSpinner(); |
| 311 | }, |
| 312 | success: function success(data) { |
| 313 | self.isTitlesReceived = true; |
| 314 | |
| 315 | self.model.set('options', data); |
| 316 | |
| 317 | self.render(); |
| 318 | } |
| 319 | }); |
| 320 | }, |
| 321 | |
| 322 | addControlSpinner: function addControlSpinner() { |
| 323 | this.ui.select.prop('disabled', true); |
| 324 | this.$el.find('.elementor-control-title').after('<span class="elementor-control-spinner"> <i class="fa fa-spinner fa-spin"></i> </span>'); |
| 325 | }, |
| 326 | |
| 327 | onReady: function onReady() { |
| 328 | // Safari takes it's time to get the original select width |
| 329 | setTimeout(AuxControlSelect2.prototype.onReady.bind(this)); |
| 330 | |
| 331 | if (!this.isTitlesReceived) { |
| 332 | this.getValueTitles(); |
| 333 | } |
| 334 | } |
| 335 | } ); |
| 336 | elementor.addControlView( 'aux-query', ControlQueryPostsItemView ); |
| 337 | |
| 338 | /*! |
| 339 | * ================== Auxin Featured Color Controller =================== |
| 340 | **/ |
| 341 | var AuxControlFeaturedColorItemView = AuxControlBaseDataView.extend( { |
| 342 | |
| 343 | onReady: function() { |
| 344 | this.ui.select.AuxFeaturedColor(); |
| 345 | }, |
| 346 | |
| 347 | } ); |
| 348 | elementor.addControlView( 'aux-featured-color', AuxControlFeaturedColorItemView ); |
| 349 | |
| 350 | /*! |
| 351 | * ================== Others =================== |
| 352 | **/ |
| 353 | // Enables the live preview for tranistions in Elementor Editor |
| 354 | function auxOnGlobalOpenEditorForTranistions ( panel, model, view ) { |
| 355 | view.listenTo( model.get( 'settings' ), 'change', function( changedModel ){ |
| 356 | |
| 357 | // Force to re-render the element if the Entrance Animation enabled for first time |
| 358 | if( '' !== model.getSetting('aux_animation_name') && !view.$el.hasClass('aux-animated') ){ |
| 359 | view.render(); |
| 360 | view.$el.addClass('aux-animated'); |
| 361 | view.$el.addClass('aux-animated-once'); |
| 362 | } |
| 363 | |
| 364 | // Check the changed setting value |
| 365 | for( settingName in changedModel.changed ) { |
| 366 | if ( changedModel.changed.hasOwnProperty( settingName ) ) { |
| 367 | |
| 368 | // Replay the animation if an animation option changed (except the animation name) |
| 369 | if( settingName !== "aux_animation_name" && -1 !== settingName.indexOf("aux_animation_") ){ |
| 370 | |
| 371 | // Reply the animation |
| 372 | view.$el.removeClass( model.getSetting('aux_animation_name') ); |
| 373 | |
| 374 | setTimeout( function() { |
| 375 | view.$el.addClass( model.getSetting('aux_animation_name') ); |
| 376 | }, ( model.getSetting('aux_animation_delay') || 300 ) ); // Animation Delay |
| 377 | } |
| 378 | } |
| 379 | } |
| 380 | |
| 381 | }, view ); |
| 382 | } |
| 383 | elementor.hooks.addAction( 'panel/open_editor/section', auxOnGlobalOpenEditorForTranistions ); |
| 384 | elementor.hooks.addAction( 'panel/open_editor/column' , auxOnGlobalOpenEditorForTranistions ); |
| 385 | elementor.hooks.addAction( 'panel/open_editor/widget' , auxOnGlobalOpenEditorForTranistions ); |
| 386 | |
| 387 | } ); |
| 388 | |
| 389 | })(jQuery, window, document); |
| 390 |