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 dexercices</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> |
Partager