From 232c26ea74f2d3316ba7789f71b9432f9b5a5aad Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 9 Apr 2021 10:37:50 +0200 Subject: [PATCH 01/17] Styles: Import styles by setting __patternslib_import_styles Allow importing styles from external libraries in Patternslib JavaScript via the global variable ``window.__patternslib_import_styles`` set to ``true``. This allows loading these styles automatically via Webpack. Set patternslib to use/import styles per default. --- CHANGES.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGES.md b/CHANGES.md index 2a74316da..6a924cba0 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -46,6 +46,10 @@ Allow importing styles from external libraries in Patternslib JavaScript via the global variable ``window.__patternslib_import_styles`` set to ``true``. This allows loading these styles automatically via Webpack. Disable setting style import per default. +- Styles: Import styles by setting ``__patternslib_import_styles`` + Allow importing styles from external libraries in Patternslib JavaScript via the global variable ``window.__patternslib_import_styles`` set to ``true``. + This allows loading these styles automatically via Webpack. + Set patternslib to use/import styles per default. - pat carousel: Use ``imagesloaded`` instead of timeout to wait for images to have been loaded. - core registry: Do not scan patterns within trees with attribute ``hidden`` or class ``cant-touch-this``. - Implenent lazy loading for external libraries via dynamic imports. Leads to significantly reduced bundle sizes. From 20500d20849842cdb0e11ca63bb4f834c7ee74b6 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 8 Apr 2021 10:52:59 +0200 Subject: [PATCH 02/17] styles: include patterns-sass package. --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index b9fc8e2c6..ba4551623 100644 --- a/package.json +++ b/package.json @@ -33,6 +33,7 @@ "masonry-layout": "^4.2.2", "moment": "^2.29.0", "moment-timezone": "^0.5.31", + "patterns-sass": "git+https://github.com/Patternslib/patterns-sass.git#scr-984", "photoswipe": "^4.1.3", "pikaday": "^1.8.0", "promise-polyfill": "^8.1.0", From b12e4b3ff460dbddaa75c00fbc5772e63994b083 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 8 Apr 2021 10:53:03 +0200 Subject: [PATCH 03/17] yarn install --- yarn.lock | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/yarn.lock b/yarn.lock index 3656ba5a1..bf65ee6b2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6247,6 +6247,10 @@ path-type@^4.0.0: resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b" integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw== +"patterns-sass@git+https://github.com/Patternslib/patterns-sass.git#scr-984": + version "0.0.0" + resolved "git+https://github.com/Patternslib/patterns-sass.git#9b96631797484c129a1b53f968c0fc6d8831bca2" + pbkdf2@^3.0.3: version "3.1.1" resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.1.tgz#cb8724b0fada984596856d1a6ebafd3584654b94" From c2e7b970f4d5c2ed6b1f414cc68d9a376ad0f915 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 8 Apr 2021 16:52:16 +0200 Subject: [PATCH 04/17] pat auto scale: Include styles from patterns-sass --- src/pat/auto-scale/auto-scale.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pat/auto-scale/auto-scale.js b/src/pat/auto-scale/auto-scale.js index 496cd4ba9..7264b4f72 100644 --- a/src/pat/auto-scale/auto-scale.js +++ b/src/pat/auto-scale/auto-scale.js @@ -4,7 +4,6 @@ * Copyright 2012 Humberto Sermeno * Copyright 2013 Simplon B.V. - Wichert Akkerman */ - import $ from "jquery"; import Base from "../../core/base"; import Parser from "../../core/parser"; @@ -25,6 +24,10 @@ export default Base.extend({ force_method: null, init: function ($el, opts) { + if (window.__patternslib_import_styles) { + import("patterns-sass/components/_auto-scale.scss"); + } + this.options = parser.parse(this.$el, opts); if (this.force_method !== null) { this.options.method = this.force_method; From 307d79389c7b1afed55b7f447f57ea9a42464520 Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 8 Apr 2021 16:52:46 +0200 Subject: [PATCH 05/17] pat auto scale: Cleanup styles. --- _sass/_patterns.scss | 1 - src/pat/auto-scale/_auto-scale.scss | 13 ------------- src/pat/auto-scale/example-2.html | 1 - src/pat/auto-scale/icon.svg | 12 ------------ src/pat/auto-scale/index.html | 1 - 5 files changed, 28 deletions(-) delete mode 100644 src/pat/auto-scale/_auto-scale.scss delete mode 100644 src/pat/auto-scale/icon.svg diff --git a/_sass/_patterns.scss b/_sass/_patterns.scss index e6231ea82..c642c2674 100644 --- a/_sass/_patterns.scss +++ b/_sass/_patterns.scss @@ -15,7 +15,6 @@ @import "components/icon"; @import "src/pat/auto-suggest/auto-suggest"; @import "src/pat/autofocus/autofocus"; -@import "src/pat/auto-scale/auto-scale"; @import "src/pat/auto-submit/auto-submit"; @import "src/pat/bumper/bumper"; @import "src/pat/carousel/carousel"; diff --git a/src/pat/auto-scale/_auto-scale.scss b/src/pat/auto-scale/_auto-scale.scss deleted file mode 100644 index 60a09d8bc..000000000 --- a/src/pat/auto-scale/_auto-scale.scss +++ /dev/null @@ -1,13 +0,0 @@ -.pat-auto-scale { - -moz-transform-origin: left top; - -webkit-transform-origin: left top; - transform-origin: left top; - opacity: 0; - -moz-transition: opacity 0.2s; - -webkit-transition: opacity 0.2s; - transition: opacity 0.2s; -} - -.pat-auto-scale.scaled { - opacity: 1; -} diff --git a/src/pat/auto-scale/example-2.html b/src/pat/auto-scale/example-2.html index 96ff90d59..168ec6aff 100644 --- a/src/pat/auto-scale/example-2.html +++ b/src/pat/auto-scale/example-2.html @@ -9,7 +9,6 @@ type="text/javascript" charset="utf-8" > - - +
Date: Thu, 8 Apr 2021 18:21:44 +0200 Subject: [PATCH 11/17] pat calendar: Cleanup. --- src/pat/calendar/index.html | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/pat/calendar/index.html b/src/pat/calendar/index.html index ea1c542b1..bb6a97e24 100644 --- a/src/pat/calendar/index.html +++ b/src/pat/calendar/index.html @@ -3,12 +3,6 @@ Demo page - - -

