# slidetray
* an ease web slide presentation builder
* 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) | 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%, scoped`,
link: [ `array.css_blocks` ] /**/
hover:
},
/*
... */
]
},
/*
... */
]
}
// ** example
// style: [
// '{ top: 15px; background: #333; }',
// 'a { color: #fff; }
// 'a:hover { color: red; }
// ]
```
## 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
Swiper demo
```
## HTML minimal template
```html
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();
```
