From 2438889c06692e3e8c7d516df15aacf3fd03d88c Mon Sep 17 00:00:00 2001 From: George Halkiadakis Date: Sat, 23 Nov 2024 22:43:51 +0200 Subject: initial commit --- .gitignore | 3 + README.md | 307 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 310 insertions(+) create mode 100644 .gitignore create mode 100644 README.md diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1575068 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +node_modules/ +data/* +.env 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 + + + + + Swiper demo + + + + + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ + + + + + + + +``` + + + +## HTML minimal template + +``` + + + + + Swiper demo + + + + + + + +
+
+ +
+ + + + + + + + +``` + + +## 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() + +".
My father is "+ myFather.age +". My mother is "+ myMother.age + +".
"+ ego.sEnd(); +``` + -- cgit v1.2.3