summaryrefslogtreecommitdiff
path: root/README.md
diff options
context:
space:
mode:
authorGeorge Halkiadakis <gchalkiadakis@sklavenitis.co.gr>2024-11-23 22:43:51 +0200
committerGeorge Halkiadakis <gchalkiadakis@sklavenitis.co.gr>2024-11-23 22:43:51 +0200
commit2438889c06692e3e8c7d516df15aacf3fd03d88c (patch)
treee319d89adf7d73fb73e7f4ef10775ad7d5f3ac7e /README.md
downloadslidetray-2438889c06692e3e8c7d516df15aacf3fd03d88c.tar.gz
slidetray-2438889c06692e3e8c7d516df15aacf3fd03d88c.tar.bz2
slidetray-2438889c06692e3e8c7d516df15aacf3fd03d88c.zip
initial commit
Diffstat (limited to 'README.md')
-rw-r--r--README.md307
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();
+```
+
generated by cgit v1.2.3 (git 2.39.1) at 2026-09-22 13:42:34 +0000