Merge pull request #220 from ryuran/rework/separe-elements-components

V1 - Rework/separe elements components
20minutes · Mar 22, 2018 · 925fb4d · 925fb4d
2 parents a6509e3 + e8199f7
commit 925fb4d
Show file tree

Hide file tree

Showing 176 changed files with 3,633 additions and 12,194 deletions.
diff --git a/assets/js/colette.js b/assets/js/colette.js
@@ -15,6 +15,7 @@ import FontFaceLoader from './modules/fontFaceLoader';
 import Pager from './modules/pager';
 import fontsData from '../../fontfaces.json';
 import headroom from 'headroom.js';
+import Blazy from 'blazy';
 
 // Init Colette object
 const colette = window.colette || {};
@@ -27,6 +28,11 @@ Array.prototype.forEach.call(document.querySelectorAll('.block-list'), (item) =>
     colette.pagers.push(new Pager({blockList: item}));
 });
 
+// lazyload init (images)
+colette.lazy = new Blazy({
+    offset: 500
+});
+
 export {
     colette
 };
diff --git a/assets/js/modules/pager.js b/assets/js/modules/pager.js
@@ -9,7 +9,17 @@ function Pager(cfg) {
 
     this.blockList = this.config.blockList;
     this.block = this.blockList.closest('.block');
+    if (!this.block) {
+        return;
+    }
+    this.pager = this.block.querySelector('.pager');
+    if (!this.pager) {
+        return;
+    }
     this.items = this.blockList.querySelectorAll('li');
+    if (!this.items) {
+        return;
+    }
 
     // get config from attribute
     const attributConfigItemPerPage = this.blockList.getAttribute('data-item-per-page');
@@ -19,8 +29,8 @@ function Pager(cfg) {
     this.totalPage = Math.ceil(this.items.length / this.itemPerPage);
     this.currentPage = 1;
 
-    this.btnPrev = this.block.querySelector('.pager-prev');
-    this.btnNext = this.block.querySelector('.pager-next');
+    this.btnPrev = this.pager.querySelector('.pager-prev');
+    this.btnNext = this.pager.querySelector('.pager-next');
 
     // event handlers
     this.btnPrev.addEventListener('click', this.paginateEventHandler.bind(this));

diff --git a/assets/styl/_@blocks/_text.styl b/assets/styl/_@blocks/_text.styl
@@ -16,15 +16,15 @@
 // ```
 // /* my_file.css */
 // .foo
-//    font-family $font-secondary
+//    font-family $fontstack-secondary
 //    font-weight bold
 //    font-size 1.1rem
 //    text-transform uppercase
 // ```
 //
 // Styleguide @blocks.Text.fontSecondary
 fontSecondary = @block
-    _fontload($font-secondary)
+    _fontload($fontstack-secondary)
     font-weight bold
     font-size 1.1rem
     text-transform uppercase

diff --git a/assets/styl/_base/_fonts.styl b/assets/styl/_base/_fonts.styl
@@ -9,8 +9,7 @@
 // - bold or extra bold weight, in block teaser or content view,
 // - regular in listed teaser view.
 //
-// Styleguide: Basics.Fonts
-
+// Styleguide: Design.Fonts
 
 for i, $font in $fontface
     @font-face

diff --git a/assets/styl/_base/_form-elements.styl → assets/styl/_base/_form.styl b/assets/styl/_base/_form-elements.styl → assets/styl/_base/_form.styl
@@ -1,44 +1,10 @@
-// Form elements
+// Form
 //
-// Colette comes with basic CSS to style forms' elements.
+// Colette comes with basic CSS to style form’s elements.
 //
-// Styleguide: Components.Forms
-
-form
-    position relative
-
-    p
-        margin 0
-
-    // Form attributes
-    //
-    // Styleguide: Components.FormsAttributes
-
-    // Busy status
-    //
-    // You can apply an animated 'waiting' status on a form (after submitting for example):
-    // if you add the `aria-busy="true"` to the `<form>` tag, you will get a **Loading** animation over it.
-    //
-    // Markup: form-ariabusy.twig
-    //
-    // Styleguide: Components.FormsAttributes.AriaBusy
-
-    &[aria-busy=true]
-        {loading}
-        &:before
-            z-index: $zIndex.overlay + 1
-
-        &:after
-            content ''
-            display block
-            position absolute
-            z-index: $zIndex.overlay
-            left 0
-            right 0
-            bottom 0
-            top 0
-            background rgba($color-white, .8)
-
+// Weight: 3
+//
+// Styleguide: Forms
 fieldset
     border 0
     padding 0
@@ -73,7 +39,7 @@ input[type='reset']
 //
 // Weight: 1
 //
-// Styleguide: Components.Forms.TextInputs
+// Styleguide: Forms.TextInputs
 
 // HTML5 inputs
 //
@@ -84,7 +50,7 @@ input[type='reset']
 //
 // Weight: 2
 //
-// Styleguide: Components.Forms.HTML5Inputs
+// Styleguide: Forms.HTML5Inputs
 input[type='text']
 input[type='password']
 input[type='email']
@@ -138,7 +104,7 @@ input[type='date']
 //
 // Weight: 3
 //
-// Styleguide: Components.Forms.Select
+// Styleguide: Forms.Select
 select
     padding-right 2em
     background-image url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100\" height=\"100\" fill=\"#000\"><polygon points=\"0, 0 100, 0 50, 50\" /></svg>')
@@ -147,7 +113,6 @@ select
     background-size .5em .5em
     -webkit-appearance none // the svg background arrow doesn't display on FF, so we only target -webkit
 
-
 // Textarea
 //
 // Default styles for `<textarea>` field.
@@ -156,7 +121,7 @@ select
 //
 // Weight: 4
 //
-// Styleguide: Components.Forms.Textarea
+// Styleguide: Forms.Textarea
 textarea
     vertical-align top
     border 1px solid $color-base-lighten
@@ -184,7 +149,7 @@ input[type='image']
 //
 // Weight: 5
 //
-// Styleguide: Components.Forms.RadioButtons
+// Styleguide: Forms.RadioButtons
 
 // Checkboxes
 //
@@ -195,7 +160,7 @@ input[type='image']
 //
 // Weight: 6
 //
-// Styleguide: Components.Forms.Checkboxes
+// Styleguide: Forms.Checkboxes
 input[type='checkbox']
 input[type='radio']
     position absolute

diff --git a/assets/styl/_base/_svg.styl b/assets/styl/_base/_svg.styl
@@ -1,2 +1,11 @@
+// SVG symbols
+//
+// Colette use a collection of svg symbols built with [svgstore](https://www.npmjs.com/package/svgstore).
+//
+// By default svg `fill` are colored by current text color.
+//
+// Markup: svg.twig
+//
+// Styleguide: Design.Svg
 svg
     fill currentColor
diff --git a/assets/styl/_base/_symbols.styl b/assets/styl/_base/_symbols.styl
diff --git a/assets/styl/_base/_typography.styl b/assets/styl/_base/_typography.styl
@@ -6,27 +6,27 @@
 //
 // Weight: 2
 //
-// Styleguide Basics.Typography
+// Styleguide Design.Typography
 html
-    font-family sans-serif // 2
-    font-size 62.5% // 1
-    text-size-adjust 100% // 3
+    font-family sans-serif
+    font-size 62.5%
+    text-size-adjust 100%
 
 body
-    _fontload($font-base)
+    _fontload($fontstack-base)
     color $color-base
     font-size 1.6em
     line-height 1.5
     -webkit-font-smoothing antialiased
-    -moz-osx-font-smoothing grayscale /* FF */
+    -moz-osx-font-smoothing grayscale // FF
 
 a
     color $color-base
     text-decoration none
 
 for $i in 1..6
     h{$i}
-        _fontload($font-headings)
+        _fontload($fontstack-headings)
         font-weight bold
         line-height 1.2
 
@@ -68,13 +68,13 @@ kbd
 samp
 pre
     border-radius .2rem
-    font-size 1.2em /* em value to make it relative to the body text size */
+    font-size 1.2em // em value to make it relative to the context font size
 
 small
     font-size .75em
 
 blockquote
-    _fontload($font-secondary, normal, normal)
+    _fontload($fontstack-secondary, normal, normal)
     position relative
     padding .75em 1.5em 0
     font-style italic

diff --git a/assets/styl/_base/form-checkbox.twig b/assets/styl/_base/form-checkbox.twig
@@ -1,14 +1,14 @@
 <form action="#">
-    <p>
+    <div>
         <input id="checkbox1" name="checkbox1" type="checkbox">
         <label for="checkbox1">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="checkbox2" name="checkbox2" type="checkbox">
         <label for="checkbox2">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="checkbox3" name="checkbox3" type="checkbox">
         <label for="checkbox3">Label</label>
-    </p>
+    </div>
 </form>
diff --git a/assets/styl/_base/form-html5input.twig b/assets/styl/_base/form-html5input.twig
@@ -1,14 +1,12 @@
 <form action="#">
     {% for textfield in textfields %}
         <div class="form-field pb2">
-            <p>
-                <label for="{{ textfield.id }}">{{ textfield.label }}</label>
-                <input id="{{ textfield.id }}" type="{{ textfield.type }}"
-                    {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
-                    {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
-                    {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
-                />
-            </p>
+            <label for="{{ textfield.id }}">{{ textfield.label }}</label>
+            <input id="{{ textfield.id }}" type="{{ textfield.type }}"
+                {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
+                {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
+                {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
+            />
         </div>
     {% endfor %}
 </form>
diff --git a/assets/styl/_base/form-radiobutton.twig b/assets/styl/_base/form-radiobutton.twig
@@ -1,14 +1,14 @@
 <form action="#">
-    <p>
+    <div>
         <input id="radioButton1" name="radioButtonGroup" type="radio">
         <label for="radioButton1">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="radioButton2" name="radioButtonGroup" type="radio">
         <label for="radioButton2">Label</label>
-    </p>
-    <p>
+    </div>
+    <div>
         <input id="radioButton3" name="radioButtonGroup" type="radio">
         <label for="radioButton3">Label</label>
-    </p>
+    </div>
 </form>
diff --git a/assets/styl/_base/form-select.twig b/assets/styl/_base/form-select.twig
@@ -1,12 +1,10 @@
 <form action="#">
     <div class="form-field">
-        <p>
-            <label for="select">Select</label>
-            <select id="select">
-                <option>option 1</option>
-                <option>option 2</option>
-                <option>option 3</option>
-            </select>
-        </p>
+        <label for="select">Select</label>
+        <select id="select">
+            <option>option 1</option>
+            <option>option 2</option>
+            <option>option 3</option>
+        </select>
     </div>
 </form>
diff --git a/assets/styl/_base/form-textarea.twig b/assets/styl/_base/form-textarea.twig
@@ -1,8 +1,6 @@
 <form action="#">
     <div class="form-field">
-        <p>
-            <label for="textarea">Textarea</label>
-            <textarea id="textarea" row="4" cols="50" />default value</textarea>
-        </p>
+        <label for="textarea">Textarea</label>
+        <textarea id="textarea" row="4" cols="50" />default value</textarea>
     </div>
 </form>
diff --git a/assets/styl/_base/form-textinput.twig b/assets/styl/_base/form-textinput.twig
@@ -1,14 +1,12 @@
 <form action="#">
     {% for textfield in textfields %}
         <div class="form-field pb2">
-            <p>
-                <label for="{{ textfield.id }}">{{ textfield.label }}</label>
-                <input id="{{ textfield.id }}" type="{{ textfield.type }}"
-                    {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
-                    {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
-                    {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
-                />
-            </p>
+            <label for="{{ textfield.id }}">{{ textfield.label }}</label>
+            <input id="{{ textfield.id }}" type="{{ textfield.type }}"
+                {% if textfield.value is not empty %}value="{{ textfield.value }}"{% endif %}
+                {% if textfield.placeholder is not empty %}placeholder="{{ textfield.placeholder }}"{% endif %}
+                {% if textfield.attrs is not empty %}{{ textfield.attrs }}{% endif %}
+            />
         </div>
     {% endfor %}
 </form>
diff --git a/assets/styl/_base/symbols.json → assets/styl/_base/svg.json b/assets/styl/_base/symbols.json → assets/styl/_base/svg.json
@@ -5,6 +5,7 @@
         "clock2",
         "comments",
         "cooking",
+        "diapo",
         "download",
         "folder",
         "games",

diff --git a/assets/styl/_base/symbols.twig → assets/styl/_base/svg.twig b/assets/styl/_base/symbols.twig → assets/styl/_base/svg.twig