From a35b46ad71990047877138dcc7c7666cb79b8735 Mon Sep 17 00:00:00 2001 From: btopro Date: Thu, 14 Nov 2024 15:41:00 -0500 Subject: [PATCH] https://github.com/haxtheweb/issues/issues/2177 --- elements/a11y-collapse/package.json | 1 + elements/accent-card/package.json | 1 + elements/app-hax/package.json | 8 + elements/audio-player/audio-player.js | 5 +- elements/audio-player/demo/index.html | 2 +- elements/audio-player/src/audio-player.js | 5 +- elements/barcode-reader/package.json | 2 + elements/bootstrap-theme/package.json | 6 + elements/check-it-out/package.json | 3 + elements/d-d-d/package.json | 2 +- elements/discord-embed/package.json | 1 + elements/documentation-player/package.json | 4 + elements/editable-table/package.json | 1 + elements/event-badge/package.json | 3 +- elements/figure-label/package.json | 1 + elements/media-image/package.json | 2 + elements/micro-copy-heading/.editorconfig | 17 -- elements/micro-copy-heading/.gitignore | 2 - elements/micro-copy-heading/.npmignore | 1 - elements/micro-copy-heading/.surgeignore | 1 - elements/micro-copy-heading/.travis.yml | 18 -- elements/micro-copy-heading/LICENSE.md | 201 ------------- elements/micro-copy-heading/README.md | 42 --- .../micro-copy-heading/custom-elements.json | 21 -- elements/micro-copy-heading/demo/index.html | 35 --- elements/micro-copy-heading/gulpfile.cjs | 125 --------- elements/micro-copy-heading/index.html | 13 - .../micro-copy-heading/micro-copy-heading.js | 154 ---------- elements/micro-copy-heading/package.json | 69 ----- elements/micro-copy-heading/polymer.json | 31 --- .../src/micro-copy-heading.js | 154 ---------- .../test/micro-copy-heading.test.js | 73 ----- .../vscode-html-custom-data.json | 26 -- elements/opt-img/.editorconfig | 17 -- elements/opt-img/.gitignore | 2 - elements/opt-img/.npmignore | 1 - elements/opt-img/.surgeignore | 1 - elements/opt-img/.travis.yml | 18 -- elements/opt-img/LICENSE.md | 201 ------------- elements/opt-img/README.md | 42 --- elements/opt-img/custom-elements.json | 30 -- elements/opt-img/demo/index.html | 77 ----- elements/opt-img/gulpfile.cjs | 166 ----------- elements/opt-img/index.html | 13 - elements/opt-img/lib/.gitkeep | 0 elements/opt-img/locales/opt-img.es.json | 3 - elements/opt-img/opt-img.js | 263 ------------------ elements/opt-img/package.json | 68 ----- elements/opt-img/polymer.json | 31 --- elements/opt-img/src/opt-img.js | 263 ------------------ elements/opt-img/test/opt-img.test.js | 17 -- elements/page-section/package.json | 7 +- elements/replace-tag/package.json | 3 + elements/simple-toolbar/package.json | 2 + 54 files changed, 48 insertions(+), 2207 deletions(-) delete mode 100644 elements/micro-copy-heading/.editorconfig delete mode 100644 elements/micro-copy-heading/.gitignore delete mode 100644 elements/micro-copy-heading/.npmignore delete mode 100644 elements/micro-copy-heading/.surgeignore delete mode 100644 elements/micro-copy-heading/.travis.yml delete mode 100644 elements/micro-copy-heading/LICENSE.md delete mode 100644 elements/micro-copy-heading/README.md delete mode 100755 elements/micro-copy-heading/custom-elements.json delete mode 100644 elements/micro-copy-heading/demo/index.html delete mode 100755 elements/micro-copy-heading/gulpfile.cjs delete mode 100755 elements/micro-copy-heading/index.html delete mode 100644 elements/micro-copy-heading/micro-copy-heading.js delete mode 100755 elements/micro-copy-heading/package.json delete mode 100755 elements/micro-copy-heading/polymer.json delete mode 100644 elements/micro-copy-heading/src/micro-copy-heading.js delete mode 100644 elements/micro-copy-heading/test/micro-copy-heading.test.js delete mode 100755 elements/micro-copy-heading/vscode-html-custom-data.json delete mode 100644 elements/opt-img/.editorconfig delete mode 100644 elements/opt-img/.gitignore delete mode 100644 elements/opt-img/.npmignore delete mode 100644 elements/opt-img/.surgeignore delete mode 100644 elements/opt-img/.travis.yml delete mode 100644 elements/opt-img/LICENSE.md delete mode 100644 elements/opt-img/README.md delete mode 100644 elements/opt-img/custom-elements.json delete mode 100644 elements/opt-img/demo/index.html delete mode 100644 elements/opt-img/gulpfile.cjs delete mode 100644 elements/opt-img/index.html delete mode 100644 elements/opt-img/lib/.gitkeep delete mode 100644 elements/opt-img/locales/opt-img.es.json delete mode 100644 elements/opt-img/opt-img.js delete mode 100644 elements/opt-img/package.json delete mode 100644 elements/opt-img/polymer.json delete mode 100644 elements/opt-img/src/opt-img.js delete mode 100644 elements/opt-img/test/opt-img.test.js diff --git a/elements/a11y-collapse/package.json b/elements/a11y-collapse/package.json index 93488e6f3d..0fa4495abd 100755 --- a/elements/a11y-collapse/package.json +++ b/elements/a11y-collapse/package.json @@ -43,6 +43,7 @@ "dependencies": { "@haxtheweb/simple-icon": "^9.0.18", "@haxtheweb/simple-tooltip": "^9.0.18", + "@haxtheweb/d-d-d": "^9.0.18", "lit": "^3.2.0" }, "devDependencies": { diff --git a/elements/accent-card/package.json b/elements/accent-card/package.json index 03e2130dc3..596c2c1997 100755 --- a/elements/accent-card/package.json +++ b/elements/accent-card/package.json @@ -44,6 +44,7 @@ "@haxtheweb/intersection-element": "^9.0.18", "@haxtheweb/schema-behaviors": "^9.0.18", "@haxtheweb/simple-colors": "^9.0.18", + "@haxtheweb/d-d-d": "^9.0.18", "lit": "^3.2.0" }, "devDependencies": { diff --git a/elements/app-hax/package.json b/elements/app-hax/package.json index 70dc157578..2087bc0ffb 100644 --- a/elements/app-hax/package.json +++ b/elements/app-hax/package.json @@ -46,10 +46,18 @@ "dependencies": { "@haxtheweb/grid-plate": "^9.0.18", "@haxtheweb/hax-iconset": "^9.0.18", + "@haxtheweb/h-a-x": "^9.0.18", + "@haxtheweb/super-daemon": "^9.0.18", + "@haxtheweb/haxcms-elements": "^9.0.18", + "@haxtheweb/simple-toolbar": "^9.0.18", "@haxtheweb/i18n-manager": "^9.0.18", + "@haxtheweb/scroll-button": "^9.0.18", + "@haxtheweb/micro-frontend-registry": "^9.0.18", "@haxtheweb/jwt-login": "^9.0.18", "@haxtheweb/multiple-choice": "^9.0.18", "@haxtheweb/promise-progress": "^9.0.18", + "@haxtheweb/future-terminal-text": "^9.0.18", + "@haxtheweb/d-d-d": "^9.0.18", "@haxtheweb/replace-tag": "^9.0.18", "@haxtheweb/rpg-character": "^9.0.18", "@haxtheweb/simple-colors": "^9.0.18", diff --git a/elements/audio-player/audio-player.js b/elements/audio-player/audio-player.js index 14f8b58389..00e07d6e0a 100644 --- a/elements/audio-player/audio-player.js +++ b/elements/audio-player/audio-player.js @@ -174,10 +174,9 @@ class AudioPlayer extends VideoPlayer { { tag: "audio-player", properties: { - accentColor: "orange", - dark: true, + mediaTitle: "Jonny Quest Theme", crossorigin: "anonymous", - source: "https://inline-audio-mocha.vercel.app/assets/whopper.mp3", + source: "https://archive.org/download/tvtunes_4710/Jonny%20Quest.mp3", }, content: "", }, diff --git a/elements/audio-player/demo/index.html b/elements/audio-player/demo/index.html index 87f151cdab..35008f4f24 100644 --- a/elements/audio-player/demo/index.html +++ b/elements/audio-player/demo/index.html @@ -18,7 +18,7 @@

Basic audio-player demo

