@creative-web-solution/front-library 6.1.3 → 6.2.9

package/documentation/extra/modules/DragSlider.md

@@ -0,0 +1,111 @@
+# DragSlider
+
+
+```js
+const slider = new DragSlider( $slider, {
+    "viewportSelector": "",
+    "listSelector": "",
+    "itemSelector": "",
+    "dragClass": "",
+    "lockedClass": "",
+    "onDrag": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {},
+    "onInit": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {},
+    "onMouseEnter": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {},
+    "onMouseLeave": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {},
+    "onSnap": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {
+        // Call at the begin of the snap animation
+    },
+    "onSnapUpdate": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {
+        // Call during the snap animation
+    },
+    "onStartDrag": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {},
+    "onStopDrag": ({ item, xPos, moveMaxSize, isAtStart, isAtEnd }) => {},
+    "onChangeState": ( isActive ) => {},
+    "swipeTresholdMin": 40 // in px,
+    "swipeTresholdSize": 0.5 // in % (0.5 = 50% of the size of one item)
+} );
+
+slider.isActive;
+
+slider.init();
+slider.destroy();
+
+slider.goToItem( $item );
+slider.next();
+slider.previous();
+```
+
+## Example
+
+
+**HTML**
+
+```html
+<div class="slider">
+    <div class="viewport">
+        <ul class="list">
+            <li class="item">Content</li>
+            <li class="item">Content</li>
+            <li class="item">Content</li>
+            <li class="item">Content</li>
+            <li class="item">Content</li>
+        </ul>
+    </div>
+</div>
+```
+
+
+**CSS**
+
+```css
+.slider
+    &:not(.is-active)
+        .viewport
+            overflow-x auto
+            overflow-y hidden
+            -webkit-overflow-scrolling touch
+            -ms-overflow-style none
+            scrollbar-width none
+
+            &::-webkit-scrollbar
+                display none
+
+            &::-webkit-scrollbar-thumb
+                opacity 0
+
+    .viewport
+        position relative
+        overflow hidden
+
+    .list
+        display flex
+        width 100%
+        flex 0 0 100%
+
+    .item
+        box-sizing border-box
+        width 100%
+
+    &.is-dragging
+        .viewport
+            pointer-events none
+            user-select none
+
+        &
+        .viewport
+        .list
+        .item
+            cursor none
+```
+
+
+**Javascript**
+
+```js
+const slider = new DragSlider( document.querySelector( '.slider' ), {
+    "viewportSelector": ".viewport",
+    "listSelector": ".list",
+    "itemSelector": ".item",
+    "dragClass": "is-dragging"
+} );
+```

package/documentation/extra/modules/YouTubePlayer.md

@@ -3,7 +3,7 @@
 **Init**
 
 ```
-import { YouTubePlayer } from 'front-library/Modules/YouTubePlayer'
+import { YouTubePlayer } from '@creative-web-solution/front-library/Modules/YouTubePlayer'
 
 ytPlayer = new YouTubePlayer(
     {

package/documentation/extra/modules/autocomplete.md

@@ -3,7 +3,7 @@
 ### Init
 
 ```
