danielhagnoul

Elle remplace la v2.1.0

Navigateurs compatibles le 2016-02-14 : Chrome 49b et Firefox 46.0a2. Edge n'est pas compatible.

Abandon de head.js, DoT.js et des web components "natifs".

Utilisation de KNACSS, ES2015 et Riot.

Voir les liens et informations contenues dans la page de test.

La place disponible ici est largement insuffisante pour vous donner une copie de tout les codes, mais les outils du développeur (touche F12) vous permettront de les examiner et de les tester à loisir.

Lorsque je jugerai la chose utile, je posterai un lien vers un exemple réalisé avec la version 3.0.0 de ma page de test. Ces exemples seront conservés dans mon espace de travail sur DVP.

Composants Riot

Fichier dvjh-todo.tag

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<dvjh-todo>
  <h3>{ opts.title }</h3>
  <ul>
    <li each={ items }>
      <label class={ completed: done }>
        <input type="checkbox" checked={ done } onclick={ parent.toggle }> { title }
      </label>
    </li>
  </ul>
  <form onsubmit={ add }>
    <input name="input" onkeyup={ edit }>
    <button disabled={ !text }>Add #{ items.length + 1 }</button>
  </form>
  <script>
    this.disabled = true
    this.items = opts.items
    
    edit( ev ){
      this.text = ev.target.value
    }
    
    add( ev ){
      if ( this.text ) {
        this.items.push({ 'title' : this.text })
        this.text = this.input.value = ''
      }
    }
    
    toggle( ev ){
      var item = ev.item
      
      //console.log( 'item toggled', item );
      
      item.done = !item.done
      return true
    }
    
    /* événements disponibles
    this.on( 'before-mount', function(){
      // déclenché avant que le tag soit monté
    })
  
    this.on( 'mount', function(){
      // déclenché une fois le tag monté sur la page
    })
  
    this.on( 'update', function(){
      // permet de recalculer les données de contexte avant la mise à jour
    })
    
    this.on( 'updated', function(){
      // déclenché une fois le tag mis à jour
    })
    
    this.on( 'before-unmount', function(){
      // déclenché avant que le tag soit retiré de la page
    })
  
    this.on('unmount', function() {
      // déclenché après que le tag soit retiré de la page
    })
    */
    
    /* 
    this.on( 'mount', function(){
      console.log( 'mount', this.opts.items ) // Succès, déclenché qu'une seule fois par montage
    })
    */
    
    /*
    this.on( 'update', function(){
      console.log( 'update' ) // Succès, déclenché à chaque update
      
      for( let [ i, item ] of Array.from( this.root.querySelectorAll( 'li' ) ).entries() ){
        console.log( i, item );
      }
    })
    */
    
  </script>
  <style scoped>
    :scope {
      display: block;
      max-width: 400px;
      margin: 5% auto;
    }
    form input {
      padding: .6rem;
      border: 1px solid #ccc;
      border-radius: 3px;
    }
    button {
      background-color: #1FADC5;
      border: 1px solid rgba(0,0,0,.2);
      color: #fff;
      padding: .6rem 1.2rem;
      border-radius: 3rem;
      cursor: pointer;
      margin: 0 .3rem;
      outline: none;
    }
    button[disabled] {
      background-color: #ddd;
      color: #aaa;
    }
    ul {
      padding: 0;
    }
    li {
      list-style-type: none;
      padding: .2rem 0;
    }
    .completed {
      text-decoration: line-through;
      color: #ccc;
    }
    label {
      cursor: pointer;
    }
  </style>
</dvjh-todo>

Fichier dvjh-clock.tag

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<dvjh-clock>
  <div class="clock-face-hour"></div>
  <div class="clock-face-minute"></div>
  <div class="clock-face-second"></div>
  <script>
    let hourNode, minuteNode, secondNode, t, s, a, o;
    
    function clock(){  // dépends de momentjs
      t = moment()
      s = t.seconds() * 6
      a = t.minutes() * 6
      o = t.hours() % 12 / 12 * 360 + (a / 12)
      
      hourNode.style.transform = "rotate(" + o + "deg)"
      minuteNode.style.transform = "rotate(" + a + "deg)"
      secondNode.style.transform = "rotate(" + s + "deg)"
      
      setTimeout( clock, 1000 )
    }
    
    this.on( 'mount', function(){
      hourNode = document.querySelector( '.clock-face-hour', this )
      minuteNode = document.querySelector( '.clock-face-minute', this )
      secondNode = document.querySelector( '.clock-face-second', this )
      
      clock()
    })
  </script>
  <style scoped>
    :scope {
      position: relative;
      display: block;
      height: 250px;
      width: 250px;
      border: 5px solid #FFF;
      border-radius: 100%;
      margin: 20px auto;
    }
    .clock-face-hour {
      position: absolute;
      background: #fff;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      transform-origin: 50% 100%;
      margin: -60px -2px 0;
      padding: 60px 2px 0;
    }
    .clock-face-minute {
      position: absolute;
      background: #fff;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      transform-origin: 50% 100%;
      margin: -105px -2px 0;
      padding: 105px 2px 0;
    }
    .clock-face-second {
      position: absolute;
      background: #000;
      left: 50%;
      top: 50%;
      width: 0;
      height: 0;
      transform-origin: 50% 100%;
      margin: -105px -2px 0;
      padding: 105px 2px 0;
    }
  </style>
</dvjh-clock>