diff options
Diffstat (limited to 'README.md')
| -rw-r--r-- | README.md | 307 |
1 files changed, 307 insertions, 0 deletions
diff --git a/README.md b/README.md new file mode 100644 index 0000000..0a49e0a --- /dev/null +++ b/README.md @@ -0,0 +1,307 @@ +# slidetray + +* an ease web slide presentation +* descripbed in json format + + +## presentation json template + +js (json) + +```js +let presentation = { + name: `str.ascii`, /// MANDATORY + title: `str.utf8`, + description: `txt.utf8`, + selector: `str.selector`, /// MANDATORY + + source_url: `str.url, default='./'`, + effect: `none(=default) | vertical | cards | flip | fade | cube`, + theme: `light(=default) | dark`, + navigation: `boolean, default=true`, + pagination: `none | classic(=default) | dynamic | progress | fraction` + keyboard: `boolean, default=false`, + touch: `boolean, default=true`, + 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%`, + link: `str.url`, + hover: `text.css_block` + }, + /* + ... */ + ] + }, + /* + ... */ + ] +} +``` + +## setup several settings + +```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 + +``` +<!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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/> + <link rel="stylesheet" href="/css/easy-presentation.css"/> + </head> + <body> + <!-- Swiper --> + <div class="swiper mySwiper"> + <div class="swiper-wrapper"></div> + <!-- + <div class="swiper-button-next"></div> + <div class="swiper-button-prev"></div> + <div class="swiper-pagination"></div> + --> + </div> + + <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script> + <script src="/presentation-factory.js"></script> + + <!-- Initialize Swiper --> + <script> + let setup = { + // presentaion setup json + }; + let presentation = new presentationFactory(setup); + presentation.show(); // == .prepareCSS().prepareHTML().render() + </script> + </body> +</html> +``` + + +## 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 + +https://stackoverflow.com/questions/333634/http-head-request-in-javascript-ajax +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"); + +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(); +``` + |