diff options
| author | George Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2024-11-26 04:33:40 +0200 |
|---|---|---|
| committer | George Halkiadakis <gchalkiadakis@sklavenitis.co.gr> | 2024-11-26 04:33:40 +0200 |
| commit | ac57b98df77219c8529c4547b13366df3e998b2c (patch) | |
| tree | cd3a073ed31d94fca76290cab7763d2a6a9c15b8 /README.md | |
| parent | 8c27075aea4c6e1d4f81d77f9e833c24e37eeb54 (diff) | |
| download | slidetray-ac57b98df77219c8529c4547b13366df3e998b2c.tar.gz slidetray-ac57b98df77219c8529c4547b13366df3e998b2c.tar.bz2 slidetray-ac57b98df77219c8529c4547b13366df3e998b2c.zip | |
implement esm version
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 241 |
1 files changed, 19 insertions, 222 deletions
@@ -6,7 +6,7 @@ ## presentation json template -js (json) +js (var as json) ```js let presentation = { @@ -25,19 +25,20 @@ let presentation = { css: `text.css`, slides: [ /// MANDATORY - { description: `str.utf8`, - image: `str.url`, /// MANDATORY - poi: [ // points of interest - { - text: `utf8 str` - style: `text.css_block, position absolute%, scoped`, - link: [ `array.css_blocks` ] /**/ - hover: - }, - /* - ... */ - ] - }, + { + description: `str.utf8`, + image: `str.url`, /// MANDATORY + poi: [ // points of interest + { + text: `utf8 str` + style: `text.css_block, position absolute%, scoped`, + link: [ `array.css_blocks` ] /**/ + hover: + }, + /* + ... */ + ] + }, /* ... */ ] @@ -53,130 +54,6 @@ let presentation = { ``` -## setup several settings (code template) - -```javascript -if (!presentation.Property) presentation.Property = default_value; -if (presentation.css) { - let styleSheet = document.createElement('style') - styleSheet.textContent = presentation.css - document.head.appendChild(styleSheet) -} -``` - - -## HTML (a blueprint) - -```html -<!DOCTYPE html> -<html lang="en"> - <head> - <meta charset="utf-8" /> - <title>Swiper demo</title> - <meta - name="viewport" - content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" - /> - <!-- Link Swiper's CSS --> - <link - rel="stylesheet" - href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" - /> - - <!-- Demo styles --> - <style> - html, - body { - position: relative; - height: 100%; - } - - body { - background: #222; - font-family: Helvetica Neue, Helvetica, Arial, sans-serif; - font-size: 14px; - color: #000; - margin: 0; - padding: 0; - } - - .swiper { - width: 80vw; - height: 80vh; - margin: 0 auto; - } - - .swiper-slide { - background-position: center; - background-size: cover; - } - - .swiper-slide img { - display: block; - width: 100%; - } - </style> - </head> - - <body> - <!-- Swiper --> - <div class="swiper mySwiper"> - <div class="swiper-wrapper"> - <div class="swiper-slide" data-id="0"> - <img src="https://swiperjs.com/demos/images/nature-1.jpg" /> - </div> - <div class="swiper-slide" data-id="1"> - <img src="https://swiperjs.com/demos/images/nature-2.jpg" /> - </div> - <div class="swiper-slide"> - <img src="https://swiperjs.com/demos/images/nature-3.jpg" /> - </div> - <div class="swiper-slide"> - <img src="https://swiperjs.com/demos/images/nature-4.jpg" /> - </div> - </div> - <div class="swiper-button-next"></div> - <div class="swiper-button-prev"></div> - <div class="swiper-pagination"></div> - </div> - - <!-- Swiper JS --> - <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> - - <!-- Initialize Swiper --> - <script> - let special = document.querySelector(".swiper-slide[data-id='1']"); - let css = document.createElement("style"); - css.textContent = ` - .f-1-0 { - position: absolute; - top: 40%; - font-size: 48px; - color: #fff7; - left: 10%; - } - `; - document.head.appendChild(css); - special.innerHTML = special.innerHTML + '<div class="f-1-0">hello</div>'; - - var swiper = new Swiper(".mySwiper", { - spaceBetween: 30, - effect: "cards", - navigation: { - nextEl: ".swiper-button-next", - prevEl: ".swiper-button-prev", - }, - pagination: { - el: ".swiper-pagination", - clickable: true, - }, - }); - </script> - </body> -</html> -``` - - ## HTML minimal template @@ -218,52 +95,8 @@ if (presentation.css) { ``` -## presentation-factory.js - -```javascript -const presentation_factory = (setup) => { - return { - // init.. - this.setup = setup; - this.html = '', - this.css = '', - - // defaults - if (setup.property) { /* .. */ } - /* ... */ - - // methods - this.prepareCss = () => { - // calculate... - // attach to head - return this; - } - this.prepareHtml = () => { - // ... - return this; - } - this.render = () => { - - } - - } -} -``` - - - - - - - - - - - - - -### check if url is not broken +## TODO: check if url is not broken https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links @@ -273,44 +106,8 @@ https://stackoverflow.com/questions/1591401/javascript-jquery-check-broken-links -### simple object - -```javascript -// Constructor function for Person objects -function Person(first, last, age, eye) { - this.firstName = first; - this.lastName = last; - this.age = age; - this.eyeColor = eye; - this.age = this.age * 2; - this.name = ''; - this.born = ''; - this.calculateName = () => { - this.name = this.firstName + ' ' + this.lastName; - return this; - }, - this.calculateBorn = () => { - this.born = 2024 - this.age; - return this; - }, - this.fullName = () => { return this.firstName + ' ' + this.lastName }; - this.card = () => { return['[', this.name, 'born @', this.born, ']' ].join(" "); } - this.sEnd = () => { return "Regards, "+ name; } - this.ca -} - -// Create two Person objects -const ego = new Person("Geo", "Media", 24, "blue"); -const myFather = new Person("John", "Doe", 50, "blue"); -const myMother = new Person("Sally", "Rally", 48, "green"); +## TODO: custom effects -alert(ego.calculateBorn().calculateName().card()) - - -// Display age -document.getElementById("demo").innerHTML = -"I am "+ ego.fullName() + -".<br>My father is "+ myFather.age +". My mother is "+ myMother.age + -".<br>"+ ego.sEnd(); -``` +brainstorming: +* https://codepen.io/paralleluniv3rse/pen/yGQjMv
\ No newline at end of file |