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

Merge branch 'develop' into feature/184

This commit is contained in:
mateuswetah 2022-06-22 14:23:18 -03:00
parent e7fc817e14 39c57ebd24
commit 159c362c10
331 changed files with 118930 additions and 88347 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.eslintrc.js
View File

@ -25,7 +25,8 @@ module.exports = {
'vue/no-confusing-v-for-v-if': 'off', 'vue/no-confusing-v-for-v-if': 'off',
'vue/no-use-v-if-with-v-for': 'off', 'vue/no-use-v-if-with-v-for': 'off',
'vue/multi-word-component-names': '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: { globals: {
'wp': true, 'wp': true,

2
build.sh
View File

@ -93,7 +93,7 @@ mkdir $wp_plugin_dir
rsync -axz --exclude='vendor/bin/phpc*' --exclude='vendor/squizlabs' --exclude='vendor/wimg' \ 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/.git' --exclude='vendor/symfony/polyfill-mbstring/.git' \
--exclude='vendor/respect/validation/docs' --exclude='vendor/respect/validation/tests' \ --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/tecnickcom/tcpdf/fonts' \
--exclude='vendor/smalot/pdfparser/src/Smalot/PdfParser/Tests/' \ --exclude='vendor/smalot/pdfparser/src/Smalot/PdfParser/Tests/' \
--exclude='vendor/tecnickcom/tcpdf/examples' \ --exclude='vendor/tecnickcom/tcpdf/examples' \

11466
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

59
package.json
View File

@ -8,58 +8,59 @@
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production" "build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --progress --mode production"
}, },
"dependencies": { "dependencies": {
"apexcharts": "^3.34.0", "apexcharts": "^3.35.3",
"axios": "^0.21.4", "axios": "^0.27.2",
"blurhash": "^1.1.5", "blurhash": "^1.1.5",
"buefy": "^0.9.19", "buefy": "^0.9.21",
"bulma": "^0.9.3", "bulma": "^0.9.4",
"conditioner-core": "^2.3.3", "conditioner-core": "^2.3.3",
"countup.js": "^2.1.0", "countup.js": "^2.2.0",
"css-vars-ponyfill": "^2.4.7", "css-vars-ponyfill": "^2.4.7",
"floating-vue": "^1.0.0-beta.15", "floating-vue": "^1.0.0-beta.17",
"moment": "^2.29.1", "masonry-layout": "^4.2.2",
"moment": "^2.29.3",
"node-sass": "^7.0.1", "node-sass": "^7.0.1",
"photoswipe": "^5.2.2", "photoswipe": "^5.2.8",
"qs": "^6.10.3", "qs": "^6.10.5",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"swiper": "^8.0.7", "swiper": "^8.2.4",
"t": "^0.5.1", "t": "^0.5.1",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-apexcharts": "^1.6.2", "vue-apexcharts": "^1.6.2",
"vue-blurhash": "^0.1.4", "vue-blurhash": "^0.1.4",
"vue-countup-v2": "^4.0.0", "vue-countup-v2": "^4.0.0",
"vue-masonry-css": "^1.0.3", "vue-router": "^3.5.4",
"vue-router": "^3.1.6",
"vue-the-mask": "^0.11.1", "vue-the-mask": "^0.11.1",
"vuedraggable": "^2.24.3", "vuedraggable": "^2.24.3",
"vuex": "^3.4.0" "vuex": "^3.6.2"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.8", "@babel/core": "^7.18.5",
"@babel/preset-env": "^7.16.11", "@babel/preset-env": "^7.18.2",
"@babel/preset-react": "^7.16.7", "@babel/preset-react": "^7.17.12",
"acorn": "^8.7.0", "@types/masonry-layout": "^4.2.5",
"autoprefixer": "^10.4.4", "acorn": "^8.7.1",
"babel-loader": "^8.2.4", "autoprefixer": "^10.4.7",
"babel-loader": "^8.2.5",
"circular-dependency-plugin": "5.2.2",
"cross-env": "^7.0.3", "cross-env": "^7.0.3",
"css-loader": "^6.7.1", "css-loader": "^6.7.1",
"eslint": "^8.12.0", "eslint": "^8.18.0",
"eslint-plugin-vue": "^8.5.0", "eslint-plugin-vue": "^9.1.1",
"eslint-webpack-plugin": "^3.1.1", "eslint-webpack-plugin": "^3.1.1",
"file-loader": "^6.2.0", "file-loader": "^6.2.0",
"moment-locales-webpack-plugin": "^1.2.0", "moment-locales-webpack-plugin": "^1.2.0",
"postcss-loader": "^6.2.1", "postcss-loader": "7.0.0",
"sass-loader": "^12.6.0", "sass-loader": "^13.0.0",
"style-loader": "^3.3.1", "style-loader": "^3.3.1",
"terser-webpack-plugin": "5.3.1", "terser-webpack-plugin": "5.3.3",
"vue-loader": "^15.9.8", "vue-loader": "^15.9.8",
"vue-template-compiler": "^2.6.14", "vue-template-compiler": "^2.6.14",
"webpack": "^5.70.0", "webpack": "^5.73.0",
"webpack-bundle-analyzer": "^4.5.0", "webpack-bundle-analyzer": "^4.5.0",
"webpack-cli": "^4.9.2", "webpack-cli": "^4.10.0",
"webpack-dev-server": "^4.7.4", "webpack-dev-server": "^4.9.2",
"webpack-merge": "^5.8.0", "webpack-merge": "^5.8.0"
"circular-dependency-plugin": "5.2.2"
} }
} }

3
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
View File

