Merge branch 'develop' into feature/184
This commit is contained in:
mateuswetah
commit
159c362c10
|
|
@ -25,7 +25,8 @@ module.exports = {
|
|||
'vue/no-confusing-v-for-v-if': 'off',
|
||||
'vue/no-use-v-if-with-v-for': 'off',
|
||||
'vue/multi-word-component-names': 'off',
|
||||
'vue/require-default-prop': 'off'
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/no-v-text-v-html-on-component': 'off'
|
||||
},
|
||||
globals: {
|
||||
'wp': true,
|
||||
|
|
|
|||
2
build.sh
2
build.sh
|
|
@ -93,7 +93,7 @@ mkdir $wp_plugin_dir
|
|||
rsync -axz --exclude='vendor/bin/phpc*' --exclude='vendor/squizlabs' --exclude='vendor/wimg' \
|
||||
--exclude='vendor/respect/validation/.git' --exclude='vendor/symfony/polyfill-mbstring/.git' \
|
||||
--exclude='vendor/respect/validation/docs' --exclude='vendor/respect/validation/tests' \
|
||||
--exclude='pdf-viewer/pdfjs-dist/web/compressed.tracemonkey-pldi-09.pdf' \
|
||||
--exclude='views/libs/pdf-viewer/pdfjs-dist/web/compressed.tracemonkey-pldi-09.pdf' \
|
||||
--exclude='vendor/tecnickcom/tcpdf/fonts' \
|
||||
--exclude='vendor/smalot/pdfparser/src/Smalot/PdfParser/Tests/' \
|
||||
--exclude='vendor/tecnickcom/tcpdf/examples' \
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
59
package.json
59
package.json
|
|
@ -8,58 +8,59 @@
|
|||
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
|
||||
},
|
||||
"dependencies": {
|
||||
"apexcharts": "^3.34.0",
|
||||
"axios": "^0.21.4",
|
||||
"apexcharts": "^3.35.3",
|
||||
"axios": "^0.27.2",
|
||||
"blurhash": "^1.1.5",
|
||||
"buefy": "^0.9.19",
|
||||
"bulma": "^0.9.3",
|
||||
"buefy": "^0.9.21",
|
||||
"bulma": "^0.9.4",
|
||||
"conditioner-core": "^2.3.3",
|
||||
"countup.js": "^2.1.0",
|
||||
"countup.js": "^2.2.0",
|
||||
"css-vars-ponyfill": "^2.4.7",
|
||||
"floating-vue": "^1.0.0-beta.15",
|
||||
"moment": "^2.29.1",
|
||||
"floating-vue": "^1.0.0-beta.17",
|
||||
"masonry-layout": "^4.2.2",
|
||||
"moment": "^2.29.3",
|
||||
"node-sass": "^7.0.1",
|
||||
"photoswipe": "^5.2.2",
|
||||
"qs": "^6.10.3",
|
||||
"photoswipe": "^5.2.8",
|
||||
"qs": "^6.10.5",
|
||||
"react": "^17.0.2",
|
||||
"react-dom": "^17.0.2",
|
||||
"swiper": "^8.0.7",
|
||||
"swiper": "^8.2.4",
|
||||
"t": "^0.5.1",
|
||||
"vue": "^2.6.14",
|
||||
"vue-apexcharts": "^1.6.2",
|
||||
"vue-blurhash": "^0.1.4",
|
||||
"vue-countup-v2": "^4.0.0",
|
||||
"vue-masonry-css": "^1.0.3",
|
||||
"vue-router": "^3.1.6",
|
||||
"vue-router": "^3.5.4",
|
||||
"vue-the-mask": "^0.11.1",
|
||||
"vuedraggable": "^2.24.3",
|
||||
"vuex": "^3.4.0"
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.17.8",
|
||||
"@babel/preset-env": "^7.16.11",
|
||||
"@babel/preset-react": "^7.16.7",
|
||||
"acorn": "^8.7.0",
|
||||
"autoprefixer": "^10.4.4",
|
||||
"babel-loader": "^8.2.4",
|
||||
"@babel/core": "^7.18.5",
|
||||
"@babel/preset-env": "^7.18.2",
|
||||
"@babel/preset-react": "^7.17.12",
|
||||
"@types/masonry-layout": "^4.2.5",
|
||||
"acorn": "^8.7.1",
|
||||
"autoprefixer": "^10.4.7",
|
||||
"babel-loader": "^8.2.5",
|
||||
"circular-dependency-plugin": "5.2.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.7.1",
|
||||
"eslint": "^8.12.0",
|
||||
"eslint-plugin-vue": "^8.5.0",
|
||||
"eslint": "^8.18.0",
|
||||
"eslint-plugin-vue": "^9.1.1",
|
||||
"eslint-webpack-plugin": "^3.1.1",
|
||||
"file-loader": "^6.2.0",
|
||||
"moment-locales-webpack-plugin": "^1.2.0",
|
||||
"postcss-loader": "^6.2.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"postcss-loader": "7.0.0",
|
||||
"sass-loader": "^13.0.0",
|
||||
"style-loader": "^3.3.1",
|
||||
"terser-webpack-plugin": "5.3.1",
|
||||
"terser-webpack-plugin": "5.3.3",
|
||||
"vue-loader": "^15.9.8",
|
||||
"vue-template-compiler": "^2.6.14",
|
||||
"webpack": "^5.70.0",
|
||||
"webpack": "^5.73.0",
|
||||
"webpack-bundle-analyzer": "^4.5.0",
|
||||
"webpack-cli": "^4.9.2",
|
||||
"webpack-dev-server": "^4.7.4",
|
||||
"webpack-merge": "^5.8.0",
|
||||
"circular-dependency-plugin": "5.2.2"
|
||||
"webpack-cli": "^4.10.0",
|
||||
"webpack-dev-server": "^4.9.2",
|
||||
"webpack-merge": "^5.8.0"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -136,7 +136,8 @@
|
|||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a,
|
||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
display: block; }
|
||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate img {
|
||||
display: initial !important; }
|
||||
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -143,7 +143,8 @@
|
|||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a,
|
||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
display: block; }
|
||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div {
|
||||
padding-bottom: 100% !important; }
|
||||
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -136,7 +136,8 @@
|
|||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a,
|
||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none; }
|
||||
text-decoration: none;
|
||||
display: block; }
|
||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate img {
|
||||
display: initial !important; }
|
||||
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid a {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -47,7 +47,8 @@
|
|||
color: inherit;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
line-height: normal; }
|
||||
line-height: normal;
|
||||
display: block; }
|
||||
.wp-block-tainacan-collections-list ul.collections-list.collections-layout-grid li.collection-list-item img,
|
||||
.wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item img {
|
||||
height: auto;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"version": 3,
|
||||
"mappings": "AAEA,mCAAoC;EAChC,MAAM,EAAE,QAAQ;EAGhB,uDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;gGAC2D;IACvD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;8FACyD;IACrD,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;mGAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;yGAAI;QACA,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;sFACiD;IAC7C,OAAO,EAAE,CAAC;ICtCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDqCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;MAGvB;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,oFAAiD;IAC7C,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,2FAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,qGAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,iGAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,wCAAwC;IAExD,uGAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;wFACiD;MAC7C,qBAAqB,EAAE,uBAAuB;MAE9C;kHAAwB;QACpB,KAAK,EAAE,IAAI;QACX;wHAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;sFACiD;IAC7C,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAItB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QApC/C;oHAAwB;UAqChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAzC/C;oHAAwB;UA0ChB,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA9C9C;oHAAwB;UA+ChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAnD9C;oHAAwB;UAoDhB,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;iIACa;EACT,KAAK,EAAE,OAAO",
|
||||
"mappings": "AAEA,mCAAoC;EAChC,MAAM,EAAE,QAAQ;EAGhB,uDAAoB;IAChB,QAAQ,EAAE,QAAQ;IAClB,KAAK,EAAE,CAAC;EAIZ;gGAC2D;IACvD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,MAAM;IAClB,OAAO,EAAE,CAAC;EAId;8FACyD;IACrD,qBAAqB,EAAE,wBAAwB;IAC/C,eAAe,EAAE,iBAAiB;IAClC,kBAAkB,EAAE,eAAe;IAEnC;mGAAG;MACC,UAAU,EAAE,YAAY;MACxB,YAAY,EAAE,YAAY;MAC1B,WAAW,EAAE,YAAY;MACzB,MAAM,EAAE,gBAAgB;MAExB;yGAAI;QACA,MAAM,EAAE,gBAAgB;QACxB,aAAa,EAAE,cAAc;EAIzC;sFACiD;IAC7C,OAAO,EAAE,CAAC;ICtCd,SAAS,EAAE,IAAI;IACf,OAAO,EAAE,IAAI;IACb,OAAO,EAAE,QAAQ;IACjB,OAAO,EAAE,IAAI;IDqCT,gBAAgB,EAAE,6BAA6B;IAC/C,qBAAqB,EAAE,wBAAwB;IAC/C,QAAQ,EAAE,GAAG;IACb,eAAe,EAAE,YAAY;IAC7B,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,KAAK;MACd,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,KAAK,EAAE,KAAK;MAEZ;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,WAAW,EAAE,IAAI;QACjB,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,KAAK;MAGlB;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,KAAK;QACZ,SAAS,EAAE,KAAK;QAChB,OAAO,EAAE,GAAG;QACZ,aAAa,EAAE,KAAK;MAGxB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;EAIjC,oFAAiD;IAC7C,OAAO,EAAE,IAAI;IACb,WAAW,EAAE,UAAU;IAEvB,2FAAO;MACH,QAAQ,EAAE,mBAAmB;MAC7B,gBAAgB,EAAE,yBAAyB;MAC3C,KAAK,EAAE,oCAAmC;MAC1C,OAAO,EAAE,GAAG;MACZ,WAAW,EAAE,GAAG;MAChB,SAAS,EAAE,IAAI;MACf,UAAU,EAAE,MAAM;MAClB,QAAQ,EAAE,QAAQ;MAClB,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,KAAK;MACZ,GAAG,EAAE,GAAG;MACR,eAAe,EAAE,MAAM;MACvB,OAAO,EAAE,GAAG;MAEZ,qGAAU;QAAE,MAAM,EAAE,GAAG;IAG3B,iGAAe;MACX,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,OAAO;MACnB,gBAAgB,EAAE,gBAAiC;MACnD,OAAO,EAAE,CAAC;MACV,KAAK,EAAE,IAAI;MACX,GAAG,EAAE,IAAI;MACT,MAAM,EAAE,8CAA6C;MACrD,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,wCAAwC;IAExD,uGAAqB;MACjB,gBAAgB,EAAE,gBAAiC;MACnD,MAAM,EAAE,yDAAwD;EAGxE,yCAA0C;IAEtC;wFACiD;MAC7C,qBAAqB,EAAE,uBAAuB;MAE9C;kHAAwB;QACpB,KAAK,EAAE,IAAI;QACX;wHAAI;UAAE,KAAK,EAAE,IAAI;EAM7B;sFACiD;IAC7C,OAAO,EAAE,CAAC;IACV,OAAO,EAAE,IAAI;IACb,SAAS,EAAE,IAAI;IACf,WAAW,EAAE,MAAM;IACnB,eAAe,EAAE,IAAI;IAErB;gHAAwB;MACpB,QAAQ,EAAE,QAAQ;MAClB,MAAM,EAAE,mBAAmB;MAC3B,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,IAAI;MAChB,SAAS,EAAE,gBAAgB;MAC3B,KAAK,EAAE,gBAAgB;MAEvB;oHAAE;QACE,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,IAAI;QACb,WAAW,EAAE,MAAM;QACnB,UAAU,EAAE,SAAS;QACrB,UAAU,EAAE,UAAU;MAG1B;sHAAI;QACA,MAAM,EAAE,IAAI;QACZ,KAAK,EAAE,IAAI;QACX,SAAS,EAAE,IAAI;QACf,OAAO,EAAE,GAAG;QACZ,YAAY,EAAE,IAAI;MAItB;iJAA+B;QAC3B,OAAO,EAAE,IAAI;MAGjB;;0HACU;QACN,KAAK,EAAE,OAAO;QACd,eAAe,EAAE,IAAI;MAGzB,0CAA2C;QApC/C;oHAAwB;UAqChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,0CAA2C;QAzC/C;oHAAwB;UA0ChB,SAAS,EAAE,oBAAoB;UAC/B,KAAK,EAAE,oBAAoB;MAG/B,yCAA0C;QA9C9C;oHAAwB;UA+ChB,SAAS,EAAE,gBAAgB;UAC3B,KAAK,EAAE,gBAAgB;MAG3B,yCAA0C;QAnD9C;oHAAwB;UAoDhB,SAAS,EAAE,iBAAiB;UAC5B,KAAK,EAAE,iBAAiB;;AAOhC;iIACa;EACT,KAAK,EAAE,OAAO",
|
||||
"sources": ["../../views/gutenberg-blocks/blocks/collections-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
|
||||
"names": [],
|
||||
"file": "tainacan-gutenberg-block-collections-list.css"
|
||||
|
|
|
|||
|
|
@ -77,7 +77,7 @@ class Embed {
|
|||
|
||||
public function pdf_embed_handler($matches, $attr, $url, $rawattr) {
|
||||
global $TAINACAN_BASE_URL;
|
||||
$viewer_url = $TAINACAN_BASE_URL . '/views/libs/pdf-viewer/pdf-viewer.html?file=' . $url;
|
||||
$viewer_url = $TAINACAN_BASE_URL . '/views/libs/pdf-viewer/pdfjs-dist/web/viewer.html?file=' . $url;
|
||||
//$viewer_url = $TAINACAN_BASE_URL . '/assets/pdfjs-dist/web/viewer.html?file=' . $url;
|
||||
|
||||
$defaults = array(
|
||||
|
|
|
|||
|
|
@ -814,16 +814,16 @@ class Item extends Entity {
|
|||
$document_options = $this->get_document_options();
|
||||
|
||||
$output = '';
|
||||
|
||||
|
||||
if ( $type == 'url' ) {
|
||||
global $wp_embed;
|
||||
$_embed = $wp_embed->autoembed($this->get_document());
|
||||
$url = $this->get_document();
|
||||
|
||||
if ( $_embed == $url ) {
|
||||
if ( esc_url($_embed) == esc_url($url) ) {
|
||||
|
||||
if ( $document_options && isset($document_options['forced_iframe']) && $document_options['forced_iframe'] === true ) {
|
||||
|
||||
|
||||
// URL points to an image file
|
||||
if (isset($document_options['is_image']) && $document_options['is_image'] === true) {
|
||||
$_embed = sprintf('<a href="%s" target="blank"><img src="%s" /></a>', $url, $url);
|
||||
|
|
|
|||
|
|
@ -148,7 +148,7 @@ class Exposers_Handler {
|
|||
$type_responde = $exposer->rest_request_after_callbacks($response, $handler, $request);
|
||||
if(self::request_has_url_param($request)) {
|
||||
header(implode('', $response->get_headers()));
|
||||
echo esc_attr(stripcslashes($response->get_data()));
|
||||
echo wp_kses_tainacan(stripcslashes($response->get_data()));
|
||||
exit();
|
||||
}
|
||||
return $type_responde;
|
||||
|
|
|
|||
|
|
@ -914,7 +914,7 @@ class Theme_Helper {
|
|||
* @type integer $auto_play_speed The time in s to translate to the next slide automatically
|
||||
* @type bool $loop_slides Should slides loop when reached the end of the Carousel?
|
||||
* @type bool $hide_title Should the title of the items be displayed?
|
||||
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`?
|
||||
* @type string $image_size Item image size. Defaults to 'tainacan-medium'
|
||||
* @type bool $show_collection_header Should it display a small version of the collection header?
|
||||
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
|
||||
* @type string $collection_background_color Color of the collection header background
|
||||
|
|
@ -937,7 +937,7 @@ class Theme_Helper {
|
|||
'auto_play_speed' => 3,
|
||||
'loop_slides' => false,
|
||||
'hide_title' => false,
|
||||
'crop_images_to_square' => true,
|
||||
'image_size' => 'tainacan-medium',
|
||||
'show_collection_header' => false,
|
||||
'show_collection_label' => false,
|
||||
'collection_background_color' => '#454647',
|
||||
|
|
@ -948,6 +948,11 @@ class Theme_Helper {
|
|||
);
|
||||
$args = wp_parse_args($args, $defaults);
|
||||
|
||||
/* Compatibility with previous version */
|
||||
if ( isset($args['crop_images_to_square ']) && !$args['crop_images_to_square'] ) {
|
||||
$args['image_size'] = 'tainacan-medium-full';
|
||||
}
|
||||
|
||||
$props = ' ';
|
||||
|
||||
// Always pass the class needed by Vue to mount the component;
|
||||
|
|
@ -988,7 +993,7 @@ class Theme_Helper {
|
|||
* @type string $show_name Show the item title
|
||||
* @type string $show_image Show the item thumbnail
|
||||
* @type string $layout Either 'grid', 'list' or 'mosaic'
|
||||
* @type string $crop_images_to_square Force images shape to be squared
|
||||
* @type string $image_size Item image size. Defaults to 'tainacan-medium'
|
||||
* @type bool $show_collection_header Should it display a small version of the collection header?
|
||||
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
|
||||
* @type string $collection_background_color Color of the collection header background
|
||||
|
|
@ -1015,7 +1020,7 @@ class Theme_Helper {
|
|||
'show_name' => true,
|
||||
'show_image' => true,
|
||||
'layout' => 'grid',
|
||||
'crop_images_to_square' => true,
|
||||
'image_size' => 'tainacan-medium',
|
||||
'show_collection_header' => false,
|
||||
'show_collection_label' => false,
|
||||
'collection_background_color' => '#454647',
|
||||
|
|
@ -1032,6 +1037,11 @@ class Theme_Helper {
|
|||
);
|
||||
$args = wp_parse_args($args, $defaults);
|
||||
|
||||
/* Compatibility with previous version */
|
||||
if ( isset($args['crop_images_to_square ']) && !$args['crop_images_to_square'] ) {
|
||||
$args['image_size'] = 'tainacan-medium-full';
|
||||
}
|
||||
|
||||
$props = ' ';
|
||||
|
||||
// Always pass the class needed by Vue to mount the component;
|
||||
|
|
|
|||
|
|
@ -1039,7 +1039,7 @@ function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
|
|||
* @type integer $auto_play_speed The time in s to translate to the next slide automatically
|
||||
* @type bool $loop_slides Should slides loop when reached the end of the Carousel?
|
||||
* @type bool $hide_title Should the title of the items be displayed?
|
||||
* @type bool $crop_images_to_square Should it use the `tainacan-medium-size` instead of the `tainacan-medium-large-size`?
|
||||
* @type string $image_size Item image size. Defaults to 'tainacan-medium'
|
||||
* @type bool $show_collection_header Should it display a small version of the collection header?
|
||||
* @type bool $show_collection_label Should it displar a 'Collection' label before the collection name on the collection header?
|
||||
* @type string $collection_background_color Color of the collection header background
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ Plugin Name: Tainacan
|
|||
Plugin URI: https://tainacan.org/
|
||||
Description: Open source, powerful and flexible repository platform for WordPress. Manage and publish you digital collections as easily as publishing a post to your blog, while having all the tools of a professional repository platform.
|
||||
Author: Tainacan.org
|
||||
Version: 0.18.10
|
||||
Version: 0.19-beta
|
||||
Requires at least: 5.0
|
||||
Tested up to: 6.0
|
||||
Requires PHP: 5.6
|
||||
|
|
@ -14,7 +14,7 @@ License: GPLv2 or later
|
|||
License URI: http://www.gnu.org/licenses/gpl-3.0.html
|
||||
*/
|
||||
|
||||
const TAINACAN_VERSION = '0.18.10';
|
||||
const TAINACAN_VERSION = '0.19-beta';
|
||||
|
||||
defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
|
||||
$TAINACAN_BASE_URL = plugins_url('', __FILE__);
|
||||
|
|
@ -35,8 +35,20 @@ add_action( 'after_setup_theme', function() {
|
|||
add_image_size( 'tainacan-small', 40, 40, true );
|
||||
add_image_size( 'tainacan-medium', 275, 275, true );
|
||||
add_image_size( 'tainacan-medium-full', 205, 1500 );
|
||||
add_image_size( 'tainacan-large-full', 480, 860 );
|
||||
} );
|
||||
|
||||
// This enables Tainacan media sizes in the admin interface, including Gutenberg blocks
|
||||
add_filter( 'image_size_names_choose', function ( $sizes ) {
|
||||
return array_merge( $sizes, array(
|
||||
'tainacan-small' => __( 'Tainacan small (40x40 - cropped)', 'tainacan' ),
|
||||
'tainacan-medium' => __( 'Tainacan medium (275x275 - cropped)', 'tainacan' ),
|
||||
'tainacan-medium-full' => __( 'Tainacan medium full (205x1500 - not cropped)', 'tainacan' ),
|
||||
'tainacan-large-full' => __( 'Tainacan large full (480x860 - not cropped)', 'tainacan' )
|
||||
) );
|
||||
} );
|
||||
|
||||
|
||||
add_action('init', ['Tainacan\Migrations', 'run_migrations']);
|
||||
|
||||
//https://core.trac.wordpress.org/ticket/23022
|
||||
|
|
|
|||
|
|
@ -2,82 +2,79 @@
|
|||
<div
|
||||
style="min-height: initial; position: relative"
|
||||
class="tainacan-cards-container">
|
||||
<template v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')">
|
||||
<ul class="new-collection-menu">
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="first-card">
|
||||
<div class="list-metadata">
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
|
||||
</span>
|
||||
<div>{{ $i18n.get('label_create_collection') }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_items')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_items'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
|
||||
<ul
|
||||
v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')"
|
||||
class="new-collection-menu">
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getNewCollectionPath()"
|
||||
class="first-card">
|
||||
<div class="list-metadata">
|
||||
<span class="icon is-large">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.get('items') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_metadata'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_filters'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
<template v-if="collections.length > 0 && !isLoading">
|
||||
<masonry
|
||||
:cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }"
|
||||
:gutter="25"
|
||||
style="width:100%;">
|
||||
<div>{{ $i18n.get('label_create_collection') }}</div>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_items')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_items'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.get('items') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_metadata'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
<li>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewCollectionPath() }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_collection_filters'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon is-medium">
|
||||
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/>
|
||||
</span>
|
||||
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul v-if="collections.length > 0 && !isLoading">
|
||||
<li>
|
||||
<router-link
|
||||
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
|
||||
tag="a"
|
||||
|
|
@ -143,149 +140,149 @@
|
|||
</li>
|
||||
</ul>
|
||||
</router-link>
|
||||
<div
|
||||
v-if="collections.length > 0 && !isLoading"
|
||||
:key="index"
|
||||
v-for="(collection, index) of collections"
|
||||
class="tainacan-card"
|
||||
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
|
||||
<ul class="menu-list">
|
||||
<li v-if="!$adminOptions.hideHomeCollectionItemsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
|
||||
:aria-label="$i18n.get('label_collection_items')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('items'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collection.id) }"
|
||||
:aria-label="$i18n.get('add_one_item')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('add_one_item'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_settings')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_settings'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('metadata', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('filters', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_activities')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('activities'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton">
|
||||
<a
|
||||
:href="collection.url"
|
||||
target="_blank"
|
||||
:aria-label="$i18n.get('label_view_collection_on_website')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_view_collection_on_website'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getCollectionPath(collection.id)"
|
||||
class="card-body">
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
v-if="collection.thumbnail != undefined"
|
||||
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
|
||||
|
||||
<!-- Name -->
|
||||
<div class="metadata-title">
|
||||
<p>{{ collection.name != undefined ? collection.name : '' }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</div>
|
||||
</masonry>
|
||||
</template>
|
||||
</li>
|
||||
<li
|
||||
v-if="collections.length > 0 && !isLoading"
|
||||
:key="index"
|
||||
v-for="(collection, index) of collections"
|
||||
class="tainacan-card"
|
||||
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
|
||||
<ul class="menu-list">
|
||||
<li v-if="!$adminOptions.hideHomeCollectionItemsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
|
||||
:aria-label="$i18n.get('label_collection_items')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('items'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getNewItemPath(collection.id) }"
|
||||
:aria-label="$i18n.get('add_one_item')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('add_one_item'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_settings')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_settings'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_metadata')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('metadata', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_filters')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.getFrom('filters', 'name'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
|
||||
:aria-label="$i18n.get('label_collection_activities')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('activities'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/>
|
||||
</span>
|
||||
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton">
|
||||
<a
|
||||
:href="collection.url"
|
||||
target="_blank"
|
||||
:aria-label="$i18n.get('label_view_collection_on_website')">
|
||||
<span
|
||||
v-tooltip.bottom="{
|
||||
content: $i18n.get('label_view_collection_on_website'),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<router-link
|
||||
tag="a"
|
||||
:to="$routerHelper.getCollectionPath(collection.id)"
|
||||
class="card-body">
|
||||
<img
|
||||
:alt="$i18n.get('label_thumbnail')"
|
||||
v-if="collection.thumbnail != undefined"
|
||||
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
|
||||
|
||||
<!-- Name -->
|
||||
<div class="metadata-title">
|
||||
<p>{{ collection.name != undefined ? collection.name : '' }}</p>
|
||||
</div>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -309,148 +309,151 @@
|
|||
</div>
|
||||
|
||||
<!-- MASONRY VIEW MODE -->
|
||||
<masonry
|
||||
role="list"
|
||||
<ul
|
||||
v-if="viewMode == 'masonry'"
|
||||
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}"
|
||||
:gutter="25"
|
||||
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
|
||||
:class="{
|
||||
'hide-items-selection': $adminOptions.hideItemsListSelection,
|
||||
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
|
||||
}"
|
||||
class="tainacan-masonry-container">
|
||||
<div
|
||||
role="listitem"
|
||||
<li
|
||||
:key="index"
|
||||
:data-tainacan-item-id="item.id"
|
||||
v-for="(item, index) of items"
|
||||
:class="{
|
||||
'selected-masonry-item': getSelectedItemChecked(item.id) == true,
|
||||
'tainacan-masonry-grid-sizer': index == 0
|
||||
}">
|
||||
<div
|
||||
:class="{
|
||||
'selected-masonry-item': getSelectedItemChecked(item.id) == true
|
||||
}"
|
||||
class="tainacan-masonry-item">
|
||||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="masonry-item-checkbox">
|
||||
<label
|
||||
tabindex="0"
|
||||
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||
<input
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
type="checkbox"
|
||||
:checked="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="masonry-item-checkbox">
|
||||
<label
|
||||
tabindex="0"
|
||||
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||
<input
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
type="checkbox"
|
||||
:checked="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
<!-- Title -->
|
||||
<div
|
||||
:style="{
|
||||
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '0 !important' : (isOnAllItemsTabs ? '0.5em' : '1em')
|
||||
}"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
class="metadata-title">
|
||||
<p>
|
||||
<span
|
||||
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||
class="icon has-text-gray"
|
||||
v-tooltip="{
|
||||
content: $i18n.get('status_' + item.status),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-1em"
|
||||
:class="$statusHelper.getIcon(item.status)"
|
||||
/>
|
||||
</span>
|
||||
{{ item.title != undefined ? item.title : '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-masonry-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit && !$adminOptions.hideItemsListActionAreas"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
v-if="!isOnTrash"
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||
@click.prevent.stop="goToItemEditPage(item)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
:aria-lavel="$i18n.get('label_button_untrash')"
|
||||
@click.prevent.stop="untrashOneItem(item.id)"
|
||||
v-if="isOnTrash">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_recover_from_trash'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-undo"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.current_user_can_delete"
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneItem(item.id)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div
|
||||
:style="{
|
||||
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '0 !important' : (isOnAllItemsTabs ? '0.5em' : '1em')
|
||||
}"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
class="metadata-title">
|
||||
<p>
|
||||
<span
|
||||
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||
class="icon has-text-gray"
|
||||
v-tooltip="{
|
||||
content: $i18n.get('status_' + item.status),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-1em"
|
||||
:class="$statusHelper.getIcon(item.status)"
|
||||
/>
|
||||
</span>
|
||||
{{ item.title != undefined ? item.title : '' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Thumbnail -->
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-masonry-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit && !$adminOptions.hideItemsListActionAreas"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
v-if="!isOnTrash"
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||
@click.prevent.stop="goToItemEditPage(item)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
:aria-lavel="$i18n.get('label_button_untrash')"
|
||||
@click.prevent.stop="untrashOneItem(item.id)"
|
||||
v-if="isOnTrash">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_recover_from_trash'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-undo"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.current_user_can_delete"
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneItem(item.id)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</masonry>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- CARDS VIEW MODE -->
|
||||
<div
|
||||
|
|
@ -656,215 +659,212 @@
|
|||
</div>
|
||||
|
||||
<!-- RECORDS VIEW MODE -->
|
||||
<masonry
|
||||
role="list"
|
||||
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
|
||||
:gutter="30"
|
||||
<ul
|
||||
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
|
||||
class="tainacan-records-container"
|
||||
v-if="viewMode == 'records'">
|
||||
<div
|
||||
role="listitem"
|
||||
<li
|
||||
:key="index"
|
||||
:data-tainacan-item-id="item.id"
|
||||
v-for="(item, index) of items"
|
||||
:class="{ 'selected-record': getSelectedItemChecked(item.id) == true }"
|
||||
class="tainacan-record">
|
||||
:class="{ 'tainacan-records-grid-sizer': index == 0 }">
|
||||
<div
|
||||
:class="{ 'selected-record': getSelectedItemChecked(item.id) == true }"
|
||||
class="tainacan-record">
|
||||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="record-checkbox">
|
||||
<label
|
||||
tabindex="0"
|
||||
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||
<input
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
type="checkbox"
|
||||
:checked="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="record-checkbox">
|
||||
<label
|
||||
tabindex="0"
|
||||
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'">
|
||||
<input
|
||||
v-if="!$adminOptions.itemsSingleSelectionMode"
|
||||
type="checkbox"
|
||||
:checked="getSelectedItemChecked(item.id)"
|
||||
@input="setSelectedItemChecked(item.id)">
|
||||
<input
|
||||
v-else
|
||||
type="radio"
|
||||
name="item-single-selection"
|
||||
:value="item.id"
|
||||
v-model="singleItemSelection">
|
||||
<span class="check" />
|
||||
<span class="control-label" />
|
||||
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<!-- Title -->
|
||||
<div
|
||||
class="metadata-title"
|
||||
:style="{
|
||||
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
|
||||
}">
|
||||
<span
|
||||
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||
class="icon has-text-gray"
|
||||
v-tooltip="{
|
||||
content: $i18n.get('status_' + item.status),
|
||||
autoHide: true,
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
<!-- Title -->
|
||||
<div
|
||||
class="metadata-title"
|
||||
:style="{
|
||||
'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
|
||||
}">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-1em"
|
||||
:class="$statusHelper.getIcon(item.status)"
|
||||
/>
|
||||
</span>
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
v-for="(column, columnIndex) in displayedMetadata"
|
||||
:key="columnIndex"
|
||||
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.title != undefined ? item.title : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
v-for="(column, columnIndex) in displayedMetadata"
|
||||
:key="columnIndex"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit && !$adminOptions.hideItemsListActionAreas"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
v-if="!isOnTrash"
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||
@click.prevent.stop="goToItemEditPage(item)">
|
||||
<span
|
||||
<span
|
||||
v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
|
||||
class="icon has-text-gray"
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
content: $i18n.get('status_' + item.status),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
|
||||
placement: 'auto-start'
|
||||
}">
|
||||
<i
|
||||
class="tainacan-icon tainacan-icon-1em"
|
||||
:class="$statusHelper.getIcon(item.status)"
|
||||
/>
|
||||
</span>
|
||||
<p
|
||||
v-tooltip="{
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.metadata != undefined ? renderMetadata(item.metadata, column) : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
:aria-lavel="$i18n.get('label_button_untrash')"
|
||||
@click.prevent.stop="untrashOneItem(item.id)"
|
||||
v-if="isOnTrash">
|
||||
<span
|
||||
v-for="(column, columnIndex) in displayedMetadata"
|
||||
:key="columnIndex"
|
||||
v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
|
||||
<p
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_recover_from_trash'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
delay: {
|
||||
shown: 500,
|
||||
hide: 300,
|
||||
},
|
||||
content: item.title != undefined ? item.title : '',
|
||||
html: true,
|
||||
autoHide: false,
|
||||
placement: 'auto-start',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-undo"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.current_user_can_delete"
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneItem(item.id)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
v-for="(column, columnIndex) in displayedMetadata"
|
||||
:key="columnIndex"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-html="item.title != undefined ? item.title : ''" />
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit && !$adminOptions.hideItemsListActionAreas"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
v-if="!isOnTrash"
|
||||
id="button-edit"
|
||||
:aria-label="$i18n.getFrom('items','edit_item')"
|
||||
@click.prevent.stop="goToItemEditPage(item)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('edit'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
:aria-lavel="$i18n.get('label_button_untrash')"
|
||||
@click.prevent.stop="untrashOneItem(item.id)"
|
||||
v-if="isOnTrash">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: $i18n.get('label_recover_from_trash'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-undo"/>
|
||||
</span>
|
||||
</a>
|
||||
<a
|
||||
v-if="item.current_user_can_delete"
|
||||
id="button-delete"
|
||||
:aria-label="$i18n.get('label_button_delete')"
|
||||
@click.prevent.stop="deleteOneItem(item.id)">
|
||||
<span
|
||||
v-tooltip="{
|
||||
content: isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('delete'),
|
||||
autoHide: true,
|
||||
placement: 'auto',
|
||||
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
|
||||
}"
|
||||
class="icon">
|
||||
<i
|
||||
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }"
|
||||
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/>
|
||||
</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Remaining metadata -->
|
||||
<div
|
||||
class="media"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)">
|
||||
<div class="list-metadata media-body">
|
||||
<div class="tainacan-record-thumbnail">
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-record-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
<!-- Remaining metadata -->
|
||||
<div
|
||||
class="media"
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)">
|
||||
<div class="list-metadata media-body">
|
||||
<div class="tainacan-record-thumbnail">
|
||||
<blur-hash-image
|
||||
@click.left="onClickItem($event, item)"
|
||||
@click.right="onRightClickItem($event, item)"
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-record-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
</div>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
|
||||
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||
<p
|
||||
v-html="item.description != undefined ? item.description : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item.metadata, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'description')">
|
||||
<h3 class="metadata-label">{{ $i18n.get('label_description') }}</h3>
|
||||
<p
|
||||
v-html="item.description != undefined ? item.description : ''"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
:class="{ 'metadata-type-textarea': column.metadata_type_object != undefined && column.metadata_type_object.component == 'tainacan-textarea' }"
|
||||
v-if="renderMetadata(item.metadata, column) != '' && column.display && column.slug != 'thumbnail' && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop != 'title')">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="renderMetadata(item.metadata, column)"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
<span
|
||||
v-for="(column, metadatumIndex) in displayedMetadata"
|
||||
:key="metadatumIndex"
|
||||
v-if="(column.metadatum == 'row_modification' || column.metadatum == 'row_creation' || column.metadatum == 'row_author') && item[column.slug] != undefined">
|
||||
<h3 class="metadata-label">{{ column.name }}</h3>
|
||||
<p
|
||||
v-html="(column.metadatum == 'row_creation' || column.metadatum == 'row_modification') ? parseDateToNavigatorLanguage(item[column.slug]) : item[column.slug]"
|
||||
class="metadata-value"/>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</masonry>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- TABLE VIEW MODE -->
|
||||
<table
|
||||
|
|
@ -1351,6 +1351,7 @@ import { mapActions, mapGetters } from 'vuex';
|
|||
import CustomDialog from '../other/custom-dialog.vue';
|
||||
import ItemCopyDialog from '../other/item-copy-dialog.vue';
|
||||
import BulkEditionModal from '../modals/bulk-edition-modal.vue';
|
||||
import Masonry from 'masonry-layout';
|
||||
import { dateInter } from "../../js/mixins";
|
||||
|
||||
export default {
|
||||
|
|
@ -1373,7 +1374,9 @@ export default {
|
|||
cursorPosX: -1,
|
||||
cursorPosY: -1,
|
||||
contextMenuItem: null,
|
||||
singleItemSelection: false
|
||||
singleItemSelection: false,
|
||||
masonry: false,
|
||||
shouldUseLegacyMasonyCols: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -1438,12 +1441,35 @@ export default {
|
|||
singleItemSelection() {
|
||||
if (this.$adminOptions.itemsSingleSelectionMode)
|
||||
this.$eventBusSearch.setSelectedItemsForIframe([this.singleItemSelection], true);
|
||||
},
|
||||
isLoading: {
|
||||
handler() {
|
||||
if (this.items && this.items.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.masonry !== false)
|
||||
this.masonry.destroy();
|
||||
|
||||
if (this.viewMode == 'masonry' || this.viewMode == 'records') {
|
||||
this.masonry = new Masonry( '.tainacan-' + this.viewMode + '-container', {
|
||||
itemSelector: 'li',
|
||||
columnWidth: '.tainacan-' + this.viewMode + '-grid-sizer',
|
||||
gutter: this.viewMode == 'masonry' ? 25 : 30,
|
||||
percentPosition: true
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.highlightsItem)
|
||||
setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000);
|
||||
},
|
||||
created() {
|
||||
this.shouldUseLegacyMasonyCols = wp.hooks.hasFilter('tainacan_use_legacy_masonry_view_mode_cols') && wp.hooks.applyFilters('tainacan_use_legacy_masonry_view_mode_cols', false);
|
||||
},
|
||||
methods: {
|
||||
...mapActions('collection', [
|
||||
'deleteItem',
|
||||
|
|
|
|||
|
|
@ -145,6 +145,7 @@
|
|||
<div class="control">
|
||||
<button
|
||||
@click.prevent="onUpdateMetadataMapperMetadataClick"
|
||||
:class="{ 'is-loading': isMapperMetadataLoading }"
|
||||
class="button is-success">{{ $i18n.get('save') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -281,7 +282,7 @@ export default {
|
|||
.then(() => {
|
||||
this.isLoadingMetadatumMappers = false;
|
||||
|
||||
if (this.metadatumMappers.length == 1)
|
||||
if (this.metadatumMappers.length >= 1)
|
||||
this.onSelectMetadataMapper(this.metadatumMappers[0])
|
||||
})
|
||||
.catch(() => {
|
||||
|
|
@ -293,7 +294,7 @@ export default {
|
|||
this.isMapperMetadataLoading = true;
|
||||
this.mapper = metadatumMapper; //TODO try to use v-model again
|
||||
this.mapperMetadata = [];
|
||||
|
||||
|
||||
if (metadatumMapper != '') {
|
||||
for (var k in metadatumMapper.metadata) {
|
||||
var item = metadatumMapper.metadata[k];
|
||||
|
|
|
|||
|
|
@ -30,7 +30,6 @@ import {
|
|||
Numberinput
|
||||
} from 'buefy';
|
||||
import VTooltip from 'floating-vue';
|
||||
import VueMasonry from 'vue-masonry-css';
|
||||
import draggable from 'vuedraggable';
|
||||
import VueTheMask from 'vue-the-mask';
|
||||
import cssVars from 'css-vars-ponyfill';
|
||||
|
|
@ -182,7 +181,6 @@ export default (element) => {
|
|||
}
|
||||
}
|
||||
});
|
||||
Vue.use(VueMasonry);
|
||||
Vue.use(VueBlurHash);
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ export const ThumbnailHelperFunctions = () => {
|
|||
},
|
||||
getSrcSet(thumbnail, tainacanSize, documentType) {
|
||||
const defaultSrc = this.getSrc(thumbnail, tainacanSize, documentType);
|
||||
const retinaSrc = (thumbnail && thumbnail['full']) ? thumbnail['full'][0] : this.getEmptyThumbnailPlaceholder(documentType, 'full');
|
||||
const retinaSrc = this.getSrc(thumbnail, this.getRelativeRetinaSize(tainacanSize), documentType);
|
||||
return defaultSrc + ' 1x, ' + retinaSrc + ' 2x';
|
||||
},
|
||||
getWidth(thumbnail, tainacanSize, fallbackSizeValue) {
|
||||
|
|
@ -76,6 +76,7 @@ export const ThumbnailHelperFunctions = () => {
|
|||
},
|
||||
getEmptyThumbnailPlaceholderBySize(imageSrc, tainacanSize) {
|
||||
switch(tainacanSize) {
|
||||
case 'tainacan-large-full':
|
||||
case 'tainacan-medium-full':
|
||||
case 'tainacan-medium':
|
||||
case 'medium_large':
|
||||
|
|
@ -91,8 +92,9 @@ export const ThumbnailHelperFunctions = () => {
|
|||
},
|
||||
getWordpressFallbackSize(tainacanSize) {
|
||||
switch(tainacanSize) {
|
||||
case 'tainacan-large-full':
|
||||
case 'tainacan-medium-full':
|
||||
return 'medium_large';
|
||||
return 'medium_large';
|
||||
case 'tainacan-medium':
|
||||
return 'medium';
|
||||
case 'tainacan-small':
|
||||
|
|
@ -100,6 +102,17 @@ export const ThumbnailHelperFunctions = () => {
|
|||
default:
|
||||
return 'thumbnail';
|
||||
}
|
||||
},
|
||||
getRelativeRetinaSize(tainacanSize) {
|
||||
switch(tainacanSize) {
|
||||
case 'tainacan-medium-full':
|
||||
case 'tainacan-medium':
|
||||
return 'large';
|
||||
case 'tainacan-small':
|
||||
return 'tainacan-medium';
|
||||
default:
|
||||
return 'full';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -250,6 +250,10 @@ export default {
|
|||
}
|
||||
|
||||
.home-section {
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
margin-right: 25px;
|
||||
}
|
||||
|
||||
&.home-section-repository{
|
||||
position: relative;
|
||||
|
|
@ -260,7 +264,11 @@ export default {
|
|||
&.home-section-collection {
|
||||
position: relative;
|
||||
margin-left: 52px;
|
||||
margin-bottom: 80px;
|
||||
margin-bottom: 80px;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
padding-right: 0.75em;
|
||||
}
|
||||
}
|
||||
|
||||
.section-connector {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<!-- Mapping ------------------- -->
|
||||
<b-tab-item :label="$i18n.get('mapping')">
|
||||
<metadata-mapping-list
|
||||
<metadata-mapping-list
|
||||
v-if="activeTab == 1"
|
||||
:is-repository-level="isRepositoryLevel"/>
|
||||
</b-tab-item>
|
||||
|
|
|
|||
|
|
@ -10,24 +10,50 @@
|
|||
animation-name: item-appear;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&>div {
|
||||
&>ul {
|
||||
--column-count: 5;
|
||||
--column-gap: 25px;
|
||||
|
||||
width: calc(100% + var(--tainacan-container-padding)) !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 1.6em;
|
||||
row-gap: 25px;
|
||||
column-gap: var(--column-gap,25px);
|
||||
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(3),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(4),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(5),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(6),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(7),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(8),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(9),
|
||||
&>div>.tainacan-card:not(.always-visible-collections):nth-child(10) {
|
||||
display: none;
|
||||
}
|
||||
&>li {
|
||||
flex-basis: calc((100%/var(--column-count, 5)) - var(--column-gap,25px));
|
||||
min-width: calc((100%/var(--column-count, 5)) - var(--column-gap,25px));
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
&>div>.tainacan-card:nth-child(3),
|
||||
&>div>.tainacan-card:nth-child(4) {
|
||||
display: block;
|
||||
@media screen and (max-width: 1600px) {
|
||||
--column-count: 4;
|
||||
|
||||
&:not(.always-visible-collections):nth-child(9),
|
||||
&:not(.always-visible-collections):nth-child(10) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
--column-count: 3;
|
||||
|
||||
&:not(.always-visible-collections):nth-child(7),
|
||||
&:not(.always-visible-collections):nth-child(8) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
--column-count: 2;
|
||||
|
||||
&:not(.always-visible-collections):nth-child(5),
|
||||
&:not(.always-visible-collections):nth-child(6) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
--column-count: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,20 +61,12 @@
|
|||
.tainacan-card {
|
||||
background-color: var(--tainacan-gray1);
|
||||
padding: 0px;
|
||||
margin-top: 0.75em;
|
||||
margin-bottom: 1.6em;
|
||||
flex-basis: 0;
|
||||
min-height: 135px;
|
||||
cursor: pointer;
|
||||
text-decoration: none !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
max-width: 100%;
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
&:hover .menu-list {
|
||||
background-color: var(--tainacan-gray2);
|
||||
a { background-color: var(--tainacan-gray2); }
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.tainacan-cards-container {
|
||||
min-height: 50vh;
|
||||
padding: 0;
|
||||
height: auto !important;
|
||||
@include display-grid;
|
||||
-ms-grid-columns: 455px 455px;
|
||||
grid-template-columns: repeat(auto-fill, 455px);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.tainacan-grid-container {
|
||||
min-height: 50vh;
|
||||
height: auto !important;
|
||||
padding: 0;
|
||||
@include display-grid;
|
||||
grid-template-columns: repeat(auto-fill, 285px);
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.tainacan-list-container {
|
||||
min-height: 50vh;
|
||||
padding: 0;
|
||||
height: auto !important;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
flex-grow: 1;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.tainacan-masonry-container {
|
||||
min-height: 50vh;
|
||||
margin-left: 25px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -8,7 +9,54 @@
|
|||
justify-content: space-evenly;
|
||||
animation-name: appear;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&:not(.tainacan-masonry-container--legacy){
|
||||
&>li,
|
||||
&>.tainacan-masonry-grid-sizer {
|
||||
width: calc(14.285% - 25px);
|
||||
|
||||
@media screen and (max-width: 2560px) {
|
||||
width: calc(16.666% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
width: calc(20% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1740px) {
|
||||
width: calc(25% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
width: calc(33.333% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: calc(50% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
width: calc(100% - 25px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.tainacan-masonry-container--legacy {
|
||||
&>li,
|
||||
&>.tainacan-masonry-grid-sizer {
|
||||
width: calc(14.285% - 25px);
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
width: calc(16.666% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
width: calc(20% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
width: calc(25% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: calc(33.333% - 25px);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
width: calc(50% - 25px);
|
||||
}
|
||||
}
|
||||
}
|
||||
.tainacan-masonry-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
|
@ -140,5 +188,60 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.tainacan-masonry-container--skeleton {
|
||||
display: block;
|
||||
min-height: 50vh;
|
||||
padding-left: 25px;
|
||||
padding-right: 25px;
|
||||
column-gap: 25px;
|
||||
height: auto !important;
|
||||
|
||||
.skeleton {
|
||||
width: 100%;
|
||||
margin-bottom: 25px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
&:not(.tainacan-masonry-container--legacy) {
|
||||
column-count: 7;
|
||||
|
||||
@media screen and (max-width: 2560px) {
|
||||
column-count: 6;
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
column-count: 5;
|
||||
}
|
||||
@media screen and (max-width: 1740px) {
|
||||
column-count: 4;
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
column-count: 3;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
column-count: 2;
|
||||
}
|
||||
@media screen and (max-width: 620px) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
&.tainacan-masonry-container--legacy {
|
||||
column-count: 7;
|
||||
|
||||
@media screen and (max-width: 1920px) {
|
||||
column-count: 6;
|
||||
}
|
||||
@media screen and (max-width: 1440px) {
|
||||
column-count: 5;
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
column-count: 4;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
column-count: 3;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,6 +9,23 @@
|
|||
animation-name: appear;
|
||||
animation-duration: 0.5s;
|
||||
|
||||
&>li,
|
||||
.tainacan-records-grid-sizer {
|
||||
width: calc(20% - 30px);
|
||||
|
||||
@media screen and (max-width: 2560px) {
|
||||
width: calc(25% - 30px);
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
width: calc(33.333% - 30px);
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
width: calc(50% - 30px);
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.tainacan-record {
|
||||
background-color: rgba(126, 126, 126, 0.05);
|
||||
padding: 0px;
|
||||
|
|
@ -186,5 +203,34 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
.tainacan-records-container--skeleton {
|
||||
display: block;
|
||||
min-height: 50vh;
|
||||
padding-left: 30px;
|
||||
padding-right: 30px;
|
||||
column-gap: 30px;
|
||||
height: auto !important;
|
||||
column-count: 5;
|
||||
|
||||
.skeleton {
|
||||
width: 100%;
|
||||
margin-bottom: 30px;
|
||||
break-inside: avoid;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 2560px) {
|
||||
column-count: 4;
|
||||
}
|
||||
@media screen and (max-width: 1920px) {
|
||||
column-count: 3;
|
||||
}
|
||||
@media screen and (max-width: 1360px) {
|
||||
column-count: 2;
|
||||
}
|
||||
@media screen and (max-width: 1024px) {
|
||||
column-count: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -33,91 +33,91 @@
|
|||
"selector": "div"
|
||||
},
|
||||
"collections": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"selectedCollections": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": false
|
||||
},
|
||||
"maxCollectionsNumber": {
|
||||
"type": "Number",
|
||||
"value": false
|
||||
"type": "number",
|
||||
"default": false
|
||||
},
|
||||
"maxCollectionsPerScreen": {
|
||||
"type": "Number",
|
||||
"value": 6
|
||||
"type": "number",
|
||||
"default": 6
|
||||
},
|
||||
"spaceBetweenCollections": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
"type": "number",
|
||||
"default": 32
|
||||
},
|
||||
"spaceAroundCarousel": {
|
||||
"type": "Number",
|
||||
"value": 50
|
||||
"type": "number",
|
||||
"default": 50
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"arrowsPosition": {
|
||||
"type": "String",
|
||||
"value": "around"
|
||||
"type": "string",
|
||||
"default": "around"
|
||||
},
|
||||
"largeArrows": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"arrowsStyle": {
|
||||
"type": "String",
|
||||
"value": "type-1"
|
||||
"type": "string",
|
||||
"default": "type-1"
|
||||
},
|
||||
"autoPlay": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"autoPlaySpeed": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"loopSlides": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideName": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showCollectionThumbnail": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"default": "tainacan-medium"
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,157 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated on 0.19 to replace cropImagesToSquare by imageSize feature */
|
||||
{
|
||||
migrate( attributes ) {
|
||||
if (attributes.cropImagesToSquare == true)
|
||||
attributes.imageSize = 'tainacan-medium';
|
||||
else
|
||||
attributes.imageSize = 'tainacan-medium-full';
|
||||
|
||||
return attributes;
|
||||
},
|
||||
attributes: {
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collections": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"selectedCollections": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": false
|
||||
},
|
||||
"maxCollectionsNumber": {
|
||||
"type": "Number",
|
||||
"value": false
|
||||
},
|
||||
"maxCollectionsPerScreen": {
|
||||
"type": "Number",
|
||||
"value": 6
|
||||
},
|
||||
"spaceBetweenCollections": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
},
|
||||
"spaceAroundCarousel": {
|
||||
"type": "Number",
|
||||
"value": 50
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsPosition": {
|
||||
"type": "String",
|
||||
"value": "around"
|
||||
},
|
||||
"largeArrows": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsStyle": {
|
||||
"type": "String",
|
||||
"value": "type-1"
|
||||
},
|
||||
"autoPlay": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"autoPlaySpeed": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"loopSlides": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"hideName": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
},
|
||||
"showCollectionThumbnail": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
}
|
||||
},
|
||||
save: function ({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
selectedCollections,
|
||||
arrowsPosition,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
maxCollectionsPerScreen,
|
||||
maxCollectionsNumber,
|
||||
spaceBetweenCollections,
|
||||
spaceAroundCarousel,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideName,
|
||||
showCollectionThumbnail
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="carousel-collections-list"
|
||||
selected-collections={ JSON.stringify(selectedCollections.map((collection) => { return collection.id })) }
|
||||
arrows-position={ arrowsPosition }
|
||||
auto-play={ '' + autoPlay }
|
||||
auto-play-speed={ autoPlaySpeed }
|
||||
loop-slides={ '' + loopSlides }
|
||||
hide-name={ '' + hideName }
|
||||
large-arrows={ '' + largeArrows }
|
||||
arrows-style={ arrowsStyle }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
max-collections-number={ maxCollectionsNumber }
|
||||
max-collections-per-screen={ maxCollectionsPerScreen }
|
||||
space-between-collections={ spaceBetweenCollections }
|
||||
space-around-carousel={ spaceAroundCarousel }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
show-collection-thumbnail={ '' + showCollectionThumbnail }
|
||||
id={ 'wp-block-tainacan-carousel-collections-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
|||
|
|
@ -1,9 +1,13 @@
|
|||
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
const { useSelect } = wp.data;
|
||||
|
||||
import map from 'lodash/map'; // Do not user import { map,pick } from 'lodash'; -> These causes conflicts with underscore due to lodash global variable
|
||||
import pick from 'lodash/pick';
|
||||
import CarouselCollectionsModal from './carousel-collections-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
|
|
@ -24,7 +28,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
selectedCollections,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
imageSize,
|
||||
maxCollectionsPerScreen,
|
||||
spaceBetweenCollections,
|
||||
spaceAroundCarousel,
|
||||
|
|
@ -48,13 +52,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
maxCollectionsPerScreen = 6;
|
||||
setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
if (imageSize === undefined) {
|
||||
imageSize = 'tainacan-medium';
|
||||
setAttributes({ imageSize: imageSize });
|
||||
}
|
||||
|
||||
const thumbHelper = ThumbnailHelperFunctions();
|
||||
|
||||
// Get available image sizes
|
||||
const { imageSizes } = useSelect(
|
||||
( select ) => {
|
||||
const { getSettings } = select( store );
|
||||
|
||||
const settings = pick( getSettings(), [
|
||||
'imageSizes'
|
||||
] );
|
||||
return settings
|
||||
},
|
||||
[ clientId ]
|
||||
);
|
||||
const imageSizeOptions = map(
|
||||
imageSizes,
|
||||
( { name, slug } ) => ( { value: slug, label: name } )
|
||||
);
|
||||
|
||||
function prepareItem(collection, collectionItems) {
|
||||
return (
|
||||
<li
|
||||
|
|
@ -77,24 +98,24 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
{ ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
|
||||
<div class="collection-items-grid">
|
||||
<img
|
||||
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], 'tainacan-medium', collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
src={ collectionItems[0] ? thumbHelper.getSrc(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[0] ? thumbHelper.getSrcSet(collectionItems[0]['thumbnail'], imageSize, collectionItems[0]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
|
||||
<img
|
||||
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], 'tainacan-medium', collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
src={ collectionItems[1] ? thumbHelper.getSrc(collectionItems[1]['thumbnail'], imageSize, collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[1] ? thumbHelper.getSrcSet(collectionItems[1]['thumbnail'], imageSize, collectionItems[1]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
|
||||
<img
|
||||
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], 'tainacan-medium', collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
src={ collectionItems[2] ? thumbHelper.getSrc(collectionItems[2]['thumbnail'], imageSize, collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
srcSet={ collectionItems[2] ? thumbHelper.getSrcSet(collectionItems[2]['thumbnail'], imageSize, collectionItems[2]['document_mimetype']) :`${tainacan_blocks.base_url}/assets/images/placeholder_square.png` }
|
||||
alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
|
||||
</div>
|
||||
:
|
||||
<img
|
||||
src={
|
||||
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
|
|
@ -237,34 +258,31 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
</BaseControl>
|
||||
<RangeControl
|
||||
label={ __('Maximum collections per slide on a wide screen', 'tainacan') }
|
||||
help={ (showCollectionThumbnail && maxCollectionsPerScreen <= 4) ? __('Warning: with such a small number of collections per slide, the image size is greater, thus the cropped version of the thumbnail won\'t be used.', 'tainacan') : null }
|
||||
help={ (showCollectionThumbnail && maxCollectionsPerScreen <= 4) ? __('Warning: with such a small number of collections per slide, the slide item is larger, thus you must also set a larger image size.', 'tainacan') : null }
|
||||
value={ maxCollectionsPerScreen ? maxCollectionsPerScreen : 6 }
|
||||
onChange={ ( aMaxCollectionsPerScreen ) => {
|
||||
maxCollectionsPerScreen = aMaxCollectionsPerScreen;
|
||||
maxCollectionsPerScreen = Number(aMaxCollectionsPerScreen);
|
||||
setAttributes( { maxCollectionsPerScreen: aMaxCollectionsPerScreen } );
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 9 }
|
||||
/>
|
||||
{ showCollectionThumbnail ?
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare && maxCollectionsPerScreen > 4 ? __('Do not use square cropeed version of the collection thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the collection thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare && maxCollectionsPerScreen > 4 }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
: null }
|
||||
<SelectControl
|
||||
label={__('Image size', 'tainacan')}
|
||||
value={ imageSize }
|
||||
options={ imageSizeOptions }
|
||||
onChange={ ( anImageSize ) => {
|
||||
imageSize = anImageSize;
|
||||
setAttributes({ imageSize: imageSize });
|
||||
setContent();
|
||||
}}
|
||||
/>
|
||||
<RangeControl
|
||||
label={ __('Space between each collection', 'tainacan') }
|
||||
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 }
|
||||
onChange={ ( aSpaceBetweenCollections ) => {
|
||||
spaceBetweenCollections = aSpaceBetweenCollections;
|
||||
spaceBetweenCollections = Number(aSpaceBetweenCollections);
|
||||
setAttributes( { spaceBetweenCollections: aSpaceBetweenCollections } );
|
||||
}}
|
||||
min={ 0 }
|
||||
|
|
@ -307,7 +325,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
label={__('Seconds before transitioning to next', 'tainacan')}
|
||||
value={ autoPlaySpeed ? autoPlaySpeed : 3 }
|
||||
onChange={ ( aAutoPlaySpeed ) => {
|
||||
autoPlaySpeed = aAutoPlaySpeed;
|
||||
autoPlaySpeed = Number(aAutoPlaySpeed);
|
||||
setAttributes( { autoPlaySpeed: aAutoPlaySpeed } )
|
||||
}}
|
||||
min={ 1 }
|
||||
|
|
@ -352,7 +370,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
|
|||
label={ __('Space around the carousel', 'tainacan') }
|
||||
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
|
||||
onChange={ ( aSpaceAroundCarousel ) => {
|
||||
spaceAroundCarousel = aSpaceAroundCarousel;
|
||||
spaceAroundCarousel = Number(aSpaceAroundCarousel);
|
||||
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
|
||||
}}
|
||||
min={ 0 }
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ export default function ({ attributes, className }) {
|
|||
arrowsPosition,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
cropImagesToSquare,
|
||||
imageSize,
|
||||
maxCollectionsPerScreen,
|
||||
maxCollectionsNumber,
|
||||
spaceBetweenCollections,
|
||||
|
|
@ -33,7 +33,7 @@ export default function ({ attributes, className }) {
|
|||
hide-name={ '' + hideName }
|
||||
large-arrows={ '' + largeArrows }
|
||||
arrows-style={ arrowsStyle }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
image-size={ imageSize }
|
||||
max-collections-number={ maxCollectionsNumber }
|
||||
max-collections-per-screen={ maxCollectionsPerScreen }
|
||||
space-between-collections={ spaceBetweenCollections }
|
||||
|
|
|
|||
|
|
@ -161,6 +161,7 @@
|
|||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.swiper-slide-duplicate img {
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ export default (element) => {
|
|||
maxCollectionsPerScreen: 6,
|
||||
spaceBetweenCollections: 32,
|
||||
spaceAroundCarousel: 50,
|
||||
cropImagesToSquare: true,
|
||||
imageSize: 'tainacan-medium',
|
||||
loopSlides: false,
|
||||
hideName: true,
|
||||
showCollectionThumbnail: false,
|
||||
|
|
@ -57,7 +57,7 @@ export default (element) => {
|
|||
loopSlides: this.loopSlides,
|
||||
largeArrows: this.largeArrows,
|
||||
arrowsStyle: this.arrowsStyle,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
imageSize: this.imageSize,
|
||||
maxCollectionsPerScreen: this.maxCollectionsPerScreen,
|
||||
spaceBetweenCollections: this.spaceBetweenCollections,
|
||||
spaceAroundCarousel: this.spaceAroundCarousel,
|
||||
|
|
@ -83,7 +83,7 @@ export default (element) => {
|
|||
this.arrowsStyle = this.$el.attributes['arrows-style'] != undefined ? this.$el.attributes['arrows-style'].value : undefined;
|
||||
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.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -39,22 +39,22 @@
|
|||
:href="collection.url">
|
||||
<img
|
||||
:src="
|
||||
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
|
||||
"
|
||||
:data-src="
|
||||
collection.thumbnail && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0] && collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail && collection.thumbnail[imageSize] && collection.thumbnail[imageSize][0]
|
||||
?
|
||||
collection.thumbnail[maxCollectionsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'full'][0]
|
||||
collection.thumbnail[imageSize][0]
|
||||
:
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'][0] && collection.thumbnail['thumbnail'][0]
|
||||
(collection.thumbnail && collection.thumbnail['thumbnail'] && collection.thumbnail['thumbnail'][0]
|
||||
?
|
||||
collection.thumbnail['thumbnail'][0]
|
||||
:
|
||||
|
|
@ -69,27 +69,27 @@
|
|||
:href="collection.url">
|
||||
<div class="collection-items-grid">
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][0] ? $thumbHelper.getWidth(collectionItems[collection.id][0]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][0] ? $thumbHelper.getSrc(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][0] ? $thumbHelper.getSrcSet(collectionItems[collection.id][0]['thumbnail'], imageSize, collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][0] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][0]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][0] && collectionItems[collection.id][0].thumbnail_alt ? collectionItems[collection.id][0].thumbnail_alt : (collectionItems[collection.id][0] && collectionItems[collection.id][0].name ? collectionItems[collection.id][0].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][1] ? $thumbHelper.getWidth(collectionItems[collection.id][1]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][1] ? $thumbHelper.getSrc(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][1] ? $thumbHelper.getSrcSet(collectionItems[collection.id][1]['thumbnail'], imageSize, collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][1] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][1]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][1] && collectionItems[collection.id][1].thumbnail_alt ? collectionItems[collection.id][1].thumbnail_alt : (collectionItems[collection.id][1] && collectionItems[collection.id][1].name ? collectionItems[collection.id][1].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<blur-hash-image
|
||||
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 275"
|
||||
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium', collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:width="collectionItems[collection.id][2] ? $thumbHelper.getWidth(collectionItems[collection.id][2]['thumbnail'], imageSize) : 275"
|
||||
:src="collectionItems[collection.id][2] ? $thumbHelper.getSrc(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:srcset="collectionItems[collection.id][2] ? $thumbHelper.getSrcSet(collectionItems[collection.id][2]['thumbnail'], imageSize, collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`"
|
||||
:hash="collectionItems[collection.id][2] ? $thumbHelper.getBlurhashString(collectionItems[collection.id][2]['thumbnail'], imageSize) : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'"
|
||||
:alt="collectionItems[collection.id][2] && collectionItems[collection.id][2].thumbnail_alt ? collectionItems[collection.id][2].thumbnail_alt : (collectionItems[collection.id][2] && collectionItems[collection.id][2].name ? collectionItems[collection.id][2].name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
</div>
|
||||
|
|
@ -172,7 +172,7 @@ export default {
|
|||
hideName: Boolean,
|
||||
largeArrows: Boolean,
|
||||
arrowsStyle: String,
|
||||
cropImagesToSquare: Boolean,
|
||||
imageSize: String,
|
||||
showCollectionThumbnail: Boolean,
|
||||
tainacanApiRoot: String,
|
||||
tainacanBaseUrl: String,
|
||||
|
|
|
|||
|
|
@ -19,111 +19,111 @@
|
|||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
"type": "number",
|
||||
"default": 12
|
||||
},
|
||||
"maxItemsPerScreen": {
|
||||
"type": "Number",
|
||||
"value": 7
|
||||
"type": "number",
|
||||
"default": 7
|
||||
},
|
||||
"spaceBetweenItems": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
"type": "number",
|
||||
"default": 32
|
||||
},
|
||||
"spaceAroundCarousel": {
|
||||
"type": "Number",
|
||||
"value": 50
|
||||
"type": "number",
|
||||
"default": 50
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
"type": "string",
|
||||
"default": "search"
|
||||
},
|
||||
"arrowsPosition": {
|
||||
"type": "String",
|
||||
"value": "around"
|
||||
"type": "string",
|
||||
"default": "around"
|
||||
},
|
||||
"largeArrows": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"arrowsStyle": {
|
||||
"type": "String",
|
||||
"value": "type-1"
|
||||
"type": "string",
|
||||
"default": "type-1"
|
||||
},
|
||||
"autoPlay": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"autoPlaySpeed": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"loopSlides": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"hideTitle": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"default": "tainacan-medium"
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
"type": "object",
|
||||
"default": {}
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,6 +1,192 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated on 0.19 to replace cropImagesToSquare by imageSize feature */
|
||||
{
|
||||
migrate( attributes ) {
|
||||
if (attributes.cropImagesToSquare == true)
|
||||
attributes.imageSize = 'tainacan-medium';
|
||||
else
|
||||
attributes.imageSize = 'tainacan-medium-full';
|
||||
|
||||
if ( isNaN(attributes.maxItemsNumber) )
|
||||
attributes.maxItemsNumber = 12;
|
||||
|
||||
return attributes;
|
||||
},
|
||||
attributes: {
|
||||
"content": {
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
},
|
||||
"maxItemsPerScreen": {
|
||||
"type": "Number",
|
||||
"value": 7
|
||||
},
|
||||
"spaceBetweenItems": {
|
||||
"type": "Number",
|
||||
"value": 32
|
||||
},
|
||||
"spaceAroundCarousel": {
|
||||
"type": "Number",
|
||||
"value": 50
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
},
|
||||
"arrowsPosition": {
|
||||
"type": "String",
|
||||
"value": "around"
|
||||
},
|
||||
"largeArrows": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"arrowsStyle": {
|
||||
"type": "String",
|
||||
"value": "type-1"
|
||||
},
|
||||
"autoPlay": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"autoPlaySpeed": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"loopSlides": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"hideTitle": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
}
|
||||
},
|
||||
save: function ({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
searchURL,
|
||||
selectedItems,
|
||||
arrowsPosition,
|
||||
largeArrows,
|
||||
arrowsStyle,
|
||||
loadStrategy,
|
||||
maxItemsNumber,
|
||||
maxItemsPerScreen,
|
||||
spaceBetweenItems,
|
||||
spaceAroundCarousel,
|
||||
autoPlay,
|
||||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideTitle,
|
||||
cropImagesToSquare,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="carousel-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
arrows-position={ arrowsPosition }
|
||||
load-strategy={ loadStrategy }
|
||||
collection-id={ collectionId }
|
||||
auto-play={ '' + autoPlay }
|
||||
auto-play-speed={ autoPlaySpeed }
|
||||
loop-slides={ '' + loopSlides }
|
||||
hide-title={ '' + hideTitle }
|
||||
large-arrows={ '' + largeArrows }
|
||||
arrows-style={ arrowsStyle }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
max-items-number={ maxItemsNumber }
|
||||
max-items-per-screen={ maxItemsPerScreen }
|
||||
space-between-items={ spaceBetweenItems }
|
||||
space-around-carousel={ spaceAroundCarousel }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-carousel-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@ const { __ } = wp.i18n;
|
|||
|
||||
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPalette, BaseControl, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
const { useSelect } = wp.data;
|
||||
|
||||
import map from 'lodash/map'; // Do not user import { map,pick } from 'lodash'; -> These causes conflicts with underscore due to lodash global variable
|
||||
import pick from 'lodash/pick';
|
||||
import CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
|
|
@ -38,7 +42,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideTitle,
|
||||
cropImagesToSquare,
|
||||
imageSize,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
isLoadingCollection,
|
||||
|
|
@ -59,16 +63,37 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
maxItemsPerScreen = 7;
|
||||
setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
if (maxItemsNumber === undefined) {
|
||||
maxItemsNumber = 12;
|
||||
setAttributes({ maxItemsNumber: maxItemsNumber });
|
||||
}
|
||||
if (imageSize === undefined) {
|
||||
imageSize = 'tainacan-medium';
|
||||
setAttributes({ imageSize: imageSize });
|
||||
}
|
||||
|
||||
// Get available image sizes
|
||||
const { imageSizes } = useSelect(
|
||||
( select ) => {
|
||||
const { getSettings } = select( store );
|
||||
|
||||
const settings = pick( getSettings(), [
|
||||
'imageSizes'
|
||||
] );
|
||||
return settings
|
||||
},
|
||||
[ clientId ]
|
||||
);
|
||||
const imageSizeOptions = map(
|
||||
imageSizes,
|
||||
( { name, slug } ) => ( { value: slug, label: name } )
|
||||
);
|
||||
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
<li
|
||||
key={ item.id }
|
||||
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (cropImagesToSquare ? ' is-forced-square' : '') }>
|
||||
className={ 'swiper-slide item-list-item ' + (maxItemsPerScreen ? ' max-itens-per-screen-' + maxItemsPerScreen : '') + (['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 ? ' is-forced-square' : '') }>
|
||||
{ loadStrategy == 'selection' ?
|
||||
( tainacan_blocks.wp_version < '5.4' ?
|
||||
<IconButton
|
||||
|
|
@ -88,8 +113,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
href={ item.url }>
|
||||
<div class="items-list-item--image-wrap">
|
||||
<img
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype']) }
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
|
||||
</div>
|
||||
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null }
|
||||
|
|
@ -155,7 +180,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
if (maxItemsNumber != undefined && maxItemsNumber > 0)
|
||||
queryObject.perpage = maxItemsNumber;
|
||||
else if (queryObject.perpage != undefined && queryObject.perpage > 0)
|
||||
setAttributes({ maxItemsNumber: queryObject.perpage });
|
||||
setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
|
||||
else {
|
||||
queryObject.perpage = 12;
|
||||
setAttributes({ maxItemsNumber: 12 });
|
||||
|
|
@ -365,7 +390,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
help={ maxItemsPerScreen <= 4 ? __('Warning: with such a small number of items per slide, the image size is greater, thus the cropped version of the thumbnail won\'t be used.', 'tainacan') : null }
|
||||
value={ maxItemsPerScreen ? maxItemsPerScreen : 7 }
|
||||
onChange={ ( aMaxItemsPerScreen ) => {
|
||||
maxItemsPerScreen = aMaxItemsPerScreen;
|
||||
maxItemsPerScreen = Number(aMaxItemsPerScreen);
|
||||
setAttributes( { maxItemsPerScreen: aMaxItemsPerScreen } );
|
||||
setContent();
|
||||
}}
|
||||
|
|
@ -374,22 +399,21 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
/>
|
||||
: null
|
||||
}
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
<SelectControl
|
||||
label={__('Image size', 'tainacan')}
|
||||
value={ imageSize }
|
||||
options={ imageSizeOptions }
|
||||
onChange={ ( anImageSize ) => {
|
||||
imageSize = anImageSize;
|
||||
setAttributes({ imageSize: imageSize });
|
||||
setContent();
|
||||
}}
|
||||
/>
|
||||
<RangeControl
|
||||
label={ __('Space between each item', 'tainacan') }
|
||||
value={ !isNaN(spaceBetweenItems) ? spaceBetweenItems : 32 }
|
||||
onChange={ ( aSpaceBetweenItems ) => {
|
||||
spaceBetweenItems = aSpaceBetweenItems;
|
||||
spaceBetweenItems = Number(aSpaceBetweenItems);
|
||||
setAttributes( { spaceBetweenItems: aSpaceBetweenItems } );
|
||||
}}
|
||||
min={ 0 }
|
||||
|
|
@ -478,7 +502,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
label={ __('Space around the carousel', 'tainacan') }
|
||||
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
|
||||
onChange={ ( aSpaceAroundCarousel ) => {
|
||||
spaceAroundCarousel = aSpaceAroundCarousel;
|
||||
spaceAroundCarousel = Number(aSpaceAroundCarousel);
|
||||
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
|
||||
}}
|
||||
min={ 0 }
|
||||
|
|
@ -497,7 +521,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
label={__('Maximum number of items to load', 'tainacan')}
|
||||
value={ maxItemsNumber }
|
||||
onChange={ ( aMaxItemsNumber ) => {
|
||||
maxItemsNumber = aMaxItemsNumber;
|
||||
maxItemsNumber = Number(aMaxItemsNumber);
|
||||
setAttributes( { maxItemsNumber: aMaxItemsNumber } )
|
||||
setContent();
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ export default function ({ attributes, className }) {
|
|||
autoPlaySpeed,
|
||||
loopSlides,
|
||||
hideTitle,
|
||||
cropImagesToSquare,
|
||||
imageSize,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
|
|
@ -42,7 +42,7 @@ export default function ({ attributes, className }) {
|
|||
hide-title={ '' + hideTitle }
|
||||
large-arrows={ '' + largeArrows }
|
||||
arrows-style={ arrowsStyle }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
image-size={ imageSize }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
|
|
|
|||
|
|
@ -173,6 +173,7 @@
|
|||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
.is-forced-square>a>div {
|
||||
padding-bottom: 100% !important;
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default (element) => {
|
|||
autoPlaySpeed: 3,
|
||||
loopSlides: false,
|
||||
hideTitle: true,
|
||||
cropImagesToSquare: true,
|
||||
imageSize: 'tainacan-medium',
|
||||
showCollectionHeader: false,
|
||||
showCollectionLabel: false,
|
||||
collectionBackgroundColor: '#454647',
|
||||
|
|
@ -70,7 +70,7 @@ export default (element) => {
|
|||
autoPlaySpeed: this.autoPlaySpeed,
|
||||
loopSlides: this.loopSlides,
|
||||
hideTitle: this.hideTitle,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
imageSize: this.imageSize,
|
||||
showCollectionHeader: this.showCollectionHeader,
|
||||
showCollectionLabel: this.showCollectionLabel,
|
||||
collectionBackgroundColor: this.collectionBackgroundColor,
|
||||
|
|
@ -99,7 +99,7 @@ export default (element) => {
|
|||
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.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -84,16 +84,16 @@
|
|||
:key="index"
|
||||
v-for="(item, index) of items"
|
||||
class="swiper-slide item-list-item"
|
||||
:class="{ 'is-forced-square': cropImagesToSquare }">
|
||||
:class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
|
||||
<a
|
||||
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
|
||||
:href="item.url">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
|
||||
|
|
@ -178,7 +178,7 @@ export default {
|
|||
autoPlaySpeed: Number,
|
||||
loopSlides: Boolean,
|
||||
hideTitle: Boolean,
|
||||
cropImagesToSquare: Boolean,
|
||||
imageSize: String,
|
||||
showCollectionHeader: Boolean,
|
||||
showCollectionLabel: Boolean,
|
||||
collectionBackgroundColor: String,
|
||||
|
|
|
|||
|
|
@ -161,6 +161,7 @@
|
|||
a:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.swiper-slide-duplicate img {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
border: none;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
|
|
|
|||
|
|
@ -14,136 +14,136 @@
|
|||
},
|
||||
"attributes": {
|
||||
"content": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
"type": "number",
|
||||
"default": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
"type": "boolean",
|
||||
"default": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
"type": "object",
|
||||
"default": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"type": "array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
"type": "string",
|
||||
"default": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "Number",
|
||||
"value": 280
|
||||
"type": "number",
|
||||
"default": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
"type": "number",
|
||||
"default": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "String",
|
||||
"type": "string",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "Object",
|
||||
"type": "object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "Number",
|
||||
"type": "number",
|
||||
"default": 4
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
"imageSize": {
|
||||
"type": "string",
|
||||
"default": "tainacan-medium"
|
||||
}
|
||||
},
|
||||
"supports": {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,216 @@
|
|||
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
export default [
|
||||
/* Deprecated on 0.19 to replace cropImagesToSquare by imageSize feature */
|
||||
{
|
||||
migrate( attributes ) {
|
||||
if (attributes.cropImagesToSquare == true)
|
||||
attributes.imageSize = 'tainacan-medium';
|
||||
else
|
||||
attributes.imageSize = 'tainacan-medium-full';
|
||||
|
||||
if ( isNaN(attributes.maxItemsNumber) )
|
||||
attributes.maxItemsNumber = 12;
|
||||
|
||||
return attributes;
|
||||
},
|
||||
attributes: {
|
||||
"content": {
|
||||
"type": "Array",
|
||||
"source": "children",
|
||||
"selector": "div"
|
||||
},
|
||||
"collectionId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"items": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"showImage": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"showName": {
|
||||
"type": "Boolean",
|
||||
"default": true
|
||||
},
|
||||
"layout": {
|
||||
"type": "String",
|
||||
"default": "grid"
|
||||
},
|
||||
"isModalOpen": {
|
||||
"type": "Boolean",
|
||||
"default": false
|
||||
},
|
||||
"gridMargin": {
|
||||
"type": "Number",
|
||||
"default": 0
|
||||
},
|
||||
"searchURL": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"itemsRequestSource": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"maxItemsNumber": {
|
||||
"type": "Number",
|
||||
"value": 12
|
||||
},
|
||||
"isLoading": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"isLoadingCollection": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showSearchBar": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionHeader": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"showCollectionLabel": {
|
||||
"type": "Boolean",
|
||||
"value": false
|
||||
},
|
||||
"collection": {
|
||||
"type": "Object",
|
||||
"value": {}
|
||||
},
|
||||
"searchString": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"selectedItems": {
|
||||
"type": "Array",
|
||||
"default": []
|
||||
},
|
||||
"loadStrategy": {
|
||||
"type": "String",
|
||||
"value": "search"
|
||||
},
|
||||
"order": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"blockId": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"collectionBackgroundColor": {
|
||||
"type": "String",
|
||||
"default": "#454647"
|
||||
},
|
||||
"collectionTextColor": {
|
||||
"type": "String",
|
||||
"default": "#ffffff"
|
||||
},
|
||||
"mosaicHeight": {
|
||||
"type": "Number",
|
||||
"value": 280
|
||||
},
|
||||
"mosaicGridColumns": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"mosaicGridRows": {
|
||||
"type": "Number",
|
||||
"value": 3
|
||||
},
|
||||
"sampleBackgroundImage": {
|
||||
"type": "String",
|
||||
"default": ""
|
||||
},
|
||||
"mosaicItemFocalPoint": {
|
||||
"type": "Object",
|
||||
"default": {
|
||||
"x": 0.5,
|
||||
"y": 0.5
|
||||
}
|
||||
},
|
||||
"mosaicDensity": {
|
||||
"type": "Number",
|
||||
"default": 5
|
||||
},
|
||||
"maxColumnsCount": {
|
||||
"type": "Number",
|
||||
"default": 4
|
||||
},
|
||||
"cropImagesToSquare": {
|
||||
"type": "Boolean",
|
||||
"value": true
|
||||
}
|
||||
},
|
||||
save: function({ attributes, className }) {
|
||||
const {
|
||||
content,
|
||||
blockId,
|
||||
collectionId,
|
||||
loadStrategy,
|
||||
selectedItems,
|
||||
showImage,
|
||||
showName,
|
||||
layout,
|
||||
gridMargin,
|
||||
searchURL,
|
||||
maxItemsNumber,
|
||||
order,
|
||||
showSearchBar,
|
||||
showCollectionHeader,
|
||||
showCollectionLabel,
|
||||
collectionBackgroundColor,
|
||||
collectionTextColor,
|
||||
mosaicHeight,
|
||||
mosaicGridRows,
|
||||
mosaicGridColumns,
|
||||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
|
||||
return <div
|
||||
{ ...blockProps }
|
||||
data-module="dynamic-items-list"
|
||||
search-url={ searchURL }
|
||||
selected-items={ JSON.stringify(selectedItems) }
|
||||
collection-id={ collectionId }
|
||||
show-image={ '' + showImage }
|
||||
show-name={ '' + showName }
|
||||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
mosaic-density={ mosaicDensity }
|
||||
mosaic-grid-rows={ mosaicGridRows }
|
||||
mosaic-grid-columns={ mosaicGridColumns }
|
||||
mosaic-item-focal-point-x={ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) }
|
||||
mosaic-item-focal-point-y={ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) }
|
||||
max-columns-count={ maxColumnsCount }
|
||||
collection-background-color={ collectionBackgroundColor }
|
||||
collection-text-color={ collectionTextColor }
|
||||
grid-margin={ gridMargin }
|
||||
max-items-number={ maxItemsNumber }
|
||||
order={ order }
|
||||
tainacan-api-root={ tainacan_blocks.root }
|
||||
tainacan-base-url={ tainacan_blocks.base_url }
|
||||
id={ 'wp-block-tainacan-dynamic-items-list_' + blockId }>
|
||||
{ content }
|
||||
</div>
|
||||
}
|
||||
},
|
||||
/* Deprecated to fix the selection strategy on 0.18.7 */
|
||||
{
|
||||
"attributes": {
|
||||
|
|
|
|||
|
|
@ -2,8 +2,12 @@ const { __ } = wp.i18n;
|
|||
|
||||
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components;
|
||||
|
||||
const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
const { InspectorControls, BlockControls, useBlockProps, store } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
|
||||
|
||||
const { useSelect } = wp.data;
|
||||
|
||||
import map from 'lodash/map'; // Do not user import { map,pick } from 'lodash'; -> These causes conflicts with underscore due to lodash global variable
|
||||
import pick from 'lodash/pick';
|
||||
import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
|
||||
import tainacan from '../../js/axios.js';
|
||||
import axios from 'axios';
|
||||
|
|
@ -44,7 +48,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
sampleBackgroundImage,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets blocks props from hook
|
||||
|
|
@ -59,15 +63,60 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
maxColumnsCount = 5;
|
||||
setAttributes({ maxColumnsCount: maxColumnsCount });
|
||||
}
|
||||
if (cropImagesToSquare === undefined) {
|
||||
cropImagesToSquare = true;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
if (maxItemsNumber === undefined) {
|
||||
maxItemsNumber = 12;
|
||||
setAttributes({ maxItemsNumber: maxItemsNumber });
|
||||
}
|
||||
if (loadStrategy === undefined) {
|
||||
loadStrategy = 'search';
|
||||
setAttributes({ loadStrategy: loadStrategy });
|
||||
}
|
||||
|
||||
if (mosaicGridRows === undefined) {
|
||||
mosaicGridRows = 3;
|
||||
setAttributes({ mosaicGridRows: mosaicGridRows });
|
||||
}
|
||||
if (imageSize === undefined) {
|
||||
imageSize = 'tainacan-medium';
|
||||
setAttributes({ imageSize: imageSize });
|
||||
}
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
},
|
||||
{
|
||||
icon: 'layout',
|
||||
title: __( 'Mosaic View', 'tainacan' ),
|
||||
onClick: () => updateLayout('mosaic'),
|
||||
isActive: layout === 'mosaic',
|
||||
}
|
||||
];
|
||||
|
||||
// Get available image sizes
|
||||
const { imageSizes } = useSelect(
|
||||
( select ) => {
|
||||
const { getSettings } = select( store );
|
||||
|
||||
const settings = pick( getSettings(), [
|
||||
'imageSizes'
|
||||
] );
|
||||
return settings
|
||||
},
|
||||
[ clientId ]
|
||||
);
|
||||
const imageSizeOptions = map(
|
||||
imageSizes,
|
||||
( { name, slug } ) => ( { value: slug, label: name } )
|
||||
);
|
||||
function prepareItem(item) {
|
||||
return (
|
||||
<li
|
||||
|
|
@ -98,8 +147,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
onClick={ (event) => event.preventDefault() }
|
||||
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
|
||||
<img
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), item['document_mimetype']) }
|
||||
src={ thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype']) }
|
||||
srcSet={ thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype']) }
|
||||
alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
|
||||
{ item.title ?
|
||||
<span>{ item.title }</span>
|
||||
|
|
@ -152,10 +201,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
|
||||
} else {
|
||||
// Initializes some variables
|
||||
mosaicDensity = mosaicDensity ? mosaicDensity : 5;
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 280;
|
||||
mosaicDensity = mosaicDensity ? Number(mosaicDensity) : 5;
|
||||
mosaicGridRows = mosaicGridRows ? Number(mosaicGridRows) : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? Number(mosaicGridColumnsRows) : 3;
|
||||
mosaicHeight = mosaicHeight ? Number(mosaicHeight) : 280;
|
||||
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
|
||||
sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
|
||||
|
||||
|
|
@ -203,10 +252,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
|
||||
} else {
|
||||
// Initializes some variables
|
||||
mosaicDensity = mosaicDensity ? mosaicDensity : 5;
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 280;
|
||||
mosaicDensity = mosaicDensity ? Number(mosaicDensity) : 5;
|
||||
mosaicGridRows = mosaicGridRows ? Number(mosaicGridRows) : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? Number(mosaicGridColumns) : 3;
|
||||
mosaicHeight = mosaicHeight ? Number(mosaicHeight) : 280;
|
||||
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
|
||||
sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
|
||||
|
||||
|
|
@ -246,7 +295,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
if (maxItemsNumber != undefined && maxItemsNumber > 0)
|
||||
queryObject.perpage = maxItemsNumber;
|
||||
else if (queryObject.perpage != undefined && queryObject.perpage > 0)
|
||||
setAttributes({ maxItemsNumber: queryObject.perpage });
|
||||
setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
|
||||
else {
|
||||
queryObject.perpage = 12;
|
||||
setAttributes({ maxItemsNumber: 12 });
|
||||
|
|
@ -295,10 +344,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
|
||||
} else {
|
||||
// Initializes some variables
|
||||
mosaicDensity = mosaicDensity ? mosaicDensity : 5;
|
||||
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
|
||||
mosaicHeight = mosaicHeight ? mosaicHeight : 280;
|
||||
mosaicDensity = mosaicDensity ? Number(mosaicDensity) : 5;
|
||||
mosaicGridRows = mosaicGridRows ? Number(mosaicGridRows) : 3;
|
||||
mosaicGridColumns = mosaicGridColumns ? Number(mosaicGridColumns) : 3;
|
||||
mosaicHeight = mosaicHeight ? Number(mosaicHeight) : 280;
|
||||
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
|
||||
sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
|
||||
|
||||
|
|
@ -468,27 +517,6 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
// Executed only on the first load of page
|
||||
if(content && content.length && content[0].type)
|
||||
setContent();
|
||||
|
||||
const layoutControls = [
|
||||
{
|
||||
icon: 'grid-view',
|
||||
title: __( 'Grid View', 'tainacan' ),
|
||||
onClick: () => updateLayout('grid'),
|
||||
isActive: layout === 'grid',
|
||||
},
|
||||
{
|
||||
icon: 'list-view',
|
||||
title: __( 'List View', 'tainacan' ),
|
||||
onClick: () => updateLayout('list'),
|
||||
isActive: layout === 'list',
|
||||
},
|
||||
{
|
||||
icon: 'layout',
|
||||
title: __( 'Mosaic View', 'tainacan' ),
|
||||
onClick: () => updateLayout('mosaic'),
|
||||
isActive: layout === 'mosaic',
|
||||
}
|
||||
];
|
||||
|
||||
return content == 'preview' ?
|
||||
<div className={className}>
|
||||
|
|
@ -623,7 +651,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
label={__('Maximum number of items', 'tainacan')}
|
||||
value={ maxItemsNumber ? maxItemsNumber : 12 }
|
||||
onChange={ ( aMaxItemsNumber ) => {
|
||||
maxItemsNumber = aMaxItemsNumber;
|
||||
maxItemsNumber = Number(aMaxItemsNumber);
|
||||
setAttributes( { maxItemsNumber: aMaxItemsNumber } )
|
||||
setContent();
|
||||
}}
|
||||
|
|
@ -640,7 +668,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
label={ __('Maximum number of columns on a wide screen', 'tainacan') }
|
||||
value={ maxColumnsCount ? maxColumnsCount : 5 }
|
||||
onChange={ ( aMaxColumnsCount ) => {
|
||||
maxColumnsCount = aMaxColumnsCount;
|
||||
maxColumnsCount = Number(aMaxColumnsCount);
|
||||
setAttributes( { maxColumnsCount: aMaxColumnsCount } );
|
||||
setContent();
|
||||
}}
|
||||
|
|
@ -678,7 +706,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
label={__('Margin between items in pixels', 'tainacan')}
|
||||
value={ gridMargin ? gridMargin : 0 }
|
||||
onChange={ ( margin ) => {
|
||||
gridMargin = margin;
|
||||
gridMargin = Number(margin);
|
||||
setAttributes( { gridMargin: margin } );
|
||||
setContent();
|
||||
}}
|
||||
|
|
@ -694,26 +722,25 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
label={ __('Maximum number of columns on a wide screen', 'tainacan') }
|
||||
value={ maxColumnsCount ? maxColumnsCount : 5 }
|
||||
onChange={ ( aMaxColumnsCount ) => {
|
||||
maxColumnsCount = aMaxColumnsCount;
|
||||
maxColumnsCount = Number(aMaxColumnsCount);
|
||||
setAttributes( { maxColumnsCount: aMaxColumnsCount } );
|
||||
setContent();
|
||||
}}
|
||||
min={ 1 }
|
||||
max={ 7 }
|
||||
/>
|
||||
<ToggleControl
|
||||
label={__('Crop Images', 'tainacan')}
|
||||
help={ cropImagesToSquare ? __('Do not use square cropeed version of the item thumbnail.', 'tainacan') : __('Toggle to use square cropped version of the item thumbnail.', 'tainacan') }
|
||||
checked={ cropImagesToSquare }
|
||||
onChange={ ( isChecked ) => {
|
||||
cropImagesToSquare = isChecked;
|
||||
setAttributes({ cropImagesToSquare: cropImagesToSquare });
|
||||
setContent();
|
||||
}
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
: null }
|
||||
<SelectControl
|
||||
label={__('Image size', 'tainacan')}
|
||||
value={ imageSize }
|
||||
options={ imageSizeOptions }
|
||||
onChange={ ( anImageSize ) => {
|
||||
imageSize = anImageSize;
|
||||
setAttributes({ imageSize: imageSize });
|
||||
setContent();
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</PanelBody>
|
||||
{ layout == 'mosaic' ?
|
||||
|
|
@ -724,9 +751,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
<div>
|
||||
<RangeControl
|
||||
label={__('Container height (px)', 'tainacan')}
|
||||
value={ mosaicHeight ? mosaicHeight : 280 }
|
||||
value={ mosaicHeight ? Number(mosaicHeight) : 280 }
|
||||
onChange={ ( height ) => {
|
||||
mosaicHeight = height;
|
||||
mosaicHeight = Number(height);
|
||||
setAttributes( { mosaicHeight: height } );
|
||||
setContent();
|
||||
}}
|
||||
|
|
@ -737,9 +764,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
<div>
|
||||
<RangeControl
|
||||
label={__('Group Grid Density', 'tainacan')}
|
||||
value={ mosaicDensity ? mosaicDensity : 5 }
|
||||
value={ mosaicDensity ? Number(mosaicDensity) : 5 }
|
||||
onChange={ ( value ) => {
|
||||
mosaicDensity = value;
|
||||
mosaicDensity = Number(value);
|
||||
setAttributes( { mosaicDensity: mosaicDensity } );
|
||||
setContent();
|
||||
}}
|
||||
|
|
@ -762,8 +789,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
{ label: '6 x 2', value: '6x2' }
|
||||
] }
|
||||
onChange={ ( aGrid ) => {
|
||||
mosaicGridRows = aGrid.split('x')[0];
|
||||
mosaicGridColumns = aGrid.split('x')[1];
|
||||
mosaicGridRows = Number(aGrid.split('x')[0]);
|
||||
mosaicGridColumns = Number(aGrid.split('x')[1]);
|
||||
|
||||
setAttributes({
|
||||
mosaicGridRows: mosaicGridRows,
|
||||
|
|
@ -1035,7 +1062,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
|
|||
) :
|
||||
<ResizableBox
|
||||
size={ {
|
||||
height: mosaicHeight ? mosaicHeight + (3 * gridMargin) : 280 + (3 * gridMargin),
|
||||
height: mosaicHeight ? Number(mosaicHeight) + (3 * gridMargin) : 280 + (3 * gridMargin),
|
||||
width: '100%'
|
||||
} }
|
||||
minHeight="80"
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ export default function({ attributes, className }) {
|
|||
mosaicItemFocalPoint,
|
||||
mosaicDensity,
|
||||
maxColumnsCount,
|
||||
cropImagesToSquare
|
||||
imageSize
|
||||
} = attributes;
|
||||
|
||||
// Gets attributes such as style, that are automatically added by the editor hook
|
||||
|
|
@ -41,7 +41,7 @@ export default function({ attributes, className }) {
|
|||
show-search-bar={ '' + showSearchBar }
|
||||
show-collection-header={ '' + showCollectionHeader }
|
||||
show-collection-label={ '' + showCollectionLabel }
|
||||
crop-images-to-square={ '' + cropImagesToSquare }
|
||||
image-size={ imageSize }
|
||||
layout={ layout }
|
||||
load-strategy={ loadStrategy }
|
||||
mosaic-height={ mosaicHeight }
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@ export default (element) => {
|
|||
mosaicItemFocalPointX : 0.5,
|
||||
mosaicItemFocalPointY : 0.5,
|
||||
maxColumnsCount: 4,
|
||||
cropImagesToSquare: true,
|
||||
imageSize: 'tainacan-medium',
|
||||
order: 'asc',
|
||||
showSearchBar: false,
|
||||
showCollectionHeader: false,
|
||||
|
|
@ -69,7 +69,7 @@ export default (element) => {
|
|||
mosaicItemFocalPointX: this.mosaicItemFocalPointX,
|
||||
mosaicItemFocalPointY: this.mosaicItemFocalPointY,
|
||||
maxColumnsCount: this.maxColumnsCount,
|
||||
cropImagesToSquare: this.cropImagesToSquare,
|
||||
imageSize: this.imageSize,
|
||||
searchURL: this.searchURL,
|
||||
selectedItems: this.selectedItems,
|
||||
loadStrategy: this.loadStrategy,
|
||||
|
|
@ -104,7 +104,7 @@ export default (element) => {
|
|||
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.imageSize = this.$el.attributes['image-size'] != undefined ? this.$el.attributes['image-size'].value : 'tainacan-medium';
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -14,13 +14,13 @@
|
|||
<div
|
||||
:style="{
|
||||
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
|
||||
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
|
||||
width: collection && collection.header_image ? '' : '100%'
|
||||
}"
|
||||
:class="
|
||||
'collection-name ' +
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
((!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) && (!collection || !collection.header_image) ? 'only-collection-name' : '')
|
||||
">
|
||||
<h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
|
||||
<span
|
||||
|
|
@ -33,17 +33,17 @@
|
|||
</h3>
|
||||
</div>
|
||||
<div
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])"
|
||||
v-if="collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])"
|
||||
class="collection-thumbnail"
|
||||
:style="{
|
||||
backgroundImage: 'url(' + (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] != undefined ? (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
backgroundImage: 'url(' + (collection.thumbnail['tainacan-medium'] != undefined ? (collection.thumbnail['tainacan-medium'][0]) : (collection.thumbnail['medium'][0])) + ')',
|
||||
}"/>
|
||||
<div
|
||||
class="collection-header-image"
|
||||
:style="{
|
||||
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
|
||||
minHeight: collection && collection.header_image ? '' : '80px',
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
display: !(collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium'])) ? collection && collection.header_image ? '' : 'none' : ''
|
||||
}"/>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -206,11 +206,11 @@
|
|||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
v-if="showImage"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
|
|
@ -244,7 +244,7 @@
|
|||
v-for="(item, index) of mosaicGroup"
|
||||
class="item-list-item"
|
||||
:style="{
|
||||
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype'])})` : 'none',
|
||||
backgroundImage: layout == 'mosaic' ? `url(${$thumbHelper.getSrc(item['thumbnail'], imageSize, item['document_mimetype'])})` : 'none',
|
||||
backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
|
||||
}">
|
||||
<a
|
||||
|
|
@ -252,11 +252,11 @@
|
|||
:href="item.url"
|
||||
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
|
||||
<blur-hash-image
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
|
||||
:transition-duration="500" />
|
||||
<span v-if="item.title">{{ item.title }}</span>
|
||||
|
|
@ -297,7 +297,7 @@ export default {
|
|||
mosaicItemFocalPointX: Number,
|
||||
mosaicItemFocalPointY: Number,
|
||||
maxColumnsCount: Number,
|
||||
cropImagesToSquare: Boolean,
|
||||
imageSize: String,
|
||||
order: String,
|
||||
showSearchBar: Boolean,
|
||||
showCollectionHeader: Boolean,
|
||||
|
|
|
|||
|
|
@ -1,8 +1,6 @@
|
|||
<template>
|
||||
<div class="table-container">
|
||||
<div
|
||||
ref="masonryWrapper"
|
||||
class="table-wrapper">
|
||||
<div class="table-wrapper">
|
||||
|
||||
<!-- Empty result placeholder -->
|
||||
<section
|
||||
|
|
@ -19,32 +17,33 @@
|
|||
</section>
|
||||
|
||||
<!-- SKELETON LOADING -->
|
||||
<masonry
|
||||
<div
|
||||
v-if="isLoading"
|
||||
:cols="masonryCols"
|
||||
:gutter="25"
|
||||
class="tainacan-masonry-container">
|
||||
:class="{
|
||||
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
|
||||
}"
|
||||
class="tainacan-masonry-container--skeleton">
|
||||
<div
|
||||
:key="item"
|
||||
v-for="item in 12"
|
||||
:style="{'min-height': randomHeightForMasonryItem() + 'px' }"
|
||||
class="skeleton tainacan-masonry-item" />
|
||||
</masonry>
|
||||
class="skeleton" />
|
||||
</div>
|
||||
|
||||
<!-- MASONRY VIEW MODE -->
|
||||
<masonry
|
||||
role="list"
|
||||
v-if="!isLoading && items.length > 0"
|
||||
:cols="masonryCols"
|
||||
:gutter="25"
|
||||
<ul
|
||||
v-if="!isLoading"
|
||||
:class="{
|
||||
'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
|
||||
}"
|
||||
class="tainacan-masonry-container">
|
||||
<div
|
||||
role="listitem"
|
||||
<li
|
||||
:data-tainacan-item-id="item.id"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:key="index"
|
||||
v-for="(item, index) of items">
|
||||
v-for="(item, index) of items"
|
||||
:class="{ 'tainacan-masonry-grid-sizer': index == 0 }">
|
||||
<a
|
||||
|
||||
class="tainacan-masonry-item"
|
||||
|
|
@ -80,11 +79,11 @@
|
|||
<blur-hash-image
|
||||
v-if="item.thumbnail != undefined"
|
||||
class="tainacan-masonry-item-thumbnail"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
|
||||
:width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
|
||||
:height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
|
||||
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
|
||||
:src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
|
||||
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
|
||||
:alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
|
||||
:transition-duration="500"
|
||||
/>
|
||||
|
|
@ -95,14 +94,15 @@
|
|||
class="faceted-search-hook faceted-search-hook-item-after"
|
||||
v-html="getAfterHook(item)" />
|
||||
</a>
|
||||
</div>
|
||||
</masonry>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { viewModesMixin } from '../js/view-modes-mixin.js';
|
||||
import Masonry from 'masonry-layout';
|
||||
|
||||
export default {
|
||||
name: 'ViewModeMasonry',
|
||||
|
|
@ -111,33 +111,37 @@ export default {
|
|||
],
|
||||
data () {
|
||||
return {
|
||||
containerWidthDiscount: Number,
|
||||
masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1}
|
||||
masonry: false,
|
||||
shouldUseLegacyMasonyCols: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
isFiltersMenuCompressed() {
|
||||
if (this.$refs.masonryWrapper != undefined &&
|
||||
this.$refs.masonryWrapper.children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
|
||||
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth))
|
||||
this.containerWidthDiscount = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - this.$refs.masonryWrapper.clientWidth;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
containerWidthDiscount() {
|
||||
let obj = {};
|
||||
obj['default'] = 6;
|
||||
obj[1980 - this.containerWidthDiscount] = 5;
|
||||
obj[1460 - this.containerWidthDiscount] = 4;
|
||||
obj[1275 - this.containerWidthDiscount] = 3;
|
||||
obj[1080 - this.containerWidthDiscount] = 3;
|
||||
obj[828 - this.containerWidthDiscount] = 2;
|
||||
obj[400] = 1;
|
||||
this.masonryCols = obj;
|
||||
isLoading: {
|
||||
handler() {
|
||||
if (this.items && this.items.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.masonry !== false)
|
||||
this.masonry.destroy();
|
||||
|
||||
this.masonry = new Masonry( '.tainacan-masonry-container', {
|
||||
itemSelector: 'li',
|
||||
columnWidth: '.tainacan-masonry-grid-sizer',
|
||||
gutter: 25,
|
||||
percentPosition: true
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.shouldUseLegacyMasonyCols = wp.hooks.hasFilter('tainacan_use_legacy_masonry_view_mode_cols') && wp.hooks.applyFilters('tainacan_use_legacy_masonry_view_mode_cols', false);
|
||||
},
|
||||
beforeDestroy() {
|
||||
if (this.masonry !== false)
|
||||
this.masonry.destroy();
|
||||
},
|
||||
methods: {
|
||||
randomHeightForMasonryItem() {
|
||||
let min = 120;
|
||||
|
|
|
|||
|
|
@ -19,32 +19,28 @@
|
|||
</section>
|
||||
|
||||
<!-- SKELETON LOADING -->
|
||||
<masonry
|
||||
<div
|
||||
v-if="isLoading"
|
||||
:cols="masonryCols"
|
||||
:gutter="30"
|
||||
class="tainacan-records-container">
|
||||
class="tainacan-records-container--skeleton">
|
||||
<div
|
||||
:key="item"
|
||||
v-for="item in 12"
|
||||
:style="{'min-height': randomHeightForRecordsItem() + 'px' }"
|
||||
class="skeleton tainacan-record" />
|
||||
</masonry>
|
||||
class="skeleton" />
|
||||
</div>
|
||||
|
||||
<!-- RECORDS VIEW MODE -->
|
||||
<masonry
|
||||
role="list"
|
||||
v-if="!isLoading && items.length > 0"
|
||||
:cols="masonryCols"
|
||||
:gutter="30"
|
||||
<ul
|
||||
v-if="!isLoading"
|
||||
class="tainacan-records-container">
|
||||
<div
|
||||
<li
|
||||
role="listitem"
|
||||
:aria-setsize="totalItems"
|
||||
:aria-posinset="getPosInSet(index)"
|
||||
:data-tainacan-item-id="item.id"
|
||||
:key="index"
|
||||
v-for="(item, index) of items">
|
||||
v-for="(item, index) of items"
|
||||
:class="{ 'tainacan-records-grid-sizer': index == 0 }">
|
||||
<a
|
||||
:href="getItemLink(item.url, index)"
|
||||
class="tainacan-record">
|
||||
|
|
@ -134,14 +130,15 @@
|
|||
class="faceted-search-hook faceted-search-hook-item-after"
|
||||
v-html="getAfterHook(item)" />
|
||||
</a>
|
||||
</div>
|
||||
</masonry>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { viewModesMixin } from '../js/view-modes-mixin.js';
|
||||
import Masonry from 'masonry-layout';
|
||||
|
||||
export default {
|
||||
name: 'ViewModeRecords',
|
||||
|
|
@ -150,7 +147,7 @@ export default {
|
|||
],
|
||||
data () {
|
||||
return {
|
||||
masonryCols: {default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}
|
||||
masonry: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -159,42 +156,28 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
isFiltersMenuCompressed() {
|
||||
if (this.$refs.masonryWrapper != undefined &&
|
||||
this.$refs.masonryWrapper.children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
|
||||
this.containerWidthDiscount = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - this.$refs.masonryWrapper.clientWidth;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
},
|
||||
containerWidthDiscount() {
|
||||
let obj = {};
|
||||
obj['default'] = 4;
|
||||
obj[1980 - this.containerWidthDiscount] = 3;
|
||||
obj[1460 - this.containerWidthDiscount] = 2;
|
||||
obj[1275 - this.containerWidthDiscount] = 2;
|
||||
obj[1080 - this.containerWidthDiscount] = 1;
|
||||
obj[828 - this.containerWidthDiscount] = 1;
|
||||
obj[400] = 1;
|
||||
this.masonryCols = obj;
|
||||
isLoading: {
|
||||
handler() {
|
||||
if (this.items && this.items.length > 0) {
|
||||
this.$nextTick(() => {
|
||||
if (this.masonry !== false)
|
||||
this.masonry.destroy();
|
||||
|
||||
this.masonry = new Masonry( '.tainacan-records-container', {
|
||||
itemSelector: 'li',
|
||||
columnWidth: '.tainacan-records-grid-sizer',
|
||||
gutter: 30,
|
||||
percentPosition: true
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.$refs.masonryWrapper != undefined &&
|
||||
this.$refs.masonryWrapper.children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
|
||||
this.itemColumnWidth = this.$refs.masonryWrapper.children[0].children[0].clientWidth;
|
||||
this.recalculateContainerWidth();
|
||||
} else
|
||||
this.itemColumnWidth = 202;
|
||||
},
|
||||
created() {
|
||||
window.addEventListener('resize', this.recalculateContainerWidth);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.recalculateContainerWidth);
|
||||
if (this.masonry !== false)
|
||||
this.masonry.destroy();
|
||||
},
|
||||
methods: {
|
||||
randomHeightForRecordsItem() {
|
||||
|
|
@ -205,17 +188,7 @@ export default {
|
|||
getItemImageHeight(imageWidth, imageHeight) {
|
||||
let itemWidth = 120;
|
||||
return (imageHeight*itemWidth)/imageWidth;
|
||||
},
|
||||
recalculateContainerWidth: _.debounce( function() {
|
||||
if (this.$refs.masonryWrapper != undefined &&
|
||||
this.$refs.masonryWrapper.children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0] != undefined &&
|
||||
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) {
|
||||
if (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)
|
||||
this.containerWidthDiscount = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - this.$refs.masonryWrapper.clientWidth;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}, 500)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ import {
|
|||
Numberinput
|
||||
} from 'buefy';
|
||||
import VTooltip from 'floating-vue';
|
||||
import VueMasonry from 'vue-masonry-css';
|
||||
import cssVars from 'css-vars-ponyfill';
|
||||
import qs from 'qs';
|
||||
import VueBlurHash from 'vue-blurhash';
|
||||
|
|
@ -120,7 +119,6 @@ export default (element) => {
|
|||
}
|
||||
}
|
||||
});
|
||||
Vue.use(VueMasonry);
|
||||
Vue.use(VueBlurHash);
|
||||
Vue.use(I18NPlugin);
|
||||
Vue.use(UserPrefsPlugin);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import * as conditioner from 'conditioner-core/conditioner-core.esm';
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
// Updates Webpack public path based on plugin folder URL, using variable obtained from server side.
|
||||
__webpack_public_path__ = tainacan_plugin.plugin_dir_url + 'assets/js/';
|
||||
|
|
@ -67,7 +68,17 @@ performWhenDocumentIsLoaded(() => {
|
|||
/* webpackMode: "lazy" */
|
||||
/* webpackInclude: /theme\.js$/ */
|
||||
/* webpackChunkName: "tainacan-chunks-" */
|
||||
`${name}`)
|
||||
`${name}`
|
||||
)
|
||||
.catch((error) => {
|
||||
let moduleElements = document.querySelectorAll('[data-module]');
|
||||
moduleElements.forEach((moduleElement) => {
|
||||
moduleElement.innerHTML = `<p style="font-size: 1rem;"><strong>` + __( 'An error ocurred while loading this Tainacan component. Please reload your page (CTRL+SHIFT+R).', 'tainacan') + `</strong></p>`;
|
||||
});
|
||||
console.warn( __( 'An error ocurred while loading some Tainacan components. Please reload your page (CTRL+SHIFT+R).', 'tainacan') );
|
||||
console.warn( __( 'Clearing the cache may help. It is possible that the browser or server are retaining old information that are preventing Tainacan components to be loading correctly.', 'tainacan') );
|
||||
console.error(error);
|
||||
})
|
||||
});
|
||||
|
||||
// lets go!
|
||||
|
|
|
|||
|
|
@ -1,359 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Copyright 2012 Mozilla Foundation
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
|
||||
Adobe CMap resources are covered by their own copyright but the same license:
|
||||
|
||||
Copyright 1990-2015 Adobe Systems Incorporated.
|
||||
|
||||
See https://github.com/adobe-type-tools/cmap-resources
|
||||
-->
|
||||
<html dir="ltr" mozdisallowselectionprint moznomarginboxes>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
|
||||
<meta name="google" content="notranslate">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>PDF.js viewer</title>
|
||||
|
||||
|
||||
<link rel="stylesheet" href="pdfjs-dist/web/viewer.css">
|
||||
|
||||
|
||||
|
||||
<!-- This snippet is used in production (included from viewer.html) -->
|
||||
<link rel="resource" type="application/l10n" href="pdfjs-dist/web/locale/locale.properties">
|
||||
<script src="pdfjs-dist/build/pdf.js"></script>
|
||||
|
||||
|
||||
<script src="pdf-viewer.js"></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body tabindex="1" class="loadingInProgress">
|
||||
<div id="outerContainer">
|
||||
|
||||
<div id="sidebarContainer">
|
||||
<div id="toolbarSidebar">
|
||||
<div class="splitToolbarButton toggled">
|
||||
<button id="viewThumbnail" class="toolbarButton toggled" title="Show Thumbnails" tabindex="2" data-l10n-id="thumbs">
|
||||
<span data-l10n-id="thumbs_label">Thumbnails</span>
|
||||
</button>
|
||||
<button id="viewOutline" class="toolbarButton" title="Show Document Outline (double-click to expand/collapse all items)" tabindex="3" data-l10n-id="document_outline">
|
||||
<span data-l10n-id="document_outline_label">Document Outline</span>
|
||||
</button>
|
||||
<button id="viewAttachments" class="toolbarButton" title="Show Attachments" tabindex="4" data-l10n-id="attachments">
|
||||
<span data-l10n-id="attachments_label">Attachments</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="sidebarContent">
|
||||
<div id="thumbnailView">
|
||||
</div>
|
||||
<div id="outlineView" class="hidden">
|
||||
</div>
|
||||
<div id="attachmentsView" class="hidden">
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- sidebarContainer -->
|
||||
|
||||
<div id="mainContainer">
|
||||
<div class="findbar hidden doorHanger" id="findbar">
|
||||
<div id="findbarInputContainer">
|
||||
<input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input">
|
||||
<div class="splitToolbarButton">
|
||||
<button id="findPrevious" class="toolbarButton findPrevious" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
|
||||
<span data-l10n-id="find_previous_label">Previous</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button id="findNext" class="toolbarButton findNext" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
|
||||
<span data-l10n-id="find_next_label">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="findbarOptionsContainer">
|
||||
<input type="checkbox" id="findHighlightAll" class="toolbarField" tabindex="94">
|
||||
<label for="findHighlightAll" class="toolbarLabel" data-l10n-id="find_highlight">Highlight all</label>
|
||||
<input type="checkbox" id="findMatchCase" class="toolbarField" tabindex="95">
|
||||
<label for="findMatchCase" class="toolbarLabel" data-l10n-id="find_match_case_label">Match case</label>
|
||||
<span id="findResultsCount" class="toolbarLabel hidden"></span>
|
||||
</div>
|
||||
|
||||
<div id="findbarMessageContainer">
|
||||
<span id="findMsg" class="toolbarLabel"></span>
|
||||
</div>
|
||||
</div> <!-- findbar -->
|
||||
|
||||
<div id="secondaryToolbar" class="secondaryToolbar hidden doorHangerRight">
|
||||
<div id="secondaryToolbarButtonContainer">
|
||||
<button id="secondaryPresentationMode" class="secondaryToolbarButton presentationMode visibleLargeView" title="Switch to Presentation Mode" tabindex="51" data-l10n-id="presentation_mode">
|
||||
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
|
||||
</button>
|
||||
|
||||
<button id="secondaryOpenFile" class="secondaryToolbarButton openFile visibleLargeView" title="Open File" tabindex="52" data-l10n-id="open_file">
|
||||
<span data-l10n-id="open_file_label">Open</span>
|
||||
</button>
|
||||
|
||||
<button id="secondaryPrint" class="secondaryToolbarButton print visibleMediumView" title="Print" tabindex="53" data-l10n-id="print">
|
||||
<span data-l10n-id="print_label">Print</span>
|
||||
</button>
|
||||
|
||||
<button id="secondaryDownload" class="secondaryToolbarButton download visibleMediumView" title="Download" tabindex="54" data-l10n-id="download">
|
||||
<span data-l10n-id="download_label">Download</span>
|
||||
</button>
|
||||
|
||||
<a href="#" id="secondaryViewBookmark" class="secondaryToolbarButton bookmark visibleSmallView" title="Current view (copy or open in new window)" tabindex="55" data-l10n-id="bookmark">
|
||||
<span data-l10n-id="bookmark_label">Current View</span>
|
||||
</a>
|
||||
|
||||
<div class="horizontalToolbarSeparator visibleLargeView"></div>
|
||||
|
||||
<button id="firstPage" class="secondaryToolbarButton firstPage" title="Go to First Page" tabindex="56" data-l10n-id="first_page">
|
||||
<span data-l10n-id="first_page_label">Go to First Page</span>
|
||||
</button>
|
||||
<button id="lastPage" class="secondaryToolbarButton lastPage" title="Go to Last Page" tabindex="57" data-l10n-id="last_page">
|
||||
<span data-l10n-id="last_page_label">Go to Last Page</span>
|
||||
</button>
|
||||
|
||||
<div class="horizontalToolbarSeparator"></div>
|
||||
|
||||
<button id="pageRotateCw" class="secondaryToolbarButton rotateCw" title="Rotate Clockwise" tabindex="58" data-l10n-id="page_rotate_cw">
|
||||
<span data-l10n-id="page_rotate_cw_label">Rotate Clockwise</span>
|
||||
</button>
|
||||
<button id="pageRotateCcw" class="secondaryToolbarButton rotateCcw" title="Rotate Counterclockwise" tabindex="59" data-l10n-id="page_rotate_ccw">
|
||||
<span data-l10n-id="page_rotate_ccw_label">Rotate Counterclockwise</span>
|
||||
</button>
|
||||
|
||||
<div class="horizontalToolbarSeparator"></div>
|
||||
|
||||
<button id="cursorSelectTool" class="secondaryToolbarButton selectTool toggled" title="Enable Text Selection Tool" tabindex="60" data-l10n-id="cursor_text_select_tool">
|
||||
<span data-l10n-id="cursor_text_select_tool_label">Text Selection Tool</span>
|
||||
</button>
|
||||
<button id="cursorHandTool" class="secondaryToolbarButton handTool" title="Enable Hand Tool" tabindex="61" data-l10n-id="cursor_hand_tool">
|
||||
<span data-l10n-id="cursor_hand_tool_label">Hand Tool</span>
|
||||
</button>
|
||||
|
||||
<div class="horizontalToolbarSeparator"></div>
|
||||
|
||||
<button id="documentProperties" class="secondaryToolbarButton documentProperties" title="Document Properties…" tabindex="62" data-l10n-id="document_properties">
|
||||
<span data-l10n-id="document_properties_label">Document Properties…</span>
|
||||
</button>
|
||||
</div>
|
||||
</div> <!-- secondaryToolbar -->
|
||||
|
||||
<div class="toolbar">
|
||||
<div id="toolbarContainer">
|
||||
<div id="toolbarViewer">
|
||||
<div id="toolbarViewerLeft">
|
||||
<button id="sidebarToggle" class="toolbarButton" title="Toggle Sidebar" tabindex="11" data-l10n-id="toggle_sidebar">
|
||||
<span data-l10n-id="toggle_sidebar_label">Toggle Sidebar</span>
|
||||
</button>
|
||||
<div class="toolbarButtonSpacer"></div>
|
||||
<button id="viewFind" class="toolbarButton" title="Find in Document" tabindex="12" data-l10n-id="findbar">
|
||||
<span data-l10n-id="findbar_label">Find</span>
|
||||
</button>
|
||||
<div class="splitToolbarButton hiddenSmallView">
|
||||
<button class="toolbarButton pageUp" title="Previous Page" id="previous" tabindex="13" data-l10n-id="previous">
|
||||
<span data-l10n-id="previous_label">Previous</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button class="toolbarButton pageDown" title="Next Page" id="next" tabindex="14" data-l10n-id="next">
|
||||
<span data-l10n-id="next_label">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<input type="number" id="pageNumber" class="toolbarField pageNumber" title="Page" value="1" size="4" min="1" tabindex="15" data-l10n-id="page">
|
||||
<span id="numPages" class="toolbarLabel"></span>
|
||||
</div>
|
||||
<div id="toolbarViewerRight">
|
||||
<button id="presentationMode" class="toolbarButton presentationMode hiddenLargeView" title="Switch to Presentation Mode" tabindex="31" data-l10n-id="presentation_mode">
|
||||
<span data-l10n-id="presentation_mode_label">Presentation Mode</span>
|
||||
</button>
|
||||
|
||||
<button id="openFile" class="toolbarButton openFile hiddenLargeView" title="Open File" tabindex="32" data-l10n-id="open_file">
|
||||
<span data-l10n-id="open_file_label">Open</span>
|
||||
</button>
|
||||
|
||||
<button id="print" class="toolbarButton print hiddenMediumView" title="Print" tabindex="33" data-l10n-id="print">
|
||||
<span data-l10n-id="print_label">Print</span>
|
||||
</button>
|
||||
|
||||
<button id="download" class="toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
|
||||
<span data-l10n-id="download_label">Download</span>
|
||||
</button>
|
||||
<a href="#" id="viewBookmark" class="toolbarButton bookmark hiddenSmallView" title="Current view (copy or open in new window)" tabindex="35" data-l10n-id="bookmark">
|
||||
<span data-l10n-id="bookmark_label">Current View</span>
|
||||
</a>
|
||||
|
||||
<div class="verticalToolbarSeparator hiddenSmallView"></div>
|
||||
|
||||
<button id="secondaryToolbarToggle" class="toolbarButton" title="Tools" tabindex="36" data-l10n-id="tools">
|
||||
<span data-l10n-id="tools_label">Tools</span>
|
||||
</button>
|
||||
</div>
|
||||
<div id="toolbarViewerMiddle">
|
||||
<div class="splitToolbarButton">
|
||||
<button id="zoomOut" class="toolbarButton zoomOut" title="Zoom Out" tabindex="21" data-l10n-id="zoom_out">
|
||||
<span data-l10n-id="zoom_out_label">Zoom Out</span>
|
||||
</button>
|
||||
<div class="splitToolbarButtonSeparator"></div>
|
||||
<button id="zoomIn" class="toolbarButton zoomIn" title="Zoom In" tabindex="22" data-l10n-id="zoom_in">
|
||||
<span data-l10n-id="zoom_in_label">Zoom In</span>
|
||||
</button>
|
||||
</div>
|
||||
<span id="scaleSelectContainer" class="dropdownToolbarButton">
|
||||
<select id="scaleSelect" title="Zoom" tabindex="23" data-l10n-id="zoom">
|
||||
<option id="pageAutoOption" title="" value="auto" selected="selected" data-l10n-id="page_scale_auto">Automatic Zoom</option>
|
||||
<option id="pageActualOption" title="" value="page-actual" data-l10n-id="page_scale_actual">Actual Size</option>
|
||||
<option id="pageFitOption" title="" value="page-fit" data-l10n-id="page_scale_fit">Page Fit</option>
|
||||
<option id="pageWidthOption" title="" value="page-width" data-l10n-id="page_scale_width">Page Width</option>
|
||||
<option id="customScaleOption" title="" value="custom" disabled="disabled" hidden="true"></option>
|
||||
<option title="" value="0.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 50 }'>50%</option>
|
||||
<option title="" value="0.75" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 75 }'>75%</option>
|
||||
<option title="" value="1" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 100 }'>100%</option>
|
||||
<option title="" value="1.25" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 125 }'>125%</option>
|
||||
<option title="" value="1.5" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 150 }'>150%</option>
|
||||
<option title="" value="2" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 200 }'>200%</option>
|
||||
<option title="" value="3" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 300 }'>300%</option>
|
||||
<option title="" value="4" data-l10n-id="page_scale_percent" data-l10n-args='{ "scale": 400 }'>400%</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loadingBar">
|
||||
<div class="progress">
|
||||
<div class="glimmer">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<menu type="context" id="viewerContextMenu">
|
||||
<menuitem id="contextFirstPage" label="First Page"
|
||||
data-l10n-id="first_page"></menuitem>
|
||||
<menuitem id="contextLastPage" label="Last Page"
|
||||
data-l10n-id="last_page"></menuitem>
|
||||
<menuitem id="contextPageRotateCw" label="Rotate Clockwise"
|
||||
data-l10n-id="page_rotate_cw"></menuitem>
|
||||
<menuitem id="contextPageRotateCcw" label="Rotate Counter-Clockwise"
|
||||
data-l10n-id="page_rotate_ccw"></menuitem>
|
||||
</menu>
|
||||
|
||||
<div id="viewerContainer" tabindex="0">
|
||||
<div id="viewer" class="pdfViewer"></div>
|
||||
</div>
|
||||
|
||||
<div id="errorWrapper" hidden='true'>
|
||||
<div id="errorMessageLeft">
|
||||
<span id="errorMessage"></span>
|
||||
<button id="errorShowMore" data-l10n-id="error_more_info">
|
||||
More Information
|
||||
</button>
|
||||
<button id="errorShowLess" data-l10n-id="error_less_info" hidden='true'>
|
||||
Less Information
|
||||
</button>
|
||||
</div>
|
||||
<div id="errorMessageRight">
|
||||
<button id="errorClose" data-l10n-id="error_close">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
<div class="clearBoth"></div>
|
||||
<textarea id="errorMoreInfo" hidden='true' readonly="readonly"></textarea>
|
||||
</div>
|
||||
</div> <!-- mainContainer -->
|
||||
|
||||
<div id="overlayContainer" class="hidden">
|
||||
<div id="passwordOverlay" class="container hidden">
|
||||
<div class="dialog">
|
||||
<div class="row">
|
||||
<p id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<input type="password" id="password" class="toolbarField">
|
||||
</div>
|
||||
<div class="buttonRow">
|
||||
<button id="passwordCancel" class="overlayButton"><span data-l10n-id="password_cancel">Cancel</span></button>
|
||||
<button id="passwordSubmit" class="overlayButton"><span data-l10n-id="password_ok">OK</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="documentPropertiesOverlay" class="container hidden">
|
||||
<div class="dialog">
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_file_name">File name:</span> <p id="fileNameField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_file_size">File size:</span> <p id="fileSizeField">-</p>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_title">Title:</span> <p id="titleField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_author">Author:</span> <p id="authorField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_subject">Subject:</span> <p id="subjectField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_keywords">Keywords:</span> <p id="keywordsField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_creation_date">Creation Date:</span> <p id="creationDateField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_modification_date">Modification Date:</span> <p id="modificationDateField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_creator">Creator:</span> <p id="creatorField">-</p>
|
||||
</div>
|
||||
<div class="separator"></div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_producer">PDF Producer:</span> <p id="producerField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_version">PDF Version:</span> <p id="versionField">-</p>
|
||||
</div>
|
||||
<div class="row">
|
||||
<span data-l10n-id="document_properties_page_count">Page Count:</span> <p id="pageCountField">-</p>
|
||||
</div>
|
||||
<div class="buttonRow">
|
||||
<button id="documentPropertiesClose" class="overlayButton"><span data-l10n-id="document_properties_close">Close</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="printServiceOverlay" class="container hidden">
|
||||
<div class="dialog">
|
||||
<div class="row">
|
||||
<span data-l10n-id="print_progress_message">Preparing document for printing…</span>
|
||||
</div>
|
||||
<div class="row">
|
||||
<progress value="0" max="100"></progress>
|
||||
<span data-l10n-id="print_progress_percent" data-l10n-args='{ "progress": 0 }' class="relative-progress">0%</span>
|
||||
</div>
|
||||
<div class="buttonRow">
|
||||
<button id="printCancel" class="overlayButton"><span data-l10n-id="print_progress_close">Cancel</span></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> <!-- overlayContainer -->
|
||||
|
||||
</div> <!-- outerContainer -->
|
||||
<div id="printContainer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,103 @@
|
|||
/* Copyright 2014 Mozilla Foundation
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
#PDFBug {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(102, 102, 102, 1);
|
||||
position: fixed;
|
||||
top: 32px;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
font-size: 10px;
|
||||
padding: 0;
|
||||
width: 300px;
|
||||
}
|
||||
#PDFBug .controls {
|
||||
background: rgba(238, 238, 238, 1);
|
||||
border-bottom: 1px solid rgba(102, 102, 102, 1);
|
||||
padding: 3px;
|
||||
}
|
||||
#PDFBug .panels {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 27px;
|
||||
}
|
||||
#PDFBug .panels > div {
|
||||
padding: 5px;
|
||||
}
|
||||
#PDFBug button.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
.debuggerShowText,
|
||||
.debuggerHideText:hover {
|
||||
background-color: rgba(255, 255, 0, 1);
|
||||
}
|
||||
#PDFBug .stats {
|
||||
font-family: courier;
|
||||
font-size: 10px;
|
||||
white-space: pre;
|
||||
}
|
||||
#PDFBug .stats .title {
|
||||
font-weight: bold;
|
||||
}
|
||||
#PDFBug table {
|
||||
font-size: 10px;
|
||||
white-space: pre;
|
||||
}
|
||||
#PDFBug table.showText {
|
||||
border-collapse: collapse;
|
||||
text-align: center;
|
||||
}
|
||||
#PDFBug table.showText,
|
||||
#PDFBug table.showText tr,
|
||||
#PDFBug table.showText td {
|
||||
border: 1px solid black;
|
||||
padding: 1px;
|
||||
}
|
||||
#PDFBug table.showText td.advance {
|
||||
color: grey;
|
||||
}
|
||||
|
||||
#viewer.textLayer-visible .textLayer {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#viewer.textLayer-visible .canvasWrapper {
|
||||
background-color: rgba(128, 255, 128, 1);
|
||||
}
|
||||
|
||||
#viewer.textLayer-visible .canvasWrapper canvas {
|
||||
mix-blend-mode: screen;
|
||||
}
|
||||
|
||||
#viewer.textLayer-visible .textLayer span {
|
||||
background-color: rgba(255, 255, 0, 0.1);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
border: solid 1px rgba(255, 0, 0, 0.5);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#viewer.textLayer-hover .textLayer span:hover {
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
#viewer.textLayer-shadow .textLayer span {
|
||||
background-color: rgba(255, 255, 255, 0.6);
|
||||
color: rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
|
@ -13,43 +13,42 @@
|
|||
* limitations under the License.
|
||||
*/
|
||||
|
||||
'use strict';
|
||||
let opMap;
|
||||
|
||||
var FontInspector = (function FontInspectorClosure() {
|
||||
var fonts;
|
||||
var active = false;
|
||||
var fontAttribute = 'data-font-name';
|
||||
const FontInspector = (function FontInspectorClosure() {
|
||||
let fonts;
|
||||
let active = false;
|
||||
const fontAttribute = "data-font-name";
|
||||
function removeSelection() {
|
||||
var divs = document.querySelectorAll('div[' + fontAttribute + ']');
|
||||
for (var i = 0, ii = divs.length; i < ii; ++i) {
|
||||
var div = divs[i];
|
||||
div.className = '';
|
||||
const divs = document.querySelectorAll(`span[${fontAttribute}]`);
|
||||
for (const div of divs) {
|
||||
div.className = "";
|
||||
}
|
||||
}
|
||||
function resetSelection() {
|
||||
var divs = document.querySelectorAll('div[' + fontAttribute + ']');
|
||||
for (var i = 0, ii = divs.length; i < ii; ++i) {
|
||||
var div = divs[i];
|
||||
div.className = 'debuggerHideText';
|
||||
const divs = document.querySelectorAll(`span[${fontAttribute}]`);
|
||||
for (const div of divs) {
|
||||
div.className = "debuggerHideText";
|
||||
}
|
||||
}
|
||||
function selectFont(fontName, show) {
|
||||
var divs = document.querySelectorAll('div[' + fontAttribute + '=' +
|
||||
fontName + ']');
|
||||
for (var i = 0, ii = divs.length; i < ii; ++i) {
|
||||
var div = divs[i];
|
||||
div.className = show ? 'debuggerShowText' : 'debuggerHideText';
|
||||
const divs = document.querySelectorAll(
|
||||
`span[${fontAttribute}=${fontName}]`
|
||||
);
|
||||
for (const div of divs) {
|
||||
div.className = show ? "debuggerShowText" : "debuggerHideText";
|
||||
}
|
||||
}
|
||||
function textLayerClick(e) {
|
||||
if (!e.target.dataset.fontName ||
|
||||
e.target.tagName.toUpperCase() !== 'DIV') {
|
||||
if (
|
||||
!e.target.dataset.fontName ||
|
||||
e.target.tagName.toUpperCase() !== "SPAN"
|
||||
) {
|
||||
return;
|
||||
}
|
||||
var fontName = e.target.dataset.fontName;
|
||||
var selects = document.getElementsByTagName('input');
|
||||
for (var i = 0; i < selects.length; ++i) {
|
||||
var select = selects[i];
|
||||
const fontName = e.target.dataset.fontName;
|
||||
const selects = document.getElementsByTagName("input");
|
||||
for (const select of selects) {
|
||||
if (select.dataset.fontName !== fontName) {
|
||||
continue;
|
||||
}
|
||||
|
|
@ -60,23 +59,22 @@ var FontInspector = (function FontInspectorClosure() {
|
|||
}
|
||||
return {
|
||||
// Properties/functions needed by PDFBug.
|
||||
id: 'FontInspector',
|
||||
name: 'Font Inspector',
|
||||
id: "FontInspector",
|
||||
name: "Font Inspector",
|
||||
panel: null,
|
||||
manager: null,
|
||||
init: function init(pdfjsLib) {
|
||||
var panel = this.panel;
|
||||
panel.setAttribute('style', 'padding: 5px;');
|
||||
var tmp = document.createElement('button');
|
||||
tmp.addEventListener('click', resetSelection);
|
||||
tmp.textContent = 'Refresh';
|
||||
init(pdfjsLib) {
|
||||
const panel = this.panel;
|
||||
const tmp = document.createElement("button");
|
||||
tmp.addEventListener("click", resetSelection);
|
||||
tmp.textContent = "Refresh";
|
||||
panel.appendChild(tmp);
|
||||
|
||||
fonts = document.createElement('div');
|
||||
fonts = document.createElement("div");
|
||||
panel.appendChild(fonts);
|
||||
},
|
||||
cleanup: function cleanup() {
|
||||
fonts.textContent = '';
|
||||
cleanup() {
|
||||
fonts.textContent = "";
|
||||
},
|
||||
enabled: false,
|
||||
get active() {
|
||||
|
|
@ -85,65 +83,62 @@ var FontInspector = (function FontInspectorClosure() {
|
|||
set active(value) {
|
||||
active = value;
|
||||
if (active) {
|
||||
document.body.addEventListener('click', textLayerClick, true);
|
||||
document.body.addEventListener("click", textLayerClick, true);
|
||||
resetSelection();
|
||||
} else {
|
||||
document.body.removeEventListener('click', textLayerClick, true);
|
||||
document.body.removeEventListener("click", textLayerClick, true);
|
||||
removeSelection();
|
||||
}
|
||||
},
|
||||
// FontInspector specific functions.
|
||||
fontAdded: function fontAdded(fontObj, url) {
|
||||
fontAdded(fontObj, url) {
|
||||
function properties(obj, list) {
|
||||
var moreInfo = document.createElement('table');
|
||||
for (var i = 0; i < list.length; i++) {
|
||||
var tr = document.createElement('tr');
|
||||
var td1 = document.createElement('td');
|
||||
td1.textContent = list[i];
|
||||
const moreInfo = document.createElement("table");
|
||||
for (const entry of list) {
|
||||
const tr = document.createElement("tr");
|
||||
const td1 = document.createElement("td");
|
||||
td1.textContent = entry;
|
||||
tr.appendChild(td1);
|
||||
var td2 = document.createElement('td');
|
||||
td2.textContent = obj[list[i]].toString();
|
||||
const td2 = document.createElement("td");
|
||||
td2.textContent = obj[entry].toString();
|
||||
tr.appendChild(td2);
|
||||
moreInfo.appendChild(tr);
|
||||
}
|
||||
return moreInfo;
|
||||
}
|
||||
var moreInfo = properties(fontObj, ['name', 'type']);
|
||||
var fontName = fontObj.loadedName;
|
||||
var font = document.createElement('div');
|
||||
var name = document.createElement('span');
|
||||
const moreInfo = properties(fontObj, ["name", "type"]);
|
||||
const fontName = fontObj.loadedName;
|
||||
const font = document.createElement("div");
|
||||
const name = document.createElement("span");
|
||||
name.textContent = fontName;
|
||||
var download = document.createElement('a');
|
||||
const download = document.createElement("a");
|
||||
if (url) {
|
||||
url = /url\(['"]?([^\)"']+)/.exec(url);
|
||||
url = /url\(['"]?([^)"']+)/.exec(url);
|
||||
download.href = url[1];
|
||||
} else if (fontObj.data) {
|
||||
url = URL.createObjectURL(new Blob([fontObj.data], {
|
||||
type: fontObj.mimeType,
|
||||
}));
|
||||
download.href = url;
|
||||
download.href = URL.createObjectURL(
|
||||
new Blob([fontObj.data], { type: fontObj.mimeType })
|
||||
);
|
||||
}
|
||||
download.textContent = 'Download';
|
||||
var logIt = document.createElement('a');
|
||||
logIt.href = '';
|
||||
logIt.textContent = 'Log';
|
||||
logIt.addEventListener('click', function(event) {
|
||||
download.textContent = "Download";
|
||||
const logIt = document.createElement("a");
|
||||
logIt.href = "";
|
||||
logIt.textContent = "Log";
|
||||
logIt.addEventListener("click", function (event) {
|
||||
event.preventDefault();
|
||||
console.log(fontObj);
|
||||
});
|
||||
var select = document.createElement('input');
|
||||
select.setAttribute('type', 'checkbox');
|
||||
const select = document.createElement("input");
|
||||
select.setAttribute("type", "checkbox");
|
||||
select.dataset.fontName = fontName;
|
||||
select.addEventListener('click', (function(select, fontName) {
|
||||
return (function() {
|
||||
selectFont(fontName, select.checked);
|
||||
});
|
||||
})(select, fontName));
|
||||
select.addEventListener("click", function () {
|
||||
selectFont(fontName, select.checked);
|
||||
});
|
||||
font.appendChild(select);
|
||||
font.appendChild(name);
|
||||
font.appendChild(document.createTextNode(' '));
|
||||
font.appendChild(document.createTextNode(" "));
|
||||
font.appendChild(download);
|
||||
font.appendChild(document.createTextNode(' '));
|
||||
font.appendChild(document.createTextNode(" "));
|
||||
font.appendChild(logIt);
|
||||
font.appendChild(moreInfo);
|
||||
fonts.appendChild(font);
|
||||
|
|
@ -158,100 +153,89 @@ var FontInspector = (function FontInspectorClosure() {
|
|||
};
|
||||
})();
|
||||
|
||||
var opMap;
|
||||
|
||||
// Manages all the page steppers.
|
||||
var StepperManager = (function StepperManagerClosure() {
|
||||
var steppers = [];
|
||||
var stepperDiv = null;
|
||||
var stepperControls = null;
|
||||
var stepperChooser = null;
|
||||
var breakPoints = Object.create(null);
|
||||
const StepperManager = (function StepperManagerClosure() {
|
||||
let steppers = [];
|
||||
let stepperDiv = null;
|
||||
let stepperControls = null;
|
||||
let stepperChooser = null;
|
||||
let breakPoints = Object.create(null);
|
||||
return {
|
||||
// Properties/functions needed by PDFBug.
|
||||
id: 'Stepper',
|
||||
name: 'Stepper',
|
||||
id: "Stepper",
|
||||
name: "Stepper",
|
||||
panel: null,
|
||||
manager: null,
|
||||
init: function init(pdfjsLib) {
|
||||
var self = this;
|
||||
this.panel.setAttribute('style', 'padding: 5px;');
|
||||
stepperControls = document.createElement('div');
|
||||
stepperChooser = document.createElement('select');
|
||||
stepperChooser.addEventListener('change', function(event) {
|
||||
init(pdfjsLib) {
|
||||
const self = this;
|
||||
stepperControls = document.createElement("div");
|
||||
stepperChooser = document.createElement("select");
|
||||
stepperChooser.addEventListener("change", function (event) {
|
||||
self.selectStepper(this.value);
|
||||
});
|
||||
stepperControls.appendChild(stepperChooser);
|
||||
stepperDiv = document.createElement('div');
|
||||
stepperDiv = document.createElement("div");
|
||||
this.panel.appendChild(stepperControls);
|
||||
this.panel.appendChild(stepperDiv);
|
||||
if (sessionStorage.getItem('pdfjsBreakPoints')) {
|
||||
breakPoints = JSON.parse(sessionStorage.getItem('pdfjsBreakPoints'));
|
||||
if (sessionStorage.getItem("pdfjsBreakPoints")) {
|
||||
breakPoints = JSON.parse(sessionStorage.getItem("pdfjsBreakPoints"));
|
||||
}
|
||||
|
||||
opMap = Object.create(null);
|
||||
for (var key in pdfjsLib.OPS) {
|
||||
for (const key in pdfjsLib.OPS) {
|
||||
opMap[pdfjsLib.OPS[key]] = key;
|
||||
}
|
||||
},
|
||||
cleanup: function cleanup() {
|
||||
stepperChooser.textContent = '';
|
||||
stepperDiv.textContent = '';
|
||||
cleanup() {
|
||||
stepperChooser.textContent = "";
|
||||
stepperDiv.textContent = "";
|
||||
steppers = [];
|
||||
},
|
||||
enabled: false,
|
||||
active: false,
|
||||
// Stepper specific functions.
|
||||
create: function create(pageIndex) {
|
||||
var debug = document.createElement('div');
|
||||
debug.id = 'stepper' + pageIndex;
|
||||
debug.setAttribute('hidden', true);
|
||||
debug.className = 'stepper';
|
||||
create(pageIndex) {
|
||||
const debug = document.createElement("div");
|
||||
debug.id = "stepper" + pageIndex;
|
||||
debug.hidden = true;
|
||||
debug.className = "stepper";
|
||||
stepperDiv.appendChild(debug);
|
||||
var b = document.createElement('option');
|
||||
b.textContent = 'Page ' + (pageIndex + 1);
|
||||
const b = document.createElement("option");
|
||||
b.textContent = "Page " + (pageIndex + 1);
|
||||
b.value = pageIndex;
|
||||
stepperChooser.appendChild(b);
|
||||
var initBreakPoints = breakPoints[pageIndex] || [];
|
||||
var stepper = new Stepper(debug, pageIndex, initBreakPoints);
|
||||
const initBreakPoints = breakPoints[pageIndex] || [];
|
||||
const stepper = new Stepper(debug, pageIndex, initBreakPoints);
|
||||
steppers.push(stepper);
|
||||
if (steppers.length === 1) {
|
||||
this.selectStepper(pageIndex, false);
|
||||
}
|
||||
return stepper;
|
||||
},
|
||||
selectStepper: function selectStepper(pageIndex, selectPanel) {
|
||||
var i;
|
||||
pageIndex = pageIndex | 0;
|
||||
selectStepper(pageIndex, selectPanel) {
|
||||
pageIndex |= 0;
|
||||
if (selectPanel) {
|
||||
this.manager.selectPanel(this);
|
||||
}
|
||||
for (i = 0; i < steppers.length; ++i) {
|
||||
var stepper = steppers[i];
|
||||
if (stepper.pageIndex === pageIndex) {
|
||||
stepper.panel.removeAttribute('hidden');
|
||||
} else {
|
||||
stepper.panel.setAttribute('hidden', true);
|
||||
}
|
||||
for (const stepper of steppers) {
|
||||
stepper.panel.hidden = stepper.pageIndex !== pageIndex;
|
||||
}
|
||||
var options = stepperChooser.options;
|
||||
for (i = 0; i < options.length; ++i) {
|
||||
var option = options[i];
|
||||
for (const option of stepperChooser.options) {
|
||||
option.selected = (option.value | 0) === pageIndex;
|
||||
}
|
||||
},
|
||||
saveBreakPoints: function saveBreakPoints(pageIndex, bps) {
|
||||
saveBreakPoints(pageIndex, bps) {
|
||||
breakPoints[pageIndex] = bps;
|
||||
sessionStorage.setItem('pdfjsBreakPoints', JSON.stringify(breakPoints));
|
||||
sessionStorage.setItem("pdfjsBreakPoints", JSON.stringify(breakPoints));
|
||||
},
|
||||
};
|
||||
})();
|
||||
|
||||
// The stepper for each page's IRQueue.
|
||||
var Stepper = (function StepperClosure() {
|
||||
// The stepper for each page's operatorList.
|
||||
const Stepper = (function StepperClosure() {
|
||||
// Shorter way to create element and optionally set textContent.
|
||||
function c(tag, textContent) {
|
||||
var d = document.createElement(tag);
|
||||
const d = document.createElement(tag);
|
||||
if (textContent) {
|
||||
d.textContent = textContent;
|
||||
}
|
||||
|
|
@ -259,63 +243,70 @@ var Stepper = (function StepperClosure() {
|
|||
}
|
||||
|
||||
function simplifyArgs(args) {
|
||||
if (typeof args === 'string') {
|
||||
var MAX_STRING_LENGTH = 75;
|
||||
return args.length <= MAX_STRING_LENGTH ? args :
|
||||
args.substr(0, MAX_STRING_LENGTH) + '...';
|
||||
if (typeof args === "string") {
|
||||
const MAX_STRING_LENGTH = 75;
|
||||
return args.length <= MAX_STRING_LENGTH
|
||||
? args
|
||||
: args.substring(0, MAX_STRING_LENGTH) + "...";
|
||||
}
|
||||
if (typeof args !== 'object' || args === null) {
|
||||
if (typeof args !== "object" || args === null) {
|
||||
return args;
|
||||
}
|
||||
if ('length' in args) { // array
|
||||
var simpleArgs = [], i, ii;
|
||||
var MAX_ITEMS = 10;
|
||||
if ("length" in args) {
|
||||
// array
|
||||
const MAX_ITEMS = 10,
|
||||
simpleArgs = [];
|
||||
let i, ii;
|
||||
for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) {
|
||||
simpleArgs.push(simplifyArgs(args[i]));
|
||||
}
|
||||
if (i < args.length) {
|
||||
simpleArgs.push('...');
|
||||
simpleArgs.push("...");
|
||||
}
|
||||
return simpleArgs;
|
||||
}
|
||||
var simpleObj = {};
|
||||
for (var key in args) {
|
||||
const simpleObj = {};
|
||||
for (const key in args) {
|
||||
simpleObj[key] = simplifyArgs(args[key]);
|
||||
}
|
||||
return simpleObj;
|
||||
}
|
||||
|
||||
function Stepper(panel, pageIndex, initialBreakPoints) {
|
||||
this.panel = panel;
|
||||
this.breakPoint = 0;
|
||||
this.nextBreakPoint = null;
|
||||
this.pageIndex = pageIndex;
|
||||
this.breakPoints = initialBreakPoints;
|
||||
this.currentIdx = -1;
|
||||
this.operatorListIdx = 0;
|
||||
}
|
||||
Stepper.prototype = {
|
||||
init: function init(operatorList) {
|
||||
var panel = this.panel;
|
||||
var content = c('div', 'c=continue, s=step');
|
||||
var table = c('table');
|
||||
// eslint-disable-next-line no-shadow
|
||||
class Stepper {
|
||||
constructor(panel, pageIndex, initialBreakPoints) {
|
||||
this.panel = panel;
|
||||
this.breakPoint = 0;
|
||||
this.nextBreakPoint = null;
|
||||
this.pageIndex = pageIndex;
|
||||
this.breakPoints = initialBreakPoints;
|
||||
this.currentIdx = -1;
|
||||
this.operatorListIdx = 0;
|
||||
this.indentLevel = 0;
|
||||
}
|
||||
|
||||
init(operatorList) {
|
||||
const panel = this.panel;
|
||||
const content = c("div", "c=continue, s=step");
|
||||
const table = c("table");
|
||||
content.appendChild(table);
|
||||
table.cellSpacing = 0;
|
||||
var headerRow = c('tr');
|
||||
const headerRow = c("tr");
|
||||
table.appendChild(headerRow);
|
||||
headerRow.appendChild(c('th', 'Break'));
|
||||
headerRow.appendChild(c('th', 'Idx'));
|
||||
headerRow.appendChild(c('th', 'fn'));
|
||||
headerRow.appendChild(c('th', 'args'));
|
||||
headerRow.appendChild(c("th", "Break"));
|
||||
headerRow.appendChild(c("th", "Idx"));
|
||||
headerRow.appendChild(c("th", "fn"));
|
||||
headerRow.appendChild(c("th", "args"));
|
||||
panel.appendChild(content);
|
||||
this.table = table;
|
||||
this.updateOperatorList(operatorList);
|
||||
},
|
||||
updateOperatorList: function updateOperatorList(operatorList) {
|
||||
var self = this;
|
||||
}
|
||||
|
||||
updateOperatorList(operatorList) {
|
||||
const self = this;
|
||||
|
||||
function cboxOnClick() {
|
||||
var x = +this.dataset.idx;
|
||||
const x = +this.dataset.idx;
|
||||
if (this.checked) {
|
||||
self.breakPoints.push(x);
|
||||
} else {
|
||||
|
|
@ -324,130 +315,145 @@ var Stepper = (function StepperClosure() {
|
|||
StepperManager.saveBreakPoints(self.pageIndex, self.breakPoints);
|
||||
}
|
||||
|
||||
var MAX_OPERATORS_COUNT = 15000;
|
||||
const MAX_OPERATORS_COUNT = 15000;
|
||||
if (this.operatorListIdx > MAX_OPERATORS_COUNT) {
|
||||
return;
|
||||
}
|
||||
|
||||
var chunk = document.createDocumentFragment();
|
||||
var operatorsToDisplay = Math.min(MAX_OPERATORS_COUNT,
|
||||
operatorList.fnArray.length);
|
||||
for (var i = this.operatorListIdx; i < operatorsToDisplay; i++) {
|
||||
var line = c('tr');
|
||||
line.className = 'line';
|
||||
const chunk = document.createDocumentFragment();
|
||||
const operatorsToDisplay = Math.min(
|
||||
MAX_OPERATORS_COUNT,
|
||||
operatorList.fnArray.length
|
||||
);
|
||||
for (let i = this.operatorListIdx; i < operatorsToDisplay; i++) {
|
||||
const line = c("tr");
|
||||
line.className = "line";
|
||||
line.dataset.idx = i;
|
||||
chunk.appendChild(line);
|
||||
var checked = this.breakPoints.indexOf(i) !== -1;
|
||||
var args = operatorList.argsArray[i] || [];
|
||||
const checked = this.breakPoints.includes(i);
|
||||
const args = operatorList.argsArray[i] || [];
|
||||
|
||||
var breakCell = c('td');
|
||||
var cbox = c('input');
|
||||
cbox.type = 'checkbox';
|
||||
cbox.className = 'points';
|
||||
const breakCell = c("td");
|
||||
const cbox = c("input");
|
||||
cbox.type = "checkbox";
|
||||
cbox.className = "points";
|
||||
cbox.checked = checked;
|
||||
cbox.dataset.idx = i;
|
||||
cbox.onclick = cboxOnClick;
|
||||
|
||||
breakCell.appendChild(cbox);
|
||||
line.appendChild(breakCell);
|
||||
line.appendChild(c('td', i.toString()));
|
||||
var fn = opMap[operatorList.fnArray[i]];
|
||||
var decArgs = args;
|
||||
if (fn === 'showText') {
|
||||
var glyphs = args[0];
|
||||
var newArgs = [];
|
||||
var str = [];
|
||||
for (var j = 0; j < glyphs.length; j++) {
|
||||
var glyph = glyphs[j];
|
||||
if (typeof glyph === 'object' && glyph !== null) {
|
||||
str.push(glyph.fontChar);
|
||||
line.appendChild(c("td", i.toString()));
|
||||
const fn = opMap[operatorList.fnArray[i]];
|
||||
let decArgs = args;
|
||||
if (fn === "showText") {
|
||||
const glyphs = args[0];
|
||||
const charCodeRow = c("tr");
|
||||
const fontCharRow = c("tr");
|
||||
const unicodeRow = c("tr");
|
||||
for (const glyph of glyphs) {
|
||||
if (typeof glyph === "object" && glyph !== null) {
|
||||
charCodeRow.appendChild(c("td", glyph.originalCharCode));
|
||||
fontCharRow.appendChild(c("td", glyph.fontChar));
|
||||
unicodeRow.appendChild(c("td", glyph.unicode));
|
||||
} else {
|
||||
if (str.length > 0) {
|
||||
newArgs.push(str.join(''));
|
||||
str = [];
|
||||
}
|
||||
newArgs.push(glyph); // null or number
|
||||
// null or number
|
||||
const advanceEl = c("td", glyph);
|
||||
advanceEl.classList.add("advance");
|
||||
charCodeRow.appendChild(advanceEl);
|
||||
fontCharRow.appendChild(c("td"));
|
||||
unicodeRow.appendChild(c("td"));
|
||||
}
|
||||
}
|
||||
if (str.length > 0) {
|
||||
newArgs.push(str.join(''));
|
||||
}
|
||||
decArgs = [newArgs];
|
||||
decArgs = c("td");
|
||||
const table = c("table");
|
||||
table.classList.add("showText");
|
||||
decArgs.appendChild(table);
|
||||
table.appendChild(charCodeRow);
|
||||
table.appendChild(fontCharRow);
|
||||
table.appendChild(unicodeRow);
|
||||
} else if (fn === "restore") {
|
||||
this.indentLevel--;
|
||||
}
|
||||
line.appendChild(c("td", " ".repeat(this.indentLevel * 2) + fn));
|
||||
if (fn === "save") {
|
||||
this.indentLevel++;
|
||||
}
|
||||
|
||||
if (decArgs instanceof HTMLElement) {
|
||||
line.appendChild(decArgs);
|
||||
} else {
|
||||
line.appendChild(c("td", JSON.stringify(simplifyArgs(decArgs))));
|
||||
}
|
||||
line.appendChild(c('td', fn));
|
||||
line.appendChild(c('td', JSON.stringify(simplifyArgs(decArgs))));
|
||||
}
|
||||
if (operatorsToDisplay < operatorList.fnArray.length) {
|
||||
line = c('tr');
|
||||
var lastCell = c('td', '...');
|
||||
const lastCell = c("td", "...");
|
||||
lastCell.colspan = 4;
|
||||
chunk.appendChild(lastCell);
|
||||
}
|
||||
this.operatorListIdx = operatorList.fnArray.length;
|
||||
this.table.appendChild(chunk);
|
||||
},
|
||||
getNextBreakPoint: function getNextBreakPoint() {
|
||||
this.breakPoints.sort(function(a, b) {
|
||||
}
|
||||
|
||||
getNextBreakPoint() {
|
||||
this.breakPoints.sort(function (a, b) {
|
||||
return a - b;
|
||||
});
|
||||
for (var i = 0; i < this.breakPoints.length; i++) {
|
||||
if (this.breakPoints[i] > this.currentIdx) {
|
||||
return this.breakPoints[i];
|
||||
for (const breakPoint of this.breakPoints) {
|
||||
if (breakPoint > this.currentIdx) {
|
||||
return breakPoint;
|
||||
}
|
||||
}
|
||||
return null;
|
||||
},
|
||||
breakIt: function breakIt(idx, callback) {
|
||||
}
|
||||
|
||||
breakIt(idx, callback) {
|
||||
StepperManager.selectStepper(this.pageIndex, true);
|
||||
var self = this;
|
||||
var dom = document;
|
||||
self.currentIdx = idx;
|
||||
var listener = function(e) {
|
||||
switch (e.keyCode) {
|
||||
this.currentIdx = idx;
|
||||
|
||||
const listener = evt => {
|
||||
switch (evt.keyCode) {
|
||||
case 83: // step
|
||||
dom.removeEventListener('keydown', listener);
|
||||
self.nextBreakPoint = self.currentIdx + 1;
|
||||
self.goTo(-1);
|
||||
document.removeEventListener("keydown", listener);
|
||||
this.nextBreakPoint = this.currentIdx + 1;
|
||||
this.goTo(-1);
|
||||
callback();
|
||||
break;
|
||||
case 67: // continue
|
||||
dom.removeEventListener('keydown', listener);
|
||||
var breakPoint = self.getNextBreakPoint();
|
||||
self.nextBreakPoint = breakPoint;
|
||||
self.goTo(-1);
|
||||
document.removeEventListener("keydown", listener);
|
||||
this.nextBreakPoint = this.getNextBreakPoint();
|
||||
this.goTo(-1);
|
||||
callback();
|
||||
break;
|
||||
}
|
||||
};
|
||||
dom.addEventListener('keydown', listener);
|
||||
self.goTo(idx);
|
||||
},
|
||||
goTo: function goTo(idx) {
|
||||
var allRows = this.panel.getElementsByClassName('line');
|
||||
for (var x = 0, xx = allRows.length; x < xx; ++x) {
|
||||
var row = allRows[x];
|
||||
document.addEventListener("keydown", listener);
|
||||
this.goTo(idx);
|
||||
}
|
||||
|
||||
goTo(idx) {
|
||||
const allRows = this.panel.getElementsByClassName("line");
|
||||
for (const row of allRows) {
|
||||
if ((row.dataset.idx | 0) === idx) {
|
||||
row.style.backgroundColor = 'rgb(251,250,207)';
|
||||
row.style.backgroundColor = "rgb(251,250,207)";
|
||||
row.scrollIntoView();
|
||||
} else {
|
||||
row.style.backgroundColor = null;
|
||||
}
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
return Stepper;
|
||||
})();
|
||||
|
||||
var Stats = (function Stats() {
|
||||
var stats = [];
|
||||
const Stats = (function Stats() {
|
||||
let stats = [];
|
||||
function clear(node) {
|
||||
while (node.hasChildNodes()) {
|
||||
node.removeChild(node.lastChild);
|
||||
}
|
||||
node.textContent = ""; // Remove any `node` contents from the DOM.
|
||||
}
|
||||
function getStatIndex(pageNumber) {
|
||||
for (var i = 0, ii = stats.length; i < ii; ++i) {
|
||||
if (stats[i].pageNumber === pageNumber) {
|
||||
for (const [i, stat] of stats.entries()) {
|
||||
if (stat.pageNumber === pageNumber) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
|
|
@ -455,14 +461,11 @@ var Stats = (function Stats() {
|
|||
}
|
||||
return {
|
||||
// Properties/functions needed by PDFBug.
|
||||
id: 'Stats',
|
||||
name: 'Stats',
|
||||
id: "Stats",
|
||||
name: "Stats",
|
||||
panel: null,
|
||||
manager: null,
|
||||
init(pdfjsLib) {
|
||||
this.panel.setAttribute('style', 'padding: 5px;');
|
||||
pdfjsLib.PDFJS.enableStats = true;
|
||||
},
|
||||
init(pdfjsLib) {},
|
||||
enabled: false,
|
||||
active: false,
|
||||
// Stats specific functions.
|
||||
|
|
@ -470,28 +473,27 @@ var Stats = (function Stats() {
|
|||
if (!stat) {
|
||||
return;
|
||||
}
|
||||
var statsIndex = getStatIndex(pageNumber);
|
||||
const statsIndex = getStatIndex(pageNumber);
|
||||
if (statsIndex !== false) {
|
||||
var b = stats[statsIndex];
|
||||
this.panel.removeChild(b.div);
|
||||
stats[statsIndex].div.remove();
|
||||
stats.splice(statsIndex, 1);
|
||||
}
|
||||
var wrapper = document.createElement('div');
|
||||
wrapper.className = 'stats';
|
||||
var title = document.createElement('div');
|
||||
title.className = 'title';
|
||||
title.textContent = 'Page: ' + pageNumber;
|
||||
var statsDiv = document.createElement('div');
|
||||
const wrapper = document.createElement("div");
|
||||
wrapper.className = "stats";
|
||||
const title = document.createElement("div");
|
||||
title.className = "title";
|
||||
title.textContent = "Page: " + pageNumber;
|
||||
const statsDiv = document.createElement("div");
|
||||
statsDiv.textContent = stat.toString();
|
||||
wrapper.appendChild(title);
|
||||
wrapper.appendChild(statsDiv);
|
||||
stats.push({ pageNumber, div: wrapper, });
|
||||
stats.sort(function(a, b) {
|
||||
stats.push({ pageNumber, div: wrapper });
|
||||
stats.sort(function (a, b) {
|
||||
return a.pageNumber - b.pageNumber;
|
||||
});
|
||||
clear(this.panel);
|
||||
for (var i = 0, ii = stats.length; i < ii; ++i) {
|
||||
this.panel.appendChild(stats[i].div);
|
||||
for (const entry of stats) {
|
||||
this.panel.appendChild(entry.div);
|
||||
}
|
||||
},
|
||||
cleanup() {
|
||||
|
|
@ -502,40 +504,35 @@ var Stats = (function Stats() {
|
|||
})();
|
||||
|
||||
// Manages all the debugging tools.
|
||||
window.PDFBug = (function PDFBugClosure() {
|
||||
var panelWidth = 300;
|
||||
var buttons = [];
|
||||
var activePanel = null;
|
||||
const PDFBug = (function PDFBugClosure() {
|
||||
const panelWidth = 300;
|
||||
const buttons = [];
|
||||
let activePanel = null;
|
||||
|
||||
return {
|
||||
tools: [
|
||||
FontInspector,
|
||||
StepperManager,
|
||||
Stats
|
||||
],
|
||||
tools: [FontInspector, StepperManager, Stats],
|
||||
enable(ids) {
|
||||
var all = false, tools = this.tools;
|
||||
if (ids.length === 1 && ids[0] === 'all') {
|
||||
all = true;
|
||||
}
|
||||
for (var i = 0; i < tools.length; ++i) {
|
||||
var tool = tools[i];
|
||||
if (all || ids.indexOf(tool.id) !== -1) {
|
||||
const all = ids.length === 1 && ids[0] === "all";
|
||||
const tools = this.tools;
|
||||
for (const tool of tools) {
|
||||
if (all || ids.includes(tool.id)) {
|
||||
tool.enabled = true;
|
||||
}
|
||||
}
|
||||
if (!all) {
|
||||
// Sort the tools by the order they are enabled.
|
||||
tools.sort(function(a, b) {
|
||||
var indexA = ids.indexOf(a.id);
|
||||
tools.sort(function (a, b) {
|
||||
let indexA = ids.indexOf(a.id);
|
||||
indexA = indexA < 0 ? tools.length : indexA;
|
||||
var indexB = ids.indexOf(b.id);
|
||||
let indexB = ids.indexOf(b.id);
|
||||
indexB = indexB < 0 ? tools.length : indexB;
|
||||
return indexA - indexB;
|
||||
});
|
||||
}
|
||||
},
|
||||
init(pdfjsLib, container) {
|
||||
init(pdfjsLib, container, ids) {
|
||||
this.loadCSS();
|
||||
this.enable(ids);
|
||||
/*
|
||||
* Basic Layout:
|
||||
* PDFBug
|
||||
|
|
@ -545,34 +542,29 @@ window.PDFBug = (function PDFBugClosure() {
|
|||
* Panel
|
||||
* ...
|
||||
*/
|
||||
var ui = document.createElement('div');
|
||||
ui.id = 'PDFBug';
|
||||
const ui = document.createElement("div");
|
||||
ui.id = "PDFBug";
|
||||
|
||||
var controls = document.createElement('div');
|
||||
controls.setAttribute('class', 'controls');
|
||||
const controls = document.createElement("div");
|
||||
controls.setAttribute("class", "controls");
|
||||
ui.appendChild(controls);
|
||||
|
||||
var panels = document.createElement('div');
|
||||
panels.setAttribute('class', 'panels');
|
||||
const panels = document.createElement("div");
|
||||
panels.setAttribute("class", "panels");
|
||||
ui.appendChild(panels);
|
||||
|
||||
container.appendChild(ui);
|
||||
container.style.right = panelWidth + 'px';
|
||||
container.style.right = panelWidth + "px";
|
||||
|
||||
// Initialize all the debugging tools.
|
||||
var tools = this.tools;
|
||||
var self = this;
|
||||
for (var i = 0; i < tools.length; ++i) {
|
||||
var tool = tools[i];
|
||||
var panel = document.createElement('div');
|
||||
var panelButton = document.createElement('button');
|
||||
for (const tool of this.tools) {
|
||||
const panel = document.createElement("div");
|
||||
const panelButton = document.createElement("button");
|
||||
panelButton.textContent = tool.name;
|
||||
panelButton.addEventListener('click', (function(selected) {
|
||||
return function(event) {
|
||||
event.preventDefault();
|
||||
self.selectPanel(selected);
|
||||
};
|
||||
})(i));
|
||||
panelButton.addEventListener("click", event => {
|
||||
event.preventDefault();
|
||||
this.selectPanel(tool);
|
||||
});
|
||||
controls.appendChild(panelButton);
|
||||
panels.appendChild(panel);
|
||||
tool.panel = panel;
|
||||
|
|
@ -580,41 +572,50 @@ window.PDFBug = (function PDFBugClosure() {
|
|||
if (tool.enabled) {
|
||||
tool.init(pdfjsLib);
|
||||
} else {
|
||||
panel.textContent = tool.name + ' is disabled. To enable add ' +
|
||||
' "' + tool.id + '" to the pdfBug parameter ' +
|
||||
'and refresh (separate multiple by commas).';
|
||||
panel.textContent =
|
||||
`${tool.name} is disabled. To enable add "${tool.id}" to ` +
|
||||
"the pdfBug parameter and refresh (separate multiple by commas).";
|
||||
}
|
||||
buttons.push(panelButton);
|
||||
}
|
||||
this.selectPanel(0);
|
||||
},
|
||||
loadCSS() {
|
||||
const { url } = import.meta;
|
||||
|
||||
const link = document.createElement("link");
|
||||
link.rel = "stylesheet";
|
||||
link.href = url.replace(/.js$/, ".css");
|
||||
|
||||
document.head.appendChild(link);
|
||||
},
|
||||
cleanup() {
|
||||
for (var i = 0, ii = this.tools.length; i < ii; i++) {
|
||||
if (this.tools[i].enabled) {
|
||||
this.tools[i].cleanup();
|
||||
for (const tool of this.tools) {
|
||||
if (tool.enabled) {
|
||||
tool.cleanup();
|
||||
}
|
||||
}
|
||||
},
|
||||
selectPanel(index) {
|
||||
if (typeof index !== 'number') {
|
||||
if (typeof index !== "number") {
|
||||
index = this.tools.indexOf(index);
|
||||
}
|
||||
if (index === activePanel) {
|
||||
return;
|
||||
}
|
||||
activePanel = index;
|
||||
var tools = this.tools;
|
||||
for (var j = 0; j < tools.length; ++j) {
|
||||
if (j === index) {
|
||||
buttons[j].setAttribute('class', 'active');
|
||||
tools[j].active = true;
|
||||
tools[j].panel.removeAttribute('hidden');
|
||||
} else {
|
||||
buttons[j].setAttribute('class', '');
|
||||
tools[j].active = false;
|
||||
tools[j].panel.setAttribute('hidden', 'true');
|
||||
}
|
||||
for (const [j, tool] of this.tools.entries()) {
|
||||
const isActive = j === index;
|
||||
buttons[j].classList.toggle("active", isActive);
|
||||
tool.active = isActive;
|
||||
tool.panel.hidden = !isActive;
|
||||
}
|
||||
},
|
||||
};
|
||||
})();
|
||||
|
||||
globalThis.FontInspector = FontInspector;
|
||||
globalThis.StepperManager = StepperManager;
|
||||
globalThis.Stats = Stats;
|
||||
|
||||
export { PDFBug };
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 199 B |
Binary file not shown.
|
Before Width: | Height: | Size: 304 B |
Binary file not shown.
|
Before Width: | Height: | Size: 193 B |
|
|
@ -0,0 +1,4 @@
|
|||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M8 12a1 1 0 0 1-.707-.293l-5-5a1 1 0 0 1 1.414-1.414L8 9.586l4.293-4.293a1 1 0 0 1 1.414 1.414l-5 5A1 1 0 0 1 8 12z"></path></svg>
|
||||
|
After Width: | Height: | Size: 434 B |
Binary file not shown.
|
Before Width: | Height: | Size: 296 B |
Binary file not shown.
|
Before Width: | Height: | Size: 193 B |
Binary file not shown.
|
Before Width: | Height: | Size: 296 B |
Binary file not shown.
|
Before Width: | Height: | Size: 199 B |
|
|
@ -0,0 +1,4 @@
|
|||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M13 11a1 1 0 0 1-.707-.293L8 6.414l-4.293 4.293a1 1 0 0 1-1.414-1.414l5-5a1 1 0 0 1 1.414 0l5 5A1 1 0 0 1 13 11z"></path></svg>
|
||||
|
After Width: | Height: | Size: 431 B |
Binary file not shown.
|
Before Width: | Height: | Size: 304 B |
Binary file not shown.
|
Before Width: | Height: | Size: 326 B |
Binary file not shown.
|
Before Width: | Height: | Size: 326 B |
|
|
@ -0,0 +1,24 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"
|
||||
fill="rgba(255,255,255,1)" style="animation:spinLoadingIcon 1s steps(12,end)
|
||||
infinite"><style>@keyframes
|
||||
spinLoadingIcon{to{transform:rotate(360deg)}}</style><path
|
||||
d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z"/><path d="M4.63
|
||||
4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
|
||||
1.37c-.87.57-1.37-.37-1.37-.37z" fill-opacity=".93"/><path
|
||||
d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
|
||||
1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".86"/><path d="M3
|
||||
9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".79"/><path d="M4.1 11.37l-1.73 1S1.5 12.87 1
|
||||
12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z"
|
||||
fill-opacity=".72"/><path d="M3.63 13.56l1-1.73s.5-.87
|
||||
1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
|
||||
fill-opacity=".65"/><path d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1
|
||||
1-1-1-1-1z" fill-opacity=".58"/><path d="M10.63
|
||||
14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37
|
||||
1.37c-.87.5-1.37-.37-1.37-.37z" fill-opacity=".51"/><path
|
||||
d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37
|
||||
1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".44"/><path d="M15
|
||||
9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".37"/><path d="M14.56 5.37l-1.73
|
||||
1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37
|
||||
1.37z" fill-opacity=".3"/><path d="M9.64 3.1l.98-1.66s.5-.874
|
||||
1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z"
|
||||
fill-opacity=".23"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" style="animation:spinLoadingIcon 1s steps(12,end) infinite"><style>@keyframes spinLoadingIcon{to{transform:rotate(360deg)}}</style><path d="M7 3V1s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z"/><path d="M4.63 4.1l-1-1.73S3.13 1.5 4 1c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37 1.37c-.87.57-1.37-.37-1.37-.37z" fill-opacity=".93"/><path d="M3.1 6.37l-1.73-1S.5 4.87 1 4c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37 1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".86"/><path d="M3 9H1S0 9 0 8s1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".79"/><path d="M4.1 11.37l-1.73 1S1.5 12.87 1 12c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z" fill-opacity=".72"/><path d="M3.63 13.56l1-1.73s.5-.87 1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z" fill-opacity=".65"/><path d="M7 15v-2s0-1 1-1 1 1 1 1v2s0 1-1 1-1-1-1-1z" fill-opacity=".58"/><path d="M10.63 14.56l-1-1.73s-.5-.87.37-1.37c.87-.5 1.37.37 1.37.37l1 1.73s.5.87-.37 1.37c-.87.5-1.37-.37-1.37-.37z" fill-opacity=".51"/><path d="M13.56 12.37l-1.73-1s-.87-.5-.37-1.37c.5-.87 1.37-.37 1.37-.37l1.73 1s.87.5.37 1.37c-.5.87-1.37.37-1.37.37z" fill-opacity=".44"/><path d="M15 9h-2s-1 0-1-1 1-1 1-1h2s1 0 1 1-1 1-1 1z" fill-opacity=".37"/><path d="M14.56 5.37l-1.73 1s-.87.5-1.37-.37c-.5-.87.37-1.37.37-1.37l1.73-1s.87-.5 1.37.37c.5.87-.37 1.37-.37 1.37z" fill-opacity=".3"/><path d="M9.64 3.1l.98-1.66s.5-.874 1.37-.37c.87.5.37 1.37.37 1.37l-1 1.73s-.5.87-1.37.37c-.87-.5-.37-1.37-.37-1.37z" fill-opacity=".23"/></svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 403 B |
|
|
@ -0,0 +1,15 @@
|
|||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16
|
||||
16">
|
||||
<path
|
||||
d="M8 16a8 8 0 1 1 8-8 8.009 8.009 0 0 1-8 8zM8 2a6 6 0 1 0 6 6 6.006 6.006 0 0 0-6-6z">
|
||||
</path>
|
||||
<path
|
||||
d="M8 7a1 1 0 0 0-1 1v3a1 1 0 0 0 2 0V8a1 1 0 0 0-1-1z">
|
||||
</path>
|
||||
<circle
|
||||
cx="8" cy="5" r="1.188">
|
||||
</circle>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 530 B |
Binary file not shown.
|
Before Width: | Height: | Size: 933 B |
Binary file not shown.
|
Before Width: | Height: | Size: 179 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M13 13c-.3 0-.5-.1-.7-.3L8 8.4l-4.3 4.3c-.9.9-2.3-.5-1.4-1.4l5-5c.4-.4 1-.4 1.4 0l5 5c.6.6.2 1.7-.7 1.7zm0-11H3C1.7 2 1.7 4 3 4h10c1.3 0 1.3-2 0-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 228 B |
Binary file not shown.
|
Before Width: | Height: | Size: 266 B |
Binary file not shown.
|
Before Width: | Height: | Size: 301 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M15 3.7V13c0 1.5-1.53 3-3 3H7.13c-.72 0-1.63-.5-2.13-1l-5-5s.84-1 .87-1c.13-.1.33-.2.53-.2.1 0 .3.1.4.2L4 10.6V2.7c0-.6.4-1 1-1s1 .4 1 1v4.6h1V1c0-.6.4-1 1-1s1 .4 1 1v6.3h1V1.7c0-.6.4-1 1-1s1 .4 1 1v5.7h1V3.7c0-.6.4-1 1-1s1 .4 1 1z"/></svg>
|
||||
|
After Width: | Height: | Size: 312 B |
Binary file not shown.
|
Before Width: | Height: | Size: 583 B |
Binary file not shown.
|
Before Width: | Height: | Size: 175 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M8 10c-.3 0-.5-.1-.7-.3l-5-5c-.9-.9.5-2.3 1.4-1.4L8 7.6l4.3-4.3c.9-.9 2.3.5 1.4 1.4l-5 5c-.2.2-.4.3-.7.3zm5 2H3c-1.3 0-1.3 2 0 2h10c1.3 0 1.3-2 0-2z"/></svg>
|
||||
|
After Width: | Height: | Size: 229 B |
Binary file not shown.
|
Before Width: | Height: | Size: 276 B |
Binary file not shown.
|
Before Width: | Height: | Size: 360 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M1 1a1 1 0 011 1v2.4A7 7 0 118 15a7 7 0 01-4.9-2 1 1 0 011.4-1.5 5 5 0 10-1-5.5H6a1 1 0 010 2H1a1 1 0 01-1-1V2a1 1 0 011-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 204 B |
Binary file not shown.
|
Before Width: | Height: | Size: 731 B |
Binary file not shown.
|
Before Width: | Height: | Size: 359 B |
|
|
@ -0,0 +1,4 @@
|
|||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path></svg>
|
||||
|
After Width: | Height: | Size: 494 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue