diff --git a/src/classes/theme-helper/class-tainacan-theme-helper.php b/src/classes/theme-helper/class-tainacan-theme-helper.php index 2be0c2688..e5fac1159 100644 --- a/src/classes/theme-helper/class-tainacan-theme-helper.php +++ b/src/classes/theme-helper/class-tainacan-theme-helper.php @@ -49,7 +49,8 @@ class Theme_Helper { add_filter('get_the_archive_title', array($this, 'filter_archive_title')); add_shortcode( 'tainacan-search', array($this, 'search_shortcode')); - + add_shortcode( 'tainacan-item-submission', array($this, 'item_submission_shortcode')); + add_action( 'generate_rewrite_rules', array( &$this, 'rewrite_rules' ), 10, 1 ); add_filter( 'query_vars', array( &$this, 'rewrite_rules_query_vars' ) ); add_filter( 'template_include', array( &$this, 'rewrite_rule_template_include' ) ); @@ -354,6 +355,26 @@ class Theme_Helper { return $image; } + public function item_submission_shortcode($args) { + global $TAINACAN_BASE_URL; + + $props = ' '; + + // Passes arguments to custom props + if ($args) { + foreach ($args as $key => $value) { + if ($value == true || $value == 'true') { + $props .= str_replace('_', '-', $key) . '="' . $value . '" '; + } + } + } + + wp_enqueue_script('tainacan-item-submission', $TAINACAN_BASE_URL . '/assets/js/item_submission.js' , ['underscore', 'media-editor', 'media-views', 'customize-controls'] , TAINACAN_VERSION); + wp_localize_script('tainacan-item-submission', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params()); + + return "
"; + } + public function search_shortcode($args) { $props = ' '; diff --git a/src/views/item-submission/item-submission.vue b/src/views/item-submission/item-submission.vue new file mode 100644 index 000000000..c4fbb5b3b --- /dev/null +++ b/src/views/item-submission/item-submission.vue @@ -0,0 +1,48 @@ + + + + + \ No newline at end of file diff --git a/src/views/item-submission/js/item-submission-main.js b/src/views/item-submission/js/item-submission-main.js new file mode 100644 index 000000000..39de9d3a1 --- /dev/null +++ b/src/views/item-submission/js/item-submission-main.js @@ -0,0 +1,123 @@ +// Main imports +import Vue from 'vue'; +import Buefy from 'buefy'; +import VTooltip from 'v-tooltip'; +import cssVars from 'css-vars-ponyfill'; +import VueTheMask from 'vue-the-mask'; +import qs from 'qs'; + +// Metadata Types +import Text from '../../admin/components/metadata-types/text/Text.vue'; +import Textarea from '../../admin/components/metadata-types/textarea/Textarea.vue'; +import Selectbox from '../../admin/components/metadata-types/selectbox/Selectbox.vue'; +import Numeric from '../../admin/components/metadata-types/numeric/Numeric.vue'; +import Date from '../../admin/components/metadata-types/date/Date.vue'; +import Relationship from '../../admin/components/metadata-types/relationship/Relationship.vue'; +import Taxonomy from '../../admin/components/metadata-types/taxonomy/Taxonomy.vue'; +import Compound from '../../admin/components/metadata-types/compound/Compound.vue'; +import User from '../../admin/components/metadata-types/user/User.vue'; + +// Main components +import ItemSubmissionForm from '../pages/item-submission-form.vue'; +import ItemSubmission from '../item-submission.vue'; + +// Remaining imports +import HelpButton from '../../admin/components/other/help-button.vue'; +import store from '../../admin/js/store/store'; +import { I18NPlugin, UserPrefsPlugin, ConsolePlugin, StatusHelperPlugin, CommentsStatusHelperPlugin } from '../../admin/js/utilities'; + +document.addEventListener("DOMContentLoaded", () => { + + // Mount only if the div exists + if (document.getElementById('tainacan-item-submission-form')) { + + + // Display Icons only once everything is loaded + function listen(evnt, elem, func) { + if (elem.addEventListener) // W3C DOM + elem.addEventListener(evnt,func,false); + else if (elem.attachEvent) { // IE DOM + var r = elem.attachEvent("on"+evnt, func); + return r; + } else if (document.head) { + var iconHideStyle = document.createElement("style"); + iconHideStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }'; + document.head.appendChild(iconHideStyle); + } else { + var iconHideStyle = document.createElement("style"); + iconHideStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }'; + document.getElementsByTagName("head")[0].appendChild(iconHideStyle); + } + } + + /* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */ + if (typeof window.tainacan_extra_plugins != "undefined") { + for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins)) + Vue.use(extraVuePluginObject); + } + + // Configure and Register Plugins + Vue.use(Buefy, { + defaultTooltipAnimated: true + }); + Vue.use(VTooltip); + Vue.use(I18NPlugin); + Vue.use(UserPrefsPlugin); + Vue.use(StatusHelperPlugin); + Vue.use(ConsolePlugin, {visual: false}); + Vue.use(VueTheMask); + Vue.use(CommentsStatusHelperPlugin); + + /* Registers Extra Vue Components passed to the window.tainacan_extra_components */ + if (typeof window.tainacan_extra_components != "undefined") { + for (let [extraVueComponentName, extraVueComponentObject] of Object.entries(window.tainacan_extra_components)) { + Vue.component(extraVueComponentName, extraVueComponentObject); + } + } + + /* Metadata */ + Vue.component('tainacan-text', Text); + Vue.component('tainacan-textarea', Textarea); + Vue.component('tainacan-selectbox', Selectbox); + Vue.component('tainacan-numeric', Numeric); + Vue.component('tainacan-date', Date); + Vue.component('tainacan-relationship', Relationship); + Vue.component('tainacan-taxonomy', Taxonomy); + Vue.component('tainacan-compound', Compound); + Vue.component('tainacan-user', User); + + /* Main page component */ + Vue.component('item-submission-form', ItemSubmissionForm); + Vue.component('item-submission', ItemSubmission); + + /* Others */ + Vue.component('help-button', HelpButton); + + const VueItemSubmission = new Vue({ + store, + data: {}, + beforeMount () {}, + methods: { + isParameterTrue(parameter) { + const value = this.$el.attributes[parameter].value; + return (value == true || value == 'true' || value == '1' || value == 1) ? true : false; + } + }, + render: h => h(ItemSubmission) + }); + + VueItemSubmission.$mount('#tainacan-item-submission-form'); + + listen("load", window, function() { + var iconsStyle = document.createElement("style"); + iconsStyle.setAttribute('type', 'text/css'); + iconsStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }'; + document.head.appendChild(iconsStyle); + }); + + // Initialize Ponyfill for Custom CSS properties + cssVars({ + // Options... + }); + } +}); \ No newline at end of file diff --git a/src/views/item-submission/pages/item-submission-form.vue b/src/views/item-submission/pages/item-submission-form.vue new file mode 100644 index 000000000..aeb7bdc7d --- /dev/null +++ b/src/views/item-submission/pages/item-submission-form.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/src/views/item-submission/scss/item-submission-basics.sass b/src/views/item-submission/scss/item-submission-basics.sass new file mode 100644 index 000000000..aa303e24f --- /dev/null +++ b/src/views/item-submission/scss/item-submission-basics.sass @@ -0,0 +1,11 @@ +@import "../../../../node_modules/bulma/sass/utilities/_all.sass" +@import "../../../../node_modules/bulma/sass/base/helpers.sass" +@import "../../../../node_modules/bulma/sass/form/_all.sass" +@import "../../../../node_modules/bulma/sass/components/pagination.sass" +@import "../../../../node_modules/bulma/sass/elements/icon.sass" +@import "../../../../node_modules/bulma/sass/elements/tag.sass" +@import "../../../../node_modules/bulma/sass/components/tabs.sass" +@import "../../../../node_modules/bulma/sass/elements/button.sass" +@import "../../../../node_modules/bulma/sass/grid/columns.sass" +@import "../../../../node_modules/bulma/sass/components/dropdown.sass" +@import "../../../../node_modules/bulma/sass/components/modal.sass" \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index aae27a997..6cd281ee7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -7,6 +7,7 @@ module.exports = { entry: { admin: './src/views/admin/js/main.js', theme_search: './src/views/theme-search/js/theme-main.js', + item_submission: './src/views/item-submission/js/item-submission-main.js', roles: './src/views/roles/js/roles-main.js', block_terms_list: './src/views/gutenberg-blocks/tainacan-terms/terms-list/index.js',