-import { Autocomplete } from 'front-library/Modules/Autocomplete'
+import { Autocomplete } from '@creative-web-solution/front-library/Modules/Autocomplete'
 
 ac = Autocomplete(
     {

package/documentation/extra/modules/popin.md

@@ -119,7 +119,7 @@ popin.destroy();
 Handle one popin only with the API.
 
 ```
-import { Popin } from 'front-library/Modules/Popin'
+import { Popin } from '@creative-web-solution/front-library/Modules/Popin'
 
 popin = new Popin( popinOptions );
 
@@ -134,7 +134,7 @@ If the `selector.links` option is set to `a[data-popin]`, all <a> tag with a [da
 
 
 ```
-import { PopinController } from 'front-library/Modules/Popin'
+import { PopinController } from '@creative-web-solution/front-library/Modules/Popin'
 
 popin = new PopinController( popinOptions );
 ```
@@ -153,7 +153,7 @@ All links with an href pointing to the popin (href="#my-popin") will be handled,
 
 
 ```
-import { PopinController } from 'front-library/Modules/Popin'
+import { PopinController } from '@creative-web-solution/front-library/Modules/Popin'
 
 let $inlinePopin = document.getelementbyId( 'my-popin );
 

package/documentation/extra/modules/slider.md

@@ -3,7 +3,7 @@
 ### Slider
 
 ```
-import { Slider } from 'front-library/Modules/Slider'
+import { Slider } from '@creative-web-solution/front-library/Modules/Slider'
 
 let slider = new Slider(
     $slider,
@@ -117,7 +117,7 @@ on( slider, {
 ### Slider controls
 
 ```
-import { SliderControls } from 'front-library/Modules/Slider'
+import { SliderControls } from '@creative-web-solution/front-library/Modules/Slider'
 
 let controls = new SliderControls(
     slider,
@@ -128,7 +128,8 @@ let controls = new SliderControls(
         "paginationItems":      selector
         "autoslide":            int, // in second
         "swipe":                false,
-        "enableKeyboard":       false
+        "enableKeyboard":       false,
+        "gestureOptions":       Object // See gesture.md
     }
 );
 
@@ -137,6 +138,9 @@ promise = controls.next();
 promise = controls.goto( slideIndex );
 boolean = controls.isEnable();
 
+controls.startAutoslide(); // options.autoslide must be set
+controls.stopAutoslide();
+
 controls.destroy();
 ```
 

package/documentation/extra/modules/template.md

@@ -1,7 +1,7 @@
 ## Template
 
 ```
-import { template } from 'front-library/Modules/template'
+import { template } from '@creative-web-solution/front-library/Modules/template'
 
 let tplFunction = template( html );
 let html = tplFunction( { "text": "hey!!" } );

package/documentation/extra/modules/validator.md

@@ -13,7 +13,7 @@ For validation function, you can use either:
 **Initialisation**
 
 ```
-import { Validator } from 'front-library/Modules/Validator'
+import { Validator } from '@creative-web-solution/front-library/Modules/Validator'
 
 let $form, validator;
 
@@ -350,7 +350,7 @@ Example for an email error message:
 A validator return a Promise which is ALWAYS resolve when the validation is ended. This is its parameter (called state) which will tell us if the validation is ok or not.
 
  ```
-import { addValidator } from 'front-library/Modules/Validator'
+import { addValidator } from '@creative-web-solution/front-library/Modules/Validator'
 
 addValidator(
     VALIDATOR_NAME,
@@ -366,7 +366,7 @@ The ASYNC parameter as no effect on validation, it's just here for indication pu
 Can be useful for debug.
 
  ```
-import { addValidator } from 'front-library/Modules/Validator'
+import { addValidator } from '@creative-web-solution/front-library/Modules/Validator'
 
 addValidator(
     VALIDATOR_NAME,
@@ -489,15 +489,15 @@ addValidator(
 Import its with:
 
 ```
-import { createState, standardValidation } from 'front-library/Modules/Validator/Tools/ValidationState'
-import { getRadioList, isRadioListChecked } from 'front-library/Modules/Validator/Tools/RadioButton'
-import { getLabelElement, getLabel } from 'front-library/Modules/Validator/Tools/Label'
-import isEmpty from 'front-library/Modules/Validator/Tools/isEmpty'
-import isNumber from 'front-library/Modules/Validator/Tools/isNumber'
-import isEmail from 'front-library/Modules/Validator/Tools/isEmail'
-import isUrl from 'front-library/Modules/Validator/Tools/isUrl'
-import isDate from 'front-library/Modules/Validator/Tools/isDate'
-import getQueryFromForm from 'front-library/Modules/Validator/Tools/getQueryFromForm'
+import { createState, standardValidation } from '@creative-web-solution/front-library/Modules/Validator/Tools/ValidationState'
+import { getRadioList, isRadioListChecked } from '@creative-web-solution/front-library/Modules/Validator/Tools/RadioButton'
+import { getLabelElement, getLabel } from '@creative-web-solution/front-library/Modules/Validator/Tools/Label'
+import isEmpty from '@creative-web-solution/front-library/Modules/Validator/Tools/isEmpty'
+import isNumber from '@creative-web-solution/front-library/Modules/Validator/Tools/isNumber'
+import isEmail from '@creative-web-solution/front-library/Modules/Validator/Tools/isEmail'
+import isUrl from '@creative-web-solution/front-library/Modules/Validator/Tools/isUrl'
+import isDate from '@creative-web-solution/front-library/Modules/Validator/Tools/isDate'
+import getQueryFromForm from '@creative-web-solution/front-library/Modules/Validator/Tools/getQueryFromForm'
 ```
 
 
@@ -578,7 +578,7 @@ isDate( stringDate, format? );
 **Create a query form a form**
 
 ```
-import getQueryFromForm from 'front-library/Modules/Validator/Tools/getQueryFromForm'
+import getQueryFromForm from '@creative-web-solution/front-library/Modules/Validator/Tools/getQueryFromForm'
 
 let query = getQueryFromForm( $form );
 ```

package/documentation/extra/webgl/GLImageTransition.md

@@ -81,7 +81,7 @@ on( document.body, {
 
 A preset is a javascript class that contains a fragment shader and its uniforms if needed.
 
-There are some available presets in the `front-library/WebGL/GLImageTransition/Presets` folder.
+There are some available presets in the `@creative-web-solution/front-library/WebGL/GLImageTransition/Presets` folder.
 
 
 ## How to make a preset

package/documentation/jsdocs/dom/global.html

@@ -33,7 +33,7 @@
 			<li class="dropdown">
 				<a href="global.html" class="dropdown-toggle" data-toggle="dropdown">Global<b class="caret"></b></a>
 				<ul class="dropdown-menu ">
-					<li><a href="global.html#aClass">aClass</a></li><li><a href="global.html#append">append</a></li><li><a href="global.html#children">children</a></li><li><a href="global.html#clone">clone</a></li><li><a href="global.html#documentSize">documentSize</a></li><li><a href="global.html#filter">filter</a></li><li><a href="global.html#getMatrix">getMatrix</a></li><li><a href="global.html#getStyle">getStyle</a></li><li><a href="global.html#getTransform">getTransform</a></li><li><a href="global.html#getTranslate">getTranslate</a></li><li><a href="global.html#hClass">hClass</a></li><li><a href="global.html#height">height</a></li><li><a href="global.html#index">index</a></li><li><a href="global.html#insertAfter">insertAfter</a></li><li><a href="global.html#insertBefore">insertBefore</a></li><li><a href="global.html#next">next</a></li><li><a href="global.html#offset">offset</a></li><li><a href="global.html#outerHeight">outerHeight</a></li><li><a href="global.html#outerSize">outerSize</a></li><li><a href="global.html#outerWidth">outerWidth</a></li><li><a href="global.html#pageToDOM">pageToDOM</a></li><li><a href="global.html#position">position</a></li><li><a href="global.html#prepend">prepend</a></li><li><a href="global.html#previous">previous</a></li><li><a href="global.html#prop">prop</a></li><li><a href="global.html#rClass">rClass</a></li><li><a href="global.html#remove">remove</a></li><li><a href="global.html#sClass">sClass</a></li><li><a href="global.html#size">size</a></li><li><a href="global.html#strToDOM">strToDOM</a></li><li><a href="global.html#tClass">tClass</a></li><li><a href="global.html#width">width</a></li><li><a href="global.html#windowScroll">windowScroll</a></li><li><a href="global.html#windowSize">windowSize</a></li><li><a href="global.html#wrap">wrap</a></li>
+					<li><a href="global.html#aClass">aClass</a></li><li><a href="global.html#append">append</a></li><li><a href="global.html#children">children</a></li><li><a href="global.html#clone">clone</a></li><li><a href="global.html#documentSize">documentSize</a></li><li><a href="global.html#filter">filter</a></li><li><a href="global.html#getCssProperty">getCssProperty</a></li><li><a href="global.html#getMatrix">getMatrix</a></li><li><a href="global.html#getStyle">getStyle</a></li><li><a href="global.html#getTransform">getTransform</a></li><li><a href="global.html#getTranslate">getTranslate</a></li><li><a href="global.html#hClass">hClass</a></li><li><a href="global.html#height">height</a></li><li><a href="global.html#index">index</a></li><li><a href="global.html#insertAfter">insertAfter</a></li><li><a href="global.html#insertBefore">insertBefore</a></li><li><a href="global.html#next">next</a></li><li><a href="global.html#offset">offset</a></li><li><a href="global.html#outerHeight">outerHeight</a></li><li><a href="global.html#outerSize">outerSize</a></li><li><a href="global.html#outerWidth">outerWidth</a></li><li><a href="global.html#pageToDOM">pageToDOM</a></li><li><a href="global.html#position">position</a></li><li><a href="global.html#prepend">prepend</a></li><li><a href="global.html#previous">previous</a></li><li><a href="global.html#prop">prop</a></li><li><a href="global.html#rClass">rClass</a></li><li><a href="global.html#remove">remove</a></li><li><a href="global.html#sClass">sClass</a></li><li><a href="global.html#setCssProperty">setCssProperty</a></li><li><a href="global.html#size">size</a></li><li><a href="global.html#strToDOM">strToDOM</a></li><li><a href="global.html#tClass">tClass</a></li><li><a href="global.html#width">width</a></li><li><a href="global.html#windowScroll">windowScroll</a></li><li><a href="global.html#windowSize">windowSize</a></li><li><a href="global.html#wrap">wrap</a></li>
 				</ul>
 			</li>
 			
@@ -1115,6 +1115,184 @@
 
         
             
+<hr>
+<dt>
+    <h4 class="name" id="getCssProperty"><span class="type-signature"></span>getCssProperty($element, property)</h4>
+    
+    
+</dt>
+<dd>
+
+    
+    <div class="description">
+        Get a CSS property of an element
+    </div>
+    
+
+    
+
+    
+
+    
+    
+        <h5>Parameters:</h5>
+        
+
+<table class="params table table-striped">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>$element</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">HTMLElement</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>property</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+    
+
+    
+<dl class="details">
+    
+
+	
+
+	
+
+	
+
+    
+
+    
+
+    
+
+    
+
+	
+
+	
+
+	
+
+	
+
+	
+
+
+
+	
+
+	
+
+	
+
+	
+</dl>
+
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <h5>Returns:</h5>
+    
+            
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">String</span>
+
+
+
+    </dd>
+</dl>
+
+
+        
+
+    
+        <h5>Example</h5>
+        
+    <pre class="sunlight-highlight-javascript">value = getCssProperty($element, &#x27;--my-var&#x27;)</pre>
+
+
+    
+</dd>
+
+        
+            
 <hr>
 <dt>
     <h4 class="name" id="getMatrix"><span class="type-signature"></span>getMatrix($elem)</h4>
@@ -5058,6 +5236,215 @@ Remove oldCssClass and add newCssClass only if oldCssClass exists
 
         
             
+<hr>
+<dt>
+    <h4 class="name" id="setCssProperty"><span class="type-signature"></span>setCssProperty($element, property, value)</h4>
+    
+    
+</dt>
+<dd>
+
+    
+    <div class="description">
+        Set a CSS property on an element
+    </div>
+    
+
+    
+
+    
+
+    
+    
+        <h5>Parameters:</h5>
+        
+
+<table class="params table table-striped">
+    <thead>
+    <tr>
+        
+        <th>Name</th>
+        
+
+        <th>Type</th>
+
+        
+
+        
+
+        <th class="last">Description</th>
+    </tr>
+    </thead>
+
+    <tbody>
+    
+
+        <tr>
+            
+                <td class="name"><code>$element</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">HTMLElement</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>property</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+|
+
+<span class="param-type">Object</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+
+        <tr>
+            
+                <td class="name"><code>value</code></td>
+            
+
+            <td class="type">
+            
+                
+<span class="param-type">String</span>
+
+
+
+            
+            </td>
+
+            
+
+            
+
+            <td class="description last"></td>
+        </tr>
+
+    
+    </tbody>
+</table>
+
+    
+
+    
+<dl class="details">
+    
+
+	
+
+	
+
+	
+
+    
+
+    
+
+    
+
+    
+
+	
+
+	
+
+	
+
+	
+
+	
+
+
+
+	
+
+	
+
+	
+
+	
+</dl>
+
+
+    
+
+    
+
+    
+
+    
+
+    
+
+    
+    <h5>Returns:</h5>
+    
+            
+
+
+<dl>
+    <dt>
+        Type
+    </dt>
+    <dd>
+        
+<span class="param-type">HTMLElement</span>
+
+
+
+    </dd>
+</dl>
+
+
+        
+
+    
+        <h5>Example</h5>
+        
+    <pre class="sunlight-highlight-javascript">$element = setCssVar($element, &#x27;--my-var&#x27;, &#x27;12px&#x27;)
+$element = setCssVar($element, {
+ &quot;--my-var&quot;:   &quot;12px&quot;,
+ &quot;--my-var-2&quot;: &quot;100%&quot;
+})</pre>
+
+
+    
+</dd>
+
+        
+            
 <hr>
 <dt>
     <h4 class="name" id="size"><span class="type-signature"></span>size($element)</h4>
@@ -8276,7 +8663,7 @@ tClass( $elements, cssClass, forceAdd )</pre>
 <span class="jsdoc-message">
 	Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.4</a>
 	
-		on 2020-07-28T16:49:10+02:00
+		on 2021-02-03T15:24:32+01:00
 	
 	using the <a href="https://github.com/docstrap/docstrap">DocStrap template</a>.
 </span>