Carousel in a list

diff --git a/src/pat/carousel/slick.css b/src/pat/carousel/slick.css deleted file mode 100644 index 94926c612..000000000 --- a/src/pat/carousel/slick.css +++ /dev/null @@ -1,102 +0,0 @@ -/* Slider */ -.slick-slider { - position: relative; - - display: block; - box-sizing: border-box; - - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - -webkit-touch-callout: none; - -khtml-user-select: none; - -ms-touch-action: pan-y; - touch-action: pan-y; - -webkit-tap-highlight-color: transparent; -} - -.slick-list { - position: relative; - - display: block; - overflow: hidden; - - margin: 0; - padding: 0; -} -.slick-list:focus { - outline: none; -} -.slick-list.dragging { - cursor: pointer; - cursor: hand; -} - -.slick-slider .slick-track, -.slick-slider .slick-list { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - -ms-transform: translate3d(0, 0, 0); - -o-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); -} - -.slick-track { - position: relative; - top: 0; - left: 0; - - display: block; - margin-left: auto; - margin-right: auto; -} -.slick-track:before, -.slick-track:after { - display: table; - - content: ""; -} -.slick-track:after { - clear: both; -} -.slick-loading .slick-track { - visibility: hidden; -} - -.slick-slide { - display: none; - float: left; - - height: 100%; - min-height: 1px; -} -[dir="rtl"] .slick-slide { - float: right; -} -.slick-slide img { - display: block; -} -.slick-slide.slick-loading img { - display: none; -} -.slick-slide.dragging img { - pointer-events: none; -} -.slick-initialized .slick-slide { - display: block; -} -.slick-loading .slick-slide { - visibility: hidden; -} -.slick-vertical .slick-slide { - display: block; - - height: auto; - - border: 1px solid transparent; -} -.slick-arrow.slick-hidden { - display: none; -} From daee2de5b15117cf9874254885be84d6fd680dba Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 8 Apr 2021 19:06:22 +0200 Subject: [PATCH 14/17] pat checklist: Include styles from patterns-sass --- src/pat/checklist/checklist.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pat/checklist/checklist.js b/src/pat/checklist/checklist.js index 646913d4e..b5ba8d287 100644 --- a/src/pat/checklist/checklist.js +++ b/src/pat/checklist/checklist.js @@ -18,6 +18,10 @@ export default Base.extend({ all_radios: [], init() { + if (window.__patternslib_import_styles) { + import("patterns-sass/components/_checklist.scss"); + } + this.options = parser.parse(this.el, this.options, false); this.$el.on("patterns-injected", this._init.bind(this)); this._init(); From 38526c355f3c2e8e8d78c253a9093412d46d020e Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Thu, 8 Apr 2021 19:06:47 +0200 Subject: [PATCH 15/17] pat checklist: Cleanup. --- _sass/_patterns.scss | 1 - src/pat/checklist/_checklist.scss | 49 ------------------------------- src/pat/checklist/index.html | 1 - 3 files changed, 51 deletions(-) delete mode 100644 src/pat/checklist/_checklist.scss diff --git a/_sass/_patterns.scss b/_sass/_patterns.scss index 3cf056c7a..ab390f16d 100644 --- a/_sass/_patterns.scss +++ b/_sass/_patterns.scss @@ -13,7 +13,6 @@ @import "components/avatar"; @import "components/form"; @import "components/icon"; -@import "src/pat/checklist/checklist"; @import "src/pat/collapsible/collapsible"; @import "src/pat/date-picker/date-picker"; @import "src/pat/datetime-picker/datetime-picker"; diff --git a/src/pat/checklist/_checklist.scss b/src/pat/checklist/_checklist.scss deleted file mode 100644 index 962f4f691..000000000 --- a/src/pat/checklist/_checklist.scss +++ /dev/null @@ -1,49 +0,0 @@ -@charset "UTF-8"; -@import "settings"; - -.pat-checklist { - > br { - display: none; - } - - label { - padding-left: 1.5em; - position: relative; - display: block; - - &.checked:before, - &.unchecked:before { - font-family: fontello; - content: "#{$glyph-checkbox}"; - float: left; - position: absolute; - left: 0; - top: 0em; - } - - &.checked:before { - content: "#{$glyph-checkbox-active}"; - } - - input[type="checkbox"], - input[type="radio"] { - opacity: 0; - position: absolute; - } - } - - &.radio label { - &:before { - content: "#{$glyph-radio-button}"; - } - &.checked:before { - content: "#{$glyph-radio-button-active}"; - } - } - - fieldset.composed { - padding-left: 0; - margin-bottom: 0; - position: relative; - } -} diff --git a/src/pat/checklist/index.html b/src/pat/checklist/index.html index 17a7b183a..37358e74f 100644 --- a/src/pat/checklist/index.html +++ b/src/pat/checklist/index.html @@ -3,7 +3,6 @@ Demo page -