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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<meta charset="utf-8">
<template id="templateHEntry">
<article class="h-entry">
<!--
Ne pas oublier l'attribut date pour la version finale.
Une version en débogage affichera automatiquement la date du jour.
-->
<time class="dt-published" datetime="2014-01-22T10:36:43.443+0100">2014-01-22T10:36:43.443+0100</time>
<a class="p-author h-card" href="http://www.developpez.net/forums/u285162/danielhagnoul/">Daniel Hagnoul</a>
<a class="u-url" href="http://danielhagnoul.developpez.com/">Mon cahier d’exercices</a>
<a class="u-url" href="http://javascript.developpez.com/faq/jquery/">FAQ</a>
<a class="u-url" href="http://javascript.developpez.com/cours/?page=frameworks#jquery">Tutoriels</a>
</article>
<style>
:host { position: relative; display: block; margin-top: 12px; }
:host a { margin-left: 12px; }
</style>
</template>
<script>
"use strict";
( function( document, view ){
head.ready( [
"d3", "d3Hello", "jquery", "jqueryui", "datefr", "qunit", "testsQUnit"
], function(){
document.registerElement( "hEntry-item", {
"prototype" : Object.create( HTMLElement.prototype, {
"readAttributes" : {
"value" : function(){
this.date = this.getAttribute( "date" );
},
"enumerable" : true
},
"createdCallback" : {
"value" : function(){
this.shadow = this.createShadowRoot();
var template = document.querySelector( "#templateHEntry" ).content.cloneNode( true );
this.shadow.appendChild( template );
this.readAttributes();
var dateISO = "";
if ( debugBool ){
/*
* Version de débogage, la "dt-published" doit
* afficher la date du jour.
*/
dateISO = ISOformat( new Date() );
} else {
/*
* Version finale, on reprend la date contenue dans
* l'attribut date.
*
* Si cette date n'est pas valide, on affiche une date
* inhabituelle et un avertissement dans la console.
*/
var date = new Date( this.date );
if ( isNaN( date ) ){
date = new Date( "0001-01-01T00:00:00Z" );
console.log( "Attention ! La date de mise en production contenue dans " +
"l'attribut date du tag \"hEntry-item\" est invalide." );
}
dateISO = ISOformat( date );
}
$( this.shadow.querySelector( ".dt-published" ) )
.attr( "dateTime", dateISO )
.text( dateISO );
},
"enumerable" :true
}
})
});
$( function(){
console.log( "DOM construit : ", ISOformat( new Date() ) );
});
$( view ).load( function(){
console.log( "Page web chargée : ", ISOformat( new Date() ) );
if ( debugBool ){
/*
* Utilisation de view, exemple : donner les dimensions internes
* de la fenêtre lorsque sa taille change.
*/
/*
$( view ).on( "resize", function( event ){
console.log( "Dimensions internes de la fenêtre, largeur x hauteur = ",
$( view ).innerWidth(), " x ", $( view ).innerHeight() );
});
*/
/*
* QUnit : tests unitaires.
*
* Tests basiques, on vérifie l'existence des sélecteurs
* et l'unicité des ID.
*
* Aide au débogage, QUnit signale toutes les erreurs.
*/
$( ".qunit" ).show();
testQUnitSelector( "App", [
"#qunit", "#qunit-fixture", ".conteneur"
] );
testQUnitID( "App", [
"qunit", "qunit-fixture"
] );
}
});
});
})( document.currentScript.ownerDocument, document.currentScript.ownerDocument.defaultView );
</script>
</head> |
Un exemple, pour les experts, utilisant import, shadow et web components
Répondre avec citation
Partager