diff --git a/elements/audio-player/src/audio-player.js b/elements/audio-player/src/audio-player.js index 14f8b58389..00e07d6e0a 100644 --- a/elements/audio-player/src/audio-player.js +++ b/elements/audio-player/src/audio-player.js @@ -174,10 +174,9 @@ class AudioPlayer extends VideoPlayer { { tag: "audio-player", properties: { - accentColor: "orange", - dark: true, + mediaTitle: "Jonny Quest Theme", crossorigin: "anonymous", - source: "https://inline-audio-mocha.vercel.app/assets/whopper.mp3", + source: "https://archive.org/download/tvtunes_4710/Jonny%20Quest.mp3", }, content: "", }, diff --git a/elements/barcode-reader/package.json b/elements/barcode-reader/package.json index 571717a995..ae30b1b26a 100644 --- a/elements/barcode-reader/package.json +++ b/elements/barcode-reader/package.json @@ -44,6 +44,8 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/es-global-bridge": "^9.0.18", + "@haxtheweb/simple-icon": "^9.0.18", "@zxing/browser": "0.1.1", "@zxing/library": "0.19.1", "javascript-barcode-reader": "0.6.9", diff --git a/elements/bootstrap-theme/package.json b/elements/bootstrap-theme/package.json index 71eae20208..7ce321695c 100644 --- a/elements/bootstrap-theme/package.json +++ b/elements/bootstrap-theme/package.json @@ -44,8 +44,14 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/utils": "^9.0.18", + "@haxtheweb/haxcms-elements": "^9.0.18", + "@haxtheweb/es-global-bridge": "^9.0.18", + "@haxtheweb/map-menu": "^9.0.18", + "@haxtheweb/simple-icon": "^9.0.18", "bootstrap": "4.6.0", "jquery": "3.6.0", + "mobx": "6.12.4", "lit": "^3.2.0" }, "devDependencies": { diff --git a/elements/check-it-out/package.json b/elements/check-it-out/package.json index b53c2c40cb..6a65ce4a5f 100644 --- a/elements/check-it-out/package.json +++ b/elements/check-it-out/package.json @@ -44,6 +44,9 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/intersection-element": "^9.0.18", + "@haxtheweb/simple-icon": "^9.0.18", + "@haxtheweb/simple-modal": "^9.0.18", "lit": "^3.2.0" }, "devDependencies": { diff --git a/elements/d-d-d/package.json b/elements/d-d-d/package.json index afc3b161b8..0305eafa12 100644 --- a/elements/d-d-d/package.json +++ b/elements/d-d-d/package.json @@ -70,7 +70,7 @@ "concurrently": "8.2.2", "gulp-babel": "8.0.0", "lodash": "4.17.21", - "mobx": "^6.13.5", + "mobx": "6.12.4", "polymer-build": "3.1.4", "wct-browser-legacy": "1.0.2", "web-animations-js": "2.3.2" diff --git a/elements/discord-embed/package.json b/elements/discord-embed/package.json index c78ccec824..1ca79cca83 100644 --- a/elements/discord-embed/package.json +++ b/elements/discord-embed/package.json @@ -43,6 +43,7 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/iframe-loader": "^9.0.18", "lit": "^3.2.0" }, "devDependencies": { diff --git a/elements/documentation-player/package.json b/elements/documentation-player/package.json index f13fa58262..27f1a7630e 100644 --- a/elements/documentation-player/package.json +++ b/elements/documentation-player/package.json @@ -43,6 +43,10 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/utils": "^9.0.18", + "@haxtheweb/code-editor": "^9.0.18", + "@haxtheweb/simple-icon": "^9.0.18", + "@haxtheweb/code-sample": "^9.0.18", "@haxtheweb/play-list": "^9.0.18", "@haxtheweb/simple-img": "^9.0.18", "lit": "^3.2.0" diff --git a/elements/editable-table/package.json b/elements/editable-table/package.json index 906cdf498a..d4ceaabcbd 100755 --- a/elements/editable-table/package.json +++ b/elements/editable-table/package.json @@ -41,6 +41,7 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/d-d-d": "^9.0.18", "@haxtheweb/a11y-menu-button": "^9.0.18", "@haxtheweb/hax-iconset": "^9.0.18", "@haxtheweb/responsive-utility": "^9.0.18", diff --git a/elements/event-badge/package.json b/elements/event-badge/package.json index e843b89eea..aa74fe70d8 100644 --- a/elements/event-badge/package.json +++ b/elements/event-badge/package.json @@ -44,7 +44,8 @@ }, "license": "Apache-2.0", "dependencies": { - "lit": "^3.2.0" + "lit": "^3.2.0", + "@haxtheweb/simple-colors": "^9.0.18" }, "devDependencies": { "@haxtheweb/deduping-fix": "^9.0.18", diff --git a/elements/figure-label/package.json b/elements/figure-label/package.json index 50d9634856..23dca07240 100755 --- a/elements/figure-label/package.json +++ b/elements/figure-label/package.json @@ -41,6 +41,7 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/d-d-d": "^9.0.18", "lit": "^3.2.0" }, "devDependencies": { diff --git a/elements/media-image/package.json b/elements/media-image/package.json index 487809c45b..a1b6ad5068 100755 --- a/elements/media-image/package.json +++ b/elements/media-image/package.json @@ -41,6 +41,8 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/simple-modal": "^9.0.18", + "@haxtheweb/d-d-d": "^9.0.18", "@haxtheweb/figure-label": "^9.0.18", "@haxtheweb/image-inspector": "^9.0.18", "@haxtheweb/schema-behaviors": "^9.0.18", diff --git a/elements/micro-copy-heading/.editorconfig b/elements/micro-copy-heading/.editorconfig deleted file mode 100644 index 7968a8836c..0000000000 --- a/elements/micro-copy-heading/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# EditorConfig: http://EditorConfig.org - -# Top-most EditorConfig file -root = true - -# Rules for JavaScript files: - -[*.{js,py,json,sh,html}] -# 4 space indentation -indent_style = space -indent_size = 2 -# No trailing spaces -trim_trailing_whitespace = true -# Unix-style newlines -end_of_line = lf -# Newline ending every file -insert_final_newline = true diff --git a/elements/micro-copy-heading/.gitignore b/elements/micro-copy-heading/.gitignore deleted file mode 100644 index bddbc94db5..0000000000 --- a/elements/micro-copy-heading/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules -analysis-error.json \ No newline at end of file diff --git a/elements/micro-copy-heading/.npmignore b/elements/micro-copy-heading/.npmignore deleted file mode 100644 index 3c3629e647..0000000000 --- a/elements/micro-copy-heading/.npmignore +++ /dev/null @@ -1 +0,0 @@ -node_modules diff --git a/elements/micro-copy-heading/.surgeignore b/elements/micro-copy-heading/.surgeignore deleted file mode 100644 index ddf342489b..0000000000 --- a/elements/micro-copy-heading/.surgeignore +++ /dev/null @@ -1 +0,0 @@ -!node_modules/ diff --git a/elements/micro-copy-heading/.travis.yml b/elements/micro-copy-heading/.travis.yml deleted file mode 100644 index 0781f91604..0000000000 --- a/elements/micro-copy-heading/.travis.yml +++ /dev/null @@ -1,18 +0,0 @@ -language: node_js -dist: trusty -sudo: required -addons: - firefox: "latest" - apt: - sources: - - google-chrome - packages: - - google-chrome-stable -node_js: stable -before_install: - - npm install -g web-component-tester -install: - - npm install -before_script: -script: - - xvfb-run npm run test diff --git a/elements/micro-copy-heading/LICENSE.md b/elements/micro-copy-heading/LICENSE.md deleted file mode 100644 index 95ef73e22a..0000000000 --- a/elements/micro-copy-heading/LICENSE.md +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2019 The Pennsylvania State University - - 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. \ No newline at end of file diff --git a/elements/micro-copy-heading/README.md b/elements/micro-copy-heading/README.md deleted file mode 100644 index 6cf3dc9f2e..0000000000 --- a/elements/micro-copy-heading/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# <micro-copy-heading> - -Copy -> small call to action / attention that acts as a heading too - -## Usage -To use this web component in your project you can utilize one of the following styles of syntax. - -```js -/* In an existing JS module / web component */ -import '@haxtheweb/micro-copy-heading/micro-copy-heading.js'; - -/* CDN */ - -``` - -## Develop / Demo -Run `npm start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo. -```bash -$ npm start -``` - - -## Contributing - -1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git` -2. Create your feature branch: `git checkout -b my-new-feature` -3. Commit your changes: `git commit -m 'Add some feature'` -4. Push to the branch: `git push origin my-new-feature` -5. Submit a pull request :D - -## Code style - -Copy use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. - -[prettier]: https://github.com/prettier/prettier/ -[prettier-ed]: https://github.com/prettier/prettier/#editor-integration -[polyserve]: https://github.com/Polymer/polyserve -[web-component-tester]: https://github.com/Polymer/web-component-tester - -## License -[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0) \ No newline at end of file diff --git a/elements/micro-copy-heading/custom-elements.json b/elements/micro-copy-heading/custom-elements.json deleted file mode 100755 index 8566999ce6..0000000000 --- a/elements/micro-copy-heading/custom-elements.json +++ /dev/null @@ -1,21 +0,0 @@ -{ - "version": 1, - "tags": [ - { - "name": "micro-copy-heading", - "description": "`micro-copy-heading`\n\nAttributes:\n\n * `heading` {`string`} - Heading / call to action to display\n\n * `endcap` {`string`} - ending cap to the statement, possibly a character, icon, etc\n\nProperties:\n\n * `heading` {`string`} - Heading / call to action to display\n\n * `endcap` {`string`} - ending cap to the statement, possibly a character, icon, etc\n\n * `tag` {`string`} - ", - "attributes": [ - { - "name": "heading", - "description": "`heading` {`string`} - Heading / call to action to display\n\nProperty: heading\n\nDefault: Telling our story" - }, - { - "name": "endcap", - "description": "`endcap` {`string`} - ending cap to the statement, possibly a character, icon, etc\n\nProperty: endcap\n\nDefault: //" - } - ] - } - ], - "globalAttributes": [], - "valueSets": [] -} \ No newline at end of file diff --git a/elements/micro-copy-heading/demo/index.html b/elements/micro-copy-heading/demo/index.html deleted file mode 100644 index e31f0df074..0000000000 --- a/elements/micro-copy-heading/demo/index.html +++ /dev/null @@ -1,35 +0,0 @@ - - - - - - MicroCopyHeading: micro-copy-heading Demo - - - - - - - - -
-

Basic micro-copy-heading demo

- - - -
- - diff --git a/elements/micro-copy-heading/gulpfile.cjs b/elements/micro-copy-heading/gulpfile.cjs deleted file mode 100755 index 21be75fe77..0000000000 --- a/elements/micro-copy-heading/gulpfile.cjs +++ /dev/null @@ -1,125 +0,0 @@ -const gulp = require("gulp"); -const fs = require("fs"); -const path = require("path"); - -const replace = require("gulp-replace"); -const stripCssComments = require("strip-css-comments"); -const decomment = require("decomment"); -const packageJson = require("./package.json"); -// merge all the src files together -gulp.task("merge", () => { - return gulp - .src("./src/" + packageJson.wcfactory.elementName + ".js") - .pipe( - replace( - /\/\* REQUIRED FOR TOOLING DO NOT TOUCH \*\//g, - (classStatement, character, jsFile) => { - // pull these off the package wcfactory files area - let html = fs - .readFileSync(path.join("./", packageJson.wcfactory.files.html)) - .toString() - .trim(); - html = decomment(html); - let haxString = ""; - if (packageJson.wcfactory.useHAX) { - let HAXProps = fs.readFileSync( - path.join("./", packageJson.wcfactory.files.hax) - ); - haxString = ` - // haxProperty definition - static get haxProperties() { - return ${HAXProps}; - }`; - } - let rawprops = "{}"; - rawprops = fs.readFileSync( - path.join("./", packageJson.wcfactory.files.properties) - ); - let props = `${rawprops}`, - comma = props - .replace(/\/\*[\s\S]*?\*\//g, "") - .replace(/\/\/.*/g, "") - .replace(/[\{\s\n\}]/g, ""); - (props = props.replace(/\"type\": \"(\w+)\"/g, '"type": $1')), - (superprops = - comma === "" ? `...super.properties` : `...super.properties,`); - props = props.replace(/\{([\s\n]*)/, `{$1$1${superprops}$1$1`); - let cssResult = ""; - if ( - packageJson.wcfactory.useSass && - packageJson.wcfactory.files.scss - ) { - // we don't support scss anymore - } else if (packageJson.wcfactory.files.css) { - cssResult += fs.readFileSync( - path.join("./", packageJson.wcfactory.files.css) - ); - } - - cssResult = stripCssComments(cssResult).trim(); - let litResult = - packageJson.wcfactory.customElementClass !== "LitElement" - ? `` - : ` - //styles function - static get styles() { - return [ - ${ - packageJson.wcfactory.sharedStyles && - packageJson.wcfactory.sharedStyles.length > 0 - ? `${packageJson.wcfactory.sharedStyles.join(",")},` - : `` - } - css\` -${cssResult} - \` - ]; - }`, - styleResult = - packageJson.wcfactory.customElementClass !== "LitElement" - ? `` - : ``; - - return `${litResult} - -// render function - render() { - return html\` -${styleResult} -${html}\`; - } -${haxString} - // properties available to the custom element for data binding - static get properties() { - return ${props}; - }`; - } - ) - ) - .pipe(gulp.dest("./")); -}); - -// run polymer analyze to generate documentation -gulp.task("analyze", () => { - var exec = require("child_process").exec; - return exec( - "polymer analyze --input demo/index.html > analysis.json", - function(error, stdout, stderr) { - if (error !== null) { - console.log("exec error: " + error); - } - } - ); -}); - - -gulp.task("watch", () => { - return gulp.watch("./src/*", gulp.series("merge", "analyze")); -}); - -// simple developer flow -gulp.task("dev", gulp.series("merge", "analyze", "watch")); - -gulp.task("default", gulp.series("merge", "analyze")); diff --git a/elements/micro-copy-heading/index.html b/elements/micro-copy-heading/index.html deleted file mode 100755 index b6e1fe85cb..0000000000 --- a/elements/micro-copy-heading/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - micro-copy-heading documentation - - - - - - - diff --git a/elements/micro-copy-heading/micro-copy-heading.js b/elements/micro-copy-heading/micro-copy-heading.js deleted file mode 100644 index 094c580326..0000000000 --- a/elements/micro-copy-heading/micro-copy-heading.js +++ /dev/null @@ -1,154 +0,0 @@ -/** - * Copyright 2019 The Pennsylvania State University - * @license Apache-2.0, see License.md for full text. - */ -import { LitElement, html, css } from "lit"; -/** - * `micro-copy-heading` - * @element micro-copy-heading - * `small call to action / attention that acts as a heading too` - * - * @microcopy - language worth noting: - * - - * - - * @lit-element - * @demo demo/index.html - */ -class MicroCopyHeading extends LitElement { - //styles function - static get styles() { - return [ - css` - :host { - display: block; - margin: 16px 0; - } - - :host([hidden]) { - display: none; - } - - span { - margin-left: 8px; - } - - h2 { - display: inline-flex; - margin: unset; - padding: unset; - font-size: 0.75em; - color: var(--simple-colors-default-theme-red-5, #de2654); - border: 2px solid var(--simple-colors-default-theme-red-5, #de2654); - line-height: 12px; - margin-right: 10px; - text-transform: uppercase; - font-weight: 500; - letter-spacing: 0.09em; - padding: 6px 16px; - } - `, - ]; - } - - // render function - render() { - return html`

- ${this.heading} -

`; - } - - // haxProperty definition - static get haxProperties() { - return { - canScale: true, - - canEditSource: true, - gizmo: { - title: "Micro copy-heading", - description: - "small call to action / attention that acts as a heading too", - icon: "icons:android", - color: "green", - tags: ["Text", "heading", "call to action", "micro copy"], - handles: [], - meta: { - author: "HAXTheWeb", - owner: "The Pennsylvania State University", - }, - }, - settings: { - configure: [ - { - property: "heading", - description: "", - inputMethod: "textfield", - required: false, - icon: "icons:android", - }, - { - property: "endCap", - description: "", - inputMethod: "textfield", - required: false, - icon: "icons:android", - }, - ], - advanced: [], - }, - }; - } - // properties available to the custom element for data binding - static get properties() { - return { - ...super.properties, - - /** - * Heading / call to action to display - */ - heading: { - name: "heading", - type: String, - value: "Telling our story", - }, - /** - * ending cap to the statement, possibly a character, icon, etc - */ - endcap: { - name: "endcap", - type: String, - value: "//", - }, - }; - } - - /** - * Store the tag name to make it easier to obtain directly. - * @notice function name must be here for tooling to operate correctly - */ - static get tag() { - return "micro-copy-heading"; - } - - // life cycle - constructor() { - super(); - this.tag = MicroCopyHeading.tag; - // map our imported properties json to real props on the element - // @notice static getter of properties is built via tooling - // to edit modify src/micro-copy-heading-properties.json - let obj = MicroCopyHeading.properties; - for (let p in obj) { - if (obj.hasOwnProperty(p)) { - if (this.hasAttribute(p)) { - this[p] = this.getAttribute(p); - } else { - this.setAttribute(p, obj[p].value); - this[p] = obj[p].value; - } - } - } - } -} -customElements.define(MicroCopyHeading.tag, MicroCopyHeading); -export { MicroCopyHeading }; diff --git a/elements/micro-copy-heading/package.json b/elements/micro-copy-heading/package.json deleted file mode 100755 index b9d358ea81..0000000000 --- a/elements/micro-copy-heading/package.json +++ /dev/null @@ -1,69 +0,0 @@ -{ - "name": "@haxtheweb/micro-copy-heading", - "wcfactory": { - "className": "MicroCopyHeading", - "customElementClass": "LitElement", - "elementName": "micro-copy-heading", - "generator-wcfactory-version": "0.7.0", - "useHAX": true, - "useSass": false, - "files": { - "css": "src/micro-copy-heading.css", - "html": "src/micro-copy-heading.html", - "js": "src/micro-copy-heading.js", - "properties": "src/micro-copy-heading-properties.json", - "hax": "src/micro-copy-heading-hax.json" - }, - "sharedStyles": [] - }, - "version": "9.0.18", - "description": "small call to action / attention that acts as a heading too", - "repository": { - "type": "git", - "url": "https://github.com/haxtheweb/webcomponents.git" - }, - "type": "module", - "main": "micro-copy-heading.js", - "module": "micro-copy-heading.js", - "scripts": { - "start": "yarn run dev", - "build": "gulp --gulpfile=gulpfile.cjs && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"{*,lib/**}.js\" --format vscode --outFile custom-elements.json", - "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"", - "watch": "gulp dev --gulpfile=gulpfile.cjs", - "serve": "web-dev-server -c ../../web-dev-server.config.mjs", - "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs", - "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium --watch", - "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium" - }, - "author": { - "name": "haxtheweb", - "url": "https://hax.psu.edu/" - }, - "license": "Apache-2.0", - "dependencies": { - "lit": "^3.2.0" - }, - "devDependencies": { - "@haxtheweb/deduping-fix": "^9.0.18", - "@haxtheweb/storybook-utilities": "^9.0.18", - "@open-wc/testing": "4.0.0", - "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", - "@polymer/iron-demo-helpers": "3.1.0", - "@web/dev-server": "0.4.6", - "@webcomponents/webcomponentsjs": "^2.8.0", - "concurrently": "8.2.2", - "wct-browser-legacy": "1.0.2" - }, - "private": false, - "publishConfig": { - "access": "public" - }, - "customElements": "custom-elements.json", - "keywords": [ - "webcomponents", - "html", - "haxtheweb", - "lit" - ], - "gitHead": "73a678e1d035b003097fd50b7b23c0d9c30f9b26" -} diff --git a/elements/micro-copy-heading/polymer.json b/elements/micro-copy-heading/polymer.json deleted file mode 100755 index 41b0487735..0000000000 --- a/elements/micro-copy-heading/polymer.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "entrypoint": "demo/index.html", - "extraDependencies": [ - "node_modules/@webcomponents/webcomponentsjs/*.js", - "!node_modules/@webcomponents/webcomponentsjs/gulpfile.js", - "node_modules/@webcomponents/webcomponentsjs/bundles/*.js" - ], - "sources": [], - "builds": [ - { - "name": "es6", - "browserCapabilities": ["es2018", "modules"], - "js": { - "minify": true - }, - "css": { - "minify": true - }, - "html": { - "minify": true - }, - "bundle": false, - "addServiceWorker": false - } - ], - "moduleResolution": "node", - "npm": true, - "lint": { - "rules": ["polymer-3"] - } -} diff --git a/elements/micro-copy-heading/src/micro-copy-heading.js b/elements/micro-copy-heading/src/micro-copy-heading.js deleted file mode 100644 index 094c580326..0000000000 --- a/elements/micro-copy-heading/src/micro-copy-heading.js +++ /dev/null @@ -1,154 +0,0 @@ -/** - * Copyright 2019 The Pennsylvania State University - * @license Apache-2.0, see License.md for full text. - */ -import { LitElement, html, css } from "lit"; -/** - * `micro-copy-heading` - * @element micro-copy-heading - * `small call to action / attention that acts as a heading too` - * - * @microcopy - language worth noting: - * - - * - - * @lit-element - * @demo demo/index.html - */ -class MicroCopyHeading extends LitElement { - //styles function - static get styles() { - return [ - css` - :host { - display: block; - margin: 16px 0; - } - - :host([hidden]) { - display: none; - } - - span { - margin-left: 8px; - } - - h2 { - display: inline-flex; - margin: unset; - padding: unset; - font-size: 0.75em; - color: var(--simple-colors-default-theme-red-5, #de2654); - border: 2px solid var(--simple-colors-default-theme-red-5, #de2654); - line-height: 12px; - margin-right: 10px; - text-transform: uppercase; - font-weight: 500; - letter-spacing: 0.09em; - padding: 6px 16px; - } - `, - ]; - } - - // render function - render() { - return html`

- ${this.heading} -

`; - } - - // haxProperty definition - static get haxProperties() { - return { - canScale: true, - - canEditSource: true, - gizmo: { - title: "Micro copy-heading", - description: - "small call to action / attention that acts as a heading too", - icon: "icons:android", - color: "green", - tags: ["Text", "heading", "call to action", "micro copy"], - handles: [], - meta: { - author: "HAXTheWeb", - owner: "The Pennsylvania State University", - }, - }, - settings: { - configure: [ - { - property: "heading", - description: "", - inputMethod: "textfield", - required: false, - icon: "icons:android", - }, - { - property: "endCap", - description: "", - inputMethod: "textfield", - required: false, - icon: "icons:android", - }, - ], - advanced: [], - }, - }; - } - // properties available to the custom element for data binding - static get properties() { - return { - ...super.properties, - - /** - * Heading / call to action to display - */ - heading: { - name: "heading", - type: String, - value: "Telling our story", - }, - /** - * ending cap to the statement, possibly a character, icon, etc - */ - endcap: { - name: "endcap", - type: String, - value: "//", - }, - }; - } - - /** - * Store the tag name to make it easier to obtain directly. - * @notice function name must be here for tooling to operate correctly - */ - static get tag() { - return "micro-copy-heading"; - } - - // life cycle - constructor() { - super(); - this.tag = MicroCopyHeading.tag; - // map our imported properties json to real props on the element - // @notice static getter of properties is built via tooling - // to edit modify src/micro-copy-heading-properties.json - let obj = MicroCopyHeading.properties; - for (let p in obj) { - if (obj.hasOwnProperty(p)) { - if (this.hasAttribute(p)) { - this[p] = this.getAttribute(p); - } else { - this.setAttribute(p, obj[p].value); - this[p] = obj[p].value; - } - } - } - } -} -customElements.define(MicroCopyHeading.tag, MicroCopyHeading); -export { MicroCopyHeading }; diff --git a/elements/micro-copy-heading/test/micro-copy-heading.test.js b/elements/micro-copy-heading/test/micro-copy-heading.test.js deleted file mode 100644 index 207d1e65bf..0000000000 --- a/elements/micro-copy-heading/test/micro-copy-heading.test.js +++ /dev/null @@ -1,73 +0,0 @@ -import { fixture, expect, html } from "@open-wc/testing"; - -import "../micro-copy-heading.js"; - -describe("micro-copy-heading test", () => { - let element; - beforeEach(async () => { - element = await fixture(html` - - `); - }); - - it("passes the a11y audit", async () => { - await expect(element).shadowDom.to.be.accessible(); - }); -}); - -/* -describe("A11y/chai axe tests", () => { - it("micro-copy-heading passes accessibility test", async () => { - const el = await fixture(html` `); - await expect(el).to.be.accessible(); - }); - it("micro-copy-heading passes accessibility negation", async () => { - const el = await fixture( - html`` - ); - await assert.isNotAccessible(el); - }); -}); - -/* -// Custom properties test -describe("Custom Property Test", () => { - it("micro-copy-heading can instantiate a element with custom properties", async () => { - const el = await fixture(html``); - expect(el.foo).to.equal('bar'); - }) -}) -*/ - -/* -// Test if element is mobile responsive -describe('Test Mobile Responsiveness', () => { - before(async () => {z - await setViewport({width: 375, height: 750}); - }) - it('sizes down to 360px', async () => { - const el = await fixture(html``); - const width = getComputedStyle(el).width; - expect(width).to.equal('360px'); - }) -}) */ - -/* -// Test if element sizes up for desktop behavior -describe('Test Desktop Responsiveness', () => { - before(async () => { - await setViewport({width: 1000, height: 1000}); - }) - it('sizes up to 410px', async () => { - const el = await fixture(html``); - const width = getComputedStyle(el).width; - expect(width).to.equal('410px'); - }) - it('hides mobile menu', async () => { - const el await fixture(html``); - const hidden = el.getAttribute('hidden'); - expect(hidden).to.equal(true); - }) -}) */ diff --git a/elements/micro-copy-heading/vscode-html-custom-data.json b/elements/micro-copy-heading/vscode-html-custom-data.json deleted file mode 100755 index 78e91464f7..0000000000 --- a/elements/micro-copy-heading/vscode-html-custom-data.json +++ /dev/null @@ -1,26 +0,0 @@ -{ - "version": 1, - "tags": [ - { - "name": "micro-copy-heading", - "description": "`micro-copy-heading`\n\nAttributes:\n\n * `heading` {`string`} - Heading / call to action to display\n\n * `endcap` {`string`} - ending cap to the statement, possibly a character, icon, etc\n\nProperties:\n\n * `heading` {`string`} - Heading / call to action to display\n\n * `endcap` {`string`} - ending cap to the statement, possibly a character, icon, etc\n\n * `tag` {`string`} - ", - "attributes": [ - { - "name": "heading", - "description": "`heading` {`string`} - Heading / call to action to display\n\nProperty: heading\n\nDefault: Telling our story" - }, - { - "name": "endcap", - "description": "`endcap` {`string`} - ending cap to the statement, possibly a character, icon, etc\n\nProperty: endcap\n\nDefault: //" - } - ] - }, - { - "name": "micro-copy-heading", - "description": "`micro-copy-heading`\n\nProperties:\n\n * `tag` {`string`} - ", - "attributes": [] - } - ], - "globalAttributes": [], - "valueSets": [] -} diff --git a/elements/opt-img/.editorconfig b/elements/opt-img/.editorconfig deleted file mode 100644 index 7968a8836c..0000000000 --- a/elements/opt-img/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -# EditorConfig: http://EditorConfig.org - -# Top-most EditorConfig file -root = true - -# Rules for JavaScript files: - -[*.{js,py,json,sh,html}] -# 4 space indentation -indent_style = space -indent_size = 2 -# No trailing spaces -trim_trailing_whitespace = true -# Unix-style newlines -end_of_line = lf -# Newline ending every file -insert_final_newline = true diff --git a/elements/opt-img/.gitignore b/elements/opt-img/.gitignore deleted file mode 100644 index bddbc94db5..0000000000 --- a/elements/opt-img/.gitignore +++ /dev/null @@ -1,2 +0,0 @@ -node_modules -analysis-error.json \ No newline at end of file diff --git a/elements/opt-img/.npmignore b/elements/opt-img/.npmignore deleted file mode 100644 index 3c3629e647..0000000000 --- a/elements/opt-img/.npmignore +++ /dev/null @@ -1 +0,0 @@ -node_modules diff --git a/elements/opt-img/.surgeignore b/elements/opt-img/.surgeignore deleted file mode 100644 index ddf342489b..0000000000 --- a/elements/opt-img/.surgeignore +++ /dev/null @@ -1 +0,0 @@ -!node_modules/ diff --git a/elements/opt-img/.travis.yml b/elements/opt-img/.travis.yml deleted file mode 100644 index 0781f91604..0000000000 --- a/elements/opt-img/.travis.yml +++ /dev/null @@ -1,18 +0,0 @@ -language: node_js -dist: trusty -sudo: required -addons: - firefox: "latest" - apt: - sources: - - google-chrome - packages: - - google-chrome-stable -node_js: stable -before_install: - - npm install -g web-component-tester -install: - - npm install -before_script: -script: - - xvfb-run npm run test diff --git a/elements/opt-img/LICENSE.md b/elements/opt-img/LICENSE.md deleted file mode 100644 index f8beed01a3..0000000000 --- a/elements/opt-img/LICENSE.md +++ /dev/null @@ -1,201 +0,0 @@ - Apache License - Version 2.0, January 2004 - http://www.apache.org/licenses/ - - TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION - - 1. Definitions. - - "License" shall mean the terms and conditions for use, reproduction, - and distribution as defined by Sections 1 through 9 of this document. - - "Licensor" shall mean the copyright owner or entity authorized by - the copyright owner that is granting the License. - - "Legal Entity" shall mean the union of the acting entity and all - other entities that control, are controlled by, or are under common - control with that entity. For the purposes of this definition, - "control" means (i) the power, direct or indirect, to cause the - direction or management of such entity, whether by contract or - otherwise, or (ii) ownership of fifty percent (50%) or more of the - outstanding shares, or (iii) beneficial ownership of such entity. - - "You" (or "Your") shall mean an individual or Legal Entity - exercising permissions granted by this License. - - "Source" form shall mean the preferred form for making modifications, - including but not limited to software source code, documentation - source, and configuration files. - - "Object" form shall mean any form resulting from mechanical - transformation or translation of a Source form, including but - not limited to compiled object code, generated documentation, - and conversions to other media types. - - "Work" shall mean the work of authorship, whether in Source or - Object form, made available under the License, as indicated by a - copyright notice that is included in or attached to the work - (an example is provided in the Appendix below). - - "Derivative Works" shall mean any work, whether in Source or Object - form, that is based on (or derived from) the Work and for which the - editorial revisions, annotations, elaborations, or other modifications - represent, as a whole, an original work of authorship. For the purposes - of this License, Derivative Works shall not include works that remain - separable from, or merely link (or bind by name) to the interfaces of, - the Work and Derivative Works thereof. - - "Contribution" shall mean any work of authorship, including - the original version of the Work and any modifications or additions - to that Work or Derivative Works thereof, that is intentionally - submitted to Licensor for inclusion in the Work by the copyright owner - or by an individual or Legal Entity authorized to submit on behalf of - the copyright owner. For the purposes of this definition, "submitted" - means any form of electronic, verbal, or written communication sent - to the Licensor or its representatives, including but not limited to - communication on electronic mailing lists, source code control systems, - and issue tracking systems that are managed by, or on behalf of, the - Licensor for the purpose of discussing and improving the Work, but - excluding communication that is conspicuously marked or otherwise - designated in writing by the copyright owner as "Not a Contribution." - - "Contributor" shall mean Licensor and any individual or Legal Entity - on behalf of whom a Contribution has been received by Licensor and - subsequently incorporated within the Work. - - 2. Grant of Copyright License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - copyright license to reproduce, prepare Derivative Works of, - publicly display, publicly perform, sublicense, and distribute the - Work and such Derivative Works in Source or Object form. - - 3. Grant of Patent License. Subject to the terms and conditions of - this License, each Contributor hereby grants to You a perpetual, - worldwide, non-exclusive, no-charge, royalty-free, irrevocable - (except as stated in this section) patent license to make, have made, - use, offer to sell, sell, import, and otherwise transfer the Work, - where such license applies only to those patent claims licensable - by such Contributor that are necessarily infringed by their - Contribution(s) alone or by combination of their Contribution(s) - with the Work to which such Contribution(s) was submitted. If You - institute patent litigation against any entity (including a - cross-claim or counterclaim in a lawsuit) alleging that the Work - or a Contribution incorporated within the Work constitutes direct - or contributory patent infringement, then any patent licenses - granted to You under this License for that Work shall terminate - as of the date such litigation is filed. - - 4. Redistribution. You may reproduce and distribute copies of the - Work or Derivative Works thereof in any medium, with or without - modifications, and in Source or Object form, provided that You - meet the following conditions: - - (a) You must give any other recipients of the Work or - Derivative Works a copy of this License; and - - (b) You must cause any modified files to carry prominent notices - stating that You changed the files; and - - (c) You must retain, in the Source form of any Derivative Works - that You distribute, all copyright, patent, trademark, and - attribution notices from the Source form of the Work, - excluding those notices that do not pertain to any part of - the Derivative Works; and - - (d) If the Work includes a "NOTICE" text file as part of its - distribution, then any Derivative Works that You distribute must - include a readable copy of the attribution notices contained - within such NOTICE file, excluding those notices that do not - pertain to any part of the Derivative Works, in at least one - of the following places: within a NOTICE text file distributed - as part of the Derivative Works; within the Source form or - documentation, if provided along with the Derivative Works; or, - within a display generated by the Derivative Works, if and - wherever such third-party notices normally appear. The contents - of the NOTICE file are for informational purposes only and - do not modify the License. You may add Your own attribution - notices within Derivative Works that You distribute, alongside - or as an addendum to the NOTICE text from the Work, provided - that such additional attribution notices cannot be construed - as modifying the License. - - You may add Your own copyright statement to Your modifications and - may provide additional or different license terms and conditions - for use, reproduction, or distribution of Your modifications, or - for any such Derivative Works as a whole, provided Your use, - reproduction, and distribution of the Work otherwise complies with - the conditions stated in this License. - - 5. Submission of Contributions. Unless You explicitly state otherwise, - any Contribution intentionally submitted for inclusion in the Work - by You to the Licensor shall be under the terms and conditions of - this License, without any additional terms or conditions. - Notwithstanding the above, nothing herein shall supersede or modify - the terms of any separate license agreement you may have executed - with Licensor regarding such Contributions. - - 6. Trademarks. This License does not grant permission to use the trade - names, trademarks, service marks, or product names of the Licensor, - except as required for reasonable and customary use in describing the - origin of the Work and reproducing the content of the NOTICE file. - - 7. Disclaimer of Warranty. Unless required by applicable law or - agreed to in writing, Licensor provides the Work (and each - Contributor provides its Contributions) on an "AS IS" BASIS, - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or - implied, including, without limitation, any warranties or conditions - of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A - PARTICULAR PURPOSE. You are solely responsible for determining the - appropriateness of using or redistributing the Work and assume any - risks associated with Your exercise of permissions under this License. - - 8. Limitation of Liability. In no event and under no legal theory, - whether in tort (including negligence), contract, or otherwise, - unless required by applicable law (such as deliberate and grossly - negligent acts) or agreed to in writing, shall any Contributor be - liable to You for damages, including any direct, indirect, special, - incidental, or consequential damages of any character arising as a - result of this License or out of the use or inability to use the - Work (including but not limited to damages for loss of goodwill, - work stoppage, computer failure or malfunction, or any and all - other commercial damages or losses), even if such Contributor - has been advised of the possibility of such damages. - - 9. Accepting Warranty or Additional Liability. While redistributing - the Work or Derivative Works thereof, You may choose to offer, - and charge a fee for, acceptance of support, warranty, indemnity, - or other liability obligations and/or rights consistent with this - License. However, in accepting such obligations, You may act only - on Your own behalf and on Your sole responsibility, not on behalf - of any other Contributor, and only if You agree to indemnify, - defend, and hold each Contributor harmless for any liability - incurred by, or claims asserted against, such Contributor by reason - of your accepting any such warranty or additional liability. - - END OF TERMS AND CONDITIONS - - APPENDIX: How to apply the Apache License to your work. - - To apply the Apache License to your work, attach the following - boilerplate notice, with the fields enclosed by brackets "[]" - replaced with your own identifying information. (Don't include - the brackets!) The text should be enclosed in the appropriate - comment syntax for the file format. We also recommend that a - file or class name and description of purpose be included on the - same "printed page" as the copyright notice for easier - identification within third-party archives. - - Copyright 2022 The Pennsylvania State University - - 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. \ No newline at end of file diff --git a/elements/opt-img/README.md b/elements/opt-img/README.md deleted file mode 100644 index eb1b73c6ae..0000000000 --- a/elements/opt-img/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# <opt-img> - -Img -> an optimized image delivery - -## Usage -To use this web component in your project you can utilize one of the following styles of syntax. - -```js -/* In an existing JS module / web component */ -import '@haxtheweb/opt-img/opt-img.js'; - -/* CDN */ - -``` - -## Develop / Demo -Run `npm start` will start a local development server, open your default browser to display it, open your finder to the correct window and start watching the `/src` directory for changes and automatically rebuilding the element and documentation site for the demo. -```bash -npm start -``` - - -## Contributing - -1. Fork it! `git clone https://github.com/haxtheweb/webcomponents.git` -2. Create your feature branch: `git checkout -b my-new-feature` -3. Commit your changes: `git commit -m 'Add some feature'` -4. Push to the branch: `git push origin my-new-feature` -5. Submit a pull request :D - -## Code style - -Img use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save. - -[prettier]: https://github.com/prettier/prettier/ -[prettier-ed]: https://github.com/prettier/prettier/#editor-integration -[polyserve]: https://github.com/Polymer/polyserve -[web-component-tester]: https://github.com/Polymer/web-component-tester - -## License -[Apache-2.0 License](http://opensource.org/licenses/Apache-2.0) \ No newline at end of file diff --git a/elements/opt-img/custom-elements.json b/elements/opt-img/custom-elements.json deleted file mode 100644 index bcc638ad01..0000000000 --- a/elements/opt-img/custom-elements.json +++ /dev/null @@ -1,30 +0,0 @@ -{ - "version": 1, - "tags": [ - { - "name": "opt-img", - "description": "`opt-img`\n`an optimized image delivery that is vanilla`\n\nEvents:\n\n * `i18n-manager-register-element` {`CustomEvent<{ context: this; namespace: string; localesPath: string; updateCallback: string; locales: string[]; }>`} - \n\nAttributes:\n\n * `alt` {`string`} - \n\n * `src` {`string`} - \n\n * `loadingvisible` {`string | null`} - \n\nProperties:\n\n * `html` {`string`} - \n\n * `loading` {`string`} - \n\n * `t` - \n\n * `alt` {`string`} - \n\n * `src` {`string`} - \n\n * `width` {`string`} - \n\n * `height` {`string`} - \n\n * `innerHTML` - \n\n * `_loading` - \n\n * `loadingvisible` {`string | null`} - \n\n * `template` - \n\n * `_preconnect` - ", - "attributes": [ - { - "name": "alt", - "description": "`alt` {`string`} - \n\nProperty: alt\n\nDefault: " - }, - { - "name": "src", - "description": "`src` {`string`} - \n\nProperty: src\n\nDefault: " - }, - { - "name": "loadingvisible", - "description": "`loadingvisible` {`string | null`} - \n\nProperty: loadingvisible\n\nDefault: false", - "values": [] - }, - { - "name": "oni18n-manager-register-element", - "description": "`i18n-manager-register-element` {`CustomEvent<{ context: this; namespace: string; localesPath: string; updateCallback: string; locales: string[]; }>`} - " - } - ] - } - ], - "globalAttributes": [], - "valueSets": [] -} \ No newline at end of file diff --git a/elements/opt-img/demo/index.html b/elements/opt-img/demo/index.html deleted file mode 100644 index 67cb524391..0000000000 --- a/elements/opt-img/demo/index.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - - OptImg: opt-img Demo - - - - - -
-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

- -

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

Basic opt-img demo

-

THE PROGRESSIVE ENHANCEMENT ONE

-

stuff and things to load the image below later

- - 10 years later - -

stuff and things to load the image below later

-

stuff and things to load the image below later

-

Basic opt-img demo

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

Basic opt-img demo

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

- -

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

stuff and things to load the image below later

-

Basic opt-img demo

-

Basic opt-img demo

- - -

Basic opt-img demo

- - diff --git a/elements/opt-img/gulpfile.cjs b/elements/opt-img/gulpfile.cjs deleted file mode 100644 index 8f69deea5a..0000000000 --- a/elements/opt-img/gulpfile.cjs +++ /dev/null @@ -1,166 +0,0 @@ -const gulp = require("gulp"); -const fs = require("fs"); -const path = require("path"); - -const replace = require("gulp-replace"); -const stripCssComments = require("strip-css-comments"); -const decomment = require("decomment"); -const packageJson = require("./package.json"); -// merge all the src files together -gulp.task("merge", () => { - return gulp - .src("./src/" + packageJson.wcfactory.elementName + ".js") - .pipe( - replace( - /\/\* REQUIRED FOR TOOLING DO NOT TOUCH \*\//g, - (classStatement, character, jsFile) => { - if (!packageJson.wcfactory.files.html) { - return false; - } - // pull these off the package wcfactory files area - let html = fs - .readFileSync(path.join("./", packageJson.wcfactory.files.html)) - .toString() - .trim(); - html = decomment(html); - let haxString = ""; - if (packageJson.wcfactory.useHAX) { - let HAXProps = fs.readFileSync( - path.join("./", packageJson.wcfactory.files.hax) - ); - haxString = ` - // haxProperty definition - static get haxProperties() { - return ${ - packageJson.wcfactory.sharedHaxProps && - packageJson.wcfactory.sharedHaxProps.length > 0 - ? `{ - ...${HAXProps}, - ${packageJson.wcfactory.sharedHaxProps.join(', ')} - }` : HAXProps - }; - }`; - } - let rawprops = "{}"; - rawprops = fs.readFileSync( - path.join("./", packageJson.wcfactory.files.properties) - ); - let props = `${rawprops}`, - comma = props - .replace(/\/\*[\s\S]*?\*\//g, "") - .replace(/\/\/.*/g, "") - .replace(/[\{\s\n\}]/g, ""); - (props = props.replace(/\"type\": \"(\w+)\"/g, '"type": $1')), - (superprops = - comma === "" ? `...super.properties` : `...super.properties,`); - props = props.replace(/\{([\s\n]*)/, `{$1$1${superprops}$1$1`); - let cssResult = ""; - if ( - packageJson.wcfactory.useSass && - packageJson.wcfactory.files.scss - ) { - // we don't support scss anymore - } else if (packageJson.wcfactory.files.css) { - cssResult += fs.readFileSync( - path.join("./", packageJson.wcfactory.files.css) - ); - } - - cssResult = stripCssComments(cssResult).trim(); - let litResult = - packageJson.wcfactory.customElementClass !== "LitElement" - ? `` - : ` - //styles function - static get styles() { - return [ - ${ - packageJson.wcfactory.sharedStyles && - packageJson.wcfactory.sharedStyles.length > 0 - ? `${packageJson.wcfactory.sharedStyles.join(",")},` - : `` - } - css\` -${cssResult} - \` - ]; - }`, - styleResult = - packageJson.wcfactory.customElementClass !== "LitElement" - ? `` - : ``; - - return `${litResult} - -// Template return function - get html() { - return \` -${styleResult} -${html}\`; - } -${haxString} - // properties available to the custom element for data binding - static get properties() { - return ${props}; - }`; - } - ) - ) - .pipe(gulp.dest("./")); -}); -// run polymer analyze to generate documentation -gulp.task("analyze", () => { - var exec = require("child_process").exec; - return exec( - "polymer analyze --input demo/index.html > analysis.json", - function(error, stdout, stderr) { - if (error !== null) { - console.log("exec error: " + error); - } - } - ); -}); - - -gulp.task("watch", () => { - return gulp.watch("./src/*", gulp.series("merge", "analyze")); -}); - -gulp.task("dev", gulp.series("merge", "analyze", "watch")); - -// discover iconset and build json structure -gulp.task("iconset", (done) => { - const iconset = packageJson.wcfactory.iconset || {}; - if(iconset.svgsPath && iconset.svgsPath !== ''){ - const path = iconset.svgsPath; - const manifestFilename = iconset.manifestFilename || `${packageJson.wcfactory.elementName}-iconsets-manifest.js` - const manifestPath = iconset.manifestPath || `./lib`; - const exportName = iconset.exportName || `${packageJson.wcfactory.className}IconsetsManifest`; - const jsonContent = JSON.stringify(dirTree(path).icons, null, 2); - const iconVar = `import { SimpleIconsetStore } from "@haxtheweb/simple-icon/lib/simple-iconset.js"; - -/** - * @const ${exportName} - */ -export const ${exportName} = ${jsonContent}; -SimpleIconsetStore.registerManifest(${exportName});` - fs.writeFile(`${manifestPath}/${manifestFilename}.js`, iconVar, 'utf8', function (err) { - if (err) { - console.log("An error occured while writing iconset manifest Object to File."); - return console.log(err); - } - console.log("Iconset SVGs and manifest JS file has been saved."); - return true; - }); - } else { - console.log("No Iconset Manifest"); - } - done(); -}); - -gulp.task( - "default", - gulp.series("merge", "analyze") -); diff --git a/elements/opt-img/index.html b/elements/opt-img/index.html deleted file mode 100644 index a47fbb5248..0000000000 --- a/elements/opt-img/index.html +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - opt-img documentation - - - - - - - diff --git a/elements/opt-img/lib/.gitkeep b/elements/opt-img/lib/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/elements/opt-img/locales/opt-img.es.json b/elements/opt-img/locales/opt-img.es.json deleted file mode 100644 index 0c5fd1dbb7..0000000000 --- a/elements/opt-img/locales/opt-img.es.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "imageLoading": "Cargando imagen" -} diff --git a/elements/opt-img/opt-img.js b/elements/opt-img/opt-img.js deleted file mode 100644 index 51db20ca49..0000000000 --- a/elements/opt-img/opt-img.js +++ /dev/null @@ -1,263 +0,0 @@ -/** - * Copyright 2022 The Pennsylvania State University - * @license Apache-2.0, see License.md for full text. - */ - -/** - * `opt-img` - * `an optimized image delivery that is vanilla` - * - * @demo demo/index.html - * @element opt-img - */ -class OptImg extends HTMLElement { - constructor() { - super(); - // for translation support if globally managed - this.t = this.t || {}; - this.t.imageLoading = "Image loading.."; - // alt as nothing for decorative purposes if not set - this.alt = ""; - this.src = ""; - this.width = "300px"; - this.height = "200px"; - // see if we have anything to pull data from light dom - if (this.querySelector("img")) { - const img = this.querySelector("img"); - this.alt = img.alt || ""; - this.src = img.src || ""; - this.width = img.width || "300px"; - this.height = img.height || "200px"; - } - // wipe anything that may be here from before - this.innerHTML = null; - // create a 'loading' container - this._loading = globalThis.document.createElement("div"); - this._loading.style.height = this.height; - this._loading.style.width = this.width; - this._loading.innerHTML = this.loading; - this.appendChild(this._loading); - // used for flipping visibility status to change what loads - this.loadingvisible = false; - this.template = globalThis.document.createElement("template"); - // preconnect the domain early on - this._preconnect = globalThis.document.createElement("link"); - this._preconnect.rel = "preconnect"; - } - handleIntersectionCallback(entries) { - super.handleIntersectionCallback(entries); - for (let entry of entries) { - let ratio = Number(entry.intersectionRatio).toFixed(2); - if ( - ratio >= 0.1 && - this._preconnect.rel != "preload" && - !this.loadingvisible - ) { - // preload the image via header request - this._preconnect.remove(); - this._preconnect = globalThis.document.createElement("link"); - this._preconnect.rel = "preload"; - this._preconnect.href = this.src; - this._preconnect.as = "image"; - globalThis.document.head.appendChild(this._preconnect); - } - } - } - // return a basic img tag w/ values printed in - get html() { - return `${this.alt}`; - } - // get a basic loading svg that's styled - get loading() { - return ` - - - - - - - - - - -
${this.t.imageLoading}
- `; - } - /** - * only update on the 3 values we care about changing - */ - static get observedAttributes() { - return ["src", "alt", "loadingvisible"]; - } - /** - * callback when any observed attribute changes - */ - attributeChangedCallback(attr, oldValue, newValue) { - if (["src", "alt"].includes(attr)) { - this[attr] = newValue; - // force a repaint - this.render(); - } else if (["loadingvisible"].includes(attr)) { - this.render(); - } - // source being set, let's preconnect the domain prior to usage - if (attr === "src") { - // preconnect domain - this._preconnect.href = new URL(this.src).origin; - globalThis.document.head.appendChild(this._preconnect); - } - } - // peg attribute to property change internally - set loadingvisible(val) { - if (val === false) { - this.removeAttribute("loadingvisible"); - } else { - this.setAttribute("loadingvisible", "loadingvisible"); - } - } - get loadingvisible() { - return this.getAttribute("loadingvisible"); - } - /** - * This is a convention, not the standard - */ - static get tag() { - return "opt-img"; - } - /** - * Render for guts of the tag - */ - render() { - // only render if we're visible - if (this.loadingvisible) { - // make a fake image - let i = new Image(); - i.fetchpriority = "high"; - // when we load, we'll have the props about it - i.onload = () => { - // subtle, but these 4 lines help reduce the jarring of painting the image - // by setting the height/width quickly on the container + img tag - this.style.height = i.height + "px"; - this.style.width = i.width + "px"; - this.height = i.height + "px"; - this.width = i.width + "px"; - // render the actual image happens in this block - this.template.innerHTML = this.html; - this.appendChild(this.template.content); - // delay a cycle, undo the style height/width on container - // and remove the loading element. this delay helps reduce layout jar - setTimeout(() => { - this.style.height = ""; - this.style.width = ""; - this._loading.remove(); - }, 0); - }; - // setting the src triggers the image to be requested - i.src = this.src; - // delete the preconnect tag in the head for clean up - this._preconnect.remove(); - } - } - /** - * HTMLElement specification - */ - connectedCallback() { - if (super.connectedCallback) { - super.connectedCallback(); - } - globalThis.dispatchEvent( - new CustomEvent("i18n-manager-register-element", { - detail: { - context: this, - namespace: "opt-img", - localesPath: - new URL("./locales/opt-img.es.json", import.meta.url).href + "/../", - updateCallback: "render", - locales: ["es"], - }, - }), - ); - - // setup the intersection observer, only if we are not visible - if (!this.loadingvisible) { - this.intersectionObserver = new IntersectionObserver( - this.handleIntersectionCallback.bind(this), - { - root: null, - rootMargin: "0px", - threshold: [0.0, 0.25, 0.5, 0.75, 1.0], // when to return records - delay: 500, // how often to query this - }, - ); - this.intersectionObserver.observe(this); - } - } - /** - * HTMLElement specification - */ - disconnectedCallback() { - // if we have an intersection observer, disconnect it - if (this.intersectionObserver) { - this.intersectionObserver.disconnect(); - // edge case where element is moved in the DOM so that - // connnected will set the event back up accurately - this.loadingvisible = false; - } - if (super.disconnectedCallback) { - super.disconnectedCallback(); - } - } - /** - * Very basic IntersectionObserver callback which will set loadingvisible to true - */ - handleIntersectionCallback(entries) { - for (let entry of entries) { - let ratio = Number(entry.intersectionRatio).toFixed(2); - // ensure ratio is higher than our limit before trigger visibility - // call when 1/2 of our loader is visible - if (ratio >= 0.25) { - this.loadingvisible = true; - // remove the observer if we've reached our target of being visible - this.intersectionObserver.disconnect(); - } else { - this.loadingvisible = false; - } - } - } -} -customElements.define(OptImg.tag, OptImg); -export { OptImg }; diff --git a/elements/opt-img/package.json b/elements/opt-img/package.json deleted file mode 100644 index a0e72e2059..0000000000 --- a/elements/opt-img/package.json +++ /dev/null @@ -1,68 +0,0 @@ -{ - "name": "@haxtheweb/opt-img", - "wcfactory": { - "className": "OptImg", - "customElementClass": "HTMLElement", - "elementName": "opt-img", - "generator-wcfactory-version": "0.13.1", - "useHAX": false, - "useSass": false, - "files": { - "css": "src/opt-img.css", - "html": "src/opt-img.html", - "js": "src/opt-img.js", - "properties": "src/opt-img-properties.json", - "hax": "src/opt-img-hax.json" - }, - "iconset": {}, - "sharedHaxProps": [], - "sharedProps": [], - "sharedStyles": [] - }, - "version": "9.0.18", - "description": "an optimized image delivery", - "repository": { - "type": "git", - "url": "https://github.com/haxtheweb/webcomponents.git" - }, - "type": "module", - "main": "opt-img.js", - "module": "opt-img.js", - "scripts": { - "test": "web-test-runner \"test/**/*.test.js\" --node-resolve --config=../../web-test-runner.config.mjs --playwright --browsers chromium", - "test:watch": "web-test-runner \"test/**/*.test.js\" --node-resolve --watch --config=../../web-test-runner.config.mjs --playwright --browsers chromium", - "start": "yarn run dev", - "build": "gulp --gulpfile=gulpfile.cjs && prettier --ignore-path ../../.prettierignore --write \"**/*.{js,json}\" && wca analyze \"{*,lib/**}.js\" --format vscode --outFile custom-elements.json", - "dev": "concurrently --kill-others \"yarn run watch\" \"yarn run serve\"", - "watch": "gulp dev --gulpfile=gulpfile.cjs", - "serve": "web-dev-server -c ../../web-dev-server.config.mjs", - "lighthouse": "gulp lighthouse --gulpfile=gulpfile.cjs" - }, - "author": { - "name": "haxtheweb", - "url": "https://hax.psu.edu/" - }, - "license": "Apache-2.0", - "devDependencies": { - "@haxtheweb/deduping-fix": "^9.0.18", - "@open-wc/testing": "4.0.0", - "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", - "@polymer/iron-demo-helpers": "3.1.0", - "@web/dev-server": "0.4.6", - "@webcomponents/webcomponentsjs": "^2.8.0", - "concurrently": "8.2.2", - "wct-browser-legacy": "1.0.2" - }, - "private": false, - "publishConfig": { - "access": "public" - }, - "customElements": "custom-elements.json", - "keywords": [ - "webcomponents", - "html", - "haxtheweb", - "lit" - ], - "gitHead": "73a678e1d035b003097fd50b7b23c0d9c30f9b26" -} diff --git a/elements/opt-img/polymer.json b/elements/opt-img/polymer.json deleted file mode 100644 index 41b0487735..0000000000 --- a/elements/opt-img/polymer.json +++ /dev/null @@ -1,31 +0,0 @@ -{ - "entrypoint": "demo/index.html", - "extraDependencies": [ - "node_modules/@webcomponents/webcomponentsjs/*.js", - "!node_modules/@webcomponents/webcomponentsjs/gulpfile.js", - "node_modules/@webcomponents/webcomponentsjs/bundles/*.js" - ], - "sources": [], - "builds": [ - { - "name": "es6", - "browserCapabilities": ["es2018", "modules"], - "js": { - "minify": true - }, - "css": { - "minify": true - }, - "html": { - "minify": true - }, - "bundle": false, - "addServiceWorker": false - } - ], - "moduleResolution": "node", - "npm": true, - "lint": { - "rules": ["polymer-3"] - } -} diff --git a/elements/opt-img/src/opt-img.js b/elements/opt-img/src/opt-img.js deleted file mode 100644 index 51db20ca49..0000000000 --- a/elements/opt-img/src/opt-img.js +++ /dev/null @@ -1,263 +0,0 @@ -/** - * Copyright 2022 The Pennsylvania State University - * @license Apache-2.0, see License.md for full text. - */ - -/** - * `opt-img` - * `an optimized image delivery that is vanilla` - * - * @demo demo/index.html - * @element opt-img - */ -class OptImg extends HTMLElement { - constructor() { - super(); - // for translation support if globally managed - this.t = this.t || {}; - this.t.imageLoading = "Image loading.."; - // alt as nothing for decorative purposes if not set - this.alt = ""; - this.src = ""; - this.width = "300px"; - this.height = "200px"; - // see if we have anything to pull data from light dom - if (this.querySelector("img")) { - const img = this.querySelector("img"); - this.alt = img.alt || ""; - this.src = img.src || ""; - this.width = img.width || "300px"; - this.height = img.height || "200px"; - } - // wipe anything that may be here from before - this.innerHTML = null; - // create a 'loading' container - this._loading = globalThis.document.createElement("div"); - this._loading.style.height = this.height; - this._loading.style.width = this.width; - this._loading.innerHTML = this.loading; - this.appendChild(this._loading); - // used for flipping visibility status to change what loads - this.loadingvisible = false; - this.template = globalThis.document.createElement("template"); - // preconnect the domain early on - this._preconnect = globalThis.document.createElement("link"); - this._preconnect.rel = "preconnect"; - } - handleIntersectionCallback(entries) { - super.handleIntersectionCallback(entries); - for (let entry of entries) { - let ratio = Number(entry.intersectionRatio).toFixed(2); - if ( - ratio >= 0.1 && - this._preconnect.rel != "preload" && - !this.loadingvisible - ) { - // preload the image via header request - this._preconnect.remove(); - this._preconnect = globalThis.document.createElement("link"); - this._preconnect.rel = "preload"; - this._preconnect.href = this.src; - this._preconnect.as = "image"; - globalThis.document.head.appendChild(this._preconnect); - } - } - } - // return a basic img tag w/ values printed in - get html() { - return `${this.alt}`; - } - // get a basic loading svg that's styled - get loading() { - return ` - - - - - - - - - - -
${this.t.imageLoading}
- `; - } - /** - * only update on the 3 values we care about changing - */ - static get observedAttributes() { - return ["src", "alt", "loadingvisible"]; - } - /** - * callback when any observed attribute changes - */ - attributeChangedCallback(attr, oldValue, newValue) { - if (["src", "alt"].includes(attr)) { - this[attr] = newValue; - // force a repaint - this.render(); - } else if (["loadingvisible"].includes(attr)) { - this.render(); - } - // source being set, let's preconnect the domain prior to usage - if (attr === "src") { - // preconnect domain - this._preconnect.href = new URL(this.src).origin; - globalThis.document.head.appendChild(this._preconnect); - } - } - // peg attribute to property change internally - set loadingvisible(val) { - if (val === false) { - this.removeAttribute("loadingvisible"); - } else { - this.setAttribute("loadingvisible", "loadingvisible"); - } - } - get loadingvisible() { - return this.getAttribute("loadingvisible"); - } - /** - * This is a convention, not the standard - */ - static get tag() { - return "opt-img"; - } - /** - * Render for guts of the tag - */ - render() { - // only render if we're visible - if (this.loadingvisible) { - // make a fake image - let i = new Image(); - i.fetchpriority = "high"; - // when we load, we'll have the props about it - i.onload = () => { - // subtle, but these 4 lines help reduce the jarring of painting the image - // by setting the height/width quickly on the container + img tag - this.style.height = i.height + "px"; - this.style.width = i.width + "px"; - this.height = i.height + "px"; - this.width = i.width + "px"; - // render the actual image happens in this block - this.template.innerHTML = this.html; - this.appendChild(this.template.content); - // delay a cycle, undo the style height/width on container - // and remove the loading element. this delay helps reduce layout jar - setTimeout(() => { - this.style.height = ""; - this.style.width = ""; - this._loading.remove(); - }, 0); - }; - // setting the src triggers the image to be requested - i.src = this.src; - // delete the preconnect tag in the head for clean up - this._preconnect.remove(); - } - } - /** - * HTMLElement specification - */ - connectedCallback() { - if (super.connectedCallback) { - super.connectedCallback(); - } - globalThis.dispatchEvent( - new CustomEvent("i18n-manager-register-element", { - detail: { - context: this, - namespace: "opt-img", - localesPath: - new URL("./locales/opt-img.es.json", import.meta.url).href + "/../", - updateCallback: "render", - locales: ["es"], - }, - }), - ); - - // setup the intersection observer, only if we are not visible - if (!this.loadingvisible) { - this.intersectionObserver = new IntersectionObserver( - this.handleIntersectionCallback.bind(this), - { - root: null, - rootMargin: "0px", - threshold: [0.0, 0.25, 0.5, 0.75, 1.0], // when to return records - delay: 500, // how often to query this - }, - ); - this.intersectionObserver.observe(this); - } - } - /** - * HTMLElement specification - */ - disconnectedCallback() { - // if we have an intersection observer, disconnect it - if (this.intersectionObserver) { - this.intersectionObserver.disconnect(); - // edge case where element is moved in the DOM so that - // connnected will set the event back up accurately - this.loadingvisible = false; - } - if (super.disconnectedCallback) { - super.disconnectedCallback(); - } - } - /** - * Very basic IntersectionObserver callback which will set loadingvisible to true - */ - handleIntersectionCallback(entries) { - for (let entry of entries) { - let ratio = Number(entry.intersectionRatio).toFixed(2); - // ensure ratio is higher than our limit before trigger visibility - // call when 1/2 of our loader is visible - if (ratio >= 0.25) { - this.loadingvisible = true; - // remove the observer if we've reached our target of being visible - this.intersectionObserver.disconnect(); - } else { - this.loadingvisible = false; - } - } - } -} -customElements.define(OptImg.tag, OptImg); -export { OptImg }; diff --git a/elements/opt-img/test/opt-img.test.js b/elements/opt-img/test/opt-img.test.js deleted file mode 100644 index 64d8750798..0000000000 --- a/elements/opt-img/test/opt-img.test.js +++ /dev/null @@ -1,17 +0,0 @@ -import { fixture, expect, html } from "@open-wc/testing"; -import "../opt-img.js"; - -describe("elementName test", () => { - let element; - beforeEach(async () => { - element = await fixture(html``); - }); - - it("basic will it blend", async () => { - expect(element).to.exist; - }); - - it("passes the a11y audit", async () => { - await expect(element).shadowDom.to.be.accessible(); - }); -}); diff --git a/elements/page-section/package.json b/elements/page-section/package.json index 10b8440a23..f935bf727d 100644 --- a/elements/page-section/package.json +++ b/elements/page-section/package.json @@ -43,8 +43,7 @@ }, "license": "Apache-2.0", "dependencies": { - "@haxtheweb/media-image": "^9.0.18", - "@haxtheweb/simple-colors": "^9.0.18", + "@haxtheweb/d-d-d": "^9.0.18", "@haxtheweb/simple-icon": "^9.0.18", "@haxtheweb/simple-tooltip": "^9.0.18", "lit": "^3.2.0" @@ -52,6 +51,10 @@ "devDependencies": { "@haxtheweb/deduping-fix": "^9.0.18", "@haxtheweb/simple-cta": "^9.0.18", + "@haxtheweb/future-terminal-text": "^9.0.18", + "@haxtheweb/grid-plate": "^9.0.18", + "@haxtheweb/video-player": "^9.0.18", + "@haxtheweb/rpg-character": "^9.0.18", "@open-wc/testing": "4.0.0", "@polymer/iron-component-page": "github:PolymerElements/iron-component-page", "@polymer/iron-demo-helpers": "3.1.0", diff --git a/elements/replace-tag/package.json b/elements/replace-tag/package.json index 1957a61ffe..7737ea17d1 100644 --- a/elements/replace-tag/package.json +++ b/elements/replace-tag/package.json @@ -43,6 +43,9 @@ "url": "https://hax.psu.edu/" }, "license": "Apache-2.0", + "dependencies": { + "@haxtheweb/wc-autoload": "^9.0.18" + }, "devDependencies": { "@haxtheweb/deduping-fix": "^9.0.18", "@open-wc/testing": "4.0.0", diff --git a/elements/simple-toolbar/package.json b/elements/simple-toolbar/package.json index 160b1be883..6ea0b0902d 100644 --- a/elements/simple-toolbar/package.json +++ b/elements/simple-toolbar/package.json @@ -43,6 +43,8 @@ }, "license": "Apache-2.0", "dependencies": { + "@haxtheweb/d-d-d": "^9.0.18", + "@haxtheweb/utils": "^9.0.18", "@haxtheweb/a11y-menu-button": "^9.0.18", "@haxtheweb/radio-behaviors": "^9.0.18", "@haxtheweb/simple-icon": "^9.0.18",