HUGE REFACTOR introducing conditioner.js and dynamic chunk imports to our blocks. #580.

This commit is contained in:
mateuswetah 2021-07-22 17:55:37 -03:00
parent 9e99eed3c7
commit 43d0d51795
87 changed files with 1432 additions and 1211 deletions

183
package-lock.json generated
View File

@ -2889,6 +2889,11 @@
"typedarray": "^0.0.6"
}
},
"conditioner-core": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/conditioner-core/-/conditioner-core-2.3.3.tgz",
"integrity": "sha512-IiXkkTceFuvuU05vvSUo+SfERaHce5p5pbXvJvov3+pmHOMtKR7YD+70F+vbRtkCsLX83dR626znGqwGc/OFEg=="
},
"connect-history-api-fallback": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz",
@ -7570,6 +7575,13 @@
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
"integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA=="
},
"picomatch": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
"integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
"dev": true,
"optional": true
},
"pify": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
@ -7671,9 +7683,9 @@
"dev": true
},
"postcss": {
"version": "7.0.30",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.30.tgz",
"integrity": "sha512-nu/0m+NtIzoubO+xdAlwZl/u5S5vi/y6BCsoL8D+8IxsD3XvBS8X4YEADNIVXKVuQvduiucnRv+vPIqj56EGMQ==",
"version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.2",
@ -7773,14 +7785,25 @@
}
},
"chalk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
"version": "2.4.2",
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
"integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
"dev": true,
"requires": {
"ansi-styles": "^3.2.1",
"escape-string-regexp": "^1.0.5",
"supports-color": "^5.3.0"
},
"dependencies": {
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
"integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
}
}
}
},
"fast-deep-equal": {
@ -7796,14 +7819,14 @@
"dev": true
},
"postcss": {
"version": "7.0.2",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.2.tgz",
"integrity": "sha512-fmaUY5370keLUTx+CnwRxtGiuFTcNBLQBqr1oE3WZ/euIYmGAo0OAgOhVJ3ByDnVmOR3PK+0V9VebzfjRIUcqw==",
"version": "7.0.36",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.36.tgz",
"integrity": "sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw==",
"dev": true,
"requires": {
"chalk": "^2.4.1",
"chalk": "^2.4.2",
"source-map": "^0.6.1",
"supports-color": "^5.4.0"
"supports-color": "^6.1.0"
}
},
"punycode": {
@ -7830,9 +7853,9 @@
"dev": true
},
"supports-color": {
"version": "5.4.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
"integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-6.1.0.tgz",
"integrity": "sha512-qe1jfm1Mg7Nq/NSh6XE24gPXROEVsWHxC1LIx//XNlD9iw7YZQGjZNjYN7xGaEG6iKdA8EtNFW6R0gjnVXp+wQ==",
"dev": true,
"requires": {
"has-flag": "^3.0.0"
@ -10943,14 +10966,136 @@
"integrity": "sha512-ajtqwEW/QhnrBZQsZxCLHThZZaa+Db45c92Asf46ZDXu6uHXgbfVuBaJ4gzD2r4UX0oMJHstFwd2r2HM4l8umg=="
},
"watchpack": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.1.tgz",
"integrity": "sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==",
"version": "1.7.5",
"resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
"integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
"dev": true,
"requires": {
"chokidar": "^2.1.8",
"chokidar": "^3.4.1",
"graceful-fs": "^4.1.2",
"neo-async": "^2.5.0"
"neo-async": "^2.5.0",
"watchpack-chokidar2": "^2.0.1"
},
"dependencies": {
"anymatch": {
"version": "3.1.2",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
"integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
"dev": true,
"optional": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
},
"binary-extensions": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz",
"integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==",
"dev": true,
"optional": true
},
"braces": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
"integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
"dev": true,
"optional": true,
"requires": {
"fill-range": "^7.0.1"
}
},
"chokidar": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.2.tgz",
"integrity": "sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ==",
"dev": true,
"optional": true,
"requires": {
"anymatch": "~3.1.2",
"braces": "~3.0.2",
"fsevents": "~2.3.2",
"glob-parent": "~5.1.2",
"is-binary-path": "~2.1.0",
"is-glob": "~4.0.1",
"normalize-path": "~3.0.0",
"readdirp": "~3.6.0"
}
},
"fill-range": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
"integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
"dev": true,
"optional": true,
"requires": {
"to-regex-range": "^5.0.1"
}
},
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
"integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
"dev": true,
"optional": true
},
"glob-parent": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
"integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
"dev": true,
"optional": true,
"requires": {
"is-glob": "^4.0.1"
}
},
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
"integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
"dev": true,
"optional": true,
"requires": {
"binary-extensions": "^2.0.0"
}
},
"is-number": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
"integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
"dev": true,
"optional": true
},
"readdirp": {
"version": "3.6.0",
"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
"integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
"dev": true,
"optional": true,
"requires": {
"picomatch": "^2.2.1"
}
},
"to-regex-range": {
"version": "5.0.1",
"resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
"integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
"dev": true,
"optional": true,
"requires": {
"is-number": "^7.0.0"
}
}
}
},
"watchpack-chokidar2": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz",
"integrity": "sha512-nCFfBIPKr5Sh61s4LPpy1Wtfi0HE8isJ3d2Yb5/Ppw2P2B/3eVSEBjKfN0fmHJSK14+31KwMKmcrzs2GM4P0Ww==",
"dev": true,
"optional": true,
"requires": {
"chokidar": "^2.1.8"
}
},
"wbuf": {

View File

@ -9,11 +9,12 @@
},
"dependencies": {
"apexcharts": "^3.26.3",
"countup.js": "^2.0.7",
"axios": "^0.21.1",
"blurhash": "^1.1.3",
"buefy": "^0.9.7",
"bulma": "^0.9.2",
"conditioner-core": "^2.3.3",
"countup.js": "^2.0.7",
"css-vars-ponyfill": "^2.3.1",
"mdi": "^2.2.43",
"moment": "^2.25.3",

View File

@ -170,6 +170,7 @@
top: calc(50% - 42px);
bottom: initial;
background: none;
background-color: transparent !important;
border: none;
width: 42px;
height: 42px;

File diff suppressed because one or more lines are too long

View File

@ -150,6 +150,7 @@
top: calc(50% - 42px);
bottom: initial;
background: none;
background-color: transparent !important;
border: none;
width: 42px;
height: 42px;

File diff suppressed because one or more lines are too long

View File

@ -170,6 +170,7 @@
top: calc(50% - 42px);
bottom: initial;
background: none;
background-color: transparent !important;
border: none;
width: 42px;
height: 42px;

File diff suppressed because one or more lines are too long

View File

@ -324,6 +324,7 @@
display: flex;
flex-wrap: wrap;
width: 100%;
min-width: 100%;
flex-basis: 100%;
justify-content: center;
align-items: center; }

File diff suppressed because one or more lines are too long

View File

