u2ui 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.htaccess +7 -0
- package/LICENSE +21 -0
- package/README.md +36 -0
- package/attr/behavior/README.md +25 -0
- package/attr/behavior/behavior.js +261 -0
- package/attr/behavior/manifest.json +43 -0
- package/attr/behavior/tests/minimal.html +19 -0
- package/attr/behavior/tests/test.html +98 -0
- package/attr/confirm/README.md +36 -0
- package/attr/confirm/confirm.js +90 -0
- package/attr/confirm/manifest.json +43 -0
- package/attr/confirm/tests/minimal.html +23 -0
- package/attr/confirm/tests/test.html +79 -0
- package/attr/draghandle/README.md +41 -0
- package/attr/draghandle/draghandle.js +42 -0
- package/attr/draghandle/tests/minimal.html +44 -0
- package/attr/focusgroup/README.md +49 -0
- package/attr/focusgroup/focusgroup.js +100 -0
- package/attr/focusgroup/manifest.json +38 -0
- package/attr/focusgroup/tests/minimal.html +27 -0
- package/attr/focusgroup/tests/test.html +154 -0
- package/attr/href/README.md +38 -0
- package/attr/href/href.js +42 -0
- package/attr/href/manifest.json +43 -0
- package/attr/href/tests/minimal.html +17 -0
- package/attr/href/tests/test.html +70 -0
- package/attr/intersect/README.md +42 -0
- package/attr/intersect/intersect.js +99 -0
- package/attr/intersect/manifest.json +57 -0
- package/attr/intersect/tests/minimal.html +30 -0
- package/attr/intersect/tests/test.html +64 -0
- package/attr/navigable/README.md +31 -0
- package/attr/navigable/TargetObserver.js +91 -0
- package/attr/navigable/U2TargetObserver.js +75 -0
- package/attr/navigable/manifest.json +42 -0
- package/attr/navigable/navigable.js +87 -0
- package/attr/navigable/tests/U1TargetObserver.html +56 -0
- package/attr/navigable/tests/minimal.html +17 -0
- package/attr/navigable/tests/targetObserver.html +106 -0
- package/attr/navigable/tests/test.html +84 -0
- package/attr/parallax/README.md +48 -0
- package/attr/parallax/parallax.js +119 -0
- package/attr/parallax/tests/minimal.html +25 -0
- package/attr/parallax/tests/performance.html +102 -0
- package/attr/parallax/tests/test.html +108 -0
- package/attr/skin/README.md +59 -0
- package/attr/skin/skin.css +51 -0
- package/attr/skin/tests/minimal.html +34 -0
- package/attr/skin/tests/test.html +96 -0
- package/class/badge/README.md +25 -0
- package/class/badge/badge.css +35 -0
- package/class/badge/tests/minimal.html +17 -0
- package/class/badge/tests/test.html +112 -0
- package/class/card1/README.md +45 -0
- package/class/card1/card1.css +30 -0
- package/class/card1/tests/minimal.html +33 -0
- package/class/card1/tests/test.html +78 -0
- package/class/flex/README.md +62 -0
- package/class/flex/flex.css +25 -0
- package/class/flex/tests/minimal.html +31 -0
- package/class/flex/tests/test.html +58 -0
- package/class/grid/README.md +52 -0
- package/class/grid/grid.css +40 -0
- package/class/grid/tests/minimal.html +34 -0
- package/class/grid/tests/test.html +78 -0
- package/class/input/README.md +49 -0
- package/class/input/input.css +33 -0
- package/class/input/tests/minimal.html +39 -0
- package/class/input/tests/test.html +29 -0
- package/class/reset/README.md +47 -0
- package/class/reset/reset.css +8 -0
- package/class/reset/tests/minimal.html +23 -0
- package/class/table/README.md +57 -0
- package/class/table/table.css +126 -0
- package/class/table/tests/minimal.html +40 -0
- package/class/table/tests/test.html +226 -0
- package/class/unstyle/README.md +32 -0
- package/class/unstyle/tests/minimal.html +22 -0
- package/class/unstyle/tests/test.html +32 -0
- package/class/unstyle/unstyle.css +12 -0
- package/class/width/README.md +48 -0
- package/class/width/tests/minimal.html +27 -0
- package/class/width/tests/test.html +101 -0
- package/class/width/width.css +22 -0
- package/css/base/README.md +25 -0
- package/css/base/base.css +127 -0
- package/css/base/beta.css +50 -0
- package/css/base/full.css +5 -0
- package/css/base/nomotion.css +9 -0
- package/css/base/print.css +36 -0
- package/css/base/tests/nomotion.html +89 -0
- package/css/base/tests/test.html +539 -0
- package/css/classes/README.md +17 -0
- package/css/classes/classes.css +78 -0
- package/css/classes/tests/test.html +63 -0
- package/css/classless/README.md +26 -0
- package/css/classless/aria.css +64 -0
- package/css/classless/classless.css +124 -0
- package/css/classless/full.css +11 -0
- package/css/classless/more.css +340 -0
- package/css/classless/simple.css +103 -0
- package/css/classless/snippeds/a/icons.css +12 -0
- package/css/classless/snippeds/experiments/conventions.css +41 -0
- package/css/classless/snippeds/hr/gradient.css +3 -0
- package/css/classless/snippeds/hr/section_sign.css +16 -0
- package/css/classless/snippeds/hr/tests.html +50 -0
- package/css/classless/tests/aria.html +101 -0
- package/css/classless/tests/foreign/classless-almond.css.html +445 -0
- package/css/classless/tests/foreign/classless-classless.css.html +831 -0
- package/css/classless/tests/foreign/classless-mvp.html +415 -0
- package/css/classless/tests/foreign/classless.sakura.html +224 -0
- package/css/classless/tests/foreign/stylestage.dev.html +304 -0
- package/css/classless/tests/foreign/test-homogenizer.html +433 -0
- package/css/classless/tests/foreign/test-html5-elements-tester.html +956 -0
- package/css/classless/tests/foreign/test-opinionated_css.html +148 -0
- package/css/classless/tests/list-bullet.html +110 -0
- package/css/classless/tests/more.html +246 -0
- package/css/classless/tests/oklch.experiments.html +280 -0
- package/css/classless/tests/test.html +106 -0
- package/css/classless/tests/variables.html +109 -0
- package/css/classless/variables.css +99 -0
- package/css/norm/README.md +37 -0
- package/css/norm/beta.css +40 -0
- package/css/norm/norm.css +98 -0
- package/css/norm/oldies.css +60 -0
- package/css/norm/tests/test.html +434 -0
- package/css/norm/tests/test.js +103 -0
- package/el/accordion/README.md +59 -0
- package/el/accordion/accordion.css +7 -0
- package/el/accordion/accordion.js +258 -0
- package/el/accordion/manifest.json +57 -0
- package/el/accordion/tests/minimal.html +44 -0
- package/el/accordion/tests/test.html +168 -0
- package/el/alert/README.md +67 -0
- package/el/alert/alert copy.js +224 -0
- package/el/alert/alert.css +73 -0
- package/el/alert/alert.js +187 -0
- package/el/alert/manifest.json +77 -0
- package/el/alert/tests/minimal.html +36 -0
- package/el/alert/tests/test.html +105 -0
- package/el/buttongroup/README.md +36 -0
- package/el/buttongroup/buttongroup.css +30 -0
- package/el/buttongroup/buttongroup.js +56 -0
- package/el/buttongroup/tests/minimal.html +31 -0
- package/el/buttongroup/tests/test.html +83 -0
- package/el/bytes/README.md +41 -0
- package/el/bytes/bytes.css +6 -0
- package/el/bytes/bytes.js +97 -0
- package/el/bytes/manifest.json +95 -0
- package/el/bytes/tests/minimal.html +19 -0
- package/el/bytes/tests/test.html +117 -0
- package/el/carousel/README.md +52 -0
- package/el/carousel/carousel.css +46 -0
- package/el/carousel/carousel.js +371 -0
- package/el/carousel/manifest.json +58 -0
- package/el/carousel/tests/experiments.html +77 -0
- package/el/carousel/tests/minimal.html +31 -0
- package/el/carousel/tests/nested.html +54 -0
- package/el/carousel/tests/test.html +136 -0
- package/el/carousel-nav/README.md +40 -0
- package/el/carousel-nav/carousel-nav.js +74 -0
- package/el/carousel-nav/tests/minimal.html +32 -0
- package/el/carousel-nav/tests/test.html +59 -0
- package/el/code/README.md +68 -0
- package/el/code/code.css +46 -0
- package/el/code/code.js +289 -0
- package/el/code/manifest.json +66 -0
- package/el/code/tests/minimal.html +35 -0
- package/el/code/tests/test.html +162 -0
- package/el/copy/README.md +35 -0
- package/el/copy/copy.css +3 -0
- package/el/copy/copy.js +118 -0
- package/el/copy/manifest.json +49 -0
- package/el/copy/tests/minimal.html +21 -0
- package/el/copy/tests/test.html +75 -0
- package/el/counter/README.md +47 -0
- package/el/counter/counter.css +8 -0
- package/el/counter/counter.js +95 -0
- package/el/counter/manifest.json +59 -0
- package/el/counter/tests/minimal.html +27 -0
- package/el/counter/tests/test.html +106 -0
- package/el/ico/README.md +162 -0
- package/el/ico/font/Font Awesome.css +22 -0
- package/el/ico/font/LigatureSymbols.css +7 -0
- package/el/ico/font/Material Icons.css +6 -0
- package/el/ico/font/RemixFilled.css +8 -0
- package/el/ico/font/RemixOutlined.css +8 -0
- package/el/ico/font/old/anicons.css +31 -0
- package/el/ico/font/old/devicons.css +210 -0
- package/el/ico/font/old/material.all.css +36 -0
- package/el/ico/font/old/remix.css +15 -0
- package/el/ico/font/old/utf8.css +54 -0
- package/el/ico/ico.css +111 -0
- package/el/ico/ico.js +189 -0
- package/el/ico/manifest.json +86 -0
- package/el/ico/tests/combinations.html +86 -0
- package/el/ico/tests/emojis.html +213 -0
- package/el/ico/tests/fonts.html +110 -0
- package/el/ico/tests/ico-directory.html +254 -0
- package/el/ico/tests/minimal.html +46 -0
- package/el/ico/tests/test.html +210 -0
- package/el/ico/tests/util-multi.svg +6 -0
- package/el/ico/tests/util.css +2 -0
- package/el/ico/tests/util.js +110 -0
- package/el/input/README.md +39 -0
- package/el/input/input.css +35 -0
- package/el/input/input.js +331 -0
- package/el/input/tests/formParticipation.html +113 -0
- package/el/input/tests/minimal.html +33 -0
- package/el/input/tests/test.html +258 -0
- package/el/masonry/README.md +51 -0
- package/el/masonry/manifest.json +60 -0
- package/el/masonry/masonry.css +27 -0
- package/el/masonry/masonry.js +92 -0
- package/el/masonry/tests/minimal.html +39 -0
- package/el/masonry/tests/test.html +42 -0
- package/el/number/README.md +47 -0
- package/el/number/manifest.json +121 -0
- package/el/number/number.css +6 -0
- package/el/number/number.js +67 -0
- package/el/number/tests/minimal.html +25 -0
- package/el/number/tests/test.html +138 -0
- package/el/out/README.md +32 -0
- package/el/out/manifest.json +38 -0
- package/el/out/out.css +2 -0
- package/el/out/out.js +59 -0
- package/el/out/tests/minimal.html +25 -0
- package/el/out/tests/test.html +37 -0
- package/el/parallax-bg/README.md +36 -0
- package/el/parallax-bg/parallax-bg.css +13 -0
- package/el/parallax-bg/parallax-bg.js +186 -0
- package/el/parallax-bg/tests/bg.jpg +0 -0
- package/el/parallax-bg/tests/bg1.jpg +0 -0
- package/el/parallax-bg/tests/bg2.jpg +0 -0
- package/el/parallax-bg/tests/demo.html +88 -0
- package/el/parallax-bg/tests/minimal.html +30 -0
- package/el/parallax-bg/tests/test.html +64 -0
- package/el/parallax-bg/tests/visible.html +90 -0
- package/el/qrcode/README.md +38 -0
- package/el/qrcode/manifest.json +43 -0
- package/el/qrcode/package.json +22 -0
- package/el/qrcode/qrcode.css +13 -0
- package/el/qrcode/qrcode.js +46 -0
- package/el/qrcode/tests/minimal.html +26 -0
- package/el/qrcode/tests/test.html +31 -0
- package/el/rating/README.md +45 -0
- package/el/rating/manifest.json +65 -0
- package/el/rating/rating.css +11 -0
- package/el/rating/rating.js +139 -0
- package/el/rating/tests/minimal.html +26 -0
- package/el/rating/tests/tests.html +77 -0
- package/el/rte/README.md +37 -0
- package/el/rte/rte.css +9 -0
- package/el/rte/rte.js +56 -0
- package/el/rte/tests/minimal.html +25 -0
- package/el/rte/tests/test.html +37 -0
- package/el/skeleton/README.md +30 -0
- package/el/skeleton/manifest.json +51 -0
- package/el/skeleton/skeleton.css +61 -0
- package/el/skeleton/skeleton.js +72 -0
- package/el/skeleton/tests/minimal.html +22 -0
- package/el/skeleton/tests/test.html +22 -0
- package/el/splitbutton/README.md +39 -0
- package/el/splitbutton/splitbutton.css +48 -0
- package/el/splitbutton/splitbutton.js +26 -0
- package/el/splitbutton/tests/minimal.html +30 -0
- package/el/splitbutton/tests/test.html +68 -0
- package/el/splitpanel/README.md +39 -0
- package/el/splitpanel/manifest.json +49 -0
- package/el/splitpanel/splitpanel.css +17 -0
- package/el/splitpanel/splitpanel.js +116 -0
- package/el/splitpanel/tests/minimal.html +31 -0
- package/el/splitpanel/tests/tests.html +121 -0
- package/el/table/README.md +68 -0
- package/el/table/manifest.json +43 -0
- package/el/table/table.css +59 -0
- package/el/table/table.js +194 -0
- package/el/table/tests/minimal.html +38 -0
- package/el/table/tests/test.html +108 -0
- package/el/tabs/README.md +50 -0
- package/el/tabs/manifest.json +59 -0
- package/el/tabs/tabs.css +23 -0
- package/el/tabs/tabs.js +210 -0
- package/el/tabs/tests/minimal.html +35 -0
- package/el/tabs/tests/test.html +180 -0
- package/el/textfit/README.md +34 -0
- package/el/textfit/manifest.json +45 -0
- package/el/textfit/tests/minimal.html +25 -0
- package/el/textfit/tests/test.html +26 -0
- package/el/textfit/textfit.css +6 -0
- package/el/textfit/textfit.js +80 -0
- package/el/time/README.md +72 -0
- package/el/time/manifest.json +118 -0
- package/el/time/tests/minimal.html +19 -0
- package/el/time/tests/test.html +160 -0
- package/el/time/time copy.js +141 -0
- package/el/time/time.js +168 -0
- package/el/time/time.old.uhtml.js +129 -0
- package/el/tooltip/README.md +48 -0
- package/el/tooltip/manifest.json +69 -0
- package/el/tooltip/tests/minimal.html +25 -0
- package/el/tooltip/tests/test.html +178 -0
- package/el/tooltip/tooltip.css +97 -0
- package/el/tooltip/tooltip.js +82 -0
- package/el/tree1/README.md +111 -0
- package/el/tree1/manifest.json +78 -0
- package/el/tree1/tests/animated.html +134 -0
- package/el/tree1/tests/custom.html +51 -0
- package/el/tree1/tests/minimal.html +44 -0
- package/el/tree1/tests/test.html +260 -0
- package/el/tree1/tree1.css +26 -0
- package/el/tree1/tree1.js +265 -0
- package/el/typewriter/README.md +62 -0
- package/el/typewriter/manifest.json +66 -0
- package/el/typewriter/tests/minimal.html +25 -0
- package/el/typewriter/tests/test.html +78 -0
- package/el/typewriter/typewriter.css +6 -0
- package/el/typewriter/typewriter.js +166 -0
- package/el/typewriter/typewriter.mp3 +0 -0
- package/js/Placer/Placer.js +156 -0
- package/js/Placer/README.md +62 -0
- package/js/Placer/tests/minimal.html +34 -0
- package/js/Placer/tests/test.html +49 -0
- package/js/PointerObserver/PointerObserver.js +130 -0
- package/js/PointerObserver/README.md +34 -0
- package/js/PointerObserver/tests/minimal.html +29 -0
- package/js/PointerObserver/tests/test.html +35 -0
- package/js/SelectorObserver/README.md +47 -0
- package/js/SelectorObserver/SelectorObserver.js +201 -0
- package/js/SelectorObserver/tests/minimal.html +21 -0
- package/js/SelectorObserver/tests/test.html +57 -0
- package/js/SelectorObserver/tests/tests.html +161 -0
- package/js/contextmenu/README.md +93 -0
- package/js/contextmenu/contextmenu.js +336 -0
- package/js/contextmenu/tests/minimal.html +44 -0
- package/js/contextmenu/tests/test.html +131 -0
- package/js/dialog/README.md +49 -0
- package/js/dialog/dialog.js +261 -0
- package/js/dialog/notification.mp3 +0 -0
- package/js/dialog/tests/minimal.html +29 -0
- package/js/dialog/tests/notification.mp3 +0 -0
- package/js/dialog/tests/test.html +135 -0
- package/js/rte/README.md +44 -0
- package/js/rte/old/NodeCleaner.js +315 -0
- package/js/rte/old/Rte/Rte.mjs +316 -0
- package/js/rte/old/Rte/Rte.ui.items.mjs +543 -0
- package/js/rte/old/Rte/Rte.ui.mjs +154 -0
- package/js/rte/old/Rte/crossbrowser.mjs +323 -0
- package/js/rte/old/Rte/font/tinymce.svg +98 -0
- package/js/rte/old/Rte/font/tinymce.woff +0 -0
- package/js/rte/old/Rte/helpers.mjs +159 -0
- package/js/rte/old/Rte/htmlparser.mjs +178 -0
- package/js/rte/old/Rte/index.mjs +5 -0
- package/js/rte/old/Rte/main.css +189 -0
- package/js/rte/old/old.rte.js +132 -0
- package/js/rte/old/range-selection.old.js +394 -0
- package/js/rte/rte.js +7 -0
- package/js/rte/src/behavior.js +228 -0
- package/js/rte/src/events.js +73 -0
- package/js/rte/src/fixes.js +251 -0
- package/js/rte/src/range.js +472 -0
- package/js/rte/src/rte.js +72 -0
- package/js/rte/src/ui/items/ai.js +167 -0
- package/js/rte/src/ui/items/code.js +93 -0
- package/js/rte/src/ui/items/undo.js +183 -0
- package/js/rte/src/ui.items.js +571 -0
- package/js/rte/src/ui.js +269 -0
- package/js/rte/src/util/htmlparser.js +178 -0
- package/js/rte/src/util/indentHtml.js +48 -0
- package/js/rte/tests/ai.html +81 -0
- package/js/rte/tests/behavior.html +88 -0
- package/js/rte/tests/events.html +69 -0
- package/js/rte/tests/fixes.html +95 -0
- package/js/rte/tests/minimal.html +34 -0
- package/js/rte/tests/notes.md +6 -0
- package/js/rte/tests/range.html +167 -0
- package/js/rte/tests/selection-explorer.html +222 -0
- package/js/rte/tests/test.html +92 -0
- package/js/shortcut/README.md +33 -0
- package/js/shortcut/shortcut.js +89 -0
- package/js/shortcut/tests/minimal.html +23 -0
- package/js/shortcut/tests/test.html +68 -0
- package/package.json +12 -0
- package/u2/README.md +4 -0
- package/u2/auto.js +161 -0
- package/u2/auto.ui.js +85 -0
- package/u2/experiments/Waiter/test.html +132 -0
- package/u2/experiments/getElementByIdPromise/test.html +76 -0
- package/u2/experiments/patchInputValue.html +124 -0
- package/u2/experiments/radiobutton/test.html +75 -0
- package/u2/experiments/tests/test.html +223 -0
- package/u2/experiments/u1-responsive/responsive.js +62 -0
- package/u2/experiments/u1-responsive/test.html +65 -0
- package/u2/experiments/u2Element.js +139 -0
- package/u2/experiments/u2Element.test.html +47 -0
- package/u2/old-stuff/IterableWeakMap/mod.js +70 -0
- package/u2/old-stuff/css/onStyleSheet/mod.js +114 -0
- package/u2/old-stuff/css/onStyleSheet/monkeypatches.js +28 -0
- package/u2/old-stuff/css/onStyleSheet/test/include.css +19 -0
- package/u2/old-stuff/css/onStyleSheet/test/style-has-include.css +6 -0
- package/u2/old-stuff/css/onStyleSheet/test/style-no-include.css +3 -0
- package/u2/old-stuff/css/onStyleSheet/test/test.html +48 -0
- package/u2/old-stuff/css/parser/mod.js +182 -0
- package/u2/old-stuff/css/parser/parser_old/mod.js +128 -0
- package/u2/old-stuff/css/parser/parser_old/test.html +43 -0
- package/u2/old-stuff/css/parser/parser_old/util.js +22 -0
- package/u2/old-stuff/css/parser/style.html +52 -0
- package/u2/old-stuff/css/parser/test.html +38 -0
- package/u2/old-stuff/el/ai-texter/README.md +23 -0
- package/u2/old-stuff/el/ai-texter/ai-texter.css +12 -0
- package/u2/old-stuff/el/ai-texter/ai-texter.js +153 -0
- package/u2/old-stuff/el/ai-texter/tests/minimal.html +47 -0
- package/u2/old-stuff/el/ai-texter/tests/test.html +71 -0
- package/u2/old-stuff/init.js +38 -0
- package/u2/old-stuff/markHashLinks.js +51 -0
- package/u2/old-stuff/onElement/mod.js +73 -0
- package/u2/old-stuff/test-helpers/mod.js +36 -0
- package/u2/old-stuff/test-helpers/test.html +4 -0
- package/u2/old-stuff/tests/init.js.html +51 -0
- package/u2/old-stuff/viewport.js +64 -0
- package/u2/projects.json +468 -0
- package/u2/tests/boilerplate.html +46 -0
- package/u2/tests/kacheln.html +245 -0
- package/u2/tests/showcase.html +270 -0
- package/u2/tests/showcase2.html +157 -0
- package/u2/tests/test-init.js +35 -0
- package/u2/tests/test.html +355 -0
- package/u2/tools/baseElement.js +95 -0
- package/u2/tools/baseElement.test.html +119 -0
- package/u2/tools/ce-inspector.js +308 -0
- package/u2/tools/ce-inspector.test.html +66 -0
- package/u2/tools/ce-manfest-from-element.js +207 -0
- package/u2/tools/dev-iframe.js +213 -0
- package/u2/tools/dev-iframe.test.html +75 -0
- package/u2/tools/eventsExplorer.js +101 -0
- package/u2/tools/logo/u1.svg +9 -0
- package/u2/tools/logo/u1ui.svg +6 -0
- package/u2/tools/update.repos.json.js +234 -0
- package/u2/u2.js +14 -0
- package/u2/utils.js +59 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang=en>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name=viewport content="width=device-width">
|
|
6
|
+
<!--script src="../../../u2/tests/test-init.js" type=module async></script-->
|
|
7
|
+
<script src="../../../u2/auto.js" type=module async></script>
|
|
8
|
+
|
|
9
|
+
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
10
|
+
<link rel=stylesheet href="../../../css/classless/aria.css">
|
|
11
|
+
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
12
|
+
|
|
13
|
+
<link rel=stylesheet href="../carousel.css">
|
|
14
|
+
<script src="../carousel.js" type=module async></script>
|
|
15
|
+
|
|
16
|
+
</head>
|
|
17
|
+
|
|
18
|
+
<body>
|
|
19
|
+
|
|
20
|
+
<u2-code editable trim>
|
|
21
|
+
<style>
|
|
22
|
+
u2-carousel {
|
|
23
|
+
box-shadow: var(--shadow);
|
|
24
|
+
}
|
|
25
|
+
u2-carousel::part(control) {
|
|
26
|
+
color:var(--color);
|
|
27
|
+
stroke-linecap: butt;
|
|
28
|
+
position: static;
|
|
29
|
+
}
|
|
30
|
+
u2-carousel > * {
|
|
31
|
+
transition:1s;
|
|
32
|
+
}
|
|
33
|
+
u2-carousel > [aria-hidden=true] {
|
|
34
|
+
opacity:.05;
|
|
35
|
+
}
|
|
36
|
+
</style>
|
|
37
|
+
</u2-code>
|
|
38
|
+
|
|
39
|
+
<section>
|
|
40
|
+
<h2>Change attributes:</h2>
|
|
41
|
+
|
|
42
|
+
<label>
|
|
43
|
+
autoplay <input type=checkbox checked onclick="ss.toggleAttribute('autoplay', this.checked)">
|
|
44
|
+
</label>
|
|
45
|
+
|
|
46
|
+
<form onchange="ss.setAttribute('mode', this.elements.mode.value)">
|
|
47
|
+
Mode:<br>
|
|
48
|
+
<label>
|
|
49
|
+
fade: <input type=radio name=mode value="fade">
|
|
50
|
+
</label>
|
|
51
|
+
<label>
|
|
52
|
+
slide: <input type=radio name=mode value="slide">
|
|
53
|
+
</label>
|
|
54
|
+
<label>
|
|
55
|
+
scroll: <input type=radio name=mode value="scroll">
|
|
56
|
+
</label>
|
|
57
|
+
</form>
|
|
58
|
+
|
|
59
|
+
<br>
|
|
60
|
+
|
|
61
|
+
<u2-carousel id=ss mode=slide autoplay style="--u2-carousel-slideshow-speed:2s;" tabindex="0">
|
|
62
|
+
<img src="https://picsum.photos/500/200?random=1" width="500" height="200" alt="picsum">
|
|
63
|
+
<img src="https://picsum.photos/500/200?random=2" width="500" height="200" alt="picsum">
|
|
64
|
+
<img src="https://picsum.photos/500/200?random=3" width="500" height="200" alt="picsum">
|
|
65
|
+
<img src="https://picsum.photos/500/200?random=4" width="500" height="200" alt="picsum">
|
|
66
|
+
<img src="https://picsum.photos/500/200?random=5" width="500" height="200" alt="picsum">
|
|
67
|
+
|
|
68
|
+
<svg slot=prev fill="currentColor" viewBox="0 0 48 48" width=40 style="transform:rotate(180deg)">
|
|
69
|
+
<path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
|
|
70
|
+
</svg>
|
|
71
|
+
<svg slot=next fill="currentColor" viewBox="0 0 48 48" width=40>
|
|
72
|
+
<path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
|
|
73
|
+
</svg>
|
|
74
|
+
|
|
75
|
+
</u2-carousel>
|
|
76
|
+
|
|
77
|
+
</section>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang=en>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset=utf-8>
|
|
5
|
+
<meta name=viewport content="width=device-width">
|
|
6
|
+
<script src="../../../u2/tests/test-init.js" type=module async></script>
|
|
7
|
+
|
|
8
|
+
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
9
|
+
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
10
|
+
|
|
11
|
+
<link rel=stylesheet href="../carousel.css">
|
|
12
|
+
<script src="../carousel.js" type=module async></script>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
<section class=main>
|
|
17
|
+
<u2-carousel autoplay controls>
|
|
18
|
+
<div>Carousel<br>Demo<br>Item 1</div>
|
|
19
|
+
<div>Item 2</div>
|
|
20
|
+
</u2-carousel>
|
|
21
|
+
</section>
|
|
22
|
+
|
|
23
|
+
<style class=main>
|
|
24
|
+
u2-carousel {
|
|
25
|
+
background:var(--color-light);
|
|
26
|
+
}
|
|
27
|
+
u2-carousel > :not([slot]) {
|
|
28
|
+
padding:3rem;
|
|
29
|
+
text-align:center;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang=en>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name=viewport content="width=device-width">
|
|
6
|
+
<script src="../../../u2/tests/test-init.js" type=module async></script>
|
|
7
|
+
<script src="../../../u2/auto.js" type=module></script>
|
|
8
|
+
|
|
9
|
+
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
10
|
+
<link rel=stylesheet href="../../../css/classless/aria.css">
|
|
11
|
+
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
12
|
+
|
|
13
|
+
<link rel=stylesheet href="../carousel.css">
|
|
14
|
+
<script src="../carousel.js" type=module async></script>
|
|
15
|
+
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
|
|
19
|
+
<u2-code trim editable>
|
|
20
|
+
<style>
|
|
21
|
+
u2-carousel {
|
|
22
|
+
box-shadow: var(--shadow);
|
|
23
|
+
}
|
|
24
|
+
u2-carousel > * {
|
|
25
|
+
transition:.3s;
|
|
26
|
+
}
|
|
27
|
+
u2-carousel > [aria-hidden=true] {
|
|
28
|
+
opacity:.1;
|
|
29
|
+
}
|
|
30
|
+
</style>
|
|
31
|
+
</u2-code>
|
|
32
|
+
|
|
33
|
+
<section>
|
|
34
|
+
<h2>mode = slide</h2>
|
|
35
|
+
<u2-carousel mode=slide autoplay style="--u2-carousel-slideshow-speed:2s; padding:3rem" tabindex="0">
|
|
36
|
+
|
|
37
|
+
<u2-carousel mode=fade>
|
|
38
|
+
<img src="https://picsum.photos/500/200?random=1" width=500 height=200 alt="">
|
|
39
|
+
<img src="https://picsum.photos/500/200?random=2" width=500 height=200 alt="">
|
|
40
|
+
<img src="https://picsum.photos/500/200?random=3" width=500 height=200 alt="">
|
|
41
|
+
<img src="https://picsum.photos/500/200?random=4" width=500 height=200 alt="">
|
|
42
|
+
<img src="https://picsum.photos/500/200?random=5" width=500 height=200 alt="">
|
|
43
|
+
</u2-carousel>
|
|
44
|
+
|
|
45
|
+
<u2-carousel mode=fade>
|
|
46
|
+
<img src="https://picsum.photos/500/200?random=1" width=500 height=200 alt="">
|
|
47
|
+
<img src="https://picsum.photos/500/200?random=2" width=500 height=200 alt="">
|
|
48
|
+
<img src="https://picsum.photos/500/200?random=3" width=500 height=200 alt="">
|
|
49
|
+
<img src="https://picsum.photos/500/200?random=4" width=500 height=200 alt="">
|
|
50
|
+
<img src="https://picsum.photos/500/200?random=5" width=500 height=200 alt="">
|
|
51
|
+
</u2-carousel>
|
|
52
|
+
|
|
53
|
+
</u2-carousel>
|
|
54
|
+
</section>
|
|
@@ -0,0 +1,136 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang=en>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset=utf-8>
|
|
5
|
+
<meta name=viewport content="width=device-width">
|
|
6
|
+
<script src="../../../u2/tests/test-init.js" type=module async></script>
|
|
7
|
+
<script src="../../../u2/auto.js" type=module></script>
|
|
8
|
+
|
|
9
|
+
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
10
|
+
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
11
|
+
|
|
12
|
+
<link rel=stylesheet href="../carousel.css">
|
|
13
|
+
<script src="../carousel.js" type=module async></script>
|
|
14
|
+
|
|
15
|
+
<body>
|
|
16
|
+
|
|
17
|
+
<u2-code editable trim>
|
|
18
|
+
<style>
|
|
19
|
+
u2-carousel {
|
|
20
|
+
box-shadow: var(--shadow);
|
|
21
|
+
border:5px solid var(--color-text);
|
|
22
|
+
padding:.3rem;
|
|
23
|
+
margin:.3rem;
|
|
24
|
+
}
|
|
25
|
+
u2-carousel > *:not(img) {
|
|
26
|
+
border:5px solid var(--color);
|
|
27
|
+
padding:.3rem;
|
|
28
|
+
padding:2rem;
|
|
29
|
+
margin:.3rem;
|
|
30
|
+
}
|
|
31
|
+
</style>
|
|
32
|
+
</u2-code>
|
|
33
|
+
|
|
34
|
+
<section>
|
|
35
|
+
<h2>mode = slide</h2>
|
|
36
|
+
<u2-carousel mode=slide autoplay style="--u2-carousel-slideshow-speed:2s" tabindex="0">
|
|
37
|
+
<section>
|
|
38
|
+
<h2 slot="title">Title</h2>
|
|
39
|
+
<label>
|
|
40
|
+
If input focused, dont continue to play
|
|
41
|
+
<input>
|
|
42
|
+
</label>
|
|
43
|
+
</section>
|
|
44
|
+
<section>
|
|
45
|
+
<h2 slot="title">Title 2</h2>
|
|
46
|
+
<label>
|
|
47
|
+
Lorem Ipsum
|
|
48
|
+
<input>
|
|
49
|
+
</label>
|
|
50
|
+
</section>
|
|
51
|
+
<section>
|
|
52
|
+
<h2 slot="title">Title 3</h2>
|
|
53
|
+
<label>
|
|
54
|
+
<input>
|
|
55
|
+
Dolor Sit
|
|
56
|
+
</label>
|
|
57
|
+
</section>
|
|
58
|
+
</u2-carousel>
|
|
59
|
+
</section>
|
|
60
|
+
|
|
61
|
+
<section>
|
|
62
|
+
<h2>mode=scroll</h2>
|
|
63
|
+
<u2-carousel mode=scroll>
|
|
64
|
+
<section>
|
|
65
|
+
<h2 slot="title">Title</h2>
|
|
66
|
+
Lorem Ipsum
|
|
67
|
+
</section>
|
|
68
|
+
<section>
|
|
69
|
+
<h2 slot="title">Title 2</h2>
|
|
70
|
+
Lorem Ipsum
|
|
71
|
+
</section>
|
|
72
|
+
<section>
|
|
73
|
+
<h2 slot="title">Title 3</h2>
|
|
74
|
+
Lorem Ipsum
|
|
75
|
+
</section>
|
|
76
|
+
</u2-carousel>
|
|
77
|
+
</section>
|
|
78
|
+
|
|
79
|
+
<section>
|
|
80
|
+
<h2>mode=fade</h2>
|
|
81
|
+
<u2-carousel mode=fade>
|
|
82
|
+
<section>
|
|
83
|
+
<h2 slot="title">Title</h2>
|
|
84
|
+
Lorem Ipsum
|
|
85
|
+
</section>
|
|
86
|
+
<section>
|
|
87
|
+
<h2 slot="title">Title 2</h2>
|
|
88
|
+
Lorem Ipsum
|
|
89
|
+
</section>
|
|
90
|
+
<section>
|
|
91
|
+
<h2 slot="title">Title 3</h2>
|
|
92
|
+
Lorem Ipsum
|
|
93
|
+
</section>
|
|
94
|
+
</u2-carousel>
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
<section>
|
|
100
|
+
<h2>Compare modes</h2>
|
|
101
|
+
<table>
|
|
102
|
+
<thead>
|
|
103
|
+
<tr>
|
|
104
|
+
<th>Mode
|
|
105
|
+
<th>How it works
|
|
106
|
+
<th>Custom Speed
|
|
107
|
+
<th>Visible Overflow
|
|
108
|
+
<tbody>
|
|
109
|
+
<tr>
|
|
110
|
+
<td>slide
|
|
111
|
+
<td>moves using translateX
|
|
112
|
+
<td>yes
|
|
113
|
+
<td>possible (todo)
|
|
114
|
+
<tr>
|
|
115
|
+
<td>fade
|
|
116
|
+
<td>fades using opacity
|
|
117
|
+
<td>yes
|
|
118
|
+
<td>no
|
|
119
|
+
<tr>
|
|
120
|
+
<td>scroll
|
|
121
|
+
<td>moves using native scroll
|
|
122
|
+
<td>no
|
|
123
|
+
<td>no
|
|
124
|
+
</table>
|
|
125
|
+
</section>
|
|
126
|
+
|
|
127
|
+
<section>
|
|
128
|
+
<h2>Using images</h2>
|
|
129
|
+
<u2-carousel mode=slide autoplay style="--u2-carousel-slideshow-speed:2.2s">
|
|
130
|
+
<img src="https://picsum.photos/500/200?random=1" width="500" height="200" alt="demo image 1">
|
|
131
|
+
<img src="https://picsum.photos/500/200?random=2" width="500" height="200" alt="demo image 1">
|
|
132
|
+
<img src="https://picsum.photos/500/200?random=3" width="500" height="200" alt="demo image 1">
|
|
133
|
+
<img src="https://picsum.photos/500/200?random=4" width="500" height="200" alt="demo image 1">
|
|
134
|
+
<img src="https://picsum.photos/500/200?random=5" width="500" height="200" alt="demo image 1">
|
|
135
|
+
</u2-carousel>
|
|
136
|
+
</section>
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
# <u2-carousel-nav> - element
|
|
2
|
+
null
|
|
3
|
+
|
|
4
|
+
## Usage
|
|
5
|
+
|
|
6
|
+
```html
|
|
7
|
+
<u2-carousel-nav></u2-carousel-nav>
|
|
8
|
+
<u2-carousel>
|
|
9
|
+
<div>Item 1</div>
|
|
10
|
+
<div>Item 2</div>
|
|
11
|
+
<div>Item 3</div>
|
|
12
|
+
</u2-carousel>
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```css
|
|
16
|
+
u2-carousel-nav > * {
|
|
17
|
+
transition:.3s;
|
|
18
|
+
}
|
|
19
|
+
u2-carousel-nav > .-active {
|
|
20
|
+
transform:scale(1.2);
|
|
21
|
+
}
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Install
|
|
25
|
+
|
|
26
|
+
```html
|
|
27
|
+
<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/carousel-nav/carousel-nav.min.css" rel=stylesheet>
|
|
28
|
+
<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/carousel-nav/carousel-nav.min.js" type=module async></script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
## Demos
|
|
32
|
+
|
|
33
|
+
[minimal.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/minimal.html)
|
|
34
|
+
[test.html](http://gcdn.li/u2ui/u2@main/el/carousel-nav/tests/test.html)
|
|
35
|
+
|
|
36
|
+
## About
|
|
37
|
+
|
|
38
|
+
- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
|
|
39
|
+
- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
|
|
40
|
+
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
|
|
2
|
+
const style = document.createElement('style');
|
|
3
|
+
style.innerHTML = `
|
|
4
|
+
u2-carousel-nav {
|
|
5
|
+
display:flex;
|
|
6
|
+
justify-content:center;
|
|
7
|
+
margin:.5rem;
|
|
8
|
+
}
|
|
9
|
+
u2-carousel-nav > * {
|
|
10
|
+
width:1.2rem;
|
|
11
|
+
height:1.2rem;
|
|
12
|
+
margin:.2rem;
|
|
13
|
+
border-radius:100%;
|
|
14
|
+
background-color:#0003;
|
|
15
|
+
cursor:pointer;
|
|
16
|
+
|
|
17
|
+
display:flex;
|
|
18
|
+
font-size:.5rem;
|
|
19
|
+
padding-bottom:.035rem;
|
|
20
|
+
color:transparent;
|
|
21
|
+
justify-content:center;
|
|
22
|
+
align-items:center;
|
|
23
|
+
opacity:.3;
|
|
24
|
+
}
|
|
25
|
+
u2-carousel-nav > :hover {
|
|
26
|
+
opacity:.6;
|
|
27
|
+
}
|
|
28
|
+
u2-carousel-nav > .-active {
|
|
29
|
+
opacity:1;
|
|
30
|
+
}
|
|
31
|
+
`
|
|
32
|
+
document.head.prepend(style);
|
|
33
|
+
|
|
34
|
+
function refSlideshows(el) {
|
|
35
|
+
const grp = el.getAttribute('sync-group');
|
|
36
|
+
if (grp) {
|
|
37
|
+
const slides = [];
|
|
38
|
+
document.body.c1FindAll('u2-carousel[sync-group="'+grp+'"]').forEach(function(ssEl){
|
|
39
|
+
slides.push(ssEl);
|
|
40
|
+
});
|
|
41
|
+
return slides;
|
|
42
|
+
} else {
|
|
43
|
+
return [el.parentNode.querySelector('u2-carousel')];
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
class u2CarouselNav extends HTMLElement {
|
|
48
|
+
constructor() {
|
|
49
|
+
super();
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
connectedCallback() {
|
|
53
|
+
customElements.whenDefined('u2-carousel').then(()=>{
|
|
54
|
+
const SS = refSlideshows(this)[0];
|
|
55
|
+
|
|
56
|
+
const items = SS._items();
|
|
57
|
+
|
|
58
|
+
if (items.length < 2) this.style.display = 'none';
|
|
59
|
+
|
|
60
|
+
items.forEach((item, index)=>{
|
|
61
|
+
const button = document.createElement('span');
|
|
62
|
+
button.addEventListener('click',()=>SS.slideTo(index));
|
|
63
|
+
button.innerHTML = index+1;
|
|
64
|
+
this.append(button);
|
|
65
|
+
});
|
|
66
|
+
SS.addEventListener('u2-carousel.slide', e=>{
|
|
67
|
+
Array.from(this.children).forEach((button, index)=>{
|
|
68
|
+
button.classList.toggle('-active', e.detail.index === index);
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
})
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
customElements.define('u2-carousel-nav', u2CarouselNav)
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang=en>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset=utf-8>
|
|
5
|
+
<meta name=viewport content="width=device-width">
|
|
6
|
+
<script src="../../../u2/tests/test-init.js" type=module async></script>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
<link href="../../../el/carousel/carousel.css" rel=stylesheet>
|
|
10
|
+
<script src="../../../el/carousel/carousel.js" type=module async></script>
|
|
11
|
+
|
|
12
|
+
<script src="../carousel-nav.js" type=module async></script>
|
|
13
|
+
|
|
14
|
+
<body>
|
|
15
|
+
|
|
16
|
+
<section class="main">
|
|
17
|
+
<u2-carousel-nav></u2-carousel-nav>
|
|
18
|
+
<u2-carousel>
|
|
19
|
+
<div>Item 1</div>
|
|
20
|
+
<div>Item 2</div>
|
|
21
|
+
<div>Item 3</div>
|
|
22
|
+
</u2-carousel>
|
|
23
|
+
</section>
|
|
24
|
+
|
|
25
|
+
<style class="main">
|
|
26
|
+
u2-carousel-nav > * {
|
|
27
|
+
transition:.3s;
|
|
28
|
+
}
|
|
29
|
+
u2-carousel-nav > .-active {
|
|
30
|
+
transform:scale(1.2);
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
<!DOCTYPE HTML>
|
|
2
|
+
<html lang=en>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name=viewport content="width=device-width">
|
|
6
|
+
<script src="../../../u2/tests/test-init.js" type=module async></script>
|
|
7
|
+
<script src="../../../u2/auto.js" type=module async></script>
|
|
8
|
+
|
|
9
|
+
<link rel=stylesheet href="../../../css/classless/full.css">
|
|
10
|
+
<link rel=stylesheet href="../../../css/classless/aria.css">
|
|
11
|
+
<link rel=stylesheet href="../../../css/classless/simple.css">
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
<link href="../../../el/carousel/carousel.css" rel=stylesheet>
|
|
15
|
+
<script src="../../../el/carousel/carousel.js" type=module async></script>
|
|
16
|
+
|
|
17
|
+
<script src="../carousel-nav.js" type=module async></script>
|
|
18
|
+
|
|
19
|
+
</head>
|
|
20
|
+
|
|
21
|
+
<body>
|
|
22
|
+
|
|
23
|
+
<section>
|
|
24
|
+
|
|
25
|
+
<div style="display:flex;">
|
|
26
|
+
<u2-carousel id=ss mode=slide play style="--u2-carousel-slideshow-speed:2s; flex:1 1 auto" tabindex="0">
|
|
27
|
+
<img src="https://picsum.photos/500/200?random=1" width="500" height="200" alt="picsum">
|
|
28
|
+
<img src="https://picsum.photos/500/200?random=2" width="500" height="200" alt="picsum">
|
|
29
|
+
<img src="https://picsum.photos/500/200?random=3" width="500" height="200" alt="picsum">
|
|
30
|
+
<img src="https://picsum.photos/500/200?random=4" width="500" height="200" alt="picsum">
|
|
31
|
+
<img src="https://picsum.photos/500/200?random=5" width="500" height="200" alt="picsum">
|
|
32
|
+
|
|
33
|
+
<svg slot=prev fill="currentColor" viewBox="0 0 48 48" width=40 style="transform:rotate(180deg)">
|
|
34
|
+
<path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
|
|
35
|
+
</svg>
|
|
36
|
+
<svg slot=next fill="currentColor" viewBox="0 0 48 48" width=40>
|
|
37
|
+
<path d="M4 24c0-.69.56-1.25 1.25-1.25H37.7l-12.83-12.6a1.25 1.25 0 1 1 1.76-1.8L41.6 23.1l.03.02a1.25 1.25 0 0 1-.04 1.8L26.63 39.64a1.25 1.25 0 1 1-1.76-1.78L37.7 25.25H5.25C4.56 25.25 4 24.69 4 24z"></path>
|
|
38
|
+
</svg>
|
|
39
|
+
|
|
40
|
+
</u2-carousel>
|
|
41
|
+
<u2-carousel-nav style="flex-direction:column; flex:0 0 auto"></u2-carousel-nav>
|
|
42
|
+
</div>
|
|
43
|
+
|
|
44
|
+
<u2-carousel-nav></u2-carousel-nav>
|
|
45
|
+
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
<u2-code editable trim>
|
|
50
|
+
<style>
|
|
51
|
+
u2-carousel-nav > * {
|
|
52
|
+
transition:.3s;
|
|
53
|
+
color:inherit;
|
|
54
|
+
}
|
|
55
|
+
u2-carousel-nav > .-active {
|
|
56
|
+
transform:scale(1.3);
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
59
|
+
</u2-code>
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
# <u2-code> - element
|
|
2
|
+
Highlighted, editable code-blocks.
|
|
3
|
+
|
|
4
|
+
## Usage
|
|
5
|
+
|
|
6
|
+
```js
|
|
7
|
+
// Code-Element
|
|
8
|
+
if (de) {
|
|
9
|
+
alert('Hallo, Welt!');
|
|
10
|
+
} else {
|
|
11
|
+
alert('Hello, World!');
|
|
12
|
+
}
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
```html
|
|
16
|
+
<u2-code trim editable>
|
|
17
|
+
<script>
|
|
18
|
+
// Code-Element
|
|
19
|
+
if (de) {
|
|
20
|
+
alert('Hallo, Welt!');
|
|
21
|
+
} else {
|
|
22
|
+
alert('Hello, World!');
|
|
23
|
+
}
|
|
24
|
+
</script>
|
|
25
|
+
</u2-code>
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
```css
|
|
29
|
+
u2-code {
|
|
30
|
+
font-size:15px;
|
|
31
|
+
max-block-size:11rem;
|
|
32
|
+
}
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## API
|
|
36
|
+
|
|
37
|
+
Attributes:
|
|
38
|
+
- `trim`: This will trim empty first and last lines, and most importantly, indentation.
|
|
39
|
+
- `editable`: This will make the code editable.
|
|
40
|
+
- `language`: Define the code-language (auto-detect if not set)
|
|
41
|
+
- `element`: ID of the element its innerHTML should be used as code.
|
|
42
|
+
|
|
43
|
+
Slots:
|
|
44
|
+
- `tools`: Elements that will be placed in the top-right corner of the code-block.
|
|
45
|
+
|
|
46
|
+
## Install
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<link href="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/code/code.min.css" rel=stylesheet>
|
|
50
|
+
<script src="https://cdn.jsdelivr.net/gh/u2ui/u2@x.x.x/el/code/code.min.js" type=module async></script>
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
## Demos
|
|
54
|
+
|
|
55
|
+
[minimal.html](http://gcdn.li/u2ui/u2@main/el/code/tests/minimal.html)
|
|
56
|
+
[test.html](http://gcdn.li/u2ui/u2@main/el/code/tests/test.html)
|
|
57
|
+
|
|
58
|
+
## Attributes
|
|
59
|
+
|
|
60
|
+
`trim`: This will trim empty first and last lines, and most importantly, indentation.
|
|
61
|
+
`editable`: This will make the code editable.
|
|
62
|
+
`language`: Define the code-language (auto-detect if not set)
|
|
63
|
+
|
|
64
|
+
## About
|
|
65
|
+
|
|
66
|
+
- MIT License, Copyright (c) 2022 <u2> (like all repositories in this organization) <br>
|
|
67
|
+
- Suggestions, ideas, finding bugs and making pull requests make us very happy. ♥
|
|
68
|
+
|
package/el/code/code.css
ADDED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
u2-code {
|
|
2
|
+
font-family: Consolas, "Courier New", Courier, monospace;
|
|
3
|
+
display:block;
|
|
4
|
+
overflow:auto;
|
|
5
|
+
text-align:left;
|
|
6
|
+
background-color: #fff;
|
|
7
|
+
color: #000;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
u2-code > :where(script, style) {
|
|
11
|
+
display:block;
|
|
12
|
+
white-space: pre;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
/* new */
|
|
16
|
+
u2-code:not(:has(>*)) {
|
|
17
|
+
white-space: pre;
|
|
18
|
+
}
|
|
19
|
+
u2-code > :is(pre, code, style, script, textarea),
|
|
20
|
+
u2-code > pre > code {
|
|
21
|
+
padding:0;
|
|
22
|
+
margin:0;
|
|
23
|
+
font: inherit;
|
|
24
|
+
display:block;
|
|
25
|
+
background:transparent;
|
|
26
|
+
}
|
|
27
|
+
u2-code > :where(textarea) {
|
|
28
|
+
inline-size:100%;
|
|
29
|
+
border:0;
|
|
30
|
+
block-size:10rem;
|
|
31
|
+
|
|
32
|
+
@supports (field-sizing:content) {
|
|
33
|
+
field-sizing:content;
|
|
34
|
+
block-size:auto;
|
|
35
|
+
resize: none;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* does not work
|
|
39
|
+
min-height: -webkit-fill-available;
|
|
40
|
+
min-height: stretch;
|
|
41
|
+
*/
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
u2-code:not(:defined) > [slot="tools"]{
|
|
45
|
+
display:none;
|
|
46
|
+
}
|