From ed095c549a3520b7d021544def71ce2aa845ebe2 Mon Sep 17 00:00:00 2001 From: Dino Reic Date: Sun, 14 Jul 2024 20:47:47 +0200 Subject: [PATCH] fixes --- README.md | 13 ++-- demo/fez/slider.coffee | 154 +++++++++++++++++++++++++++++++++++++++++ demo/fez/slider.html | 0 demo/fez/todo.js | 4 +- index.html | 2 +- 5 files changed, 162 insertions(+), 11 deletions(-) create mode 100644 demo/fez/slider.coffee create mode 100644 demo/fez/slider.html diff --git a/README.md b/README.md index fa6dbab..efeb0d4 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ - + # FEZ - Custom DOM Elements @@ -14,14 +14,11 @@ Latest version of libs are baked in Fez distro. It uses minimal abstraction. You will learn to use it in 3 minutes, just look at example, it includes all you need to know. -## How to install? +## How to install and test? -Add `` - -To start - -* define [Fez tag](https://dux.github.io/fez/) -* add HTML. YOu can copy&paste from examples, must work. +* Add `` to header +* define Fez tag JS, [copy from here](https://dux.github.io/fez/) +* add HTML and hit refresh ## Little more details diff --git a/demo/fez/slider.coffee b/demo/fez/slider.coffee new file mode 100644 index 0000000..2cfeb4e --- /dev/null +++ b/demo/fez/slider.coffee @@ -0,0 +1,154 @@ +# it must have div an then div, so we can read real height and animate height change +# +#
+#
+#

...

+ +Fez 'ui-slider', class extends FezBase + @css = """ + .parent { + overflow: hidden; + + .slides { + display: flex; + flex-direction: row; + transition: transform 0.3s ease-in-out, height .6s ease; + width: 100%; + height: var(--height); + gap: var(--gap); + + & > div { + flex: 1; + min-width: var(--width); + max-width: var(--width); + } + } + } + + .dotts { + margin-top: calc(var(--gap) / 1.2); + display: flex; + justify-content: center; + gap: 7px; + + span { + min-width: 15px; + min-height: 15px; + border: 2px solid var(--base-color); + border-radius: 10px; + cursor: pointer; + + &:hover, &.active { + border: 7px solid var(--base-color); + } + } + } + + .arrow { + position: relative; + + & > div { + width: 25px; + height: 25px; + border-top: 5px solid var(--base-color); + border-left: 5px solid var(--base-color); + position: absolute; + top: calc(var(--height) / 2 - 13px); + z-index: 1; + transition: all 0.3s ease-in-out; + cursor: pointer; + + &:hover { + border-color: var(--green-6); + } + + &.left { + left: 0; + transform: rotate(-45deg); + margin-left: calc(var(--gap) * -1.3); + } + + &.right { + right: 0; + margin-right: calc(var(--gap) * -1.3); + transform: rotate(135deg); + } + } + } + """ + + setFrame: (num) => + if typeof num == 'number' + @currentSlide = num + else + num = @currentSlide + + window.requestAnimationFrame => + slidesRoot = @$root.find('.slides') + sliderWidth = slidesRoot.width() + sliderNode = slidesRoot.find("& > div:nth-child(#{num+1}) > div") + sliderHeight = sliderNode[0].getBoundingClientRect().height + + @$root.css('--width', "#{sliderWidth}px") + @$root.css('--height', "#{sliderHeight}px") + @$root.css('--gap', "#{@gap}px") + + offset = num * (sliderWidth + @gap) + slidesRoot.css('transform', "translateX(-#{offset}px)") + + @$root.find(".dot-#{num}").activate() + + num + + nextSlide: () => + @currentSlide = if @slides[@currentSlide + 1] then @currentSlide + 1 else 0 + @setFrame() + + prevSlide: () => + @currentSlide = if @currentSlide > 0 then @currentSlide - 1 else @slides.length - 1 + @setFrame() + + connect: (props) => + @gap = parseInt(props.gap || 30) + @slides = @$root.find('&>div').get() + + # this will allow dinamic slide height + for slide in @slides + @$root.append $('
').append(slide) + + @html """ + {{if @props.arrows}} +
+
+
+
+ {{/if}} +
+
+ +
+
+ {{if @props.dotts}} +
+ {{each @slides as el, i}} + + {{/each}} +
+ {{/if}} + """ + + @$root.first('img').one 'load', @setFrame + + @setFrame(0) + # sometimes does not get height + setTimeout => + @setFrame(0) + , 100 + + Pubsub.sub 'window-resize', $.throttle(@setFrame, 300) + + if props.next + props.next = setInterval @nextSlide, parseInt(props.next) + @$root.one 'click', ()=>clearInterval(props.next) + + diff --git a/demo/fez/slider.html b/demo/fez/slider.html new file mode 100644 index 0000000..e69de29 diff --git a/demo/fez/todo.js b/demo/fez/todo.js index 4189f70..aafed41 100644 --- a/demo/fez/todo.js +++ b/demo/fez/todo.js @@ -63,7 +63,7 @@ Fez('ui-todo', class extends FezBase { } animate(node) { - // same as in svelte, uf you define fez-use="methodName", method will be called when node is added to dom. + // same as in Svelte, uf you define fez-use="methodName", method will be called when node is added to dom. // in this case, we animate show new node $(node) .css('display', 'block') @@ -74,7 +74,7 @@ Fez('ui-todo', class extends FezBase { } connect() { - // creates reactive store, that calls this.html() state refresh after every data set + // creates reactive store. calls this.html() to refresh state, after every data set // you can pass function as argument to change default reactive behaviour this.data = this.reactiveStore({}) diff --git a/index.html b/index.html index fbac3d1..4d368b3 100644 --- a/index.html +++ b/index.html @@ -55,7 +55,7 @@

GitHub repo

-

Fez was created by @dux in 2024. Latest update was . +

Fez was created by @dux in 2024. Latest update was .