@ -311,8 +311,10 @@
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item {
position: relative;
display: block;
width: 100%;
flex-basis: 220px; }
min-width: 100%;
flex-basis: 220px;
min-width: 100%;
max-width: 220px; }
.wp-block-tainacan-facets-list ul.facets-list.facets-layout-grid li.facet-list-item a,
.wp-block-tainacan-facets-list ul.facets-list-edit.facets-layout-grid li.facet-list-item a {
color: var(--tainacan-block-gray5, #454647);

File diff suppressed because one or more lines are too long

View File

@ -275,7 +275,7 @@ class REST_Items_Controller extends REST_Controller {
}
if ( $request['context'] === 'edit' ) {
add_filter( 'taiancan_add_related_item', function( $related_item ) {
add_filter( 'tainacan_add_related_item', function( $related_item ) {
return array_merge($related_item, $this->get_context_edit($related_item['id']));
}, 10, 2 );
}

View File

@ -594,7 +594,7 @@ class Items extends Repository {
$item_related = new \Tainacan\Entities\Item($items->post);
$item_arr = $item_related->_toArray();
$item_arr['thumbnail'] = $item_related->get_thumbnail();
array_push($prepared_items, apply_filters( 'taiancan_add_related_item', $item_arr ) );
array_push($prepared_items, apply_filters( 'tainacan_add_related_item', $item_arr ) );
}
wp_reset_postdata();
}

View File

@ -35,8 +35,6 @@ class Theme_Helper {
// Redirect to post type archive if no cover page is set
add_action('wp', array($this, 'collection_single_redirect'));
add_action('wp_print_scripts', array($this, 'enqueue_scripts'), 90);
// make archive for terms work with items
add_action('pre_get_posts', array($this, 'tax_archive_pre_get_posts'));
@ -117,45 +115,6 @@ class Theme_Helper {
]);
}
public function enqueue_scripts($force = false) {
global $TAINACAN_BASE_URL;
if ( $force || is_post_type_archive( \Tainacan\Repositories\Repository::get_collections_db_identifiers() ) || tainacan_get_term() || get_query_var('tainacan_repository_archive') == 1 ) {
wp_register_script('tainacan-search', $TAINACAN_BASE_URL . '/assets/js/theme_search.js' , ['underscore'] , TAINACAN_VERSION);
wp_localize_script('tainacan-search', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params());
}
}
public function enqueue_items_carousel_scripts() {
global $post;
global $TAINACAN_BASE_URL;
global $TAINACAN_VERSION;
global $wp_version;
$settings = [
'wp_version' => $wp_version,
'root' => esc_url_raw( rest_url() ) . 'tainacan/v2',
'nonce' => is_user_logged_in() ? wp_create_nonce( 'wp_rest' ) : false,
'base_url' => $TAINACAN_BASE_URL,
'admin_url' => admin_url(),
'site_url' => site_url(),
'theme_items_list_url' => esc_url_raw( get_site_url() ) . '/' . \Tainacan\Theme_Helper::get_instance()->get_items_list_slug()
];
wp_enqueue_script(
'carousel-items-list-theme',
$TAINACAN_BASE_URL . '/assets/js/block_carousel_items_list_theme.js',
array('wp-components')
);
wp_enqueue_style(
'carousel-items-list',
$TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-' . 'carousel-items-list' . '.css',
array('tainacan-blocks-common-styles'),
$TAINACAN_VERSION
);
wp_set_script_translations('carousel-items-list-theme', 'tainacan');
wp_localize_script('carousel-items-list-theme', 'tainacan_blocks', $settings);
}
public function enqueue_related_items_carousel_scripts() {
global $TAINACAN_BASE_URL;
global $TAINACAN_VERSION;
@ -428,11 +387,8 @@ class Theme_Helper {
}
wp_enqueue_media();
wp_enqueue_script('jcrop');
wp_enqueue_script('tainacan-item-submission', $TAINACAN_BASE_URL . '/assets/js/item_submission.js' , ['underscore', 'jcrop', '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 "<div id='tainacan-item-submission-form' $props ></div>";
return "<div data-module='item-submission-form' id='tainacan-item-submission-form' $props ></div>";
}
/**
@ -522,9 +478,7 @@ class Theme_Helper {
}
}
$this->enqueue_scripts($force_enqueue);
return "<div id='tainacan-items-page' $props ></div>";
return "<div data-module='faceted-search' id='tainacan-items-page' $props ></div>";
}
function get_items_list_slug() {
@ -937,9 +891,7 @@ class Theme_Helper {
$props .= (str_replace('_', '-', $key) . "='" . $value . "' ");
}
$this->enqueue_items_carousel_scripts();
return "<div id='tainacan-items-carousel-shortcode' $props ></div>";
return "<div data-module='carousel-items-list' id='tainacan-items-carousel-shortcode' $props ></div>";
}
/**

View File

@ -33,6 +33,7 @@
min-width: 6em;
border: none;
z-index: 999991;
background-color: var(--tainacan-input-background-color);
.dropdown-content {
padding: 0px 0px 1px 0px;

View File

@ -112,7 +112,6 @@ class Admin {
function add_theme_files() {
global $TAINACAN_BASE_URL;
// wp_enqueue_style( 'style', $TAINACAN_BASE_URL . '/assets/css/materialdesignicons.css' );
wp_enqueue_style( 'tainacan-fonts', $TAINACAN_BASE_URL . '/assets/css/tainacanicons.css', [], TAINACAN_VERSION );
wp_enqueue_style( 'roboto-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,400i,500,500i,700,700i', [], TAINACAN_VERSION );
wp_enqueue_script('underscore');

View File

@ -6,12 +6,12 @@ include_once( ABSPATH . 'wp-admin/includes/plugin.php' );
const TAINACAN_BLOCKS = [
'items-list' => [],
'collections-list' => [],
'search-bar' => [ 'has_theme_script' => true ],
'facets-list' => [ 'has_theme_script' => true ],
'dynamic-items-list' => [ 'has_theme_script' => true ],
'carousel-items-list' => [ 'has_theme_script' => true ],
'carousel-terms-list' => [ 'has_theme_script' => true ],
'carousel-collections-list' => [ 'has_theme_script' => true ],
'search-bar' => [],
'facets-list' => [],
'dynamic-items-list' => [],
'carousel-items-list' => [],
'carousel-terms-list' => [],
'carousel-collections-list' => [],
'carousel-related-items' => [],
'terms-list' => [ 'extra_editor_script_deps' => array('undescore') ],
];
@ -35,7 +35,6 @@ function tainacan_blocks_initialize() {
add_action('init', 'tainacan_blocks_add_plugin_admin_settings', 90);
add_action('init', 'register_tainacan_blocks_add_gutenberg_blocks');
add_action('wp_enqueue_scripts', 'unregister_tainacan_blocks');
add_action('admin_enqueue_scripts', 'unregister_tainacan_blocks');
}
}
@ -44,7 +43,7 @@ function tainacan_blocks_initialize() {
* both 'generic' and 'special' blocks
*/
function register_tainacan_blocks_add_gutenberg_blocks() {
tainacan_blocks_get_common_styles();
tainacan_blocks_get_common_assets();
tainacan_blocks_register_category_icon();
foreach(TAINACAN_BLOCKS as $block_slug => $block_options) {
@ -60,7 +59,7 @@ function register_tainacan_blocks_add_gutenberg_blocks() {
function unregister_tainacan_blocks() {
global $post;
// If we are outside the block editor, there are assets not necessary, so lets deregister them!
// If we are outside the block editor, there are editor-related assets not necessary, so lets deregister them!
if ( !is_admin() ) {
// First, handle the generic blocks
@ -84,7 +83,6 @@ function unregister_tainacan_blocks() {
// If there is no faceted search block, no need for its styles and theme side scripts
if ( !has_block('tainacan/faceted-search') || !is_singular() ) {
wp_deregister_style('faceted-search');
wp_deregister_script('tainacan-search');
}
// If there is no item submission block, no need for its styles and theme side scripts
@ -97,20 +95,6 @@ function unregister_tainacan_blocks() {
// No need for category assets outside the block editor
wp_deregister_script('tainacan-blocks-register-category-icon');
wp_deregister_style('tainacan-blocks-register-category-icon');
// If, however we are in the editor side, then no need to load theme side scripts!
} else {
// First, handle the generic blocks
foreach(TAINACAN_BLOCKS as $block_slug => $block_options) {
if ( isset($block_options['has_theme_script']) && $block_options['has_theme_script'] )
wp_deregister_script($block_slug . '-theme');
}
// Then the special ones
wp_deregister_script('tainacan-search');
wp_deregister_script('tainacan-item-submission');
wp_deregister_script('tainacan-google-recaptcha-script');
}
/* Now, lets check if the blocks had been removed by the filter */
@ -132,7 +116,6 @@ function unregister_tainacan_blocks() {
}
wp_deregister_script('faceted-search');
wp_deregister_script('tainacan-search');
wp_deregister_script('item-submission-form');
wp_deregister_script('tainacan-google-recaptcha-script');
wp_deregister_script('tainacan-blocks-register-category-icon');
@ -150,11 +133,11 @@ function unregister_tainacan_blocks() {
}
/**
* Registers the Taiancan category on the blocks inserter
* Registers the Tainacan category on the blocks inserter
* In case we are in WP > 5.8, we if we are in a post edition page first,
* as we don't want our blocks inside the Widgets area so far.
*/
function tainacan_blocks_register_categories($categories, $editor_context){
function tainacan_blocks_register_categories($categories, $editor_context) {
if ( class_exists('WP_Block_Editor_Context') && empty( $editor_context->post ) ) { // Introduced WP 5.8
return $categories;
@ -190,7 +173,12 @@ function tainacan_blocks_register_block($block_slug, $options = []) {
$register_params = [];
// Defines dependencies for editor script
$editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor');
$editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components');
if ( version_compare( $wp_version, '5.2', '<') )
$editor_script_deps[] = 'wp-editor';
else
$editor_script_deps[] = 'wp-block-editor';
if ( isset($options['extra_editor_script_deps']) )
array_merge($editor_script_deps, $options['extra_editor_script_deps']);
@ -242,19 +230,17 @@ function tainacan_blocks_register_tainacan_faceted_search() {
global $TAINACAN_VERSION;
global $wp_version;
// Theme side script
wp_register_script(
'tainacan-search',
$TAINACAN_BASE_URL . '/assets/js/theme_search.js',
['underscore'],
$TAINACAN_VERSION
);
// Editor side script
$editor_script_deps = array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components');
if ( version_compare( $wp_version, '5.2', '<') )
$editor_script_deps[] = 'wp-editor';
else
$editor_script_deps[] = 'wp-block-editor';
wp_register_script(
'faceted-search',
$TAINACAN_BASE_URL . '/assets/js/block_faceted_search.js',
array('wp-blocks', 'wp-i18n', 'wp-element', 'wp-components', 'wp-editor'),
$editor_script_deps,
$TAINACAN_VERSION
);
wp_set_script_translations('faceted-search', 'tainacan');
@ -275,8 +261,7 @@ function tainacan_blocks_register_tainacan_faceted_search() {
else
register_block_type( 'tainacan/faceted-search', array(
'editor_script' => 'faceted-search',
'style' => 'faceted-search',
'script' => 'tainacan-search'
'style' => 'faceted-search'
) );
}
}
@ -289,19 +274,17 @@ function tainacan_blocks_register_tainacan_item_submission_form() {
global $TAINACAN_VERSION;
global $wp_version;
// Theme side script
wp_register_script(
'tainacan-item-submission',
$TAINACAN_BASE_URL . '/assets/js/item_submission.js',
['underscore'],
$TAINACAN_VERSION
);
// Editor side script
$editor_script_deps = array('wp-blocks', 'wp-element', 'wp-components');
if ( version_compare( $wp_version, '5.2', '<') )
$editor_script_deps[] = 'wp-editor';
else
$editor_script_deps[] = 'wp-block-editor';
wp_register_script(
'item-submission-form',
$TAINACAN_BASE_URL . '/assets/js/block_item_submission_form.js',
array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor'),
$editor_script_deps,
$TAINACAN_VERSION
);
@ -334,8 +317,8 @@ function tainacan_blocks_register_tainacan_item_submission_form() {
else
register_block_type( 'tainacan/item-submission-form', array(
'editor_script' => 'item-submission-form',
'style' => 'item-submission-form',
'script' => 'tainacan-item-submission'
'style' => 'item-submission-form'//,
//'script' => 'tainacan-item-submission'
) );
}
}
@ -377,25 +360,29 @@ function tainacan_blocks_add_plugin_settings() {
// The faceded search block also uses this settings for checking gutenberg version
wp_localize_script( 'faceted-search', 'tainacan_blocks', $settings );
wp_localize_script( 'tainacan-blocks-common-theme-scripts', 'tainacan_blocks', $settings);
}
/**
* Makes the global 'tainacan_plugin' available to some spacial blocks that need it
*/
function tainacan_blocks_add_plugin_admin_settings() {
$settings = \Tainacan\Admin::get_instance()->get_admin_js_localization_params();
// The faceded search block uses a different settings object, the same used on the theme items list
wp_localize_script( 'tainacan-search', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params() );
wp_localize_script( 'faceted-search', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params() );
wp_localize_script( 'faceted-search', 'tainacan_plugin', $settings );
// The item submission search block uses a different settings object, the same used on the item submission component
wp_localize_script( 'tainacan-item-submission', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params() );
wp_localize_script( 'tainacan-item-submission', 'tainacan_plugin', $settings );
wp_localize_script( 'tainacan-blocks-common-theme-scripts', 'tainacan_plugin', $settings);
}
/**
* Enqueues the global styles necessary for the majority of the blocks
*/
function tainacan_blocks_get_common_styles() {
function tainacan_blocks_get_common_assets() {
global $TAINACAN_BASE_URL;
global $TAINACAN_VERSION;
@ -405,6 +392,12 @@ function tainacan_blocks_get_common_styles() {
array('wp-edit-blocks'),
$TAINACAN_VERSION
);
wp_enqueue_script(
'tainacan-blocks-common-theme-scripts',
$TAINACAN_BASE_URL . '/assets/js/tainacan_blocks_common_theme_scripts.js',
array('wp-i18n'),
$TAINACAN_VERSION
);
}
/**

View File

@ -1,4 +0,0 @@
import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';
export default Swiper;

View File

@ -102,7 +102,5 @@
}
},
"editorScript": "carousel-collections-list",
"script": "carousel-collections-list-theme",
"editorStyle": "carousel-collections-list",
"style": "carousel-collections-list"
"editorStyle": "carousel-collections-list"
}

View File

@ -1,88 +0,0 @@
import Vue from 'vue';
import CarouselCollectionsListTheme from './carousel-collections-list-theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
// This is rendered on the theme side.
document.addEventListener("DOMContentLoaded", () => {
// Gets all divs with content created by our block;
let blocks = document.getElementsByClassName('wp-block-tainacan-carousel-collections-list');
if (blocks) {
let blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
selectedItem: [],
maxItemsNumber: 12,
arrowsPosition: 'around',
autoPlay: false,
autoPlaySpeed: 3,
largeArrows: false,
maxCollectionsPerScreen: 6,
cropImagesToSquare: true,
loopSlides: false,
hideName: true,
showCollectionThumbnail: false,
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: ''
},
render(h){
return h(CarouselCollectionsListTheme, {
props: {
blockId: blockId,
selectedCollections: this.selectedCollections,
maxItemsNumber: this.maxItemsNumber,
arrowsPosition: this.arrowsPosition,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
largeArrows: this.largeArrows,
cropImagesToSquare: this.cropImagesToSquare,
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
hideName: this.hideName,
showCollectionThumbnail: this.showCollectionThumbnail,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className,
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.selectedCollections = this.$el.attributes['selected-collections'] != undefined ? JSON.parse(this.$el.attributes['selected-collections'].value) : undefined;
this.maxItemsNumber = this.$el.attributes['max-collections-number'] != undefined ? this.$el.attributes['max-collections-number'].value : undefined;
this.maxCollectionsPerScreen = this.$el.attributes['max-collections-per-screen'] != undefined ? this.$el.attributes['max-collections-per-screen'].value : 6;
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : false;
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(VueBlurHash);
Vue.use(ThumbnailHelperPlugin);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
});

View File

@ -1,6 +1,6 @@
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { __ } = wp.i18n;

View File

@ -15,6 +15,7 @@ export default function ({ attributes, className }) {
showCollectionThumbnail
} = attributes;
return <div
data-module="carousel-collections-list"
className={ className }
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) }
arrows-position={ arrowsPosition }

View File

@ -201,6 +201,7 @@
top: calc(50% - 42px);
bottom: initial;
background: none;
background-color: transparent !important;
border: none;
width: 42px;
height: 42px;

View File

@ -0,0 +1,102 @@
import Vue from 'vue';
import CarouselCollectionsListTheme from './theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
export default (element) => {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
function renderTainacanCollectionsCarouselBlocks() {
// Gets all divs with content created by our block;
let blocksElements = element ? [ element ] : document.getElementsByClassName('wp-block-tainacan-carousel-collections-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
selectedItem: [],
maxItemsNumber: 12,
arrowsPosition: 'around',
autoPlay: false,
autoPlaySpeed: 3,
largeArrows: false,
maxCollectionsPerScreen: 6,
cropImagesToSquare: true,
loopSlides: false,
hideName: true,
showCollectionThumbnail: false,
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: ''
},
render(h){
return h(CarouselCollectionsListTheme, {
props: {
blockId: blockId,
selectedCollections: this.selectedCollections,
maxItemsNumber: this.maxItemsNumber,
arrowsPosition: this.arrowsPosition,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
largeArrows: this.largeArrows,
cropImagesToSquare: this.cropImagesToSquare,
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
hideName: this.hideName,
showCollectionThumbnail: this.showCollectionThumbnail,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className,
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.selectedCollections = this.$el.attributes['selected-collections'] != undefined ? JSON.parse(this.$el.attributes['selected-collections'].value) : undefined;
this.maxItemsNumber = this.$el.attributes['max-collections-number'] != undefined ? this.$el.attributes['max-collections-number'].value : undefined;
this.maxCollectionsPerScreen = this.$el.attributes['max-collections-per-screen'] != undefined ? this.$el.attributes['max-collections-per-screen'].value : 6;
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : false;
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(VueBlurHash);
Vue.use(ThumbnailHelperPlugin);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
}
// This is rendered on the theme side.
renderTainacanCollectionsCarouselBlocks();
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadCarouselCollectionsListBlock", () => {
renderTainacanCollectionsCarouselBlocks();
});
}

View File

@ -1,5 +1,5 @@
<template>
<div :class="className">
<div :class="className + ' has-mounted'">
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '') "

View File

@ -122,7 +122,5 @@
}
},
"editorScript": "carousel-items-list",
"script": "carousel-items-list-theme",
"editorStyle": "carousel-items-list",
"style": "carousel-items-list"
"editorStyle": "carousel-items-list"
}

View File

@ -1,117 +0,0 @@
import Vue from 'vue';
import CarouselItemsListTheme from './carousel-items-list-theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
function renderTainacanItemCarouselBlocks() {
// Gets all divs with content created by our block;
let blocksElements = document.getElementsByClassName('wp-block-tainacan-carousel-items-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = blocks.map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
collectionId: '',
searchURL: '',
selectedItems: [],
loadStrategy: 'search',
maxItemsNumber: 12,
maxItemsPerScreen: 7,
arrowsPosition: 'around',
largeArrows: false,
autoPlay: false,
autoPlaySpeed: 3,
loopSlides: false,
hideTitle: true,
cropImagesToSquare: true,
showCollectionHeader: false,
showCollectionLabel: false,
collectionBackgroundColor: '#454647',
collectionTextColor: '#ffffff',
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: ''
},
render(h){
return h(CarouselItemsListTheme, {
props: {
blockId: blockId,
collectionId: this.collectionId,
searchURL: this.searchURL,
selectedItems: this.selectedItems,
loadStrategy: this.loadStrategy,
maxItemsNumber: this.maxItemsNumber,
maxItemsPerScreen: this.maxItemsPerScreen,
arrowsPosition: this.arrowsPosition,
largeArrows: this.largeArrows,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
hideTitle: this.hideTitle,
cropImagesToSquare: this.cropImagesToSquare,
showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor,
collectionTextColor: this.collectionTextColor,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(ThumbnailHelperPlugin);
Vue.use(VueBlurHash);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
}
// This is rendered on the theme side.
document.addEventListener("DOMContentLoaded", () => {
renderTainacanItemCarouselBlocks();
});
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadCarouselItemsListBlock", () => {
renderTainacanItemCarouselBlocks();
});

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import CarouselItemsModal from './carousel-items-modal.js';
import tainacan from '../../js/axios.js';

View File

@ -22,6 +22,7 @@ export default function ({ attributes, className }) {
} = attributes;
return <div
data-module="carousel-items-list"
className={ className }
search-url={ searchURL }
selected-items={ JSON.stringify(selectedItems) }

View File

@ -184,6 +184,7 @@
top: calc(50% - 42px);
bottom: initial;
background: none;
background-color: transparent !important;
border: none;
width: 42px;
height: 42px;

View File

@ -0,0 +1,120 @@
import Vue from 'vue';
import CarouselItemsListTheme from './theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
export default (element) => {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
function renderTainacanItemCarouselBlocks() {
// Gets all divs with content created by our block;
let blocksElements = element ? [ element ] : document.getElementsByClassName('wp-block-tainacan-carousel-items-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = blocks.map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
collectionId: '',
searchURL: '',
selectedItems: [],
loadStrategy: 'search',
maxItemsNumber: 12,
maxItemsPerScreen: 7,
arrowsPosition: 'around',
largeArrows: false,
autoPlay: false,
autoPlaySpeed: 3,
loopSlides: false,
hideTitle: true,
cropImagesToSquare: true,
showCollectionHeader: false,
showCollectionLabel: false,
collectionBackgroundColor: '#454647',
collectionTextColor: '#ffffff',
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: ''
},
render(h){
return h(CarouselItemsListTheme, {
props: {
blockId: blockId,
collectionId: this.collectionId,
searchURL: this.searchURL,
selectedItems: this.selectedItems,
loadStrategy: this.loadStrategy,
maxItemsNumber: this.maxItemsNumber,
maxItemsPerScreen: this.maxItemsPerScreen,
arrowsPosition: this.arrowsPosition,
largeArrows: this.largeArrows,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
hideTitle: this.hideTitle,
cropImagesToSquare: this.cropImagesToSquare,
showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor,
collectionTextColor: this.collectionTextColor,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
this.maxItemsPerScreen = this.$el.attributes['max-items-per-screen'] != undefined ? this.$el.attributes['max-items-per-screen'].value : 7;
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.hideTitle = this.$el.attributes['hide-title'] != undefined ? this.$el.attributes['hide-title'].value == 'true' : false;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(ThumbnailHelperPlugin);
Vue.use(VueBlurHash);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
}
// This is rendered on the theme side.
renderTainacanItemCarouselBlocks();
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadCarouselItemsListBlock", () => {
renderTainacanItemCarouselBlocks();
});
};

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { Spinner, Button, Placeholder } = wp.components;
const { InnerBlocks} = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InnerBlocks} = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import CarouselRelatedItemsModal from './carousel-related-items-modal.js';
import tainacan from '../../js/axios.js';

View File

@ -1,4 +1,4 @@
const { InnerBlocks} = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InnerBlocks} = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default function({ className }) {
return <div className={ className }><InnerBlocks.Content /></div>

View File

@ -106,7 +106,5 @@
}
},
"editorScript": "carousel-terms-list",
"script": "carousel-terms-list-theme",
"editorStyle": "carousel-terms-list",
"style": "carousel-terms-list"
"editorStyle": "carousel-terms-list"
}

View File

@ -1,88 +0,0 @@
import Vue from 'vue';
import CarouselTermsListTheme from './carousel-terms-list-theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
// This is rendered on the theme side.
document.addEventListener("DOMContentLoaded", () => {
// Gets all divs with content created by our block;
let blocks = document.getElementsByClassName('wp-block-tainacan-carousel-terms-list');
if (blocks) {
let blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
selectedItem: [],
maxItemsNumber: 12,
arrowsPosition: 'around',
autoPlay: false,
autoPlaySpeed: 3,
largeArrows: false,
maxTermsPerScreen: 6,
loopSlides: false,
hideName: true,
showTermThumbnail: false,
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: '',
taxonomyId: ''
},
render(h){
return h(CarouselTermsListTheme, {
props: {
blockId: blockId,
selectedTerms: this.selectedTerms,
maxItemsNumber: this.maxItemsNumber,
arrowsPosition: this.arrowsPosition,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
largeArrows: this.largeArrows,
maxTermsPerScreen: this.maxTermsPerScreen,
hideName: this.hideName,
showTermThumbnail: this.showTermThumbnail,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className,
taxonomyId: this.taxonomyId
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.selectedTerms = this.$el.attributes['selected-terms'] != undefined ? JSON.parse(this.$el.attributes['selected-terms'].value) : undefined;
this.maxItemsNumber = this.$el.attributes['max-terms-number'] != undefined ? this.$el.attributes['max-terms-number'].value : undefined;
this.maxTermsPerScreen = this.$el.attributes['max-terms-per-screen'] != undefined ? this.$el.attributes['max-terms-per-screen'].value : undefined;
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
this.taxonomyId = this.$el.attributes['taxonomy-id'] != undefined ? this.$el.attributes['taxonomy-id'].value : undefined;
this.showTermThumbnail = this.$el.attributes['show-term-thumbnail'] != undefined ? this.$el.attributes['show-term-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(VueBlurHash);
Vue.use(ThumbnailHelperPlugin);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
});

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TermsModal from '../terms-list/terms-modal.js';
import tainacan from '../../js/axios.js';

View File

@ -15,6 +15,7 @@ export default function({ attributes, className }) {
taxonomyId
} = attributes;
return <div
data-module="carousel-terms-list"
className={ className }
selected-terms={ JSON.stringify(selectedTerms.map((term) => { return term.id; })) }
arrows-position={ arrowsPosition }

View File

@ -201,6 +201,7 @@
top: calc(50% - 42px);
bottom: initial;
background: none;
background-color: transparent !important;
border: none;
width: 42px;
height: 42px;

View File

@ -0,0 +1,102 @@
import Vue from 'vue';
import CarouselTermsListTheme from './theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
export default (element) => {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
function renderTainacanTermsCarouselBlocks() {
// Gets all divs with content created by our block;
let blocksElements = element ? [ element ] : document.getElementsByClassName('wp-block-tainacan-carousel-terms-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
selectedItem: [],
maxItemsNumber: 12,
arrowsPosition: 'around',
autoPlay: false,
autoPlaySpeed: 3,
largeArrows: false,
maxTermsPerScreen: 6,
loopSlides: false,
hideName: true,
showTermThumbnail: false,
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: '',
taxonomyId: ''
},
render(h){
return h(CarouselTermsListTheme, {
props: {
blockId: blockId,
selectedTerms: this.selectedTerms,
maxItemsNumber: this.maxItemsNumber,
arrowsPosition: this.arrowsPosition,
autoPlay: this.autoPlay,
autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides,
largeArrows: this.largeArrows,
maxTermsPerScreen: this.maxTermsPerScreen,
hideName: this.hideName,
showTermThumbnail: this.showTermThumbnail,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className,
taxonomyId: this.taxonomyId
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.selectedTerms = this.$el.attributes['selected-terms'] != undefined ? JSON.parse(this.$el.attributes['selected-terms'].value) : undefined;
this.maxItemsNumber = this.$el.attributes['max-terms-number'] != undefined ? this.$el.attributes['max-terms-number'].value : undefined;
this.maxTermsPerScreen = this.$el.attributes['max-terms-per-screen'] != undefined ? this.$el.attributes['max-terms-per-screen'].value : undefined;
this.arrowsPosition = this.$el.attributes['arrows-position'] != undefined ? this.$el.attributes['arrows-position'].value : undefined;
this.autoPlay = this.$el.attributes['auto-play'] != undefined ? this.$el.attributes['auto-play'].value == 'true' : false;
this.autoPlaySpeed = this.$el.attributes['auto-play-speed'] != undefined ? this.$el.attributes['auto-play-speed'].value : 3;
this.largeArrows = this.$el.attributes['large-arrows'] != undefined ? this.$el.attributes['large-arrows'].value == 'true' : false;
this.loopSlides = this.$el.attributes['loop-slides'] != undefined ? this.$el.attributes['loop-slides'].value == 'true' : false;
this.hideName = this.$el.attributes['hide-name'] != undefined ? this.$el.attributes['hide-name'].value == 'true' : false;
this.taxonomyId = this.$el.attributes['taxonomy-id'] != undefined ? this.$el.attributes['taxonomy-id'].value : undefined;
this.showTermThumbnail = this.$el.attributes['show-term-thumbnail'] != undefined ? this.$el.attributes['show-term-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(VueBlurHash);
Vue.use(ThumbnailHelperPlugin);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
}
// This is rendered on the theme side.
renderTainacanTermsCarouselBlocks();
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadCarouselTermsListBlock", () => {
renderTainacanTermsCarouselBlocks();
});
}

View File

@ -1,5 +1,5 @@
<template>
<div :class="className">
<div :class="className + ' has-mounted'">
<div v-if="!isLoading">
<div
:class="'tainacan-carousel ' + (arrowsPosition ? ' has-arrows-' + arrowsPosition : '') + (largeArrows ? ' has-large-arrows' : '')"

View File

@ -89,6 +89,5 @@
}
},
"editorScript": "collections-list",
"editorStyle": "collections-list",
"style": "collections-list"
"editorStyle": "collections-list"
}

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import CollectionsModal from './collections-modal.js';

View File

@ -1,4 +1,4 @@
export default function({ attributes, className }) {
const { content } = attributes;
return <div className={ className }>{ content }</div>
return <div data-module="collections-list" className={ className }>{ content }</div>
};

View File

@ -0,0 +1,3 @@
import './style.scss';
export default () => {}

View File

@ -144,7 +144,5 @@
}
},
"editorScript": "dynamic-items-list",
"script": "dynamic-items-list-theme",
"editorStyle": "dynamic-items-list",
"style": "dynamic-items-list"
"editorStyle": "dynamic-items-list"
}

View File

@ -1,117 +0,0 @@
import Vue from 'vue';
import DynamicItemsListTheme from './dynamic-items-list-theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
// This is rendered on the theme side.
document.addEventListener("DOMContentLoaded", () => {
// Gets all divs with content created by our block;
let blocks = document.getElementsByClassName('wp-block-tainacan-dynamic-items-list');
if (blocks) {
let blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
collectionId: '',
showImage: true,
showName: true,
layout: 'grid',
gridMargin: 0,
searchURL: '',
maxItemsNumber: 12,
mosaicHeight: 40,
mosaicDensity: 5,
mosaicGridRows: 3,
mosaicGridColumns: 3,
mosaicItemFocalPointX : 0.5,
mosaicItemFocalPointY : 0.5,
maxColumnsCount: 4,
cropImagesToSquare: true,
order: 'asc',
showSearchBar: false,
showCollectionHeader: false,
showCollectionLabel: false,
collectionBackgroundColor: '#454647',
collectionTextColor: '#ffffff',
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: ''
},
render(h){
return h(DynamicItemsListTheme, {
props: {
collectionId: this.collectionId,
showImage: this.showImage,
showName: this.showName,
layout: this.layout,
gridMargin: this.gridMargin,
mosaicDensity: this.mosaicDensity,
mosaicHeight: this.mosaicHeight,
mosaicGridRows: this.mosaicGridRows,
mosaicGridColumns: this.mosaicGridColumns,
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
maxColumnsCount: this.maxColumnsCount,
cropImagesToSquare: this.cropImagesToSquare,
searchURL: this.searchURL,
maxItemsNumber: this.maxItemsNumber,
order: this.order,
showSearchBar: this.showSearchBar,
showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor,
collectionTextColor: this.collectionTextColor,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
this.mosaicDensity = this.$el.attributes['mosaic-density'] != undefined ? Number(this.$el.attributes['mosaic-density'].value) : undefined;
this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(ThumbnailHelperPlugin);
Vue.use(VueBlurHash);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
});

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import DynamicItemsModal from './dynamic-items-modal.js';
import tainacan from '../../js/axios.js';

View File

@ -25,6 +25,7 @@ export default function({ attributes, className }) {
} = attributes;
return <div
data-module="dynamic-items-list"
search-url={ searchURL }
className={ className }
collection-id={ collectionId }

View File

@ -381,6 +381,7 @@
display: flex;
flex-wrap: wrap;
width: 100%;
min-width: 100%;
flex-basis: 100%;
justify-content: center;
align-items: center;

View File

@ -0,0 +1,132 @@
import Vue from 'vue';
import DynamicItemsListTheme from './theme.vue';
import { ThumbnailHelperPlugin } from '../../../admin/js/utilities.js';
import VueBlurHash from 'vue-blurhash';
export default (element) => {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
function renderTainacanDynamicItemsBlocks() {
// Gets all divs with content created by our block;
let blocksElements = element ? [ element ] : document.getElementsByClassName('wp-block-tainacan-dynamic-items-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
collectionId: '',
showImage: true,
showName: true,
layout: 'grid',
gridMargin: 0,
searchURL: '',
maxItemsNumber: 12,
mosaicHeight: 40,
mosaicDensity: 5,
mosaicGridRows: 3,
mosaicGridColumns: 3,
mosaicItemFocalPointX : 0.5,
mosaicItemFocalPointY : 0.5,
maxColumnsCount: 4,
cropImagesToSquare: true,
order: 'asc',
showSearchBar: false,
showCollectionHeader: false,
showCollectionLabel: false,
collectionBackgroundColor: '#454647',
collectionTextColor: '#ffffff',
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: ''
},
render(h){
return h(DynamicItemsListTheme, {
props: {
collectionId: this.collectionId,
showImage: this.showImage,
showName: this.showName,
layout: this.layout,
gridMargin: this.gridMargin,
mosaicDensity: this.mosaicDensity,
mosaicHeight: this.mosaicHeight,
mosaicGridRows: this.mosaicGridRows,
mosaicGridColumns: this.mosaicGridColumns,
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
maxColumnsCount: this.maxColumnsCount,
cropImagesToSquare: this.cropImagesToSquare,
searchURL: this.searchURL,
maxItemsNumber: this.maxItemsNumber,
order: this.order,
showSearchBar: this.showSearchBar,
showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor,
collectionTextColor: this.collectionTextColor,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
this.mosaicDensity = this.$el.attributes['mosaic-density'] != undefined ? Number(this.$el.attributes['mosaic-density'].value) : undefined;
this.mosaicHeight = this.$el.attributes['mosaic-height'] != undefined ? Number(this.$el.attributes['mosaic-height'].value) : undefined;
this.mosaicGridRows = this.$el.attributes['mosaic-grid-rows'] != undefined ? Number(this.$el.attributes['mosaic-grid-rows'].value) : undefined;
this.mosaicGridColumns = this.$el.attributes['mosaic-grid-columns'] != undefined ? Number(this.$el.attributes['mosaic-grid-columns'].value) : undefined;
this.mosaicItemFocalPointX = this.$el.attributes['mosaic-item-focal-point-x'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-x'].value) : undefined;
this.mosaicItemFocalPointY = this.$el.attributes['mosaic-item-focal-point-y'] != undefined ? Number(this.$el.attributes['mosaic-item-focal-point-y'].value) : undefined;
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 4;
this.cropImagesToSquare = this.$el.attributes['crop-images-to-square'] != undefined ? this.$el.attributes['crop-images-to-square'].value == 'true' : true;
this.maxItemsNumber = this.$el.attributes['max-items-number'] != undefined ? this.$el.attributes['max-items-number'].value : undefined;
this.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
this.showCollectionHeader = this.$el.attributes['show-collection-header'] != undefined ? this.$el.attributes['show-collection-header'].value == 'true' : false;
this.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
Vue.use(ThumbnailHelperPlugin);
Vue.use(VueBlurHash);
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
}
// This is rendered on the theme side.
renderTainacanDynamicItemsBlocks()
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadDynamicItemsBlock", () => {
renderTainacanDynamicItemsBlocks();
});
}

View File

@ -1,5 +1,5 @@
<template>
<div :class="className">
<div :class="className + ' has-mounted'">
<div v-if="showCollectionHeader">
<div
v-if="isLoadingCollection"

View File

@ -190,7 +190,6 @@
"multiple": false
},
"editorScript": "faceted-search",
"script": "tainacan-search",
"editorStyle": "faceted-search",
"style": "faceted-search"
}

View File

@ -20,7 +20,7 @@ const {
MenuItemsChoice
} = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import CollectionModal from './collection-modal.js';
import TermModal from './term-modal.js';

View File

@ -69,8 +69,10 @@ export default function({ attributes, className }) {
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
className={ className }>
className={ className }
data-module="faceted-search">
<main
id="tainacan-items-page"
term-id={ updatedListType == 'term' ? termId : null }
taxonomy={ updatedListType == 'term' ? 'tnc_tax_' + taxonomyId : null }
collection-id={ updatedListType == 'collection' ? collectionId : null }
@ -95,8 +97,7 @@ export default function({ attributes, className }) {
start-with-filters-hidden = { startWithFiltersHidden.toString() }
filters-as-modal = { filtersAsModal.toString() }
show-inline-view-mode-options = { showInlineViewModeOptions.toString() }
show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() }
id="tainacan-items-page">
show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() } >
</main>
</div>
};

View File

@ -0,0 +1,264 @@
// Main imports
import Vue from 'vue';
import Buefy from 'buefy';
import VTooltip from 'v-tooltip';
import VueMasonry from 'vue-masonry-css';
import cssVars from 'css-vars-ponyfill';
import qs from 'qs';
import VueBlurHash from 'vue-blurhash';
// Filters
import FilterNumeric from '../../../admin/components/filter-types/numeric/Numeric.vue';
import FilterDate from '../../../admin/components/filter-types/date/Date.vue';
import FilterSelectbox from '../../../admin/components/filter-types/selectbox/Selectbox.vue';
import FilterAutocomplete from '../../../admin/components/filter-types/autocomplete/Autocomplete.vue';
import FilterCheckbox from '../../../admin/components/filter-types/checkbox/Checkbox.vue';
import FilterTaginput from '../../../admin/components/filter-types/taginput/Taginput.vue';
import FilterTaxonomyCheckbox from '../../../admin/components/filter-types/taxonomy/Checkbox.vue';
import FilterTaxonomyTaginput from '../../../admin/components/filter-types/taxonomy/Taginput.vue';
import FilterDateInterval from '../../../admin/components/filter-types/date-interval/DateInterval.vue';
import FilterNumericInterval from '../../../admin/components/filter-types/numeric-interval/NumericInterval.vue';
import FilterNumericListInterval from '../../../admin/components/filter-types/numeric-list-interval/NumericListInterval.vue';
import TaincanFiltersList from '../../../admin/components/filter-types/tainacan-filter-item.vue';
import ThemeItemsPage from '../../../theme-search/pages/theme-items-page.vue';
import ThemeSearch from '../../../theme-search/theme-search.vue';
// View Modes
import ViewModeTable from '../../../theme-search/components/view-mode-table.vue';
import ViewModeCards from '../../../theme-search/components/view-mode-cards.vue';
import ViewModeRecords from '../../../theme-search/components/view-mode-records.vue';
import ViewModeMasonry from '../../../theme-search/components/view-mode-masonry.vue';
import ViewModeSlideshow from '../../../theme-search/components/view-mode-slideshow.vue';
import ViewModeList from '../../../theme-search/components/view-mode-list.vue';
// Remaining imports
import store from '../../../admin/js/store/store';
import routerTheme from '../../../theme-search/js/theme-router.js';
import eventBusSearch from '../../../admin/js/event-bus-search';
import {
I18NPlugin,
UserPrefsPlugin,
ConsolePlugin
} from '../../../admin/js/admin-utilities';
import {
ThumbnailHelperPlugin
} from '../../../admin/js/utilities';
export default (element) => {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
function renderTainacanItemsListComponent() {
// Mount only if the div exists
if (element || document.getElementById('tainacan-items-page')) {
// 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.component(extraVuePluginName, extraVuePluginObject);
}
}
// Configure and Register Plugins
Vue.use(Buefy, {
defaultTooltipAnimated: true
});
Vue.use(VTooltip);
Vue.use(VueMasonry);
Vue.use(VueBlurHash);
Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(ThumbnailHelperPlugin);
Vue.use(ConsolePlugin, {visual: false});
/* 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);
}
}
Vue.component('tainacan-filter-item', TaincanFiltersList);
/* Filters */
Vue.component('tainacan-filter-numeric', FilterNumeric);
Vue.component('tainacan-filter-date', FilterDate);
Vue.component('tainacan-filter-selectbox', FilterSelectbox);
Vue.component('tainacan-filter-autocomplete', FilterAutocomplete);
Vue.component('tainacan-filter-checkbox', FilterCheckbox);
Vue.component('tainacan-filter-taginput', FilterTaginput);
Vue.component('tainacan-filter-taxonomy-checkbox', FilterTaxonomyCheckbox);
Vue.component('tainacan-filter-taxonomy-taginput', FilterTaxonomyTaginput);
Vue.component('tainacan-filter-date-interval', FilterDateInterval);
Vue.component('tainacan-filter-numeric-interval', FilterNumericInterval);
Vue.component('tainacan-filter-numeric-list-interval', FilterNumericListInterval);
/* Main page component */
Vue.component('theme-items-page', ThemeItemsPage);
Vue.component('theme-search', ThemeSearch);
// Oficial view modes
Vue.component('view-mode-table', ViewModeTable);
Vue.component('view-mode-cards', ViewModeCards);
Vue.component('view-mode-records', ViewModeRecords);
Vue.component('view-mode-masonry', ViewModeMasonry);
Vue.component('view-mode-slideshow', ViewModeSlideshow);
Vue.component('view-mode-list', ViewModeList);
Vue.use(eventBusSearch, { store: store, router: routerTheme});
const VueItemsList = new Vue({
store,
router: routerTheme,
data: {
termId: '',
taxonomy: '',
collectionId: '',
defaultViewMode: '',
isForcedViewMode: false,
enabledViewModes: {},
defaultItemsPerPage: '',
hideFilters: false,
hideHideFiltersButton: false,
hideSearch: false,
hideAdvancedSearch: false,
hideDisplayedMetadataButton: false,
hideSortByButton: false,
hideSortingArea: false,
hideItemsThumbnail: false,
hideItemsPerPageButton: false,
hideGoToPageButton: false,
hidePaginationArea: false,
showFiltersButtonInsideSearchControl: false,
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false
},
beforeMount () {
// Loads params if passed previously
if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]);
for (let key of Object.keys(existingQueries))
this.$route.query[key] = existingQueries[key];
}
// Collection or Term source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
if (this.$el.attributes['term-id'] != undefined)
this.termId = this.$el.attributes['term-id'].value;
if (this.$el.attributes['taxonomy'] != undefined)
this.taxonomy = this.$el.attributes['taxonomy'].value;
// View Mode settings
if (this.$el.attributes['default-view-mode'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
else
this.defaultViewMode = 'cards';
if (this.$el.attributes['is-forced-view-mode'] != undefined)
this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value);
if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
// Options related to hidding elements
if (this.$el.attributes['hide-filters'] != undefined)
this.hideFilters = this.isParameterTrue('hide-filters');
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
this.hideHideFiltersButton = this.isParameterTrue('hide-hide-filters-button');
if (this.$el.attributes['hide-search'] != undefined)
this.hideSearch = this.isParameterTrue('hide-search');
if (this.$el.attributes['hide-advanced-search'] != undefined)
this.hideAdvancedSearch = this.isParameterTrue('hide-advanced-search');
if (this.$el.attributes['hide-displayed-metadata-button'] != undefined)
this.hideDisplayedMetadataButton = this.isParameterTrue('hide-displayed-metadata-button');
if (this.$el.attributes['hide-sorting-area'] != undefined)
this.hideSortingArea = this.isParameterTrue('hide-sorting-area');
if (this.$el.attributes['hide-items-thumbnail'] != undefined)
this.hideItemsThumbnail = this.isParameterTrue('hide-items-thumbnail');
if (this.$el.attributes['hide-sort-by-button'] != undefined)
this.hideSortByButton = this.isParameterTrue('hide-sort-by-button');
if (this.$el.attributes['hide-exposers-button'] != undefined)
this.hideExposersButton = this.isParameterTrue('hide-exposers-button');
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
this.hideItemsPerPageButton = this.isParameterTrue('hide-items-per-page-button');
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
this.hideGoToPageButton = this.isParameterTrue('hide-go-to-page-button');
if (this.$el.attributes['hide-pagination-area'] != undefined)
this.hidePaginationArea = this.isParameterTrue('hide-pagination-area');
// Other Tweaks
if (this.$el.attributes['default-items-per-page'] != undefined)
this.defaultItemsPerPage = this.$el.attributes['default-items-per-page'].value;
if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined)
this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control');
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
this.startWithFiltersHidden = this.isParameterTrue('start-with-filters-hidden');
if (this.$el.attributes['filters-as-modal'] != undefined)
this.filtersAsModal = this.isParameterTrue('filters-as-modal');
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
this.showInlineViewModeOptions = this.isParameterTrue('show-inline-view-mode-options');
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
this.showFullscreenWithViewModes = this.isParameterTrue('show-fullscreen-with-view-modes');
},
methods: {
isParameterTrue(parameter) {
const value = this.$el.attributes[parameter].value;
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
},
createSwiperInstance(target, options) {
return new Swiper(target, options);
}
},
render: h => h(ThemeSearch)
});
VueItemsList.$mount('#tainacan-items-page');
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...
});
}
}
// This is rendered on the theme side.
renderTainacanItemsListComponent();
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadItemsListComponent", () => {
renderTainacanItemsListComponent();
});
}

View File

@ -141,7 +141,5 @@
}
},
"editorScript": "facets-list",
"script": "facets-list-theme",
"editorStyle": "facets-list",
"style": "facets-list"
"editorStyle": "facets-list"
}

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { BaseControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import MetadataModal from './metadata-modal.js';
import ParentTermModal from './parent-term-modal.js';

View File

@ -1,106 +0,0 @@
import Vue from 'vue';
import FacetsListTheme from './facets-list-theme.vue';
import FacetsListThemeUnit from './facets-list-theme-unit.vue';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
Vue.component('facets-list-theme-unit', FacetsListThemeUnit);
// This is rendered on the theme side.
document.addEventListener("DOMContentLoaded", () => {
// Gets all divs with content created by our block;
let blocks = document.getElementsByClassName('wp-block-tainacan-facets-list');
if (blocks) {
let blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
metadatumId: '',
metadatumType: '',
collectionId: '',
collectionSlug: '',
parentTermId: null,
showImage: true,
showItemsCount: true,
showSearchBar: false,
showLoadMore: false,
nameInsideImage: false,
linkTermFacetsToTermPage: true,
appendChildTerms: false,
layout: 'grid',
cloudRate: 1,
gridMargin: 24,
maxFacetsNumber: 12,
maxColumnsCount: 5,
tainacanApiRoot: '',
tainacanBaseUrl: '',
tainacanSiteUrl: '',
className: ''
},
render(h){
return h(FacetsListTheme, {
props: {
metadatumId: this.metadatumId,
metadatumType: this.metadatumType,
collectionId: this.collectionId,
collectionSlug: this.collectionSlug,
parentTermId: this.parentTermId,
showImage: this.showImage,
nameInsideImage: this.nameInsideImage,
showItemsCount: this.showItemsCount,
showSearchBar: this.showSearchBar,
showLoadMore: this.showLoadMore,
layout: this.layout,
cloudRate: this.cloudRate,
gridMargin: this.gridMargin,
linkTermFacetsToTermPage: this.linkTermFacetsToTermPage,
appendChildTerms: this.appendChildTerms,
maxFacetsNumber: this.maxFacetsNumber,
maxColumnsCount: this.maxColumnsCount,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
tainacanSiteUrl: this.tainacanSiteUrl,
className: this.className
}
});
},
beforeMount () {
this.metadatumId = this.$el.attributes['metadatum-id'] != undefined ? this.$el.attributes['metadatum-id'].value : undefined;
this.metadatumType = this.$el.attributes['metadatum-type'] != undefined ? this.$el.attributes['metadatum-type'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.collectionSlug = this.$el.attributes['collection-slug'] != undefined ? this.$el.attributes['collection-slug'].value : undefined;
this.appendChildTerms = this.$el.attributes['append-child-terms'] != undefined ? this.$el.attributes['append-child-terms'].value == 'true' : false;
this.parentTermId = this.$el.attributes['parent-term-id'] != undefined ? this.$el.attributes['parent-term-id'].value : undefined;
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
this.nameInsideImage = this.$el.attributes['name-inside-image'] != undefined ? this.$el.attributes['name-inside-image'].value == 'true' : false;
this.showItemsCount = this.$el.attributes['show-items-count'] != undefined ? this.$el.attributes['show-items-count'].value == 'true' : true;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
this.showLoadMore = this.$el.attributes['show-load-more'] != undefined ? this.$el.attributes['show-load-more'].value == 'true' : false;
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
this.cloudRate = this.$el.attributes['cloud-rate'] != undefined ? Number(this.$el.attributes['cloud-rate'].value) : undefined;
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
this.linkTermFacetsToTermPage = this.$el.attributes['link-term-facets-to-term-page'] != undefined ? this.$el.attributes['link-term-facets-to-term-page'].value == 'true' : true;
this.maxFacetsNumber = this.$el.attributes['max-facets-number'] != undefined ? this.$el.attributes['max-facets-number'].value : undefined;
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 5;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
this.tainacanSiteUrl = this.$el.attributes['tainacan-site-url'] != undefined ? this.$el.attributes['tainacan-site-url'].value : undefined;
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
});

View File

@ -21,6 +21,7 @@ export default function({ attributes, className }) {
appendChildTerms
} = attributes;
return <div
data-module="facets-list"
className={ className }
metadatum-id={ metadatumId }
metadatum-type={ metadatumType }

View File

@ -0,0 +1,121 @@
import Vue from 'vue';
import FacetsListTheme from './theme.vue';
import FacetsListThemeUnit from './facet-unit.vue';
export default (element) => {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
Vue.component('facets-list-theme-unit', FacetsListThemeUnit);
function renderTainacanFacetsListBlock() {
// Gets all divs with content created by our block;
let blocksElements = element ? [ element ] : document.getElementsByClassName('wp-block-tainacan-facets-list');
if (blocksElements) {
let blocks = Object.values(blocksElements);
// Checks if this carousel isn't already mounted
blocks = blocks.filter((block) => block.classList && !block.classList.contains('has-mounted'));
const blockIds = Object.values(blocks).map((block) => block.id);
// Creates a new Vue Instance to manage each block isolatelly
for (let blockId of blockIds) {
// Configure Vue logic before passing it to constructor:
let vueOptions = {
data: {
metadatumId: '',
metadatumType: '',
collectionId: '',
collectionSlug: '',
parentTermId: null,
showImage: true,
showItemsCount: true,
showSearchBar: false,
showLoadMore: false,
nameInsideImage: false,
linkTermFacetsToTermPage: true,
appendChildTerms: false,
layout: 'grid',
cloudRate: 1,
gridMargin: 24,
maxFacetsNumber: 12,
maxColumnsCount: 5,
tainacanApiRoot: '',
tainacanBaseUrl: '',
tainacanSiteUrl: '',
className: ''
},
render(h){
return h(FacetsListTheme, {
props: {
metadatumId: this.metadatumId,
metadatumType: this.metadatumType,
collectionId: this.collectionId,
collectionSlug: this.collectionSlug,
parentTermId: this.parentTermId,
showImage: this.showImage,
nameInsideImage: this.nameInsideImage,
showItemsCount: this.showItemsCount,
showSearchBar: this.showSearchBar,
showLoadMore: this.showLoadMore,
layout: this.layout,
cloudRate: this.cloudRate,
gridMargin: this.gridMargin,
linkTermFacetsToTermPage: this.linkTermFacetsToTermPage,
appendChildTerms: this.appendChildTerms,
maxFacetsNumber: this.maxFacetsNumber,
maxColumnsCount: this.maxColumnsCount,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
tainacanSiteUrl: this.tainacanSiteUrl,
className: this.className
}
});
},
beforeMount () {
this.metadatumId = this.$el.attributes['metadatum-id'] != undefined ? this.$el.attributes['metadatum-id'].value : undefined;
this.metadatumType = this.$el.attributes['metadatum-type'] != undefined ? this.$el.attributes['metadatum-type'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.collectionSlug = this.$el.attributes['collection-slug'] != undefined ? this.$el.attributes['collection-slug'].value : undefined;
this.appendChildTerms = this.$el.attributes['append-child-terms'] != undefined ? this.$el.attributes['append-child-terms'].value == 'true' : false;
this.parentTermId = this.$el.attributes['parent-term-id'] != undefined ? this.$el.attributes['parent-term-id'].value : undefined;
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
this.nameInsideImage = this.$el.attributes['name-inside-image'] != undefined ? this.$el.attributes['name-inside-image'].value == 'true' : false;
this.showItemsCount = this.$el.attributes['show-items-count'] != undefined ? this.$el.attributes['show-items-count'].value == 'true' : true;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;
this.showLoadMore = this.$el.attributes['show-load-more'] != undefined ? this.$el.attributes['show-load-more'].value == 'true' : false;
this.layout = this.$el.attributes['layout'] != undefined ? this.$el.attributes['layout'].value : undefined;
this.cloudRate = this.$el.attributes['cloud-rate'] != undefined ? Number(this.$el.attributes['cloud-rate'].value) : undefined;
this.gridMargin = this.$el.attributes['grid-margin'] != undefined ? Number(this.$el.attributes['grid-margin'].value) : undefined;
this.linkTermFacetsToTermPage = this.$el.attributes['link-term-facets-to-term-page'] != undefined ? this.$el.attributes['link-term-facets-to-term-page'].value == 'true' : true;
this.maxFacetsNumber = this.$el.attributes['max-facets-number'] != undefined ? this.$el.attributes['max-facets-number'].value : undefined;
this.maxColumnsCount = this.$el.attributes['max-columns-count'] != undefined ? this.$el.attributes['max-columns-count'].value : 5;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
this.tainacanSiteUrl = this.$el.attributes['tainacan-site-url'] != undefined ? this.$el.attributes['tainacan-site-url'].value : undefined;
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
},
methods: {
__(text, domain) {
return wp.i18n.__(text, domain);
}
}
};
new Vue( Object.assign({ el: '#' + blockId }, vueOptions) );
}
}
}
// This is rendered on the theme side.
renderTainacanFacetsListBlock();
// Also if a theme or plugin requested a reset...
document.addEventListener("DOMContentLoaded", () => {
renderTainacanFacetsListBlock();
});
}

View File

@ -1,5 +1,5 @@
<template>
<div :class="className">
<div :class="className + ' has-mounted'">
<div
v-if="showSearchBar"
class="facets-search-bar">

View File

@ -146,7 +146,5 @@
"multiple": false
},
"editorScript": "item-submission-form",
"script": "tainacan-item-submission",
"editorStyle": "item-submission-form",
"style": "item-submission-form"
"editorStyle": "item-submission-form"
}

View File

@ -15,7 +15,7 @@ const {
PanelBody
} = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import tainacan from '../../js/axios.js';
import CollectionModal from '../faceted-search/collection-modal.js';

View File

@ -44,7 +44,8 @@ export default function({ attributes, className }) {
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
className={ className }>
className={ className }
data-module="item-submission-form">
<div
id="tainacan-item-submission-form"
collection-id={ collectionId }

View File

@ -0,0 +1,211 @@
// 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';
// 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 '../../../item-submission/pages/item-submission-form.vue';
import ItemSubmission from '../../../item-submission/item-submission.vue';
// Remaining imports
import TainacanFormItem from '../../../admin/components/metadata-types/tainacan-form-item.vue';
import HelpButton from '../../../admin/components/other/help-button.vue';
import store from '../../../admin/js/store/store';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, StatusHelperPlugin, CommentsStatusHelperPlugin } from '../../../admin/js/admin-utilities';
export default (element) => {
function renderItemSubmissionForm() {
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
// Mount only if the div exists
if (element || 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(RouterHelperPlugin);
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('tainacan-form-item', TainacanFormItem);
Vue.component('help-button', HelpButton);
const VueItemSubmission = new Vue({
store,
data: {
collectionId: '',
hideFileModalButton: false,
hideTextModalButton: false,
hideLinkModalButton: false,
hideThumbnailSection: false,
hideAttachmentsSection: false,
showAllowCommentsSection: false,
hideHelpButtons: false,
hideMetadataTypes: false,
hideCollapses: false,
enabledMetadata: [],
sentFormHeading: '',
sentFormMessage: '',
documentSectionLabel: '',
thumbnailSectionLabel: '',
attachmentsSectionLabel: '',
metadataSectionLabel: '',
showItemLinkButton: false,
itemLinkButtonLabel: '',
helpInfoBellowLabel: false
},
beforeMount () {
// Collection source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
// Elements shown on form
if (this.$el.attributes['hide-file-modal-button'] != undefined)
this.hideFileModalButton = this.isParameterTrue('hide-file-modal-button');
if (this.$el.attributes['hide-text-modal-button'] != undefined)
this.hideTextModalButton = this.isParameterTrue('hide-text-modal-button');
if (this.$el.attributes['hide-link-modal-button'] != undefined)
this.hideLinkModalButton = this.isParameterTrue('hide-link-modal-button');
if (this.$el.attributes['hide-thumbnail-section'] != undefined)
this.hideThumbnailSection = this.isParameterTrue('hide-thumbnail-section');
if (this.$el.attributes['hide-attachments-section'] != undefined)
this.hideAttachmentsSection = this.isParameterTrue('hide-attachments-section');
if (this.$el.attributes['show-allow-comments-section'] != undefined)
this.showAllowCommentsSection = this.isParameterTrue('show-allow-comments-section');
if (this.$el.attributes['hide-collapses'] != undefined)
this.hideCollapses = this.isParameterTrue('hide-collapses');
if (this.$el.attributes['hide-help-buttons'] != undefined)
this.hideHelpButtons = this.isParameterTrue('hide-help-buttons');
if (this.$el.attributes['hide-metadata-types'] != undefined)
this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types');
if (this.$el.attributes['help-info-bellow-label'] != undefined)
this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label');
// Form sections labels
if (this.$el.attributes['document-section-label'] != undefined)
this.documentSectionLabel = this.$el.attributes['document-section-label'].value;
if (this.$el.attributes['thumbnail-section-label'] != undefined)
this.thumbnailSectionLabel = this.$el.attributes['thumbnail-section-label'].value;
if (this.$el.attributes['attachments-section-label'] != undefined)
this.attachmentsSectionLabel = this.$el.attributes['attachments-section-label'].value;
if (this.$el.attributes['metadata-section-label'] != undefined)
this.metadataSectionLabel = this.$el.attributes['metadata-section-label'].value;
// Form submission feedback messages
if (this.$el.attributes['sent-form-heading'] != undefined)
this.sentFormHeading = this.$el.attributes['sent-form-heading'].value;
if (this.$el.attributes['sent-form-message'] != undefined)
this.sentFormMessage = this.$el.attributes['sent-form-message'].value;
if (this.$el.attributes['item-link-button-label'] != undefined)
this.itemLinkButtonLabel = this.$el.attributes['item-link-button-label'].value;
if (this.$el.attributes['show-item-link-button'] != undefined)
this.showItemLinkButton = this.isParameterTrue('show-item-link-button');
// List of metadata
if (this.$el.attributes['enabled-metadata'] != undefined && this.$el.attributes['enabled-metadata'].value)
this.enabledMetadata = this.$el.attributes['enabled-metadata'].value.split(',');
},
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...
});
}
}
// This is rendered on the theme side.
renderItemSubmissionForm();
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadItemSubmissionForm", () => {
renderItemSubmissionForm();
});
};

View File

@ -93,6 +93,5 @@
}
},
"editorScript": "items-list",
"editorStyle": "items-list",
"style": "items-list"
"editorStyle": "items-list"
}

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { RangeControl, IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import ItemsModal from './items-modal.js';

View File

@ -1,4 +1,4 @@
export default function({ attributes, className }) {
const { content } = attributes;
return <div className={className}>{ content }</div>
return <div data-module="items-list" className={className}>{ content }</div>
};

View File

@ -0,0 +1,3 @@
import './style.scss';
export default () => {}

View File

@ -98,7 +98,5 @@
}
],
"editorScript": "search-bar",
"script": "search-bar-theme",
"editorStyle": "search-bar",
"style": "search-bar"
"editorStyle": "search-bar"
}

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { RangeControl, TextControl, SelectControl, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import SearchBarModal from './search-bar-modal.js';

View File

@ -1,4 +1,4 @@
export default function({ attributes, className }) {
const { content } = attributes;
return <div className={ className }>{ content }</div>
return <div data-module="search-bar" className={ className }>{ content }</div>
}

View File

@ -1,6 +1,9 @@
document.addEventListener("DOMContentLoaded",() => {
let form = document.getElementById('tainacan-search-bar-block');
import './style.scss';
export default (element) => {
let form = (element && element.children && element.children[0] && element.children[0].children && element.children[0].children[0]) ? element.children[0].children[0] : document.getElementById('tainacan-search-bar-block');
if (form) {
form.addEventListener('submit', ((e) => {
e.preventDefault();
let input = document.getElementById('tainacan-search-bar-block_input');
@ -11,4 +14,4 @@ document.addEventListener("DOMContentLoaded",() => {
}
}));
}
}, false);
}

View File

@ -0,0 +1,65 @@
import * as conditioner from 'conditioner-core/conditioner-core.esm';
// Checks if document is loaded
const performWhenDocumentIsLoaded = callback => {
if (/comp|inter|loaded/.test(document.readyState))
cb();
else
document.addEventListener('DOMContentLoaded', callback, false);
}
// Adds data-module to blocks inserted previous to Tainacan 0.18.4
const addDataModuleToOldBlocks = () => {
const tainacanBlocks = [
'faceted-search',
'item-submission-form',
'items-list',
'collections-list',
'terms-list',
'search-bar',
'facets-list',
'dynamic-items-list',
'carousel-items-list',
'carousel-terms-list',
'carousel-collections-list'
];
// Looks for Tainacan Blocks based on their classes.
tainacanBlocks.forEach((tainacanBlockSlug) => {
let existingBlocksOnPage = document.getElementsByClassName(`wp-block-tainacan-${tainacanBlockSlug}`);
[...existingBlocksOnPage].forEach((blockElement) => {
if ( !blockElement.getAttribute('data-module') )
blockElement.setAttribute('data-module', tainacanBlockSlug);
});
});
// Extra case for the items list, as the theme wrapper does not uses gutenberg classes
let existingItemListOnPage = document.getElementById('tainacan-items-page');
if ( existingItemListOnPage && !existingItemListOnPage.getAttribute('data-module') )
existingItemListOnPage.setAttribute('data-module', 'faceted-search');
}
performWhenDocumentIsLoaded(() => {
addDataModuleToOldBlocks();
conditioner.addPlugin({
// converts module aliases to paths
moduleSetName: name => `./${name}/theme.js`,
// use default exports as constructor
moduleGetConstructor: module => module.default,
// override the import (this makes webpack bundle all the dynamically included files as well)
// https://webpack.js.org/api/module-methods/#import-
// - set to "eager" to create a single chunk for all modules
// - set to "lazy" to create a separate chunk for each module
moduleImport: name => import(
/* webpackMode: "lazy" */
/* webpackInclude: /theme\.js$/ */
/* webpackChunkName: "tainacan-chunks-" */
`${name}`)
});
// lets go!
conditioner.hydrate(document.documentElement);
});

View File

@ -89,6 +89,5 @@
}
},
"editorScript": "terms-list",
"editorStyle": "terms-list",
"style": "terms-list"
"editorStyle": "terms-list"
}

View File

@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { IconButton, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
const { InspectorControls, BlockControls } = ( tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TainacanBlocksCompatToolbar from '../../js/tainacan-blocks-compat-toolbar.js';
import TermsModal from './terms-modal.js';

View File

@ -1,4 +1,4 @@
export default function({ attributes, className }){
const { content } = attributes;
return <div className={className}>{ content }</div>
return <div data-module="terms-list" className={className}>{ content }</div>
};

View File

@ -0,0 +1,3 @@
import './style.scss';
export default () => {}

View File

@ -1,200 +0,0 @@
// 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';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
// 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 TainacanFormItem from '../../admin/components/metadata-types/tainacan-form-item.vue';
import HelpButton from '../../admin/components/other/help-button.vue';
import store from '../../admin/js/store/store';
import { I18NPlugin, UserPrefsPlugin, RouterHelperPlugin, ConsolePlugin, StatusHelperPlugin, CommentsStatusHelperPlugin } from '../../admin/js/admin-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(RouterHelperPlugin);
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('tainacan-form-item', TainacanFormItem);
Vue.component('help-button', HelpButton);
const VueItemSubmission = new Vue({
store,
data: {
collectionId: '',
hideFileModalButton: false,
hideTextModalButton: false,
hideLinkModalButton: false,
hideThumbnailSection: false,
hideAttachmentsSection: false,
showAllowCommentsSection: false,
hideHelpButtons: false,
hideMetadataTypes: false,
hideCollapses: false,
enabledMetadata: [],
sentFormHeading: '',
sentFormMessage: '',
documentSectionLabel: '',
thumbnailSectionLabel: '',
attachmentsSectionLabel: '',
metadataSectionLabel: '',
showItemLinkButton: false,
itemLinkButtonLabel: '',
helpInfoBellowLabel: false
},
beforeMount () {
// Collection source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
// Elements shown on form
if (this.$el.attributes['hide-file-modal-button'] != undefined)
this.hideFileModalButton = this.isParameterTrue('hide-file-modal-button');
if (this.$el.attributes['hide-text-modal-button'] != undefined)
this.hideTextModalButton = this.isParameterTrue('hide-text-modal-button');
if (this.$el.attributes['hide-link-modal-button'] != undefined)
this.hideLinkModalButton = this.isParameterTrue('hide-link-modal-button');
if (this.$el.attributes['hide-thumbnail-section'] != undefined)
this.hideThumbnailSection = this.isParameterTrue('hide-thumbnail-section');
if (this.$el.attributes['hide-attachments-section'] != undefined)
this.hideAttachmentsSection = this.isParameterTrue('hide-attachments-section');
if (this.$el.attributes['show-allow-comments-section'] != undefined)
this.showAllowCommentsSection = this.isParameterTrue('show-allow-comments-section');
if (this.$el.attributes['hide-collapses'] != undefined)
this.hideCollapses = this.isParameterTrue('hide-collapses');
if (this.$el.attributes['hide-help-buttons'] != undefined)
this.hideHelpButtons = this.isParameterTrue('hide-help-buttons');
if (this.$el.attributes['hide-metadata-types'] != undefined)
this.hideMetadataTypes = this.isParameterTrue('hide-metadata-types');
if (this.$el.attributes['help-info-bellow-label'] != undefined)
this.helpInfoBellowLabel = this.isParameterTrue('help-info-bellow-label');
// Form sections labels
if (this.$el.attributes['document-section-label'] != undefined)
this.documentSectionLabel = this.$el.attributes['document-section-label'].value;
if (this.$el.attributes['thumbnail-section-label'] != undefined)
this.thumbnailSectionLabel = this.$el.attributes['thumbnail-section-label'].value;
if (this.$el.attributes['attachments-section-label'] != undefined)
this.attachmentsSectionLabel = this.$el.attributes['attachments-section-label'].value;
if (this.$el.attributes['metadata-section-label'] != undefined)
this.metadataSectionLabel = this.$el.attributes['metadata-section-label'].value;
// Form submission feedback messages
if (this.$el.attributes['sent-form-heading'] != undefined)
this.sentFormHeading = this.$el.attributes['sent-form-heading'].value;
if (this.$el.attributes['sent-form-message'] != undefined)
this.sentFormMessage = this.$el.attributes['sent-form-message'].value;
if (this.$el.attributes['item-link-button-label'] != undefined)
this.itemLinkButtonLabel = this.$el.attributes['item-link-button-label'].value;
if (this.$el.attributes['show-item-link-button'] != undefined)
this.showItemLinkButton = this.isParameterTrue('show-item-link-button');
// List of metadata
if (this.$el.attributes['enabled-metadata'] != undefined && this.$el.attributes['enabled-metadata'].value)
this.enabledMetadata = this.$el.attributes['enabled-metadata'].value.split(',');
},
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...
});
}
});

