settings.js
126 lines
| 1 | (function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | let $ = jQuery; |
| 5 | |
| 6 | let appData = { |
| 7 | save_disabled: true, |
| 8 | save_success: false, |
| 9 | error_message: '', |
| 10 | }; |
| 11 | |
| 12 | let app = Vue.createApp({ |
| 13 | data() { |
| 14 | return appData; |
| 15 | }, |
| 16 | created() { |
| 17 | $(function () { |
| 18 | $('#scroll-top-content').find('.if-js-closed').removeClass('if-js-closed').addClass('closed'); |
| 19 | postboxes.add_postbox_toggles('wpfront-scroll-top'); |
| 20 | }); |
| 21 | }, |
| 22 | mounted() { |
| 23 | $('#scroll-top-content').show(); |
| 24 | this.save_disabled = false; |
| 25 | }, |
| 26 | methods: { |
| 27 | submit() { |
| 28 | this.save_disabled = true; |
| 29 | |
| 30 | fetch(this.ajax_url + '?action=wpfront_scroll_top_submit_data', { |
| 31 | method: 'POST', |
| 32 | headers: { |
| 33 | 'Content-Type': 'application/json' |
| 34 | }, |
| 35 | body: JSON.stringify(this.data) |
| 36 | }) |
| 37 | .then(response => { |
| 38 | if (response.ok) { |
| 39 | return response.json(); |
| 40 | } |
| 41 | |
| 42 | throw new Error('Network response was not ok.'); |
| 43 | }) |
| 44 | .then(data => { |
| 45 | if(!data.success) { |
| 46 | throw new Error(data.data); |
| 47 | } |
| 48 | |
| 49 | this.save_success = true; |
| 50 | |
| 51 | this.data = data.data; |
| 52 | }) |
| 53 | .catch(error => { |
| 54 | this.error_message = error.message; |
| 55 | }) |
| 56 | .finally(() => { |
| 57 | setTimeout(() => { |
| 58 | this.save_success = false; |
| 59 | this.error_message = ''; |
| 60 | this.save_disabled = false; |
| 61 | }, 3000); |
| 62 | }); |
| 63 | }, |
| 64 | |
| 65 | mediaLibrary() { |
| 66 | var self = this; |
| 67 | |
| 68 | if (!wp.media.frames.file_frame) { |
| 69 | wp.media.frames.file_frame = wp.media({ |
| 70 | title: appData.labels.media_library_title, |
| 71 | multiple: false, |
| 72 | 'library': { |
| 73 | type: 'image' |
| 74 | }, |
| 75 | button: { |
| 76 | text: appData.labels.media_library_text |
| 77 | } |
| 78 | }).on('select', function () { |
| 79 | var obj = wp.media.frames.file_frame.state().get('selection').first().toJSON(); |
| 80 | |
| 81 | self.data.custom_url = obj.url; |
| 82 | self.data.image = 'custom'; |
| 83 | self.data.image_alt = self.data.image_alt || obj.alt || obj.title; |
| 84 | }); |
| 85 | } |
| 86 | |
| 87 | wp.media.frames.file_frame.open(); |
| 88 | } |
| 89 | } |
| 90 | }); |
| 91 | |
| 92 | app.use(ElementPlus); |
| 93 | |
| 94 | let load = function (data) { |
| 95 | Object.assign(appData, data); |
| 96 | |
| 97 | app.component('HelpIcon', { |
| 98 | props: ['helpText'], |
| 99 | template: data.templates['help-icon'] |
| 100 | }); |
| 101 | |
| 102 | app.component('ColorPicker', { |
| 103 | props: ['modelValue', 'id'], |
| 104 | template: data.templates['color-picker'] |
| 105 | }); |
| 106 | |
| 107 | app.component('PostsFilterSelection', { |
| 108 | props: ['modelValue', 'postsList'], |
| 109 | template: data.templates['posts-filter-selection'], |
| 110 | computed: { |
| 111 | selectedPosts: { |
| 112 | get() { |
| 113 | return this.modelValue.split(','); |
| 114 | }, |
| 115 | set(values) { |
| 116 | this.$emit('update:modelValue', values.filter(e => e).join().trim()); |
| 117 | } |
| 118 | } |
| 119 | } |
| 120 | }); |
| 121 | |
| 122 | app.mount('#scroll-top-content'); |
| 123 | }; |
| 124 | |
| 125 | load(wpfront_scroll_top_settings); |
| 126 | })(); |