@ -136,7 +136,8 @@
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a, .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a,
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a:hover { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper a:hover {
color: inherit; color: inherit;
text-decoration: none; } text-decoration: none;
display: block; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate img { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide-duplicate img {
display: initial !important; } display: initial !important; }
.wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a { .wp-block-tainacan-carousel-collections-list .tainacan-carousel .swiper .swiper-slide.collection-list-item-grid a {

2
src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css.map
View File

File diff suppressed because one or more lines are too long

3
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
View File

@ -143,7 +143,8 @@
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a, .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a,
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a:hover { .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper a:hover {
color: inherit; color: inherit;
text-decoration: none; } text-decoration: none;
display: block; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div { .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div {
padding-bottom: 100% !important; } padding-bottom: 100% !important; }
.wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img { .wp-block-tainacan-carousel-items-list .tainacan-carousel .swiper .is-forced-square > a > div img {

2
src/assets/css/tainacan-gutenberg-block-carousel-items-list.css.map
View File

File diff suppressed because one or more lines are too long

3
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
View File

@ -136,7 +136,8 @@
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a, .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a,
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a:hover { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper a:hover {
color: inherit; color: inherit;
text-decoration: none; } text-decoration: none;
display: block; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate img { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide-duplicate img {
display: initial !important; } display: initial !important; }
.wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid a { .wp-block-tainacan-carousel-terms-list .tainacan-carousel .swiper .swiper-slide.term-list-item-grid a {

2
src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css.map
View File

File diff suppressed because one or more lines are too long

3
src/assets/css/tainacan-gutenberg-block-collections-list.css
View File

@ -47,7 +47,8 @@
color: inherit; color: inherit;
border: none; border: none;
font-weight: bold; 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.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 { .wp-block-tainacan-collections-list ul.collections-list-edit.collections-layout-grid li.collection-list-item img {
height: auto; height: auto;

2
src/assets/css/tainacan-gutenberg-block-collections-list.css.map
View File

@ -1,6 +1,6 @@
{ {
"version": 3, "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"], "sources": ["../../views/gutenberg-blocks/blocks/collections-list/style.scss","../../views/gutenberg-blocks/scss/gutenberg-blocks-variables.scss"],
"names": [], "names": [],
"file": "tainacan-gutenberg-block-collections-list.css" "file": "tainacan-gutenberg-block-collections-list.css"

2
src/classes/class-tainacan-embed.php
View File

@ -77,7 +77,7 @@ class Embed {
public function pdf_embed_handler($matches, $attr, $url, $rawattr) { public function pdf_embed_handler($matches, $attr, $url, $rawattr) {
global $TAINACAN_BASE_URL; 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; //$viewer_url = $TAINACAN_BASE_URL . '/assets/pdfjs-dist/web/viewer.html?file=' . $url;
$defaults = array( $defaults = array(

6
src/classes/entities/class-tainacan-item.php
View File

@ -814,16 +814,16 @@ class Item extends Entity {
$document_options = $this->get_document_options(); $document_options = $this->get_document_options();
$output = ''; $output = '';
if ( $type == 'url' ) { if ( $type == 'url' ) {
global $wp_embed; global $wp_embed;
$_embed = $wp_embed->autoembed($this->get_document()); $_embed = $wp_embed->autoembed($this->get_document());
$url = $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 ) { if ( $document_options && isset($document_options['forced_iframe']) && $document_options['forced_iframe'] === true ) {
// URL points to an image file // URL points to an image file
if (isset($document_options['is_image']) && $document_options['is_image'] === true) { if (isset($document_options['is_image']) && $document_options['is_image'] === true) {
$_embed = sprintf('<a href="%s" target="blank"><img src="%s" /></a>', $url, $url); $_embed = sprintf('<a href="%s" target="blank"><img src="%s" /></a>', $url, $url);

2
src/classes/exposers/class-tainacan-exposers-handler.php
View File

@ -148,7 +148,7 @@ class Exposers_Handler {
$type_responde = $exposer->rest_request_after_callbacks($response, $handler, $request); $type_responde = $exposer->rest_request_after_callbacks($response, $handler, $request);
if(self::request_has_url_param($request)) { if(self::request_has_url_param($request)) {
header(implode('', $response->get_headers())); header(implode('', $response->get_headers()));
echo esc_attr(stripcslashes($response->get_data())); echo wp_kses_tainacan(stripcslashes($response->get_data()));
exit(); exit();
} }
return $type_responde; return $type_responde;

18
src/classes/theme-helper/class-tainacan-theme-helper.php
View File

@ -914,7 +914,7 @@ class Theme_Helper {
* @type integer $auto_play_speed The time in s to translate to the next slide automatically * @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 $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 $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_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 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 * @type string $collection_background_color Color of the collection header background
@ -937,7 +937,7 @@ class Theme_Helper {
'auto_play_speed' => 3, 'auto_play_speed' => 3,
'loop_slides' => false, 'loop_slides' => false,
'hide_title' => false, 'hide_title' => false,
'crop_images_to_square' => true, 'image_size' => 'tainacan-medium',
'show_collection_header' => false, 'show_collection_header' => false,
'show_collection_label' => false, 'show_collection_label' => false,
'collection_background_color' => '#454647', 'collection_background_color' => '#454647',
@ -948,6 +948,11 @@ class Theme_Helper {
); );
$args = wp_parse_args($args, $defaults); $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 = ' '; $props = ' ';
// Always pass the class needed by Vue to mount the component; // 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_name Show the item title
* @type string $show_image Show the item thumbnail * @type string $show_image Show the item thumbnail
* @type string $layout Either 'grid', 'list' or 'mosaic' * @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_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 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 * @type string $collection_background_color Color of the collection header background
@ -1015,7 +1020,7 @@ class Theme_Helper {
'show_name' => true, 'show_name' => true,
'show_image' => true, 'show_image' => true,
'layout' => 'grid', 'layout' => 'grid',
'crop_images_to_square' => true, 'image_size' => 'tainacan-medium',
'show_collection_header' => false, 'show_collection_header' => false,
'show_collection_label' => false, 'show_collection_label' => false,
'collection_background_color' => '#454647', 'collection_background_color' => '#454647',
@ -1032,6 +1037,11 @@ class Theme_Helper {
); );
$args = wp_parse_args($args, $defaults); $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 = ' '; $props = ' ';
// Always pass the class needed by Vue to mount the component; // Always pass the class needed by Vue to mount the component;

2
src/classes/theme-helper/template-tags.php
View File

@ -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 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 $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 $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_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 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 * @type string $collection_background_color Color of the collection header background

16
src/tainacan.php
View File

@ -4,7 +4,7 @@ Plugin Name: Tainacan
Plugin URI: https://tainacan.org/ 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. 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 Author: Tainacan.org
Version: 0.18.10 Version: 0.19-beta
Requires at least: 5.0 Requires at least: 5.0
Tested up to: 6.0 Tested up to: 6.0
Requires PHP: 5.6 Requires PHP: 5.6
@ -14,7 +14,7 @@ License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html 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!' ); defined( 'ABSPATH' ) or die( 'No script kiddies please!' );
$TAINACAN_BASE_URL = plugins_url('', __FILE__); $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-small', 40, 40, true );
add_image_size( 'tainacan-medium', 275, 275, true ); add_image_size( 'tainacan-medium', 275, 275, true );
add_image_size( 'tainacan-medium-full', 205, 1500 ); 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']); add_action('init', ['Tainacan\Migrations', 'run_migrations']);
//https://core.trac.wordpress.org/ticket/23022 //https://core.trac.wordpress.org/ticket/23022

433
src/views/admin/components/lists/collections-home-list.vue
View File

@ -2,82 +2,79 @@
<div <div
style="min-height: initial; position: relative" style="min-height: initial; position: relative"
class="tainacan-cards-container"> class="tainacan-cards-container">
<template v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')"> <ul
<ul class="new-collection-menu"> v-if="collections.length <= 0 && !isLoading && $userCaps.hasCapability('tnc_rep_edit_collections')"
<li> class="new-collection-menu">
<router-link <li>
tag="a" <router-link
:to="$routerHelper.getNewCollectionPath()" tag="a"
class="first-card"> :to="$routerHelper.getNewCollectionPath()"
<div class="list-metadata"> class="first-card">
<span class="icon is-large"> <div class="list-metadata">
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/> <span class="icon is-large">
</span> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-addcollection"/>
<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>
<span class="menu-text">{{ $i18n.get('items') }}</span> <div>{{ $i18n.get('label_create_collection') }}</div>
</router-link> </div>
</li> </router-link>
<li> </li>
<router-link <li>
tag="a" <router-link
:to="{ path: $routerHelper.getNewCollectionPath() }" tag="a"
:aria-label="$i18n.get('label_collection_metadata')"> :to="{ path: $routerHelper.getNewCollectionPath() }"
<span :aria-label="$i18n.get('label_collection_items')">
v-tooltip="{ <span
content: $i18n.get('label_collection_metadata'), v-tooltip="{
autoHide: true, content: $i18n.get('label_collection_items'),
placement: 'auto', autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'] placement: 'auto',
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon is-medium"> }"
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/> class="icon is-medium">
</span> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-items"/>
<span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> </span>
</router-link> <span class="menu-text">{{ $i18n.get('items') }}</span>
</li> </router-link>
<li> </li>
<router-link <li>
tag="a" <router-link
:to="{ path: $routerHelper.getNewCollectionPath() }" tag="a"
:aria-label="$i18n.get('label_collection_filters')"> :to="{ path: $routerHelper.getNewCollectionPath() }"
<span :aria-label="$i18n.get('label_collection_metadata')">
v-tooltip="{ <span
content: $i18n.get('label_collection_filters'), v-tooltip="{
autoHide: true, content: $i18n.get('label_collection_metadata'),
placement: 'auto', autoHide: true,
popperClass: ['tainacan-tooltip', 'tooltip'] placement: 'auto',
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon is-medium"> }"
<i class="tainacan-icon tainacan-icon-36px tainacan-icon-filters"/> class="icon is-medium">
</span> <i class="tainacan-icon tainacan-icon-36px tainacan-icon-metadata"/>
<span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> </span>
</router-link> <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span>
</li> </router-link>
</ul> </li>
</template> <li>
<template v-if="collections.length > 0 && !isLoading"> <router-link
<masonry tag="a"
:cols="{ default: 5, 1919: 4, 1407: 3, 1215: 2, 1023: 2, 767: 1 }" :to="{ path: $routerHelper.getNewCollectionPath() }"
:gutter="25" :aria-label="$i18n.get('label_collection_filters')">
style="width:100%;"> <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 <router-link
v-if="$userCaps.hasCapability('tnc_rep_edit_collections')" v-if="$userCaps.hasCapability('tnc_rep_edit_collections')"
tag="a" tag="a"
@ -143,149 +140,149 @@
</li> </li>
</ul> </ul>
</router-link> </router-link>
<div </li>
v-if="collections.length > 0 && !isLoading" <li
:key="index" v-if="collections.length > 0 && !isLoading"
v-for="(collection, index) of collections" :key="index"
class="tainacan-card" v-for="(collection, index) of collections"
:class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }"> class="tainacan-card"
<ul class="menu-list"> :class="{ 'always-visible-collections': $adminOptions.homeCollectionsPerPage }">
<li v-if="!$adminOptions.hideHomeCollectionItemsButton"> <ul class="menu-list">
<router-link <li v-if="!$adminOptions.hideHomeCollectionItemsButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }" tag="a"
:aria-label="$i18n.get('label_collection_items')"> :to="{ path: $routerHelper.getCollectionItemsPath(collection.id, '') }"
<span :aria-label="$i18n.get('label_collection_items')">
v-tooltip.bottom="{ <span
content: $i18n.get('items'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('items'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-items"/>
<!-- <span class="menu-text">{{ $i18n.get('items') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('items') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton"> </li>
<router-link <li v-if="collection.current_user_can_edit_items && $adminOptions.showHomeCollectionCreateItemButton">
tag="a" <router-link
:to="{ path: $routerHelper.getNewItemPath(collection.id) }" tag="a"
:aria-label="$i18n.get('add_one_item')"> :to="{ path: $routerHelper.getNewItemPath(collection.id) }"
<span :aria-label="$i18n.get('add_one_item')">
v-tooltip.bottom="{ <span
content: $i18n.get('add_one_item'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('add_one_item'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-add"/>
<!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('add_one_item') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton"> </li>
<router-link <li v-if="collection.current_user_can_edit && !$adminOptions.hideHomeCollectionSettingsButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionEditPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_settings')"> :to="{ path: $routerHelper.getCollectionEditPath(collection.id) }"
<span :aria-label="$i18n.get('label_settings')">
v-tooltip.bottom="{ <span
content: $i18n.get('label_settings'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('label_settings'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-settings"/>
<!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('label_settings') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton"> </li>
<router-link <li v-if="collection.current_user_can_edit_metadata && !$adminOptions.hideHomeCollectionMetadataButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_collection_metadata')"> :to="{ path: $routerHelper.getCollectionMetadataPath(collection.id) }"
<span :aria-label="$i18n.get('label_collection_metadata')">
v-tooltip.bottom="{ <span
content: $i18n.getFrom('metadata', 'name'), v-tooltip.bottom="{
autoHide: true, content: $i18n.getFrom('metadata', 'name'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-metadata"/>
<!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.getFrom('metadata', 'name') }}</span> -->
</li> </router-link>
<li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton"> </li>
<router-link <li v-if="collection.current_user_can_edit_filters && !$adminOptions.hideHomeCollectionFiltersButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_collection_filters')"> :to="{ path: $routerHelper.getCollectionFiltersPath(collection.id) }"
<span :aria-label="$i18n.get('label_collection_filters')">
v-tooltip.bottom="{ <span
content: $i18n.getFrom('filters', 'name'), v-tooltip.bottom="{
autoHide: true, content: $i18n.getFrom('filters', 'name'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
<!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.getFrom('filters', 'name') }}</span> -->
</li> </router-link>
<li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton"> </li>
<router-link <li v-if="$userCaps.hasCapability('tnc_rep_read_logs') && !$adminOptions.hideHomeCollectionActivitiesButton">
tag="a" <router-link
:to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }" tag="a"
:aria-label="$i18n.get('label_collection_activities')"> :to="{ path: $routerHelper.getCollectionActivitiesPath(collection.id) }"
<span :aria-label="$i18n.get('label_collection_activities')">
v-tooltip.bottom="{ <span
content: $i18n.get('activities'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('activities'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-activities"/>
<!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> --> </span>
</router-link> <!-- <span class="menu-text">{{ $i18n.get('activities') }}</span> -->
</li> </router-link>
<li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton"> </li>
<a <li v-if="!$adminOptions.hideHomeCollectionThemeCollectionButton">
:href="collection.url" <a
target="_blank" :href="collection.url"
:aria-label="$i18n.get('label_view_collection_on_website')"> target="_blank"
<span :aria-label="$i18n.get('label_view_collection_on_website')">
v-tooltip.bottom="{ <span
content: $i18n.get('label_view_collection_on_website'), v-tooltip.bottom="{
autoHide: true, content: $i18n.get('label_view_collection_on_website'),
popperClass: ['tainacan-tooltip', 'tooltip'] autoHide: true,
}" popperClass: ['tainacan-tooltip', 'tooltip']
class="icon"> }"
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/> class="icon">
</span> <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-see"/>
</a> </span>
</li> </a>
</ul> </li>
<router-link </ul>
tag="a" <router-link
:to="$routerHelper.getCollectionPath(collection.id)" tag="a"
class="card-body"> :to="$routerHelper.getCollectionPath(collection.id)"
<img class="card-body">
:alt="$i18n.get('label_thumbnail')" <img
v-if="collection.thumbnail != undefined" :alt="$i18n.get('label_thumbnail')"
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')"> v-if="collection.thumbnail != undefined"
:src="$thumbHelper.getSrc(collection['thumbnail'], 'tainacan-medium')">
<!-- Name -->
<div class="metadata-title"> <!-- Name -->
<p>{{ collection.name != undefined ? collection.name : '' }}</p> <div class="metadata-title">
</div> <p>{{ collection.name != undefined ? collection.name : '' }}</p>
</router-link> </div>
</div> </router-link>
</masonry> </li>
</template> </ul>
</div> </div>
</template> </template>

672
src/views/admin/components/lists/items-list.vue
View File

@ -309,148 +309,151 @@
</div> </div>
<!-- MASONRY VIEW MODE --> <!-- MASONRY VIEW MODE -->
<masonry <ul
role="list"
v-if="viewMode == 'masonry'" v-if="viewMode == 'masonry'"
:cols="{default: 7, 1919: 6, 1407: 5, 1215: 4, 1023: 3, 767: 2, 343: 1}" :class="{
:gutter="25" 'hide-items-selection': $adminOptions.hideItemsListSelection,
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }" 'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
}"
class="tainacan-masonry-container"> class="tainacan-masonry-container">
<div <li
role="listitem"
:key="index" :key="index"
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
v-for="(item, index) of items" v-for="(item, index) of items"
:class="{ :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"> 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 --> <!-- Title -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <div
<div :style="{
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))" 'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '0 !important' : (isOnAllItemsTabs ? '0.5em' : '1em')
:class="{ 'is-selecting': isSelectingItems }" }"
class="masonry-item-checkbox"> @click.left="onClickItem($event, item)"
<label @click.right="onRightClickItem($event, item)"
tabindex="0" class="metadata-title">
:class="(!$adminOptions.itemsSingleSelectionMode ? 'b-checkbox checkbox' : 'b-radio radio') + ' is-small'"> <p>
<input <span
v-if="!$adminOptions.itemsSingleSelectionMode" v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
type="checkbox" class="icon has-text-gray"
:checked="getSelectedItemChecked(item.id)" v-tooltip="{
@input="setSelectedItemChecked(item.id)"> content: $i18n.get('status_' + item.status),
<input autoHide: true,
v-else popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''],
type="radio" placement: 'auto-start'
name="item-single-selection" }">
:value="item.id" <i
v-model="singleItemSelection"> class="tainacan-icon tainacan-icon-1em"
<span class="check" /> :class="$statusHelper.getIcon(item.status)"
<span class="control-label" /> />
<span class="sr-only">{{ $i18n.get('label_select_item') }}</span> </span>
</label> {{ 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> </div>
</li>
<!-- Title --> </ul>
<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>
<!-- CARDS VIEW MODE --> <!-- CARDS VIEW MODE -->
<div <div
@ -656,215 +659,212 @@
</div> </div>
<!-- RECORDS VIEW MODE --> <!-- RECORDS VIEW MODE -->
<masonry <ul
role="list"
:cols="{default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1}"
:gutter="30"
:class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }" :class="{ 'hide-items-selection': $adminOptions.hideItemsListSelection }"
class="tainacan-records-container" class="tainacan-records-container"
v-if="viewMode == 'records'"> v-if="viewMode == 'records'">
<div <li
role="listitem"
:key="index" :key="index"
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
v-for="(item, index) of items" v-for="(item, index) of items"
:class="{ 'selected-record': getSelectedItemChecked(item.id) == true }" :class="{ 'tainacan-records-grid-sizer': index == 0 }">
class="tainacan-record"> <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 --> <!-- Title -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <div
<div class="metadata-title"
v-if="collectionId && !$adminOptions.hideItemsListSelection && ($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit))" :style="{
:class="{ 'is-selecting': isSelectingItems }" 'padding-left': !collectionId || !($adminOptions.itemsSingleSelectionMode || $adminOptions.itemsMultipleSelectionMode || (collection && collection.current_user_can_bulk_edit)) || $adminOptions.itemsSearchSelectionMode ? '1.5em !important' : '2.75em'
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'
}"> }">
<i <span
class="tainacan-icon tainacan-icon-1em" v-if="isOnAllItemsTabs && $statusHelper.hasIcon(item.status)"
:class="$statusHelper.getIcon(item.status)" class="icon has-text-gray"
/>
</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
v-tooltip="{ v-tooltip="{
content: $i18n.get('edit'), content: $i18n.get('status_' + item.status),
autoHide: true, 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' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
class="icon"> v-for="(column, columnIndex) in displayedMetadata"
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/> :key="columnIndex"
</span> v-if="collectionId != undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
</a> @click.left="onClickItem($event, item)"
<a @click.right="onRightClickItem($event, item)"
:aria-lavel="$i18n.get('label_button_untrash')" v-html="item.metadata != undefined ? renderMetadata(item.metadata, column) : ''" />
@click.prevent.stop="untrashOneItem(item.id)" <p
v-if="isOnTrash">
<span
v-tooltip="{ v-tooltip="{
content: $i18n.get('label_recover_from_trash'), delay: {
autoHide: true, shown: 500,
placement: 'auto', hide: 300,
},
content: item.title != undefined ? item.title : '',
html: true,
autoHide: false,
placement: 'auto-start',
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : '']
}" }"
class="icon"> v-for="(column, columnIndex) in displayedMetadata"
<i class="has-text-secondary tainacan-icon tainacan-icon-1-25em tainacan-icon-undo"/> :key="columnIndex"
</span> v-if="collectionId == undefined && column.display && column.metadata_type_object != undefined && (column.metadata_type_object.related_mapped_prop == 'title')"
</a> @click.left="onClickItem($event, item)"
<a @click.right="onRightClickItem($event, item)"
v-if="item.current_user_can_delete" v-html="item.title != undefined ? item.title : ''" />
id="button-delete" </div>
:aria-label="$i18n.get('label_button_delete')" <!-- Actions -->
@click.prevent.stop="deleteOneItem(item.id)"> <div
<span v-if="item.current_user_can_edit && !$adminOptions.hideItemsListActionAreas"
v-tooltip="{ class="actions-area"
content: isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('delete'), :label="$i18n.get('label_actions')">
autoHide: true, <a
placement: 'auto', v-if="!isOnTrash"
popperClass: ['tainacan-tooltip', 'tooltip', isRepositoryLevel ? 'tainacan-repository-tooltip' : ''] id="button-edit"
}" :aria-label="$i18n.getFrom('items','edit_item')"
class="icon"> @click.prevent.stop="goToItemEditPage(item)">
<i <span
:class="{ 'tainacan-icon-delete': !isOnTrash, 'tainacan-icon-deleteforever': isOnTrash }" v-tooltip="{
class="has-text-secondary tainacan-icon tainacan-icon-1-25em"/> content: $i18n.get('edit'),
</span> autoHide: true,
</a> placement: 'auto',
</div> 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 --> <!-- Remaining metadata -->
<div <div
class="media" class="media"
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)"> @click.right="onRightClickItem($event, item)">
<div class="list-metadata media-body"> <div class="list-metadata media-body">
<div class="tainacan-record-thumbnail"> <div class="tainacan-record-thumbnail">
<blur-hash-image <blur-hash-image
@click.left="onClickItem($event, item)" @click.left="onClickItem($event, item)"
@click.right="onRightClickItem($event, item)" @click.right="onRightClickItem($event, item)"
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-record-item-thumbnail" class="tainacan-record-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)" :width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)" :height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)" :src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(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')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500" :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> </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> </div>
</li>
</div> </ul>
</masonry>
<!-- TABLE VIEW MODE --> <!-- TABLE VIEW MODE -->
<table <table
@ -1351,6 +1351,7 @@ import { mapActions, mapGetters } from 'vuex';
import CustomDialog from '../other/custom-dialog.vue'; import CustomDialog from '../other/custom-dialog.vue';
import ItemCopyDialog from '../other/item-copy-dialog.vue'; import ItemCopyDialog from '../other/item-copy-dialog.vue';
import BulkEditionModal from '../modals/bulk-edition-modal.vue'; import BulkEditionModal from '../modals/bulk-edition-modal.vue';
import Masonry from 'masonry-layout';
import { dateInter } from "../../js/mixins"; import { dateInter } from "../../js/mixins";
export default { export default {
@ -1373,7 +1374,9 @@ export default {
cursorPosX: -1, cursorPosX: -1,
cursorPosY: -1, cursorPosY: -1,
contextMenuItem: null, contextMenuItem: null,
singleItemSelection: false singleItemSelection: false,
masonry: false,
shouldUseLegacyMasonyCols: false
} }
}, },
computed: { computed: {
@ -1438,12 +1441,35 @@ export default {
singleItemSelection() { singleItemSelection() {
if (this.$adminOptions.itemsSingleSelectionMode) if (this.$adminOptions.itemsSingleSelectionMode)
this.$eventBusSearch.setSelectedItemsForIframe([this.singleItemSelection], true); 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() { mounted() {
if (this.highlightsItem) if (this.highlightsItem)
setTimeout(() => this.$eventBusSearch.highlightsItem(null), 3000); 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: { methods: {
...mapActions('collection', [ ...mapActions('collection', [
'deleteItem', 'deleteItem',

5
src/views/admin/components/lists/metadata-mapping-list.vue
View File

@ -145,6 +145,7 @@
<div class="control"> <div class="control">
<button <button
@click.prevent="onUpdateMetadataMapperMetadataClick" @click.prevent="onUpdateMetadataMapperMetadataClick"
:class="{ 'is-loading': isMapperMetadataLoading }"
class="button is-success">{{ $i18n.get('save') }}</button> class="button is-success">{{ $i18n.get('save') }}</button>
</div> </div>
</div> </div>
@ -281,7 +282,7 @@ export default {
.then(() => { .then(() => {
this.isLoadingMetadatumMappers = false; this.isLoadingMetadatumMappers = false;
if (this.metadatumMappers.length == 1) if (this.metadatumMappers.length >= 1)
this.onSelectMetadataMapper(this.metadatumMappers[0]) this.onSelectMetadataMapper(this.metadatumMappers[0])
}) })
.catch(() => { .catch(() => {
@ -293,7 +294,7 @@ export default {
this.isMapperMetadataLoading = true; this.isMapperMetadataLoading = true;
this.mapper = metadatumMapper; //TODO try to use v-model again this.mapper = metadatumMapper; //TODO try to use v-model again
this.mapperMetadata = []; this.mapperMetadata = [];
if (metadatumMapper != '') { if (metadatumMapper != '') {
for (var k in metadatumMapper.metadata) { for (var k in metadatumMapper.metadata) {
var item = metadatumMapper.metadata[k]; var item = metadatumMapper.metadata[k];

2
src/views/admin/js/admin-main.js
View File

@ -30,7 +30,6 @@ import {
Numberinput Numberinput
} from 'buefy'; } from 'buefy';
import VTooltip from 'floating-vue'; import VTooltip from 'floating-vue';
import VueMasonry from 'vue-masonry-css';
import draggable from 'vuedraggable'; import draggable from 'vuedraggable';
import VueTheMask from 'vue-the-mask'; import VueTheMask from 'vue-the-mask';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
@ -182,7 +181,6 @@ export default (element) => {
} }
} }
}); });
Vue.use(VueMasonry);
Vue.use(VueBlurHash); Vue.use(VueBlurHash);
Vue.use(I18NPlugin); Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin); Vue.use(UserPrefsPlugin);

17
src/views/admin/js/utilities.js
View File

@ -12,7 +12,7 @@ export const ThumbnailHelperFunctions = () => {
}, },
getSrcSet(thumbnail, tainacanSize, documentType) { getSrcSet(thumbnail, tainacanSize, documentType) {
const defaultSrc = this.getSrc(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'; return defaultSrc + ' 1x, ' + retinaSrc + ' 2x';
}, },
getWidth(thumbnail, tainacanSize, fallbackSizeValue) { getWidth(thumbnail, tainacanSize, fallbackSizeValue) {
@ -76,6 +76,7 @@ export const ThumbnailHelperFunctions = () => {
}, },
getEmptyThumbnailPlaceholderBySize(imageSrc, tainacanSize) { getEmptyThumbnailPlaceholderBySize(imageSrc, tainacanSize) {
switch(tainacanSize) { switch(tainacanSize) {
case 'tainacan-large-full':
case 'tainacan-medium-full': case 'tainacan-medium-full':
case 'tainacan-medium': case 'tainacan-medium':
case 'medium_large': case 'medium_large':
@ -91,8 +92,9 @@ export const ThumbnailHelperFunctions = () => {
}, },
getWordpressFallbackSize(tainacanSize) { getWordpressFallbackSize(tainacanSize) {
switch(tainacanSize) { switch(tainacanSize) {
case 'tainacan-large-full':
case 'tainacan-medium-full': case 'tainacan-medium-full':
return 'medium_large'; return 'medium_large';
case 'tainacan-medium': case 'tainacan-medium':
return 'medium'; return 'medium';
case 'tainacan-small': case 'tainacan-small':
@ -100,6 +102,17 @@ export const ThumbnailHelperFunctions = () => {
default: default:
return 'thumbnail'; return 'thumbnail';
} }
},
getRelativeRetinaSize(tainacanSize) {
switch(tainacanSize) {
case 'tainacan-medium-full':
case 'tainacan-medium':
return 'large';
case 'tainacan-small':
return 'tainacan-medium';
default:
return 'full';
}
} }
} }
} }

10
src/views/admin/pages/home-page.vue
View File

@ -250,6 +250,10 @@ export default {
} }
.home-section { .home-section {
@media screen and (max-width: 768px) {
margin-right: 25px;
}
&.home-section-repository{ &.home-section-repository{
position: relative; position: relative;
@ -260,7 +264,11 @@ export default {
&.home-section-collection { &.home-section-collection {
position: relative; position: relative;
margin-left: 52px; margin-left: 52px;
margin-bottom: 80px; margin-bottom: 80px;
@media screen and (max-width: 768px) {
padding-right: 0.75em;
}
} }
.section-connector { .section-connector {

2
src/views/admin/pages/lists/metadata-page.vue
View File

@ -37,7 +37,7 @@
<!-- Mapping ------------------- --> <!-- Mapping ------------------- -->
<b-tab-item :label="$i18n.get('mapping')"> <b-tab-item :label="$i18n.get('mapping')">
<metadata-mapping-list <metadata-mapping-list
v-if="activeTab == 1" v-if="activeTab == 1"
:is-repository-level="isRepositoryLevel"/> :is-repository-level="isRepositoryLevel"/>
</b-tab-item> </b-tab-item>

64
src/views/admin/scss/_collection-home-cards.scss
View File

@ -10,24 +10,50 @@
animation-name: item-appear; animation-name: item-appear;
animation-duration: 0.5s; animation-duration: 0.5s;
&>div { &>ul {
--column-count: 5;
--column-gap: 25px;
width: calc(100% + var(--tainacan-container-padding)) !important; 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), &>li {
&>div>.tainacan-card:not(.always-visible-collections):nth-child(4), flex-basis: calc((100%/var(--column-count, 5)) - var(--column-gap,25px));
&>div>.tainacan-card:not(.always-visible-collections):nth-child(5), min-width: calc((100%/var(--column-count, 5)) - var(--column-gap,25px));
&>div>.tainacan-card:not(.always-visible-collections):nth-child(6), flex-shrink: 0;
&>div>.tainacan-card:not(.always-visible-collections):nth-child(7), flex-grow: 1;
&>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;
}
@media screen and (max-width: 768px) { @media screen and (max-width: 1600px) {
&>div>.tainacan-card:nth-child(3), --column-count: 4;
&>div>.tainacan-card:nth-child(4) {
display: block; &: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 { .tainacan-card {
background-color: var(--tainacan-gray1); background-color: var(--tainacan-gray1);
padding: 0px; padding: 0px;
margin-top: 0.75em;
margin-bottom: 1.6em;
flex-basis: 0;
min-height: 135px; min-height: 135px;
cursor: pointer; cursor: pointer;
text-decoration: none !important; text-decoration: none !important;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@media screen and (max-width: 768px) {
max-width: 100%;
min-width: 100%;
}
&:hover .menu-list { &:hover .menu-list {
background-color: var(--tainacan-gray2); background-color: var(--tainacan-gray2);
a { background-color: var(--tainacan-gray2); } a { background-color: var(--tainacan-gray2); }

1
src/views/admin/scss/_view-mode-cards.scss
View File

@ -1,6 +1,7 @@
.tainacan-cards-container { .tainacan-cards-container {
min-height: 50vh; min-height: 50vh;
padding: 0; padding: 0;
height: auto !important;
@include display-grid; @include display-grid;
-ms-grid-columns: 455px 455px; -ms-grid-columns: 455px 455px;
grid-template-columns: repeat(auto-fill, 455px); grid-template-columns: repeat(auto-fill, 455px);

1
src/views/admin/scss/_view-mode-grid.scss
View File

@ -1,5 +1,6 @@
.tainacan-grid-container { .tainacan-grid-container {
min-height: 50vh; min-height: 50vh;
height: auto !important;
padding: 0; padding: 0;
@include display-grid; @include display-grid;
grid-template-columns: repeat(auto-fill, 285px); grid-template-columns: repeat(auto-fill, 285px);

1
src/views/admin/scss/_view-mode-list.scss
View File

@ -1,6 +1,7 @@
.tainacan-list-container { .tainacan-list-container {
min-height: 50vh; min-height: 50vh;
padding: 0; padding: 0;
height: auto !important;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
flex-grow: 1; flex-grow: 1;

103
src/views/admin/scss/_view-mode-masonry.scss
View File

@ -1,5 +1,6 @@
.tainacan-masonry-container { .tainacan-masonry-container {
min-height: 50vh; min-height: 50vh;
margin-left: 25px;
padding: 0; padding: 0;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -8,7 +9,54 @@
justify-content: space-evenly; justify-content: space-evenly;
animation-name: appear; animation-name: appear;
animation-duration: 0.5s; 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 { .tainacan-masonry-item {
display: block; display: block;
width: 100%; 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;
}
}
}

46
src/views/admin/scss/_view-mode-records.scss
View File

@ -9,6 +9,23 @@
animation-name: appear; animation-name: appear;
animation-duration: 0.5s; 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 { .tainacan-record {
background-color: rgba(126, 126, 126, 0.05); background-color: rgba(126, 126, 126, 0.05);
padding: 0px; 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;
}
}

76
src/views/gutenberg-blocks/blocks/carousel-collections-list/block.json
View File

@ -33,91 +33,91 @@
"selector": "div" "selector": "div"
}, },
"collections": { "collections": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"selectedCollections": { "selectedCollections": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": false "default": false
}, },
"maxCollectionsNumber": { "maxCollectionsNumber": {
"type": "Number", "type": "number",
"value": false "default": false
}, },
"maxCollectionsPerScreen": { "maxCollectionsPerScreen": {
"type": "Number", "type": "number",
"value": 6 "default": 6
}, },
"spaceBetweenCollections": { "spaceBetweenCollections": {
"type": "Number", "type": "number",
"value": 32 "default": 32
}, },
"spaceAroundCarousel": { "spaceAroundCarousel": {
"type": "Number", "type": "number",
"value": 50 "default": 50
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"arrowsPosition": { "arrowsPosition": {
"type": "String", "type": "string",
"value": "around" "default": "around"
}, },
"largeArrows": { "largeArrows": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"arrowsStyle": { "arrowsStyle": {
"type": "String", "type": "string",
"value": "type-1" "default": "type-1"
}, },
"autoPlay": { "autoPlay": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"autoPlaySpeed": { "autoPlaySpeed": {
"type": "Number", "type": "number",
"value": 3 "default": 3
}, },
"loopSlides": { "loopSlides": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"hideName": { "hideName": {
"type": "Boolean", "type": "boolean",
"value": true "default": true
}, },
"showCollectionThumbnail": { "showCollectionThumbnail": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "default": "tainacan-medium"
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "default": "#ffffff"
} }
}, },

151
src/views/gutenberg-blocks/blocks/carousel-collections-list/deprecated.js
View File

@ -1,6 +1,157 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [ 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 */ /* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{ {
"attributes": { "attributes": {

80
src/views/gutenberg-blocks/blocks/carousel-collections-list/edit.js
View File

@ -1,9 +1,13 @@
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components; 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 { __ } = 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 CarouselCollectionsModal from './carousel-collections-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -24,7 +28,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
selectedCollections, selectedCollections,
largeArrows, largeArrows,
arrowsStyle, arrowsStyle,
cropImagesToSquare, imageSize,
maxCollectionsPerScreen, maxCollectionsPerScreen,
spaceBetweenCollections, spaceBetweenCollections,
spaceAroundCarousel, spaceAroundCarousel,
@ -48,13 +52,30 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
maxCollectionsPerScreen = 6; maxCollectionsPerScreen = 6;
setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen }); setAttributes({ maxCollectionsPerScreen: maxCollectionsPerScreen });
} }
if (cropImagesToSquare === undefined) { if (imageSize === undefined) {
cropImagesToSquare = true; imageSize = 'tainacan-medium';
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ imageSize: imageSize });
} }
const thumbHelper = ThumbnailHelperFunctions(); 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) { function prepareItem(collection, collectionItems) {
return ( return (
<li <li
@ -77,24 +98,24 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
{ ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ? { ( !showCollectionThumbnail && Array.isArray(collectionItems) ) ?
<div class="collection-items-grid"> <div class="collection-items-grid">
<img <img
src={ collectionItems[0] ? thumbHelper.getSrc(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'], 'tainacan-medium', 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' )) } /> alt={ collectionItems[0] && collectionItems[0].thumbnail_alt ? collectionItems[0].thumbnail_alt : (collectionItems[0] && collectionItems[0].name ? collectionItems[0].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[1] ? thumbHelper.getSrc(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'], 'tainacan-medium', 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' )) } /> alt={ collectionItems[1] && collectionItems[1].thumbnail_alt ? collectionItems[1].thumbnail_alt : (collectionItems[1] && collectionItems[1].name ? collectionItems[1].name : __( 'Thumbnail', 'tainacan' )) } />
<img <img
src={ collectionItems[2] ? thumbHelper.getSrc(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'], 'tainacan-medium', 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' )) } /> alt={ collectionItems[2] && collectionItems[2].thumbnail_alt ? collectionItems[2].thumbnail_alt : (collectionItems[2] && collectionItems[2].name ? collectionItems[2].name : __( 'Thumbnail', 'tainacan' )) } />
</div> </div>
: :
<img <img
src={ 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'][0] && collection.thumbnail['thumbnail'][0]
? ?
@ -237,34 +258,31 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
</BaseControl> </BaseControl>
<RangeControl <RangeControl
label={ __('Maximum collections per slide on a wide screen', 'tainacan') } 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 } value={ maxCollectionsPerScreen ? maxCollectionsPerScreen : 6 }
onChange={ ( aMaxCollectionsPerScreen ) => { onChange={ ( aMaxCollectionsPerScreen ) => {
maxCollectionsPerScreen = aMaxCollectionsPerScreen; maxCollectionsPerScreen = Number(aMaxCollectionsPerScreen);
setAttributes( { maxCollectionsPerScreen: aMaxCollectionsPerScreen } ); setAttributes( { maxCollectionsPerScreen: aMaxCollectionsPerScreen } );
setContent(); setContent();
}} }}
min={ 1 } min={ 1 }
max={ 9 } max={ 9 }
/> />
{ showCollectionThumbnail ? <SelectControl
<ToggleControl label={__('Image size', 'tainacan')}
label={__('Crop Images', 'tainacan')} value={ imageSize }
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') } options={ imageSizeOptions }
checked={ cropImagesToSquare && maxCollectionsPerScreen > 4 } onChange={ ( anImageSize ) => {
onChange={ ( isChecked ) => { imageSize = anImageSize;
cropImagesToSquare = isChecked; setAttributes({ imageSize: imageSize });
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setContent();
setContent(); }}
} />
}
/>
: null }
<RangeControl <RangeControl
label={ __('Space between each collection', 'tainacan') } label={ __('Space between each collection', 'tainacan') }
value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 } value={ !isNaN(spaceBetweenCollections) ? spaceBetweenCollections : 32 }
onChange={ ( aSpaceBetweenCollections ) => { onChange={ ( aSpaceBetweenCollections ) => {
spaceBetweenCollections = aSpaceBetweenCollections; spaceBetweenCollections = Number(aSpaceBetweenCollections);
setAttributes( { spaceBetweenCollections: aSpaceBetweenCollections } ); setAttributes( { spaceBetweenCollections: aSpaceBetweenCollections } );
}} }}
min={ 0 } min={ 0 }
@ -307,7 +325,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
label={__('Seconds before transitioning to next', 'tainacan')} label={__('Seconds before transitioning to next', 'tainacan')}
value={ autoPlaySpeed ? autoPlaySpeed : 3 } value={ autoPlaySpeed ? autoPlaySpeed : 3 }
onChange={ ( aAutoPlaySpeed ) => { onChange={ ( aAutoPlaySpeed ) => {
autoPlaySpeed = aAutoPlaySpeed; autoPlaySpeed = Number(aAutoPlaySpeed);
setAttributes( { autoPlaySpeed: aAutoPlaySpeed } ) setAttributes( { autoPlaySpeed: aAutoPlaySpeed } )
}} }}
min={ 1 } min={ 1 }
@ -352,7 +370,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
label={ __('Space around the carousel', 'tainacan') } label={ __('Space around the carousel', 'tainacan') }
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 } value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
onChange={ ( aSpaceAroundCarousel ) => { onChange={ ( aSpaceAroundCarousel ) => {
spaceAroundCarousel = aSpaceAroundCarousel; spaceAroundCarousel = Number(aSpaceAroundCarousel);
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } ); setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
}} }}
min={ 0 } min={ 0 }

4
src/views/gutenberg-blocks/blocks/carousel-collections-list/save.js
View File

@ -8,7 +8,7 @@ export default function ({ attributes, className }) {
arrowsPosition, arrowsPosition,
largeArrows, largeArrows,
arrowsStyle, arrowsStyle,
cropImagesToSquare, imageSize,
maxCollectionsPerScreen, maxCollectionsPerScreen,
maxCollectionsNumber, maxCollectionsNumber,
spaceBetweenCollections, spaceBetweenCollections,
@ -33,7 +33,7 @@ export default function ({ attributes, className }) {
hide-name={ '' + hideName } hide-name={ '' + hideName }
large-arrows={ '' + largeArrows } large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle } arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
max-collections-number={ maxCollectionsNumber } max-collections-number={ maxCollectionsNumber }
max-collections-per-screen={ maxCollectionsPerScreen } max-collections-per-screen={ maxCollectionsPerScreen }
space-between-collections={ spaceBetweenCollections } space-between-collections={ spaceBetweenCollections }

1
src/views/gutenberg-blocks/blocks/carousel-collections-list/style.scss
View File

@ -161,6 +161,7 @@
a:hover { a:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block;
} }
.swiper-slide-duplicate img { .swiper-slide-duplicate img {

6
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.js
View File

@ -36,7 +36,7 @@ export default (element) => {
maxCollectionsPerScreen: 6, maxCollectionsPerScreen: 6,
spaceBetweenCollections: 32, spaceBetweenCollections: 32,
spaceAroundCarousel: 50, spaceAroundCarousel: 50,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
loopSlides: false, loopSlides: false,
hideName: true, hideName: true,
showCollectionThumbnail: false, showCollectionThumbnail: false,
@ -57,7 +57,7 @@ export default (element) => {
loopSlides: this.loopSlides, loopSlides: this.loopSlides,
largeArrows: this.largeArrows, largeArrows: this.largeArrows,
arrowsStyle: this.arrowsStyle, arrowsStyle: this.arrowsStyle,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
maxCollectionsPerScreen: this.maxCollectionsPerScreen, maxCollectionsPerScreen: this.maxCollectionsPerScreen,
spaceBetweenCollections: this.spaceBetweenCollections, spaceBetweenCollections: this.spaceBetweenCollections,
spaceAroundCarousel: this.spaceAroundCarousel, 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.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.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.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.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.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined; this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;

44
src/views/gutenberg-blocks/blocks/carousel-collections-list/theme.vue
View File

@ -39,22 +39,22 @@
:href="collection.url"> :href="collection.url">
<img <img
:src=" :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] collection.thumbnail['thumbnail'][0]
: :
`${tainacanBaseUrl}/assets/images/placeholder_square.png`) `${tainacanBaseUrl}/assets/images/placeholder_square.png`)
" "
:data-src=" :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] collection.thumbnail['thumbnail'][0]
: :
@ -69,27 +69,27 @@
:href="collection.url"> :href="collection.url">
<div class="collection-items-grid"> <div class="collection-items-grid">
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][0] ? $thumbHelper.getHeight(collectionItems[collection.id][0]['thumbnail'], 'tainacan-medium') : 275" :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'], 'tainacan-medium') : 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'], 'tainacan-medium', collectionItems[collection.id][0]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`" :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'], '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'], 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'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'" :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' ))" :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" /> :transition-duration="500" />
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][1] ? $thumbHelper.getHeight(collectionItems[collection.id][1]['thumbnail'], 'tainacan-medium') : 275" :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'], 'tainacan-medium') : 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'], 'tainacan-medium', collectionItems[collection.id][1]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`" :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'], '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'], 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'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'" :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' ))" :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" /> :transition-duration="500" />
<blur-hash-image <blur-hash-image
:height="collectionItems[collection.id][2] ? $thumbHelper.getHeight(collectionItems[collection.id][2]['thumbnail'], 'tainacan-medium') : 275" :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'], 'tainacan-medium') : 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'], 'tainacan-medium', collectionItems[collection.id][2]['document_mimetype']) :`${tainacanBaseUrl}/assets/images/placeholder_square.png`" :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'], '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'], 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'], 'tainacan-medium') : 'V4P?:h00Rj~qM{of%MRjWBRjD%%MRjayofj[%M-;RjRj'" :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' ))" :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" /> :transition-duration="500" />
</div> </div>
@ -172,7 +172,7 @@ export default {
hideName: Boolean, hideName: Boolean,
largeArrows: Boolean, largeArrows: Boolean,
arrowsStyle: String, arrowsStyle: String,
cropImagesToSquare: Boolean, imageSize: String,
showCollectionThumbnail: Boolean, showCollectionThumbnail: Boolean,
tainacanApiRoot: String, tainacanApiRoot: String,
tainacanBaseUrl: String, tainacanBaseUrl: String,

92
src/views/gutenberg-blocks/blocks/carousel-items-list/block.json
View File

@ -19,111 +19,111 @@
"selector": "div" "selector": "div"
}, },
"collectionId": { "collectionId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"items": { "items": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"searchURL": { "searchURL": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"selectedItems": { "selectedItems": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"maxItemsNumber": { "maxItemsNumber": {
"type": "Number", "type": "number",
"value": 12 "default": 12
}, },
"maxItemsPerScreen": { "maxItemsPerScreen": {
"type": "Number", "type": "number",
"value": 7 "default": 7
}, },
"spaceBetweenItems": { "spaceBetweenItems": {
"type": "Number", "type": "number",
"value": 32 "default": 32
}, },
"spaceAroundCarousel": { "spaceAroundCarousel": {
"type": "Number", "type": "number",
"value": 50 "default": 50
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"loadStrategy": { "loadStrategy": {
"type": "String", "type": "string",
"value": "search" "default": "search"
}, },
"arrowsPosition": { "arrowsPosition": {
"type": "String", "type": "string",
"value": "around" "default": "around"
}, },
"largeArrows": { "largeArrows": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"arrowsStyle": { "arrowsStyle": {
"type": "String", "type": "string",
"value": "type-1" "default": "type-1"
}, },
"autoPlay": { "autoPlay": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"autoPlaySpeed": { "autoPlaySpeed": {
"type": "Number", "type": "number",
"value": 3 "default": 3
}, },
"loopSlides": { "loopSlides": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"hideTitle": { "hideTitle": {
"type": "Boolean", "type": "boolean",
"value": true "default": true
}, },
"showCollectionHeader": { "showCollectionHeader": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"showCollectionLabel": { "showCollectionLabel": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "default": "tainacan-medium"
}, },
"collection": { "collection": {
"type": "Object", "type": "object",
"value": {} "default": {}
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "default": "#ffffff"
} }
}, },

186
src/views/gutenberg-blocks/blocks/carousel-items-list/deprecated.js
View File

@ -1,6 +1,192 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [ 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 */ /* Deprecated on Tainacan 0.18.6 due to arrowsStyle option */
{ {
"attributes": { "attributes": {

70
src/views/gutenberg-blocks/blocks/carousel-items-list/edit.js
View File

@ -2,8 +2,12 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, ToggleControl, SelectControl, Placeholder, IconButton, ColorPalette, BaseControl, PanelBody } = wp.components; 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 CarouselItemsModal from './dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -38,7 +42,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
autoPlaySpeed, autoPlaySpeed,
loopSlides, loopSlides,
hideTitle, hideTitle,
cropImagesToSquare, imageSize,
showCollectionHeader, showCollectionHeader,
showCollectionLabel, showCollectionLabel,
isLoadingCollection, isLoadingCollection,
@ -59,16 +63,37 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxItemsPerScreen = 7; maxItemsPerScreen = 7;
setAttributes({ maxItemsPerScreen: maxItemsPerScreen }); setAttributes({ maxItemsPerScreen: maxItemsPerScreen });
} }
if (cropImagesToSquare === undefined) { if (maxItemsNumber === undefined) {
cropImagesToSquare = true; maxItemsNumber = 12;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); 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) { function prepareItem(item) {
return ( return (
<li <li
key={ item.id } 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' ? { loadStrategy == 'selection' ?
( tainacan_blocks.wp_version < '5.4' ? ( tainacan_blocks.wp_version < '5.4' ?
<IconButton <IconButton
@ -88,8 +113,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
href={ item.url }> href={ item.url }>
<div class="items-list-item--image-wrap"> <div class="items-list-item--image-wrap">
<img <img
src={ thumbHelper.getSrc(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'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), 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' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
</div> </div>
{ !hideTitle ? <span>{ item.title ? item.title : '' }</span> : null } { !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) if (maxItemsNumber != undefined && maxItemsNumber > 0)
queryObject.perpage = maxItemsNumber; queryObject.perpage = maxItemsNumber;
else if (queryObject.perpage != undefined && queryObject.perpage > 0) else if (queryObject.perpage != undefined && queryObject.perpage > 0)
setAttributes({ maxItemsNumber: queryObject.perpage }); setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
else { else {
queryObject.perpage = 12; queryObject.perpage = 12;
setAttributes({ maxItemsNumber: 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 } 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 } value={ maxItemsPerScreen ? maxItemsPerScreen : 7 }
onChange={ ( aMaxItemsPerScreen ) => { onChange={ ( aMaxItemsPerScreen ) => {
maxItemsPerScreen = aMaxItemsPerScreen; maxItemsPerScreen = Number(aMaxItemsPerScreen);
setAttributes( { maxItemsPerScreen: aMaxItemsPerScreen } ); setAttributes( { maxItemsPerScreen: aMaxItemsPerScreen } );
setContent(); setContent();
}} }}
@ -374,22 +399,21 @@ export default function({ attributes, setAttributes, className, isSelected, clie
/> />
: null : null
} }
<ToggleControl <SelectControl
label={__('Crop Images', 'tainacan')} label={__('Image size', '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') } value={ imageSize }
checked={ cropImagesToSquare } options={ imageSizeOptions }
onChange={ ( isChecked ) => { onChange={ ( anImageSize ) => {
cropImagesToSquare = isChecked; imageSize = anImageSize;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ imageSize: imageSize });
setContent(); setContent();
} }}
}
/> />
<RangeControl <RangeControl
label={ __('Space between each item', 'tainacan') } label={ __('Space between each item', 'tainacan') }
value={ !isNaN(spaceBetweenItems) ? spaceBetweenItems : 32 } value={ !isNaN(spaceBetweenItems) ? spaceBetweenItems : 32 }
onChange={ ( aSpaceBetweenItems ) => { onChange={ ( aSpaceBetweenItems ) => {
spaceBetweenItems = aSpaceBetweenItems; spaceBetweenItems = Number(aSpaceBetweenItems);
setAttributes( { spaceBetweenItems: aSpaceBetweenItems } ); setAttributes( { spaceBetweenItems: aSpaceBetweenItems } );
}} }}
min={ 0 } min={ 0 }
@ -478,7 +502,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
label={ __('Space around the carousel', 'tainacan') } label={ __('Space around the carousel', 'tainacan') }
value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 } value={ !isNaN(spaceAroundCarousel) ? spaceAroundCarousel : 50 }
onChange={ ( aSpaceAroundCarousel ) => { onChange={ ( aSpaceAroundCarousel ) => {
spaceAroundCarousel = aSpaceAroundCarousel; spaceAroundCarousel = Number(aSpaceAroundCarousel);
setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } ); setAttributes( { spaceAroundCarousel: aSpaceAroundCarousel } );
}} }}
min={ 0 } min={ 0 }
@ -497,7 +521,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
label={__('Maximum number of items to load', 'tainacan')} label={__('Maximum number of items to load', 'tainacan')}
value={ maxItemsNumber } value={ maxItemsNumber }
onChange={ ( aMaxItemsNumber ) => { onChange={ ( aMaxItemsNumber ) => {
maxItemsNumber = aMaxItemsNumber; maxItemsNumber = Number(aMaxItemsNumber);
setAttributes( { maxItemsNumber: aMaxItemsNumber } ) setAttributes( { maxItemsNumber: aMaxItemsNumber } )
setContent(); setContent();
}} }}

4
src/views/gutenberg-blocks/blocks/carousel-items-list/save.js
View File

@ -19,7 +19,7 @@ export default function ({ attributes, className }) {
autoPlaySpeed, autoPlaySpeed,
loopSlides, loopSlides,
hideTitle, hideTitle,
cropImagesToSquare, imageSize,
showCollectionHeader, showCollectionHeader,
showCollectionLabel, showCollectionLabel,
collectionBackgroundColor, collectionBackgroundColor,
@ -42,7 +42,7 @@ export default function ({ attributes, className }) {
hide-title={ '' + hideTitle } hide-title={ '' + hideTitle }
large-arrows={ '' + largeArrows } large-arrows={ '' + largeArrows }
arrows-style={ arrowsStyle } arrows-style={ arrowsStyle }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
show-collection-header={ '' + showCollectionHeader } show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel } show-collection-label={ '' + showCollectionLabel }
collection-background-color={ collectionBackgroundColor } collection-background-color={ collectionBackgroundColor }

1
src/views/gutenberg-blocks/blocks/carousel-items-list/style.scss
View File

@ -173,6 +173,7 @@
a:hover { a:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block;
} }
.is-forced-square>a>div { .is-forced-square>a>div {
padding-bottom: 100% !important; padding-bottom: 100% !important;

6
src/views/gutenberg-blocks/blocks/carousel-items-list/theme.js
View File

@ -41,7 +41,7 @@ export default (element) => {
autoPlaySpeed: 3, autoPlaySpeed: 3,
loopSlides: false, loopSlides: false,
hideTitle: true, hideTitle: true,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
showCollectionHeader: false, showCollectionHeader: false,
showCollectionLabel: false, showCollectionLabel: false,
collectionBackgroundColor: '#454647', collectionBackgroundColor: '#454647',
@ -70,7 +70,7 @@ export default (element) => {
autoPlaySpeed: this.autoPlaySpeed, autoPlaySpeed: this.autoPlaySpeed,
loopSlides: this.loopSlides, loopSlides: this.loopSlides,
hideTitle: this.hideTitle, hideTitle: this.hideTitle,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
showCollectionHeader: this.showCollectionHeader, showCollectionHeader: this.showCollectionHeader,
showCollectionLabel: this.showCollectionLabel, showCollectionLabel: this.showCollectionLabel,
collectionBackgroundColor: this.collectionBackgroundColor, 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.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.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.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.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.showCollectionLabel = this.$el.attributes['show-collection-label'] != undefined ? this.$el.attributes['show-collection-label'].value == 'true' : false;
this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined; this.collectionBackgroundColor = this.$el.attributes['collection-background-color'] != undefined ? this.$el.attributes['collection-background-color'].value : undefined;

14
src/views/gutenberg-blocks/blocks/carousel-items-list/theme.vue
View File

@ -84,16 +84,16 @@
:key="index" :key="index"
v-for="(item, index) of items" v-for="(item, index) of items"
class="swiper-slide item-list-item" class="swiper-slide item-list-item"
:class="{ 'is-forced-square': cropImagesToSquare }"> :class="{ 'is-forced-square': ['tainacan-medium', 'tainacan-small'].indexOf(imageSize) > -1 }">
<a <a
:id="isNaN(item.id) ? item.id : 'item-id-' + item.id" :id="isNaN(item.id) ? item.id : 'item-id-' + item.id"
:href="item.url"> :href="item.url">
<blur-hash-image <blur-hash-image
:height="$thumbHelper.getHeight(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))" :height="$thumbHelper.getHeight(item['thumbnail'], imageSize)"
:width="$thumbHelper.getWidth(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))" :width="$thumbHelper.getWidth(item['thumbnail'], imageSize)"
:src="$thumbHelper.getSrc(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'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'), item['document_mimetype'])" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], imageSize, item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], (maxItemsPerScreen > 4 ? (!cropImagesToSquare ? 'tainacan-medium-full' : 'tainacan-medium') : 'large'))" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], imageSize)"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :transition-duration="500" />
<span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span> <span v-if="!hideTitle">{{ item.title ? item.title : '' }}</span>
@ -178,7 +178,7 @@ export default {
autoPlaySpeed: Number, autoPlaySpeed: Number,
loopSlides: Boolean, loopSlides: Boolean,
hideTitle: Boolean, hideTitle: Boolean,
cropImagesToSquare: Boolean, imageSize: String,
showCollectionHeader: Boolean, showCollectionHeader: Boolean,
showCollectionLabel: Boolean, showCollectionLabel: Boolean,
collectionBackgroundColor: String, collectionBackgroundColor: String,

1
src/views/gutenberg-blocks/blocks/carousel-terms-list/style.scss
View File

@ -161,6 +161,7 @@
a:hover { a:hover {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
display: block;
} }
.swiper-slide-duplicate img { .swiper-slide-duplicate img {

1
src/views/gutenberg-blocks/blocks/collections-list/style.scss
View File

@ -58,6 +58,7 @@
border: none; border: none;
font-weight: bold; font-weight: bold;
line-height: normal; line-height: normal;
display: block;
} }
img { img {

90
src/views/gutenberg-blocks/blocks/dynamic-items-list/block.json
View File

@ -14,136 +14,136 @@
}, },
"attributes": { "attributes": {
"content": { "content": {
"type": "Array", "type": "array",
"source": "children", "source": "children",
"selector": "div" "selector": "div"
}, },
"collectionId": { "collectionId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"items": { "items": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"showImage": { "showImage": {
"type": "Boolean", "type": "boolean",
"default": true "default": true
}, },
"showName": { "showName": {
"type": "Boolean", "type": "boolean",
"default": true "default": true
}, },
"layout": { "layout": {
"type": "String", "type": "string",
"default": "grid" "default": "grid"
}, },
"isModalOpen": { "isModalOpen": {
"type": "Boolean", "type": "boolean",
"default": false "default": false
}, },
"gridMargin": { "gridMargin": {
"type": "Number", "type": "number",
"default": 0 "default": 0
}, },
"searchURL": { "searchURL": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"itemsRequestSource": { "itemsRequestSource": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"maxItemsNumber": { "maxItemsNumber": {
"type": "Number", "type": "number",
"value": 12 "default": 12
}, },
"isLoading": { "isLoading": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"isLoadingCollection": { "isLoadingCollection": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"showSearchBar": { "showSearchBar": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"showCollectionHeader": { "showCollectionHeader": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"showCollectionLabel": { "showCollectionLabel": {
"type": "Boolean", "type": "boolean",
"value": false "default": false
}, },
"collection": { "collection": {
"type": "Object", "type": "object",
"value": {} "default": {}
}, },
"searchString": { "searchString": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"selectedItems": { "selectedItems": {
"type": "Array", "type": "array",
"default": [] "default": []
}, },
"loadStrategy": { "loadStrategy": {
"type": "String", "type": "string",
"value": "search" "default": "search"
}, },
"order": { "order": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"blockId": { "blockId": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"collectionBackgroundColor": { "collectionBackgroundColor": {
"type": "String", "type": "string",
"default": "#454647" "default": "#454647"
}, },
"collectionTextColor": { "collectionTextColor": {
"type": "String", "type": "string",
"default": "#ffffff" "default": "#ffffff"
}, },
"mosaicHeight": { "mosaicHeight": {
"type": "Number", "type": "number",
"value": 280 "default": 280
}, },
"mosaicGridColumns": { "mosaicGridColumns": {
"type": "Number", "type": "number",
"value": 3 "default": 3
}, },
"mosaicGridRows": { "mosaicGridRows": {
"type": "Number", "type": "number",
"value": 3 "default": 3
}, },
"sampleBackgroundImage": { "sampleBackgroundImage": {
"type": "String", "type": "string",
"default": "" "default": ""
}, },
"mosaicItemFocalPoint": { "mosaicItemFocalPoint": {
"type": "Object", "type": "object",
"default": { "default": {
"x": 0.5, "x": 0.5,
"y": 0.5 "y": 0.5
} }
}, },
"mosaicDensity": { "mosaicDensity": {
"type": "Number", "type": "number",
"default": 5 "default": 5
}, },
"maxColumnsCount": { "maxColumnsCount": {
"type": "Number", "type": "number",
"default": 4 "default": 4
}, },
"cropImagesToSquare": { "imageSize": {
"type": "Boolean", "type": "string",
"value": true "default": "tainacan-medium"
} }
}, },
"supports": { "supports": {

210
src/views/gutenberg-blocks/blocks/dynamic-items-list/deprecated.js
View File

@ -1,6 +1,216 @@
const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
export default [ 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 */ /* Deprecated to fix the selection strategy on 0.18.7 */
{ {
"attributes": { "attributes": {

155
src/views/gutenberg-blocks/blocks/dynamic-items-list/edit.js
View File

@ -2,8 +2,12 @@ const { __ } = wp.i18n;
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPalette, BaseControl, PanelBody } = wp.components; 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 DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js'; import tainacan from '../../js/axios.js';
import axios from 'axios'; import axios from 'axios';
@ -44,7 +48,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
sampleBackgroundImage, sampleBackgroundImage,
mosaicDensity, mosaicDensity,
maxColumnsCount, maxColumnsCount,
cropImagesToSquare imageSize
} = attributes; } = attributes;
// Gets blocks props from hook // Gets blocks props from hook
@ -59,15 +63,60 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxColumnsCount = 5; maxColumnsCount = 5;
setAttributes({ maxColumnsCount: maxColumnsCount }); setAttributes({ maxColumnsCount: maxColumnsCount });
} }
if (cropImagesToSquare === undefined) { if (maxItemsNumber === undefined) {
cropImagesToSquare = true; maxItemsNumber = 12;
setAttributes({ cropImagesToSquare: cropImagesToSquare }); setAttributes({ maxItemsNumber: maxItemsNumber });
} }
if (loadStrategy === undefined) { if (loadStrategy === undefined) {
loadStrategy = 'search'; loadStrategy = 'search';
setAttributes({ loadStrategy: loadStrategy }); 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) { function prepareItem(item) {
return ( return (
<li <li
@ -98,8 +147,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
onClick={ (event) => event.preventDefault() } onClick={ (event) => event.preventDefault() }
className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }> className={ (!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '') }>
<img <img
src={ thumbHelper.getSrc(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'], ( (layout == 'list' || cropImagesToSquare) ? 'tainacan-medium' : 'tainacan-medium-full'), 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' )) }/> alt={ item.thumbnail_alt ? item.thumbnail_alt : (item && item.title ? item.title : __( 'Thumbnail', 'tainacan' )) }/>
{ item.title ? { item.title ?
<span>{ item.title }</span> <span>{ item.title }</span>
@ -152,10 +201,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
} else { } else {
// Initializes some variables // Initializes some variables
mosaicDensity = mosaicDensity ? mosaicDensity : 5; mosaicDensity = mosaicDensity ? Number(mosaicDensity) : 5;
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3; mosaicGridRows = mosaicGridRows ? Number(mosaicGridRows) : 3;
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3; mosaicGridColumns = mosaicGridColumns ? Number(mosaicGridColumnsRows) : 3;
mosaicHeight = mosaicHeight ? mosaicHeight : 280; mosaicHeight = mosaicHeight ? Number(mosaicHeight) : 280;
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 }; 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') : ''; 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 { } else {
// Initializes some variables // Initializes some variables
mosaicDensity = mosaicDensity ? mosaicDensity : 5; mosaicDensity = mosaicDensity ? Number(mosaicDensity) : 5;
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3; mosaicGridRows = mosaicGridRows ? Number(mosaicGridRows) : 3;
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3; mosaicGridColumns = mosaicGridColumns ? Number(mosaicGridColumns) : 3;
mosaicHeight = mosaicHeight ? mosaicHeight : 280; mosaicHeight = mosaicHeight ? Number(mosaicHeight) : 280;
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 }; 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') : ''; 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) if (maxItemsNumber != undefined && maxItemsNumber > 0)
queryObject.perpage = maxItemsNumber; queryObject.perpage = maxItemsNumber;
else if (queryObject.perpage != undefined && queryObject.perpage > 0) else if (queryObject.perpage != undefined && queryObject.perpage > 0)
setAttributes({ maxItemsNumber: queryObject.perpage }); setAttributes({ maxItemsNumber: Number(queryObject.perpage) });
else { else {
queryObject.perpage = 12; queryObject.perpage = 12;
setAttributes({ maxItemsNumber: 12 }); setAttributes({ maxItemsNumber: 12 });
@ -295,10 +344,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
} else { } else {
// Initializes some variables // Initializes some variables
mosaicDensity = mosaicDensity ? mosaicDensity : 5; mosaicDensity = mosaicDensity ? Number(mosaicDensity) : 5;
mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3; mosaicGridRows = mosaicGridRows ? Number(mosaicGridRows) : 3;
mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3; mosaicGridColumns = mosaicGridColumns ? Number(mosaicGridColumns) : 3;
mosaicHeight = mosaicHeight ? mosaicHeight : 280; mosaicHeight = mosaicHeight ? Number(mosaicHeight) : 280;
mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 }; 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') : ''; 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 // Executed only on the first load of page
if(content && content.length && content[0].type) if(content && content.length && content[0].type)
setContent(); 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' ? return content == 'preview' ?
<div className={className}> <div className={className}>
@ -623,7 +651,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
label={__('Maximum number of items', 'tainacan')} label={__('Maximum number of items', 'tainacan')}
value={ maxItemsNumber ? maxItemsNumber : 12 } value={ maxItemsNumber ? maxItemsNumber : 12 }
onChange={ ( aMaxItemsNumber ) => { onChange={ ( aMaxItemsNumber ) => {
maxItemsNumber = aMaxItemsNumber; maxItemsNumber = Number(aMaxItemsNumber);
setAttributes( { maxItemsNumber: aMaxItemsNumber } ) setAttributes( { maxItemsNumber: aMaxItemsNumber } )
setContent(); setContent();
}} }}
@ -640,7 +668,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
label={ __('Maximum number of columns on a wide screen', 'tainacan') } label={ __('Maximum number of columns on a wide screen', 'tainacan') }
value={ maxColumnsCount ? maxColumnsCount : 5 } value={ maxColumnsCount ? maxColumnsCount : 5 }
onChange={ ( aMaxColumnsCount ) => { onChange={ ( aMaxColumnsCount ) => {
maxColumnsCount = aMaxColumnsCount; maxColumnsCount = Number(aMaxColumnsCount);
setAttributes( { maxColumnsCount: aMaxColumnsCount } ); setAttributes( { maxColumnsCount: aMaxColumnsCount } );
setContent(); setContent();
}} }}
@ -678,7 +706,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
label={__('Margin between items in pixels', 'tainacan')} label={__('Margin between items in pixels', 'tainacan')}
value={ gridMargin ? gridMargin : 0 } value={ gridMargin ? gridMargin : 0 }
onChange={ ( margin ) => { onChange={ ( margin ) => {
gridMargin = margin; gridMargin = Number(margin);
setAttributes( { gridMargin: margin } ); setAttributes( { gridMargin: margin } );
setContent(); setContent();
}} }}
@ -694,26 +722,25 @@ export default function({ attributes, setAttributes, className, isSelected, clie
label={ __('Maximum number of columns on a wide screen', 'tainacan') } label={ __('Maximum number of columns on a wide screen', 'tainacan') }
value={ maxColumnsCount ? maxColumnsCount : 5 } value={ maxColumnsCount ? maxColumnsCount : 5 }
onChange={ ( aMaxColumnsCount ) => { onChange={ ( aMaxColumnsCount ) => {
maxColumnsCount = aMaxColumnsCount; maxColumnsCount = Number(aMaxColumnsCount);
setAttributes( { maxColumnsCount: aMaxColumnsCount } ); setAttributes( { maxColumnsCount: aMaxColumnsCount } );
setContent(); setContent();
}} }}
min={ 1 } min={ 1 }
max={ 7 } 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> </div>
: null } : null }
<SelectControl
label={__('Image size', 'tainacan')}
value={ imageSize }
options={ imageSizeOptions }
onChange={ ( anImageSize ) => {
imageSize = anImageSize;
setAttributes({ imageSize: imageSize });
setContent();
}}
/>
</div> </div>
</PanelBody> </PanelBody>
{ layout == 'mosaic' ? { layout == 'mosaic' ?
@ -724,9 +751,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
<div> <div>
<RangeControl <RangeControl
label={__('Container height (px)', 'tainacan')} label={__('Container height (px)', 'tainacan')}
value={ mosaicHeight ? mosaicHeight : 280 } value={ mosaicHeight ? Number(mosaicHeight) : 280 }
onChange={ ( height ) => { onChange={ ( height ) => {
mosaicHeight = height; mosaicHeight = Number(height);
setAttributes( { mosaicHeight: height } ); setAttributes( { mosaicHeight: height } );
setContent(); setContent();
}} }}
@ -737,9 +764,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
<div> <div>
<RangeControl <RangeControl
label={__('Group Grid Density', 'tainacan')} label={__('Group Grid Density', 'tainacan')}
value={ mosaicDensity ? mosaicDensity : 5 } value={ mosaicDensity ? Number(mosaicDensity) : 5 }
onChange={ ( value ) => { onChange={ ( value ) => {
mosaicDensity = value; mosaicDensity = Number(value);
setAttributes( { mosaicDensity: mosaicDensity } ); setAttributes( { mosaicDensity: mosaicDensity } );
setContent(); setContent();
}} }}
@ -762,8 +789,8 @@ export default function({ attributes, setAttributes, className, isSelected, clie
{ label: '6 x 2', value: '6x2' } { label: '6 x 2', value: '6x2' }
] } ] }
onChange={ ( aGrid ) => { onChange={ ( aGrid ) => {
mosaicGridRows = aGrid.split('x')[0]; mosaicGridRows = Number(aGrid.split('x')[0]);
mosaicGridColumns = aGrid.split('x')[1]; mosaicGridColumns = Number(aGrid.split('x')[1]);
setAttributes({ setAttributes({
mosaicGridRows: mosaicGridRows, mosaicGridRows: mosaicGridRows,
@ -1035,7 +1062,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
) : ) :
<ResizableBox <ResizableBox
size={ { size={ {
height: mosaicHeight ? mosaicHeight + (3 * gridMargin) : 280 + (3 * gridMargin), height: mosaicHeight ? Number(mosaicHeight) + (3 * gridMargin) : 280 + (3 * gridMargin),
width: '100%' width: '100%'
} } } }
minHeight="80" minHeight="80"

4
src/views/gutenberg-blocks/blocks/dynamic-items-list/save.js
View File

@ -25,7 +25,7 @@ export default function({ attributes, className }) {
mosaicItemFocalPoint, mosaicItemFocalPoint,
mosaicDensity, mosaicDensity,
maxColumnsCount, maxColumnsCount,
cropImagesToSquare imageSize
} = attributes; } = attributes;
// Gets attributes such as style, that are automatically added by the editor hook // 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-search-bar={ '' + showSearchBar }
show-collection-header={ '' + showCollectionHeader } show-collection-header={ '' + showCollectionHeader }
show-collection-label={ '' + showCollectionLabel } show-collection-label={ '' + showCollectionLabel }
crop-images-to-square={ '' + cropImagesToSquare } image-size={ imageSize }
layout={ layout } layout={ layout }
load-strategy={ loadStrategy } load-strategy={ loadStrategy }
mosaic-height={ mosaicHeight } mosaic-height={ mosaicHeight }

6
src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.js
View File

@ -42,7 +42,7 @@ export default (element) => {
mosaicItemFocalPointX : 0.5, mosaicItemFocalPointX : 0.5,
mosaicItemFocalPointY : 0.5, mosaicItemFocalPointY : 0.5,
maxColumnsCount: 4, maxColumnsCount: 4,
cropImagesToSquare: true, imageSize: 'tainacan-medium',
order: 'asc', order: 'asc',
showSearchBar: false, showSearchBar: false,
showCollectionHeader: false, showCollectionHeader: false,
@ -69,7 +69,7 @@ export default (element) => {
mosaicItemFocalPointX: this.mosaicItemFocalPointX, mosaicItemFocalPointX: this.mosaicItemFocalPointX,
mosaicItemFocalPointY: this.mosaicItemFocalPointY, mosaicItemFocalPointY: this.mosaicItemFocalPointY,
maxColumnsCount: this.maxColumnsCount, maxColumnsCount: this.maxColumnsCount,
cropImagesToSquare: this.cropImagesToSquare, imageSize: this.imageSize,
searchURL: this.searchURL, searchURL: this.searchURL,
selectedItems: this.selectedItems, selectedItems: this.selectedItems,
loadStrategy: this.loadStrategy, 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.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.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.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.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.order = this.$el.attributes['order'] != undefined ? this.$el.attributes['order'].value : undefined;
this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false; this.showSearchBar = this.$el.attributes['show-search-bar'] != undefined ? this.$el.attributes['show-search-bar'].value == 'true' : false;

36
src/views/gutenberg-blocks/blocks/dynamic-items-list/theme.vue
View File

@ -14,13 +14,13 @@
<div <div
:style="{ :style="{
backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '', backgroundColor: collectionBackgroundColor ? collectionBackgroundColor : '',
paddingRight: collection && collection.thumbnail && (collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] || collection.thumbnail['medium']) ? '' : '20px', paddingRight: collection && collection.thumbnail && (collection.thumbnail['tainacan-medium'] || collection.thumbnail['medium']) ? '' : '20px',
paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail[( cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' )] && !collection.thumbnail['medium'])) ? '1em' : '', paddingTop: (!collection || !collection.thumbnail || (!collection.thumbnail['tainacan-medium'] && !collection.thumbnail['medium'])) ? '1em' : '',
width: collection && collection.header_image ? '' : '100%' width: collection && collection.header_image ? '' : '100%'
}" }"
:class=" :class="
'collection-name ' + '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 : '' }"> <h3 :style="{ color: collectionTextColor ? collectionTextColor : '' }">
<span <span
@ -33,17 +33,17 @@
</h3> </h3>
</div> </div>
<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" class="collection-thumbnail"
:style="{ :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 <div
class="collection-header-image" class="collection-header-image"
:style="{ :style="{
backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '', backgroundImage: collection.header_image ? 'url(' + collection.header_image + ')' : '',
minHeight: collection && collection.header_image ? '' : '80px', 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> </a>
</div> </div>
@ -206,11 +206,11 @@
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')"> :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<blur-hash-image <blur-hash-image
v-if="showImage" v-if="showImage"
:height="$thumbHelper.getHeight(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' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :transition-duration="500" />
<span v-if="item.title">{{ item.title }}</span> <span v-if="item.title">{{ item.title }}</span>
@ -244,7 +244,7 @@
v-for="(item, index) of mosaicGroup" v-for="(item, index) of mosaicGroup"
class="item-list-item" class="item-list-item"
:style="{ :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' backgroundPosition: layout == 'mosaic' ? `${ mosaicItemFocalPointX * 100 }% ${ mosaicItemFocalPointY * 100 }%` : 'none'
}"> }">
<a <a
@ -252,11 +252,11 @@
:href="item.url" :href="item.url"
:class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')"> :class="(!showName ? 'item-without-title' : '') + ' ' + (!showImage ? 'item-without-image' : '')">
<blur-hash-image <blur-hash-image
:height="$thumbHelper.getHeight(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' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :width="$thumbHelper.getWidth(item['thumbnail'], ( layout == 'list' || imageSize ))"
:src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :src="$thumbHelper.getSrc(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ), item['document_mimetype'])" :srcset="$thumbHelper.getSrcSet(item['thumbnail'], ( layout == 'list' || imageSize ), item['document_mimetype'])"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || cropImagesToSquare ? 'tainacan-medium' : 'tainacan-medium-full' ))" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], ( layout == 'list' || imageSize ))"
:alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))" :alt="item.thumbnail_alt ? item.thumbnail_alt : (item && item.name ? item.name : $root.__( 'Thumbnail', 'tainacan' ))"
:transition-duration="500" /> :transition-duration="500" />
<span v-if="item.title">{{ item.title }}</span> <span v-if="item.title">{{ item.title }}</span>
@ -297,7 +297,7 @@ export default {
mosaicItemFocalPointX: Number, mosaicItemFocalPointX: Number,
mosaicItemFocalPointY: Number, mosaicItemFocalPointY: Number,
maxColumnsCount: Number, maxColumnsCount: Number,
cropImagesToSquare: Boolean, imageSize: String,
order: String, order: String,
showSearchBar: Boolean, showSearchBar: Boolean,
showCollectionHeader: Boolean, showCollectionHeader: Boolean,

96
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-masonry.vue
View File

@ -1,8 +1,6 @@
<template> <template>
<div class="table-container"> <div class="table-container">
<div <div class="table-wrapper">
ref="masonryWrapper"
class="table-wrapper">
<!-- Empty result placeholder --> <!-- Empty result placeholder -->
<section <section
@ -19,32 +17,33 @@
</section> </section>
<!-- SKELETON LOADING --> <!-- SKELETON LOADING -->
<masonry <div
v-if="isLoading" v-if="isLoading"
:cols="masonryCols" :class="{
:gutter="25" 'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
class="tainacan-masonry-container"> }"
class="tainacan-masonry-container--skeleton">
<div <div
:key="item" :key="item"
v-for="item in 12" v-for="item in 12"
:style="{'min-height': randomHeightForMasonryItem() + 'px' }" :style="{'min-height': randomHeightForMasonryItem() + 'px' }"
class="skeleton tainacan-masonry-item" /> class="skeleton" />
</masonry> </div>
<!-- MASONRY VIEW MODE --> <!-- MASONRY VIEW MODE -->
<masonry <ul
role="list" v-if="!isLoading"
v-if="!isLoading && items.length > 0" :class="{
:cols="masonryCols" 'tainacan-masonry-container--legacy': shouldUseLegacyMasonyCols
:gutter="25" }"
class="tainacan-masonry-container"> class="tainacan-masonry-container">
<div <li
role="listitem"
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
:aria-setsize="totalItems" :aria-setsize="totalItems"
:aria-posinset="getPosInSet(index)" :aria-posinset="getPosInSet(index)"
:key="index" :key="index"
v-for="(item, index) of items"> v-for="(item, index) of items"
:class="{ 'tainacan-masonry-grid-sizer': index == 0 }">
<a <a
class="tainacan-masonry-item" class="tainacan-masonry-item"
@ -80,11 +79,11 @@
<blur-hash-image <blur-hash-image
v-if="item.thumbnail != undefined" v-if="item.thumbnail != undefined"
class="tainacan-masonry-item-thumbnail" class="tainacan-masonry-item-thumbnail"
:width="$thumbHelper.getWidth(item['thumbnail'], 'tainacan-medium-full', 120)" :width="$thumbHelper.getWidth(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:height="$thumbHelper.getHeight(item['thumbnail'], 'tainacan-medium-full', 120)" :height="$thumbHelper.getHeight(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', 280)"
:hash="$thumbHelper.getBlurhashString(item['thumbnail'], 'tainacan-medium-full')" :hash="$thumbHelper.getBlurhashString(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full')"
:src="$thumbHelper.getSrc(item['thumbnail'], 'tainacan-medium-full', item.document_mimetype)" :src="$thumbHelper.getSrc(item['thumbnail'], shouldUseLegacyMasonyCols ? 'tainacan-medium-full' : 'tainacan-large-full', item.document_mimetype)"
:srcset="$thumbHelper.getSrcSet(item['thumbnail'], 'tainacan-medium-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')" :alt="item.thumbnail_alt ? item.thumbnail_alt : $i18n.get('label_thumbnail')"
:transition-duration="500" :transition-duration="500"
/> />
@ -95,14 +94,15 @@
class="faceted-search-hook faceted-search-hook-item-after" class="faceted-search-hook faceted-search-hook-item-after"
v-html="getAfterHook(item)" /> v-html="getAfterHook(item)" />
</a> </a>
</div> </li>
</masonry> </ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { viewModesMixin } from '../js/view-modes-mixin.js'; import { viewModesMixin } from '../js/view-modes-mixin.js';
import Masonry from 'masonry-layout';
export default { export default {
name: 'ViewModeMasonry', name: 'ViewModeMasonry',
@ -111,33 +111,37 @@ export default {
], ],
data () { data () {
return { return {
containerWidthDiscount: Number, masonry: false,
masonryCols: {default: 6, 1919: 5, 1407: 4, 1215: 3, 1023: 3, 767: 2, 343: 1} shouldUseLegacyMasonyCols: false
} }
}, },
watch: { watch: {
isFiltersMenuCompressed() { isLoading: {
if (this.$refs.masonryWrapper != undefined && handler() {
this.$refs.masonryWrapper.children[0] != undefined && if (this.items && this.items.length > 0) {
this.$refs.masonryWrapper.children[0].children[0] != undefined && this.$nextTick(() => {
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) { if (this.masonry !== false)
if ((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth)) this.masonry.destroy();
this.containerWidthDiscount = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - this.$refs.masonryWrapper.clientWidth;
} this.masonry = new Masonry( '.tainacan-masonry-container', {
this.$forceUpdate(); itemSelector: 'li',
}, columnWidth: '.tainacan-masonry-grid-sizer',
containerWidthDiscount() { gutter: 25,
let obj = {}; percentPosition: true
obj['default'] = 6; });
obj[1980 - this.containerWidthDiscount] = 5; });
obj[1460 - this.containerWidthDiscount] = 4; }
obj[1275 - this.containerWidthDiscount] = 3; },
obj[1080 - this.containerWidthDiscount] = 3; immediate: true
obj[828 - this.containerWidthDiscount] = 2;
obj[400] = 1;
this.masonryCols = obj;
} }
}, },
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: { methods: {
randomHeightForMasonryItem() { randomHeightForMasonryItem() {
let min = 120; let min = 120;

93
src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-records.vue
View File

@ -19,32 +19,28 @@
</section> </section>
<!-- SKELETON LOADING --> <!-- SKELETON LOADING -->
<masonry <div
v-if="isLoading" v-if="isLoading"
:cols="masonryCols" class="tainacan-records-container--skeleton">
:gutter="30"
class="tainacan-records-container">
<div <div
:key="item" :key="item"
v-for="item in 12" v-for="item in 12"
:style="{'min-height': randomHeightForRecordsItem() + 'px' }" :style="{'min-height': randomHeightForRecordsItem() + 'px' }"
class="skeleton tainacan-record" /> class="skeleton" />
</masonry> </div>
<!-- RECORDS VIEW MODE --> <!-- RECORDS VIEW MODE -->
<masonry <ul
role="list" v-if="!isLoading"
v-if="!isLoading && items.length > 0"
:cols="masonryCols"
:gutter="30"
class="tainacan-records-container"> class="tainacan-records-container">
<div <li
role="listitem" role="listitem"
:aria-setsize="totalItems" :aria-setsize="totalItems"
:aria-posinset="getPosInSet(index)" :aria-posinset="getPosInSet(index)"
:data-tainacan-item-id="item.id" :data-tainacan-item-id="item.id"
:key="index" :key="index"
v-for="(item, index) of items"> v-for="(item, index) of items"
:class="{ 'tainacan-records-grid-sizer': index == 0 }">
<a <a
:href="getItemLink(item.url, index)" :href="getItemLink(item.url, index)"
class="tainacan-record"> class="tainacan-record">
@ -134,14 +130,15 @@
class="faceted-search-hook faceted-search-hook-item-after" class="faceted-search-hook faceted-search-hook-item-after"
v-html="getAfterHook(item)" /> v-html="getAfterHook(item)" />
</a> </a>
</div> </li>
</masonry> </ul>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { viewModesMixin } from '../js/view-modes-mixin.js'; import { viewModesMixin } from '../js/view-modes-mixin.js';
import Masonry from 'masonry-layout';
export default { export default {
name: 'ViewModeRecords', name: 'ViewModeRecords',
@ -150,7 +147,7 @@ export default {
], ],
data () { data () {
return { return {
masonryCols: {default: 4, 1919: 3, 1407: 2, 1215: 2, 1023: 1, 767: 1, 343: 1} masonry: false
} }
}, },
computed: { computed: {
@ -159,42 +156,28 @@ export default {
} }
}, },
watch: { watch: {
isFiltersMenuCompressed() { isLoading: {
if (this.$refs.masonryWrapper != undefined && handler() {
this.$refs.masonryWrapper.children[0] != undefined && if (this.items && this.items.length > 0) {
this.$refs.masonryWrapper.children[0].children[0] != undefined && this.$nextTick(() => {
this.$refs.masonryWrapper.children[0].children[0].clientWidth != undefined) { if (this.masonry !== false)
this.containerWidthDiscount = (window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) - this.$refs.masonryWrapper.clientWidth; this.masonry.destroy();
}
this.$forceUpdate(); this.masonry = new Masonry( '.tainacan-records-container', {
}, itemSelector: 'li',
containerWidthDiscount() { columnWidth: '.tainacan-records-grid-sizer',
let obj = {}; gutter: 30,
obj['default'] = 4; percentPosition: true
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; immediate: true
obj[400] = 1;
this.masonryCols = obj;
} }
}, },
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() { beforeDestroy() {
window.removeEventListener('resize', this.recalculateContainerWidth); if (this.masonry !== false)
this.masonry.destroy();
}, },
methods: { methods: {
randomHeightForRecordsItem() { randomHeightForRecordsItem() {
@ -205,17 +188,7 @@ export default {
getItemImageHeight(imageWidth, imageHeight) { getItemImageHeight(imageWidth, imageHeight) {
let itemWidth = 120; let itemWidth = 120;
return (imageHeight*itemWidth)/imageWidth; 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> </script>

2
src/views/gutenberg-blocks/blocks/faceted-search/theme.js
View File

@ -23,7 +23,6 @@ import {
Numberinput Numberinput
} from 'buefy'; } from 'buefy';
import VTooltip from 'floating-vue'; import VTooltip from 'floating-vue';
import VueMasonry from 'vue-masonry-css';
import cssVars from 'css-vars-ponyfill'; import cssVars from 'css-vars-ponyfill';
import qs from 'qs'; import qs from 'qs';
import VueBlurHash from 'vue-blurhash'; import VueBlurHash from 'vue-blurhash';
@ -120,7 +119,6 @@ export default (element) => {
} }
} }
}); });
Vue.use(VueMasonry);
Vue.use(VueBlurHash); Vue.use(VueBlurHash);
Vue.use(I18NPlugin); Vue.use(I18NPlugin);
Vue.use(UserPrefsPlugin); Vue.use(UserPrefsPlugin);

13
src/views/gutenberg-blocks/tainacan-blocks-common-scripts.js
View File

@ -1,4 +1,5 @@
import * as conditioner from 'conditioner-core/conditioner-core.esm'; 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. // 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/'; __webpack_public_path__ = tainacan_plugin.plugin_dir_url + 'assets/js/';
@ -67,7 +68,17 @@ performWhenDocumentIsLoaded(() => {
/* webpackMode: "lazy" */ /* webpackMode: "lazy" */
/* webpackInclude: /theme\.js$/ */ /* webpackInclude: /theme\.js$/ */
/* webpackChunkName: "tainacan-chunks-" */ /* 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! // lets go!

359
src/views/libs/pdf-viewer/pdf-viewer.html
View File

@ -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>

10189
src/views/libs/pdf-viewer/pdf-viewer.js
View File

File diff suppressed because it is too large Load Diff

28569
src/views/libs/pdf-viewer/pdfjs-dist/build/pdf.js
View File

File diff suppressed because it is too large Load Diff

2
src/views/libs/pdf-viewer/pdfjs-dist/build/pdf.js.map
View File

File diff suppressed because one or more lines are too long

309
src/views/libs/pdf-viewer/pdfjs-dist/build/pdf.sandbox.js Normal file
View File

File diff suppressed because one or more lines are too long

1
src/views/libs/pdf-viewer/pdfjs-dist/build/pdf.sandbox.js.map Normal file
View File

File diff suppressed because one or more lines are too long

110903
src/views/libs/pdf-viewer/pdfjs-dist/build/pdf.worker.js vendored
View File

File diff suppressed because one or more lines are too long

2
src/views/libs/pdf-viewer/pdfjs-dist/build/pdf.worker.js.map vendored
View File

File diff suppressed because one or more lines are too long

103
src/views/libs/pdf-viewer/pdfjs-dist/web/debugger.css Normal file
View File

@ -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);
}

607
src/views/libs/pdf-viewer/pdfjs-dist/web/debugger.js
View File

@ -13,43 +13,42 @@
* limitations under the License. * limitations under the License.
*/ */
'use strict'; let opMap;
var FontInspector = (function FontInspectorClosure() { const FontInspector = (function FontInspectorClosure() {
var fonts; let fonts;
var active = false; let active = false;
var fontAttribute = 'data-font-name'; const fontAttribute = "data-font-name";
function removeSelection() { function removeSelection() {
var divs = document.querySelectorAll('div[' + fontAttribute + ']'); const divs = document.querySelectorAll(`span[${fontAttribute}]`);
for (var i = 0, ii = divs.length; i < ii; ++i) { for (const div of divs) {
var div = divs[i]; div.className = "";
div.className = '';
} }
} }
function resetSelection() { function resetSelection() {
var divs = document.querySelectorAll('div[' + fontAttribute + ']'); const divs = document.querySelectorAll(`span[${fontAttribute}]`);
for (var i = 0, ii = divs.length; i < ii; ++i) { for (const div of divs) {
var div = divs[i]; div.className = "debuggerHideText";
div.className = 'debuggerHideText';
} }
} }
function selectFont(fontName, show) { function selectFont(fontName, show) {
var divs = document.querySelectorAll('div[' + fontAttribute + '=' + const divs = document.querySelectorAll(
fontName + ']'); `span[${fontAttribute}=${fontName}]`
for (var i = 0, ii = divs.length; i < ii; ++i) { );
var div = divs[i]; for (const div of divs) {
div.className = show ? 'debuggerShowText' : 'debuggerHideText'; div.className = show ? "debuggerShowText" : "debuggerHideText";
} }
} }
function textLayerClick(e) { function textLayerClick(e) {
if (!e.target.dataset.fontName || if (
e.target.tagName.toUpperCase() !== 'DIV') { !e.target.dataset.fontName ||
e.target.tagName.toUpperCase() !== "SPAN"
) {
return; return;
} }
var fontName = e.target.dataset.fontName; const fontName = e.target.dataset.fontName;
var selects = document.getElementsByTagName('input'); const selects = document.getElementsByTagName("input");
for (var i = 0; i < selects.length; ++i) { for (const select of selects) {
var select = selects[i];
if (select.dataset.fontName !== fontName) { if (select.dataset.fontName !== fontName) {
continue; continue;
} }
@ -60,23 +59,22 @@ var FontInspector = (function FontInspectorClosure() {
} }
return { return {
// Properties/functions needed by PDFBug. // Properties/functions needed by PDFBug.
id: 'FontInspector', id: "FontInspector",
name: 'Font Inspector', name: "Font Inspector",
panel: null, panel: null,
manager: null, manager: null,
init: function init(pdfjsLib) { init(pdfjsLib) {
var panel = this.panel; const panel = this.panel;
panel.setAttribute('style', 'padding: 5px;'); const tmp = document.createElement("button");
var tmp = document.createElement('button'); tmp.addEventListener("click", resetSelection);
tmp.addEventListener('click', resetSelection); tmp.textContent = "Refresh";
tmp.textContent = 'Refresh';
panel.appendChild(tmp); panel.appendChild(tmp);
fonts = document.createElement('div'); fonts = document.createElement("div");
panel.appendChild(fonts); panel.appendChild(fonts);
}, },
cleanup: function cleanup() { cleanup() {
fonts.textContent = ''; fonts.textContent = "";
}, },
enabled: false, enabled: false,
get active() { get active() {
@ -85,65 +83,62 @@ var FontInspector = (function FontInspectorClosure() {
set active(value) { set active(value) {
active = value; active = value;
if (active) { if (active) {
document.body.addEventListener('click', textLayerClick, true); document.body.addEventListener("click", textLayerClick, true);
resetSelection(); resetSelection();
} else { } else {
document.body.removeEventListener('click', textLayerClick, true); document.body.removeEventListener("click", textLayerClick, true);
removeSelection(); removeSelection();
} }
}, },
// FontInspector specific functions. // FontInspector specific functions.
fontAdded: function fontAdded(fontObj, url) { fontAdded(fontObj, url) {
function properties(obj, list) { function properties(obj, list) {
var moreInfo = document.createElement('table'); const moreInfo = document.createElement("table");
for (var i = 0; i < list.length; i++) { for (const entry of list) {
var tr = document.createElement('tr'); const tr = document.createElement("tr");
var td1 = document.createElement('td'); const td1 = document.createElement("td");
td1.textContent = list[i]; td1.textContent = entry;
tr.appendChild(td1); tr.appendChild(td1);
var td2 = document.createElement('td'); const td2 = document.createElement("td");
td2.textContent = obj[list[i]].toString(); td2.textContent = obj[entry].toString();
tr.appendChild(td2); tr.appendChild(td2);
moreInfo.appendChild(tr); moreInfo.appendChild(tr);
} }
return moreInfo; return moreInfo;
} }
var moreInfo = properties(fontObj, ['name', 'type']); const moreInfo = properties(fontObj, ["name", "type"]);
var fontName = fontObj.loadedName; const fontName = fontObj.loadedName;
var font = document.createElement('div'); const font = document.createElement("div");
var name = document.createElement('span'); const name = document.createElement("span");
name.textContent = fontName; name.textContent = fontName;
var download = document.createElement('a'); const download = document.createElement("a");
if (url) { if (url) {
url = /url\(['"]?([^\)"']+)/.exec(url); url = /url\(['"]?([^)"']+)/.exec(url);
download.href = url[1]; download.href = url[1];
} else if (fontObj.data) { } else if (fontObj.data) {
url = URL.createObjectURL(new Blob([fontObj.data], { download.href = URL.createObjectURL(
type: fontObj.mimeType, new Blob([fontObj.data], { type: fontObj.mimeType })
})); );
download.href = url;
} }
download.textContent = 'Download'; download.textContent = "Download";
var logIt = document.createElement('a'); const logIt = document.createElement("a");
logIt.href = ''; logIt.href = "";
logIt.textContent = 'Log'; logIt.textContent = "Log";
logIt.addEventListener('click', function(event) { logIt.addEventListener("click", function (event) {
event.preventDefault(); event.preventDefault();
console.log(fontObj); console.log(fontObj);
}); });
var select = document.createElement('input'); const select = document.createElement("input");
select.setAttribute('type', 'checkbox'); select.setAttribute("type", "checkbox");
select.dataset.fontName = fontName; select.dataset.fontName = fontName;
select.addEventListener('click', (function(select, fontName) { select.addEventListener("click", function () {
return (function() { selectFont(fontName, select.checked);
selectFont(fontName, select.checked); });
});
})(select, fontName));
font.appendChild(select); font.appendChild(select);
font.appendChild(name); font.appendChild(name);
font.appendChild(document.createTextNode(' ')); font.appendChild(document.createTextNode(" "));
font.appendChild(download); font.appendChild(download);
font.appendChild(document.createTextNode(' ')); font.appendChild(document.createTextNode(" "));
font.appendChild(logIt); font.appendChild(logIt);
font.appendChild(moreInfo); font.appendChild(moreInfo);
fonts.appendChild(font); fonts.appendChild(font);
@ -158,100 +153,89 @@ var FontInspector = (function FontInspectorClosure() {
}; };
})(); })();
var opMap;
// Manages all the page steppers. // Manages all the page steppers.
var StepperManager = (function StepperManagerClosure() { const StepperManager = (function StepperManagerClosure() {
var steppers = []; let steppers = [];
var stepperDiv = null; let stepperDiv = null;
var stepperControls = null; let stepperControls = null;
var stepperChooser = null; let stepperChooser = null;
var breakPoints = Object.create(null); let breakPoints = Object.create(null);
return { return {
// Properties/functions needed by PDFBug. // Properties/functions needed by PDFBug.
id: 'Stepper', id: "Stepper",
name: 'Stepper', name: "Stepper",
panel: null, panel: null,
manager: null, manager: null,
init: function init(pdfjsLib) { init(pdfjsLib) {
var self = this; const self = this;
this.panel.setAttribute('style', 'padding: 5px;'); stepperControls = document.createElement("div");
stepperControls = document.createElement('div'); stepperChooser = document.createElement("select");
stepperChooser = document.createElement('select'); stepperChooser.addEventListener("change", function (event) {
stepperChooser.addEventListener('change', function(event) {
self.selectStepper(this.value); self.selectStepper(this.value);
}); });
stepperControls.appendChild(stepperChooser); stepperControls.appendChild(stepperChooser);
stepperDiv = document.createElement('div'); stepperDiv = document.createElement("div");
this.panel.appendChild(stepperControls); this.panel.appendChild(stepperControls);
this.panel.appendChild(stepperDiv); this.panel.appendChild(stepperDiv);
if (sessionStorage.getItem('pdfjsBreakPoints')) { if (sessionStorage.getItem("pdfjsBreakPoints")) {
breakPoints = JSON.parse(sessionStorage.getItem('pdfjsBreakPoints')); breakPoints = JSON.parse(sessionStorage.getItem("pdfjsBreakPoints"));
} }
opMap = Object.create(null); opMap = Object.create(null);
for (var key in pdfjsLib.OPS) { for (const key in pdfjsLib.OPS) {
opMap[pdfjsLib.OPS[key]] = key; opMap[pdfjsLib.OPS[key]] = key;
} }
}, },
cleanup: function cleanup() { cleanup() {
stepperChooser.textContent = ''; stepperChooser.textContent = "";
stepperDiv.textContent = ''; stepperDiv.textContent = "";
steppers = []; steppers = [];
}, },
enabled: false, enabled: false,
active: false, active: false,
// Stepper specific functions. // Stepper specific functions.
create: function create(pageIndex) { create(pageIndex) {
var debug = document.createElement('div'); const debug = document.createElement("div");
debug.id = 'stepper' + pageIndex; debug.id = "stepper" + pageIndex;
debug.setAttribute('hidden', true); debug.hidden = true;
debug.className = 'stepper'; debug.className = "stepper";
stepperDiv.appendChild(debug); stepperDiv.appendChild(debug);
var b = document.createElement('option'); const b = document.createElement("option");
b.textContent = 'Page ' + (pageIndex + 1); b.textContent = "Page " + (pageIndex + 1);
b.value = pageIndex; b.value = pageIndex;
stepperChooser.appendChild(b); stepperChooser.appendChild(b);
var initBreakPoints = breakPoints[pageIndex] || []; const initBreakPoints = breakPoints[pageIndex] || [];
var stepper = new Stepper(debug, pageIndex, initBreakPoints); const stepper = new Stepper(debug, pageIndex, initBreakPoints);
steppers.push(stepper); steppers.push(stepper);
if (steppers.length === 1) { if (steppers.length === 1) {
this.selectStepper(pageIndex, false); this.selectStepper(pageIndex, false);
} }
return stepper; return stepper;
}, },
selectStepper: function selectStepper(pageIndex, selectPanel) { selectStepper(pageIndex, selectPanel) {
var i; pageIndex |= 0;
pageIndex = pageIndex | 0;
if (selectPanel) { if (selectPanel) {
this.manager.selectPanel(this); this.manager.selectPanel(this);
} }
for (i = 0; i < steppers.length; ++i) { for (const stepper of steppers) {
var stepper = steppers[i]; stepper.panel.hidden = stepper.pageIndex !== pageIndex;
if (stepper.pageIndex === pageIndex) {
stepper.panel.removeAttribute('hidden');
} else {
stepper.panel.setAttribute('hidden', true);
}
} }
var options = stepperChooser.options; for (const option of stepperChooser.options) {
for (i = 0; i < options.length; ++i) {
var option = options[i];
option.selected = (option.value | 0) === pageIndex; option.selected = (option.value | 0) === pageIndex;
} }
}, },
saveBreakPoints: function saveBreakPoints(pageIndex, bps) { saveBreakPoints(pageIndex, bps) {
breakPoints[pageIndex] = bps; breakPoints[pageIndex] = bps;
sessionStorage.setItem('pdfjsBreakPoints', JSON.stringify(breakPoints)); sessionStorage.setItem("pdfjsBreakPoints", JSON.stringify(breakPoints));
}, },
}; };
})(); })();
// The stepper for each page's IRQueue. // The stepper for each page's operatorList.
var Stepper = (function StepperClosure() { const Stepper = (function StepperClosure() {
// Shorter way to create element and optionally set textContent. // Shorter way to create element and optionally set textContent.
function c(tag, textContent) { function c(tag, textContent) {
var d = document.createElement(tag); const d = document.createElement(tag);
if (textContent) { if (textContent) {
d.textContent = textContent; d.textContent = textContent;
} }
@ -259,63 +243,70 @@ var Stepper = (function StepperClosure() {
} }
function simplifyArgs(args) { function simplifyArgs(args) {
if (typeof args === 'string') { if (typeof args === "string") {
var MAX_STRING_LENGTH = 75; const MAX_STRING_LENGTH = 75;
return args.length <= MAX_STRING_LENGTH ? args : return args.length <= MAX_STRING_LENGTH
args.substr(0, MAX_STRING_LENGTH) + '...'; ? args
: args.substring(0, MAX_STRING_LENGTH) + "...";
} }
if (typeof args !== 'object' || args === null) { if (typeof args !== "object" || args === null) {
return args; return args;
} }
if ('length' in args) { // array if ("length" in args) {
var simpleArgs = [], i, ii; // array
var MAX_ITEMS = 10; const MAX_ITEMS = 10,
simpleArgs = [];
let i, ii;
for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) { for (i = 0, ii = Math.min(MAX_ITEMS, args.length); i < ii; i++) {
simpleArgs.push(simplifyArgs(args[i])); simpleArgs.push(simplifyArgs(args[i]));
} }
if (i < args.length) { if (i < args.length) {
simpleArgs.push('...'); simpleArgs.push("...");
} }
return simpleArgs; return simpleArgs;
} }
var simpleObj = {}; const simpleObj = {};
for (var key in args) { for (const key in args) {
simpleObj[key] = simplifyArgs(args[key]); simpleObj[key] = simplifyArgs(args[key]);
} }
return simpleObj; return simpleObj;
} }
function Stepper(panel, pageIndex, initialBreakPoints) { // eslint-disable-next-line no-shadow
this.panel = panel; class Stepper {
this.breakPoint = 0; constructor(panel, pageIndex, initialBreakPoints) {
this.nextBreakPoint = null; this.panel = panel;
this.pageIndex = pageIndex; this.breakPoint = 0;
this.breakPoints = initialBreakPoints; this.nextBreakPoint = null;
this.currentIdx = -1; this.pageIndex = pageIndex;
this.operatorListIdx = 0; this.breakPoints = initialBreakPoints;
} this.currentIdx = -1;
Stepper.prototype = { this.operatorListIdx = 0;
init: function init(operatorList) { this.indentLevel = 0;
var panel = this.panel; }
var content = c('div', 'c=continue, s=step');
var table = c('table'); init(operatorList) {
const panel = this.panel;
const content = c("div", "c=continue, s=step");
const table = c("table");
content.appendChild(table); content.appendChild(table);
table.cellSpacing = 0; table.cellSpacing = 0;
var headerRow = c('tr'); const headerRow = c("tr");
table.appendChild(headerRow); table.appendChild(headerRow);
headerRow.appendChild(c('th', 'Break')); headerRow.appendChild(c("th", "Break"));
headerRow.appendChild(c('th', 'Idx')); headerRow.appendChild(c("th", "Idx"));
headerRow.appendChild(c('th', 'fn')); headerRow.appendChild(c("th", "fn"));
headerRow.appendChild(c('th', 'args')); headerRow.appendChild(c("th", "args"));
panel.appendChild(content); panel.appendChild(content);
this.table = table; this.table = table;
this.updateOperatorList(operatorList); this.updateOperatorList(operatorList);
}, }
updateOperatorList: function updateOperatorList(operatorList) {
var self = this; updateOperatorList(operatorList) {
const self = this;
function cboxOnClick() { function cboxOnClick() {
var x = +this.dataset.idx; const x = +this.dataset.idx;
if (this.checked) { if (this.checked) {
self.breakPoints.push(x); self.breakPoints.push(x);
} else { } else {
@ -324,130 +315,145 @@ var Stepper = (function StepperClosure() {
StepperManager.saveBreakPoints(self.pageIndex, self.breakPoints); StepperManager.saveBreakPoints(self.pageIndex, self.breakPoints);
} }
var MAX_OPERATORS_COUNT = 15000; const MAX_OPERATORS_COUNT = 15000;
if (this.operatorListIdx > MAX_OPERATORS_COUNT) { if (this.operatorListIdx > MAX_OPERATORS_COUNT) {
return; return;
} }
var chunk = document.createDocumentFragment(); const chunk = document.createDocumentFragment();
var operatorsToDisplay = Math.min(MAX_OPERATORS_COUNT, const operatorsToDisplay = Math.min(
operatorList.fnArray.length); MAX_OPERATORS_COUNT,
for (var i = this.operatorListIdx; i < operatorsToDisplay; i++) { operatorList.fnArray.length
var line = c('tr'); );
line.className = 'line'; for (let i = this.operatorListIdx; i < operatorsToDisplay; i++) {
const line = c("tr");
line.className = "line";
line.dataset.idx = i; line.dataset.idx = i;
chunk.appendChild(line); chunk.appendChild(line);
var checked = this.breakPoints.indexOf(i) !== -1; const checked = this.breakPoints.includes(i);
var args = operatorList.argsArray[i] || []; const args = operatorList.argsArray[i] || [];
var breakCell = c('td'); const breakCell = c("td");
var cbox = c('input'); const cbox = c("input");
cbox.type = 'checkbox'; cbox.type = "checkbox";
cbox.className = 'points'; cbox.className = "points";
cbox.checked = checked; cbox.checked = checked;
cbox.dataset.idx = i; cbox.dataset.idx = i;
cbox.onclick = cboxOnClick; cbox.onclick = cboxOnClick;
breakCell.appendChild(cbox); breakCell.appendChild(cbox);
line.appendChild(breakCell); line.appendChild(breakCell);
line.appendChild(c('td', i.toString())); line.appendChild(c("td", i.toString()));
var fn = opMap[operatorList.fnArray[i]]; const fn = opMap[operatorList.fnArray[i]];
var decArgs = args; let decArgs = args;
if (fn === 'showText') { if (fn === "showText") {
var glyphs = args[0]; const glyphs = args[0];
var newArgs = []; const charCodeRow = c("tr");
var str = []; const fontCharRow = c("tr");
for (var j = 0; j < glyphs.length; j++) { const unicodeRow = c("tr");
var glyph = glyphs[j]; for (const glyph of glyphs) {
if (typeof glyph === 'object' && glyph !== null) { if (typeof glyph === "object" && glyph !== null) {
str.push(glyph.fontChar); charCodeRow.appendChild(c("td", glyph.originalCharCode));
fontCharRow.appendChild(c("td", glyph.fontChar));
unicodeRow.appendChild(c("td", glyph.unicode));
} else { } else {
if (str.length > 0) { // null or number
newArgs.push(str.join('')); const advanceEl = c("td", glyph);
str = []; advanceEl.classList.add("advance");
} charCodeRow.appendChild(advanceEl);
newArgs.push(glyph); // null or number fontCharRow.appendChild(c("td"));
unicodeRow.appendChild(c("td"));
} }
} }
if (str.length > 0) { decArgs = c("td");
newArgs.push(str.join('')); const table = c("table");
} table.classList.add("showText");
decArgs = [newArgs]; 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) { if (operatorsToDisplay < operatorList.fnArray.length) {
line = c('tr'); const lastCell = c("td", "...");
var lastCell = c('td', '...');
lastCell.colspan = 4; lastCell.colspan = 4;
chunk.appendChild(lastCell); chunk.appendChild(lastCell);
} }
this.operatorListIdx = operatorList.fnArray.length; this.operatorListIdx = operatorList.fnArray.length;
this.table.appendChild(chunk); this.table.appendChild(chunk);
}, }
getNextBreakPoint: function getNextBreakPoint() {
this.breakPoints.sort(function(a, b) { getNextBreakPoint() {
this.breakPoints.sort(function (a, b) {
return a - b; return a - b;
}); });
for (var i = 0; i < this.breakPoints.length; i++) { for (const breakPoint of this.breakPoints) {
if (this.breakPoints[i] > this.currentIdx) { if (breakPoint > this.currentIdx) {
return this.breakPoints[i]; return breakPoint;
} }
} }
return null; return null;
}, }
breakIt: function breakIt(idx, callback) {
breakIt(idx, callback) {
StepperManager.selectStepper(this.pageIndex, true); StepperManager.selectStepper(this.pageIndex, true);
var self = this; this.currentIdx = idx;
var dom = document;
self.currentIdx = idx; const listener = evt => {
var listener = function(e) { switch (evt.keyCode) {
switch (e.keyCode) {
case 83: // step case 83: // step
dom.removeEventListener('keydown', listener); document.removeEventListener("keydown", listener);
self.nextBreakPoint = self.currentIdx + 1; this.nextBreakPoint = this.currentIdx + 1;
self.goTo(-1); this.goTo(-1);
callback(); callback();
break; break;
case 67: // continue case 67: // continue
dom.removeEventListener('keydown', listener); document.removeEventListener("keydown", listener);
var breakPoint = self.getNextBreakPoint(); this.nextBreakPoint = this.getNextBreakPoint();
self.nextBreakPoint = breakPoint; this.goTo(-1);
self.goTo(-1);
callback(); callback();
break; break;
} }
}; };
dom.addEventListener('keydown', listener); document.addEventListener("keydown", listener);
self.goTo(idx); this.goTo(idx);
}, }
goTo: function goTo(idx) {
var allRows = this.panel.getElementsByClassName('line'); goTo(idx) {
for (var x = 0, xx = allRows.length; x < xx; ++x) { const allRows = this.panel.getElementsByClassName("line");
var row = allRows[x]; for (const row of allRows) {
if ((row.dataset.idx | 0) === idx) { if ((row.dataset.idx | 0) === idx) {
row.style.backgroundColor = 'rgb(251,250,207)'; row.style.backgroundColor = "rgb(251,250,207)";
row.scrollIntoView(); row.scrollIntoView();
} else { } else {
row.style.backgroundColor = null; row.style.backgroundColor = null;
} }
} }
}, }
}; }
return Stepper; return Stepper;
})(); })();
var Stats = (function Stats() { const Stats = (function Stats() {
var stats = []; let stats = [];
function clear(node) { function clear(node) {
while (node.hasChildNodes()) { node.textContent = ""; // Remove any `node` contents from the DOM.
node.removeChild(node.lastChild);
}
} }
function getStatIndex(pageNumber) { function getStatIndex(pageNumber) {
for (var i = 0, ii = stats.length; i < ii; ++i) { for (const [i, stat] of stats.entries()) {
if (stats[i].pageNumber === pageNumber) { if (stat.pageNumber === pageNumber) {
return i; return i;
} }
} }
@ -455,14 +461,11 @@ var Stats = (function Stats() {
} }
return { return {
// Properties/functions needed by PDFBug. // Properties/functions needed by PDFBug.
id: 'Stats', id: "Stats",
name: 'Stats', name: "Stats",
panel: null, panel: null,
manager: null, manager: null,
init(pdfjsLib) { init(pdfjsLib) {},
this.panel.setAttribute('style', 'padding: 5px;');
pdfjsLib.PDFJS.enableStats = true;
},
enabled: false, enabled: false,
active: false, active: false,
// Stats specific functions. // Stats specific functions.
@ -470,28 +473,27 @@ var Stats = (function Stats() {
if (!stat) { if (!stat) {
return; return;
} }
var statsIndex = getStatIndex(pageNumber); const statsIndex = getStatIndex(pageNumber);
if (statsIndex !== false) { if (statsIndex !== false) {
var b = stats[statsIndex]; stats[statsIndex].div.remove();
this.panel.removeChild(b.div);
stats.splice(statsIndex, 1); stats.splice(statsIndex, 1);
} }
var wrapper = document.createElement('div'); const wrapper = document.createElement("div");
wrapper.className = 'stats'; wrapper.className = "stats";
var title = document.createElement('div'); const title = document.createElement("div");
title.className = 'title'; title.className = "title";
title.textContent = 'Page: ' + pageNumber; title.textContent = "Page: " + pageNumber;
var statsDiv = document.createElement('div'); const statsDiv = document.createElement("div");
statsDiv.textContent = stat.toString(); statsDiv.textContent = stat.toString();
wrapper.appendChild(title); wrapper.appendChild(title);
wrapper.appendChild(statsDiv); wrapper.appendChild(statsDiv);
stats.push({ pageNumber, div: wrapper, }); stats.push({ pageNumber, div: wrapper });
stats.sort(function(a, b) { stats.sort(function (a, b) {
return a.pageNumber - b.pageNumber; return a.pageNumber - b.pageNumber;
}); });
clear(this.panel); clear(this.panel);
for (var i = 0, ii = stats.length; i < ii; ++i) { for (const entry of stats) {
this.panel.appendChild(stats[i].div); this.panel.appendChild(entry.div);
} }
}, },
cleanup() { cleanup() {
@ -502,40 +504,35 @@ var Stats = (function Stats() {
})(); })();
// Manages all the debugging tools. // Manages all the debugging tools.
window.PDFBug = (function PDFBugClosure() { const PDFBug = (function PDFBugClosure() {
var panelWidth = 300; const panelWidth = 300;
var buttons = []; const buttons = [];
var activePanel = null; let activePanel = null;
return { return {
tools: [ tools: [FontInspector, StepperManager, Stats],
FontInspector,
StepperManager,
Stats
],
enable(ids) { enable(ids) {
var all = false, tools = this.tools; const all = ids.length === 1 && ids[0] === "all";
if (ids.length === 1 && ids[0] === 'all') { const tools = this.tools;
all = true; for (const tool of tools) {
} if (all || ids.includes(tool.id)) {
for (var i = 0; i < tools.length; ++i) {
var tool = tools[i];
if (all || ids.indexOf(tool.id) !== -1) {
tool.enabled = true; tool.enabled = true;
} }
} }
if (!all) { if (!all) {
// Sort the tools by the order they are enabled. // Sort the tools by the order they are enabled.
tools.sort(function(a, b) { tools.sort(function (a, b) {
var indexA = ids.indexOf(a.id); let indexA = ids.indexOf(a.id);
indexA = indexA < 0 ? tools.length : indexA; indexA = indexA < 0 ? tools.length : indexA;
var indexB = ids.indexOf(b.id); let indexB = ids.indexOf(b.id);
indexB = indexB < 0 ? tools.length : indexB; indexB = indexB < 0 ? tools.length : indexB;
return indexA - indexB; return indexA - indexB;
}); });
} }
}, },
init(pdfjsLib, container) { init(pdfjsLib, container, ids) {
this.loadCSS();
this.enable(ids);
/* /*
* Basic Layout: * Basic Layout:
* PDFBug * PDFBug
@ -545,34 +542,29 @@ window.PDFBug = (function PDFBugClosure() {
* Panel * Panel
* ... * ...
*/ */
var ui = document.createElement('div'); const ui = document.createElement("div");
ui.id = 'PDFBug'; ui.id = "PDFBug";
var controls = document.createElement('div'); const controls = document.createElement("div");
controls.setAttribute('class', 'controls'); controls.setAttribute("class", "controls");
ui.appendChild(controls); ui.appendChild(controls);
var panels = document.createElement('div'); const panels = document.createElement("div");
panels.setAttribute('class', 'panels'); panels.setAttribute("class", "panels");
ui.appendChild(panels); ui.appendChild(panels);
container.appendChild(ui); container.appendChild(ui);
container.style.right = panelWidth + 'px'; container.style.right = panelWidth + "px";
// Initialize all the debugging tools. // Initialize all the debugging tools.
var tools = this.tools; for (const tool of this.tools) {
var self = this; const panel = document.createElement("div");
for (var i = 0; i < tools.length; ++i) { const panelButton = document.createElement("button");
var tool = tools[i];
var panel = document.createElement('div');
var panelButton = document.createElement('button');
panelButton.textContent = tool.name; panelButton.textContent = tool.name;
panelButton.addEventListener('click', (function(selected) { panelButton.addEventListener("click", event => {
return function(event) { event.preventDefault();
event.preventDefault(); this.selectPanel(tool);
self.selectPanel(selected); });
};
})(i));
controls.appendChild(panelButton); controls.appendChild(panelButton);
panels.appendChild(panel); panels.appendChild(panel);
tool.panel = panel; tool.panel = panel;
@ -580,41 +572,50 @@ window.PDFBug = (function PDFBugClosure() {
if (tool.enabled) { if (tool.enabled) {
tool.init(pdfjsLib); tool.init(pdfjsLib);
} else { } else {
panel.textContent = tool.name + ' is disabled. To enable add ' + panel.textContent =
' "' + tool.id + '" to the pdfBug parameter ' + `${tool.name} is disabled. To enable add "${tool.id}" to ` +
'and refresh (separate multiple by commas).'; "the pdfBug parameter and refresh (separate multiple by commas).";
} }
buttons.push(panelButton); buttons.push(panelButton);
} }
this.selectPanel(0); 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() { cleanup() {
for (var i = 0, ii = this.tools.length; i < ii; i++) { for (const tool of this.tools) {
if (this.tools[i].enabled) { if (tool.enabled) {
this.tools[i].cleanup(); tool.cleanup();
} }
} }
}, },
selectPanel(index) { selectPanel(index) {
if (typeof index !== 'number') { if (typeof index !== "number") {
index = this.tools.indexOf(index); index = this.tools.indexOf(index);
} }
if (index === activePanel) { if (index === activePanel) {
return; return;
} }
activePanel = index; activePanel = index;
var tools = this.tools; for (const [j, tool] of this.tools.entries()) {
for (var j = 0; j < tools.length; ++j) { const isActive = j === index;
if (j === index) { buttons[j].classList.toggle("active", isActive);
buttons[j].setAttribute('class', 'active'); tool.active = isActive;
tools[j].active = true; tool.panel.hidden = !isActive;
tools[j].panel.removeAttribute('hidden');
} else {
buttons[j].setAttribute('class', '');
tools[j].active = false;
tools[j].panel.setAttribute('hidden', 'true');
}
} }
}, },
}; };
})(); })();
globalThis.FontInspector = FontInspector;
globalThis.StepperManager = StepperManager;
globalThis.Stats = Stats;
export { PDFBug };

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-next-rtl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 199 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-next-rtl@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 304 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-next.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 193 B

4
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-next.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 434 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-next@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 296 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-previous-rtl.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 193 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-previous-rtl@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 296 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-previous.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 199 B

4
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-previous.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 431 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/findbarButton-previous@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 304 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/grab.cur
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 326 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/grabbing.cur
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 326 B

24
src/views/libs/pdf-viewer/pdfjs-dist/web/images/loading-dark.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/loading-small.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 7.2 KiB

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/loading-small@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 16 KiB

1
src/views/libs/pdf-viewer/pdfjs-dist/web/images/loading.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-documentProperties.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 403 B

15
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-documentProperties.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 530 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-documentProperties@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 933 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-firstPage.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 179 B

1
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-firstPage.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 228 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-firstPage@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 266 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-handTool.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 301 B

1
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-handTool.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 312 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-handTool@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 583 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-lastPage.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 175 B

1
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-lastPage.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 229 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-lastPage@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 276 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-rotateCcw.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 360 B

1
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-rotateCcw.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 204 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-rotateCcw@2x.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 731 B

BIN
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-rotateCw.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 359 B

4
src/views/libs/pdf-viewer/pdfjs-dist/web/images/secondaryToolbarButton-rotateCw.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 494 B

Some files were not shown because too many files have changed in this diff Show More