tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Adds translation and debounce to vue component side.

This commit is contained in:
Mateus Machado Luna 2019-05-06 15:59:05 -03:00
parent f0551d6173
commit 2a87dc2ec5
7 changed files with 47 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/tainacan-gutenberg-blocks-style.css
View File

@ -407,7 +407,8 @@
padding: 1rem;
display: flex;
justify-content: center;
align-items: center; }
align-items: center;
color: #555758; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar {
width: 100%;
display: flex;
@ -417,6 +418,7 @@
margin-bottom: 1rem; }
.wp-block-tainacan-dynamic-items-list .dynamic-items-search-bar button {
margin-right: 0.75rem;
min-height: 28px;
z-index: 2;
border: none;
background: transparent;

2
src/assets/css/tainacan-gutenberg-blocks-style.css.map
View File

File diff suppressed because one or more lines are too long

3
src/gutenberg-blocks/class-tainacan-gutenberg-block.php
View File

@ -111,7 +111,8 @@ function tainacan_blocks_register_tainacan_dynamic_items_list(){
wp_enqueue_script(
'dynamic-items-list-theme',
$TAINACAN_BASE_URL . '/assets/gutenberg_dynamic_items_list_theme-components.js'
$TAINACAN_BASE_URL . '/assets/gutenberg_dynamic_items_list_theme-components.js',
array('wp-components')
);
wp_register_script(

8
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.js
View File

@ -34,6 +34,14 @@ document.addEventListener("DOMContentLoaded", () => {
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? Boolean(this.$el.attributes['show-search-bar'].value) : 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);
},
debounce() {
return _.debounce;
}
}
};

19
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list-theme.vue
View File

@ -6,7 +6,7 @@
<button
@click="localOrder = 'asc'; fetchItems()"
:class="localOrder == 'asc' ? 'sorting-button-selected' : ''"
label="__('label_sort_ascending', 'tainacan')">
:label="$root.__('label_sort_ascending', 'tainacan')">
<span class="icon">
<i>
<svg
@ -21,7 +21,7 @@
<button
@click="localOrder = 'desc'; fetchItems(); "
:class="localOrder == 'desc' ? 'sorting-button-selected' : ''"
label="__('label_sort_descending', 'tainacan')">
:label="$root.__('label_sort_descending', 'tainacan')">
<span class="icon">
<i>
<svg
@ -36,7 +36,7 @@
</button>
<button
@click="fetchItems()"
label="__('search', 'tainacan')">
:label="$root.__('search', 'tainacan')">
<span class="icon">
<i>
<svg
@ -58,13 +58,13 @@
</button>
<input
:value="searchString"
@change="(value) => { applySearchString(value) } "
@input="(value) => { $root.debounce(applySearchString(value), 1000) } "
type="text" >
</div>
<div
v-if="isLoading"
class="spinner-container">
LOADING SÔ
{{ $root.__('Loading items...', 'tainacan') }}
</div>
<div v-else>
<ul
@ -94,13 +94,15 @@
:
`${$root.tainacanBaseUrl}/admin/images/placeholder_square.png`)
"
:alt="item.title">
:alt="item.title ? item.title : $root.__('Thumbnail', 'tainacan')">
<span>{{ item.title ? item.title : '' }}</span>
</a>
</li>
</ul>
<div v-else>
No items baby.
<div
v-else
class="spinner-container">
{{ $root.__('No items found.', 'tainacan') }}
</div>
</div>
</div>
@ -181,6 +183,7 @@ export default {
delete queryObject.readmode;
delete queryObject.iframemode;
delete queryObject.admin_view_mode;
delete queryObject.fetch_only_meta;
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';

2
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss
View File

@ -8,6 +8,7 @@
display: flex;
justify-content: center;
align-items: center;
color: #555758;
}
// Search control bar
@ -21,6 +22,7 @@
button {
margin-right: 0.75rem;
min-height: 28px;
z-index: 2;
border: none;
background: transparent;

33
src/gutenberg-blocks/tainacan-items/dynamic-items-list/index.js
View File

@ -14,10 +14,12 @@ import qs from 'qs';
registerBlockType('tainacan/dynamic-items-list', {
title: __('Tainacan Dynamic Items List', 'tainacan'),
icon:
<svg width="24" height="24" viewBox="0 -2 12 16">
<path
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
width="24px">
<path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
</svg>,
category: 'tainacan-blocks',
keywords: [ __( 'Tainacan', 'tainacan' ), __( 'items', 'tainacan' ), __( 'collection', 'tainacan' ) ],
@ -196,6 +198,7 @@ registerBlockType('tainacan/dynamic-items-list', {
delete queryObject.readmode;
delete queryObject.iframemode;
delete queryObject.admin_view_mode;
delete queryObject.fetch_only_meta;
endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
@ -374,10 +377,12 @@ registerBlockType('tainacan/dynamic-items-list', {
{ items.length ? (
<div className="block-control">
<p>
<svg width="24" height="24" viewBox="0 -2 12 16">
<path
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
width="24px">
<path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
</svg>
{__('Dynamically list items from a Tainacan items search', 'tainacan')}
</p>
@ -455,11 +460,13 @@ registerBlockType('tainacan/dynamic-items-list', {
alt="Tainacan Logo"/>
)}>
<p>
<svg width="24" height="24" viewBox="0 -2 12 16">
<path
d="M8.8,1.2H1.2V10H0V1.2C0,0.6,0.6,0,1.2,0h7.5V1.2z M3.8,2.5c-0.7,0-1.2,0.6-1.2,1.3v8.8c0,0.7,0.6,1.2,1.2,1.2h6.9
c0.7,0,1.2-0.6,1.2-1.2V6.3L8.1,2.5H3.8z M7.5,3.4L11,6.9H7.5V3.4z"/>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
width="24px">
<path d="M14,2V4H7v7.24A5.33,5.33,0,0,0,5.5,11a4.07,4.07,0,0,0-.5,0V4A2,2,0,0,1,7,2Zm7,10v8a2,2,0,0,1-2,2H12l1-1-2.41-2.41A5.56,5.56,0,0,0,11,16.53a5.48,5.48,0,0,0-2-4.24V8a2,2,0,0,1,2-2h4Zm-2.52,0L14,7.5V12ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1-.5-7,2.74,2.74,0,0,1,.5,0,3.41,3.41,0,0,1,1.5.34,3.5,3.5,0,0,1,2,3.16,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,0,0,5.5,15a1.39,1.39,0,0,0-.5.09A1.5,1.5,0,0,0,5.5,18a1.48,1.48,0,0,0,1.42-1A1.5,1.5,0,0,0,7,16.53Z"/>
</svg>
{__('Dynamically list items from a Tainacan items search', 'tainacan')}
</p>
<Button