View File

@ -512,7 +512,17 @@ export default {
return this.getItemSubmissionMetadata();
},
metadatumList() {
return (this.itemSubmissionMetadata && this.itemSubmissionMetadata.length) ? JSON.parse(JSON.stringify(this.getMetadata().map((metadatum) => { return { metadatum: metadatum, item: {}, value: this.itemSubmissionMetadata.find((aMetadatum) => aMetadatum.metadatum_id == metadatum.id).value } } ))) : [];
return (this.itemSubmissionMetadata && this.itemSubmissionMetadata.length) ?
JSON.parse(JSON.stringify(
this.getMetadata().map((metadatum) => {
const metadatumValue = this.itemSubmissionMetadata.find((aMetadatum) => aMetadatum.metadatum_id == metadatum.id);
return {
metadatum: metadatum,
item: {},
value: metadatumValue && metadatumValue.value ? metadatumValue.value : ''
}
} )
)) : [];
},
formErrors() {
return eventBusItemMetadata && eventBusItemMetadata.errors && eventBusItemMetadata.errors.length ? eventBusItemMetadata.errors : []

View File

@ -381,7 +381,7 @@ export default {
for (let newItem of ((this.goingRight === true || this.goingRight === undefined) ? JSON.parse(JSON.stringify(this.items)) : JSON.parse(JSON.stringify(this.items)).reverse())) {
let existingItemIndex = this.slideItems.findIndex(anItem => anItem.id == newItem.id);
if (existingItemIndex < 0) {
if (existingItemIndex < 0 && this.swiper.virtual) {
if ( this.goingRight === true || this.goingRight === undefined) {
this.swiper.virtual.appendSlide(newItem);
//this.slideItems.push(newItem);
@ -423,7 +423,7 @@ export default {
// Builds Swiper component
const self = this;
this.swiper = new Swiper('.swiper-container', {
this.swiper = new Swiper('#tainacan-slide-container', {
mousewheel: true,
observer: true,
preventInteractionOnTransition: true,

View File

@ -1,268 +0,0 @@
// Main imports
import Vue from 'vue';
import Buefy from 'buefy';
import VTooltip from 'v-tooltip';
import VueMasonry from 'vue-masonry-css';
import cssVars from 'css-vars-ponyfill';
import qs from 'qs';
import VueBlurHash from 'vue-blurhash';
// Vue Dev Tools!
Vue.config.devtools = process && process.env && process.env.NODE_ENV === 'development';
// Filters
import FilterNumeric from '../../admin/components/filter-types/numeric/Numeric.vue';
import FilterDate from '../../admin/components/filter-types/date/Date.vue';
import FilterSelectbox from '../../admin/components/filter-types/selectbox/Selectbox.vue';
import FilterAutocomplete from '../../admin/components/filter-types/autocomplete/Autocomplete.vue';
import FilterCheckbox from '../../admin/components/filter-types/checkbox/Checkbox.vue';
import FilterTaginput from '../../admin/components/filter-types/taginput/Taginput.vue';
import FilterTaxonomyCheckbox from '../../admin/components/filter-types/taxonomy/Checkbox.vue';
import FilterTaxonomyTaginput from '../../admin/components/filter-types/taxonomy/Taginput.vue';
import FilterDateInterval from '../../admin/components/filter-types/date-interval/DateInterval.vue';
import FilterNumericInterval from '../../admin/components/filter-types/numeric-interval/NumericInterval.vue';
import FilterNumericListInterval from '../../admin/components/filter-types/numeric-list-interval/NumericListInterval.vue';
import TaincanFiltersList from '../../admin/components/filter-types/tainacan-filter-item.vue';
import ThemeItemsPage from '../pages/theme-items-page.vue';
import ThemeSearch from '../theme-search.vue';
// View Modes
import ViewModeTable from '../components/view-mode-table.vue';
import ViewModeCards from '../components/view-mode-cards.vue';
import ViewModeRecords from '../components/view-mode-records.vue';
import ViewModeMasonry from '../components/view-mode-masonry.vue';
import ViewModeSlideshow from '../components/view-mode-slideshow.vue';
import ViewModeList from '../components/view-mode-list.vue';
// Remaining imports
import store from '../../admin/js/store/store';
import routerTheme from './theme-router.js';
import eventBusSearch from '../../admin/js/event-bus-search';
import {
I18NPlugin,
UserPrefsPlugin,
ConsolePlugin
} from '../../admin/js/admin-utilities';
import {
ThumbnailHelperPlugin
} from '../../admin/js/utilities';
function mountTainacanItemsListComponent() {
// Mount only if the div exists
if (document.getElementById('tainacan-items-page')) {
// 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.component(extraVuePluginName, extraVuePluginObject);
}
}
// Configure and Register Plugins
Vue.use(Buefy, {
defaultTooltipAnimated: true
});
Vue.use(VTooltip);
Vue.use(VueMasonry);
Vue.use(VueBlurHash);
Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin);
Vue.use(ThumbnailHelperPlugin);
Vue.use(ConsolePlugin, {visual: false});
/* 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);
}
}
Vue.component('tainacan-filter-item', TaincanFiltersList);
/* Filters */
Vue.component('tainacan-filter-numeric', FilterNumeric);
Vue.component('tainacan-filter-date', FilterDate);
Vue.component('tainacan-filter-selectbox', FilterSelectbox);
Vue.component('tainacan-filter-autocomplete', FilterAutocomplete);
Vue.component('tainacan-filter-checkbox', FilterCheckbox);
Vue.component('tainacan-filter-taginput', FilterTaginput);
Vue.component('tainacan-filter-taxonomy-checkbox', FilterTaxonomyCheckbox);
Vue.component('tainacan-filter-taxonomy-taginput', FilterTaxonomyTaginput);
Vue.component('tainacan-filter-date-interval', FilterDateInterval);
Vue.component('tainacan-filter-numeric-interval', FilterNumericInterval);
Vue.component('tainacan-filter-numeric-list-interval', FilterNumericListInterval);
/* Main page component */
Vue.component('theme-items-page', ThemeItemsPage);
Vue.component('theme-search', ThemeSearch);
// Oficial view modes
Vue.component('view-mode-table', ViewModeTable);
Vue.component('view-mode-cards', ViewModeCards);
Vue.component('view-mode-records', ViewModeRecords);
Vue.component('view-mode-masonry', ViewModeMasonry);
Vue.component('view-mode-slideshow', ViewModeSlideshow);
Vue.component('view-mode-list', ViewModeList);
Vue.use(eventBusSearch, { store: store, router: routerTheme});
const VueItemsList = new Vue({
store,
router: routerTheme,
data: {
termId: '',
taxonomy: '',
collectionId: '',
defaultViewMode: '',
isForcedViewMode: false,
enabledViewModes: {},
defaultItemsPerPage: '',
hideFilters: false,
hideHideFiltersButton: false,
hideSearch: false,
hideAdvancedSearch: false,
hideDisplayedMetadataButton: false,
hideSortByButton: false,
hideSortingArea: false,
hideItemsThumbnail: false,
hideItemsPerPageButton: false,
hideGoToPageButton: false,
hidePaginationArea: false,
showFiltersButtonInsideSearchControl: false,
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false
},
beforeMount () {
// Loads params if passed previously
if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) {
const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]);
for (let key of Object.keys(existingQueries))
this.$route.query[key] = existingQueries[key];
}
// Collection or Term source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
if (this.$el.attributes['term-id'] != undefined)
this.termId = this.$el.attributes['term-id'].value;
if (this.$el.attributes['taxonomy'] != undefined)
this.taxonomy = this.$el.attributes['taxonomy'].value;
// View Mode settings
if (this.$el.attributes['default-view-mode'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
else
this.defaultViewMode = 'cards';
if (this.$el.attributes['is-forced-view-mode'] != undefined)
this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value);
if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
// Options related to hidding elements
if (this.$el.attributes['hide-filters'] != undefined)
this.hideFilters = this.isParameterTrue('hide-filters');
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
this.hideHideFiltersButton = this.isParameterTrue('hide-hide-filters-button');
if (this.$el.attributes['hide-search'] != undefined)
this.hideSearch = this.isParameterTrue('hide-search');
if (this.$el.attributes['hide-advanced-search'] != undefined)
this.hideAdvancedSearch = this.isParameterTrue('hide-advanced-search');
if (this.$el.attributes['hide-displayed-metadata-button'] != undefined)
this.hideDisplayedMetadataButton = this.isParameterTrue('hide-displayed-metadata-button');
if (this.$el.attributes['hide-sorting-area'] != undefined)
this.hideSortingArea = this.isParameterTrue('hide-sorting-area');
if (this.$el.attributes['hide-items-thumbnail'] != undefined)
this.hideItemsThumbnail = this.isParameterTrue('hide-items-thumbnail');
if (this.$el.attributes['hide-sort-by-button'] != undefined)
this.hideSortByButton = this.isParameterTrue('hide-sort-by-button');
if (this.$el.attributes['hide-exposers-button'] != undefined)
this.hideExposersButton = this.isParameterTrue('hide-exposers-button');
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
this.hideItemsPerPageButton = this.isParameterTrue('hide-items-per-page-button');
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
this.hideGoToPageButton = this.isParameterTrue('hide-go-to-page-button');
if (this.$el.attributes['hide-pagination-area'] != undefined)
this.hidePaginationArea = this.isParameterTrue('hide-pagination-area');
// Other Tweaks
if (this.$el.attributes['default-items-per-page'] != undefined)
this.defaultItemsPerPage = this.$el.attributes['default-items-per-page'].value;
if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined)
this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control');
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
this.startWithFiltersHidden = this.isParameterTrue('start-with-filters-hidden');
if (this.$el.attributes['filters-as-modal'] != undefined)
this.filtersAsModal = this.isParameterTrue('filters-as-modal');
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
this.showInlineViewModeOptions = this.isParameterTrue('show-inline-view-mode-options');
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
this.showFullscreenWithViewModes = this.isParameterTrue('show-fullscreen-with-view-modes');
},
methods: {
isParameterTrue(parameter) {
const value = this.$el.attributes[parameter].value;
return (value == true || value == 'true' || value == '1' || value == 1) ? true : false;
}
},
render: h => h(ThemeSearch)
});
VueItemsList.$mount('#tainacan-items-page');
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...
});
}
}
// Checks if document is loaded
const performWhenDocumentIsLoaded = callback => {
if (/comp|inter|loaded/.test(document.readyState))
cb();
else
document.addEventListener('DOMContentLoaded', callback, false);
}
// Mounts when page is loaded
performWhenDocumentIsLoaded(() => {
mountTainacanItemsListComponent();
});
// Also if a theme or plugin requested a reset...
document.addEventListener("TainacanReloadItemsListComponent", () => {
mountTainacanItemsListComponent();
});

View File

@ -17,7 +17,7 @@ class TAINACAN_HTML_Injection extends TAINACAN_UnitTestCase
private $link = "<a href='www.tainacan.org'>link</a>";
private $js = "<script>alert('XSS')</script>";
private $css = "my text along with some style <style>a { display: none }</style>";
private $iframe = "<iframe src='www.tainacan.org' title='Taiancan'></iframe>";
private $iframe = "<iframe src='www.tainacan.org' title='Tainacan'></iframe>";
private $text_and_link = "";
private $text_and_iframe = "";

View File

@ -5,47 +5,28 @@ const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
module.exports = {
entry: {
admin: './src/views/admin/js/main.js',
media_component: './src/views/media-component/media-component.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',
reports: './src/views/reports/js/reports-main.js',
media_component: './src/views/media-component/media-component.js',
tainacan_blocks_category_icon: './src/views/gutenberg-blocks/js/tainacan-blocks-category-icon.js',
tainacan_blocks_common_theme_scripts: './src/views/gutenberg-blocks/tainacan-blocks/tainacan-blocks-common-theme-scripts.js',
block_terms_list: './src/views/gutenberg-blocks/tainacan-blocks/terms-list/index.js',
block_items_list: './src/views/gutenberg-blocks/tainacan-blocks/items-list/index.js',
block_dynamic_items_list: './src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/index.js',
block_dynamic_items_list_theme: './src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/dynamic-items-list-theme.js',
block_carousel_items_list: './src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/index.js',
block_carousel_items_list_theme: './src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/carousel-items-list-theme.js',
block_search_bar: './src/views/gutenberg-blocks/tainacan-blocks/search-bar/index.js',
block_search_bar_theme: './src/views/gutenberg-blocks/tainacan-blocks/search-bar/search-bar-theme.js',
block_collections_list: './src/views/gutenberg-blocks/tainacan-blocks/collections-list/index.js',
block_carousel_collections_list: './src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/index.js',
block_carousel_collections_list_theme: './src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/carousel-collections-list-theme.js',
block_carousel_related_items: './src/views/gutenberg-blocks/tainacan-blocks/carousel-related-items/index.js',
block_facets_list: './src/views/gutenberg-blocks/tainacan-blocks/facets-list/index.js',
block_facets_list_theme: './src/views/gutenberg-blocks/tainacan-blocks/facets-list/facets-list-theme.js',
block_item_submission_form: './src/views/gutenberg-blocks/tainacan-blocks/item-submission-form/index.js',
block_faceted_search: './src/views/gutenberg-blocks/tainacan-blocks/faceted-search/index.js',
block_carousel_terms_list: './src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/index.js',
block_carousel_terms_list_theme: './src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/carousel-terms-list-theme.js',
tainacan_blocks_category_icon: './src/views/gutenberg-blocks/js/tainacan-blocks-category-icon.js'
block_carousel_terms_list: './src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/index.js'
},
output: {
path: path.resolve(__dirname, './src/assets/js/'),
publicPath: './src/assets/js/',
publicPath: './../../../wp-content/plugins/tainacan/assets/js/',
filename: '[name].js'
},
module: {
@ -111,7 +92,6 @@ module.exports = {
},
plugins: [
new webpack.ProvidePlugin({
'Swiper': 'Swiper',
'PhotoSwipe': 'PhotoSwipe'
}),
new MomentLocalesPlugin({