Skip to content

Commit

Permalink
Calendar of events: Updated documentation.
Browse files Browse the repository at this point in the history 
* Replaced outdated WET 3.1 markup/associated guidance with WET 4.0 equivalents.
* Added missing code highlighting in explanations.
* Added empty lines between calendar# and wb-calevt divs in code blocks (for consistency with the demo pages' code blocks).
* English-only fixes (French was already fine as-is):
    * Replaced code block with inline code in how to use section's first list item.
    * Added missing calendar1 div to first example code block.
    * Removed trailing space/tab characters.
  • Loading branch information
@EricDunsworth
EricDunsworth committed Jan 11, 2017
1 parent a147b6a commit 55aff29
Show file tree
Hide file tree
Showing 2 changed files with 42 additions and 35 deletions.
40 changes: 22 additions & 18 deletions site/pages/docs/ref/cal-events/cal-events-en.hbs
View file
Expand Up @@ -32,19 +32,21 @@
<section>
<h2>How to implement</h2>
<ol>
<li>Add a div element to the Web page with a class attribute containing "wet-boew-calendar-events" and a unique class name (e.g.: <pre><code>&lt;div class="wet-boew-calendar-events unique-class"&gt;&lt;/div&gt;</code></pre>).<br /><strong>Note:</strong> your unique class must be the last class in the list.</li>
<li>Add a div element to the Web page with a <code>class</code> attribute containing "wb-calevt" and a unique name in a <code>data-calevt-src</code> attribute (e.g.: <code>&lt;div class="wb-calevt" data-calevt-src="unique-name"&gt;&lt;/div&gt;</code>).</li>
<li>Include in the div element a ordered list of events (ol element) with the following structure for each event:
<ol>
<li>The list element must start with a heading element (h2 to h6, depending on the context of the page).</li>
<li>The list element must start with a heading element (<code>h2</code> to <code>h6</code>, depending on the context of the page).</li>
<li>The heading element must include a link to the event description with the event title for the link text.</li>
<li>The event date must be provided in an HTML5 time element contained within a paragraph element (following the heading element). The date to be displayed is contained in the time element and an ISO-8601 date (e.g., 2010-03-11) is provided in the datetime attribute.</li>
<li>The event date must be provided in an HTML5 <code>time</code> element contained within a paragraph element (following the heading element). The date to be displayed is contained in the <code>time</code> element and an ISO-8601 date (e.g., 2010-03-11) is provided in the <code>datetime</code> attribute.</li>
</ol>
</li>
<li>Add a second div element to the Web page with an id attribute containing your unique class name from above (e.g., <code>&lt;div id="unique-class"&gt;&lt;/div&gt;</code>). This will hold the calendar interface.</li>
<li>Add a second <code>div</code> element to the Web page with an <code>id</code> attribute containing your <code>data-calevt-src</code> attribute's unique name from above (e.g., <code>&lt;div id="unique-name"&gt;&lt;/div&gt;</code>). This will hold the calendar interface.</li>
</ol>

<h3>Example Code</h3>
<pre><code>&lt;div class="wet-boew-eventscalendar calendar1"&gt;
<pre><code>&lt;div id="calendar1"&gt;&lt;/div&gt;

&lt;div class="wb-calevt" data-calevt-src="calendar1"&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;section&gt;
Expand All @@ -67,7 +69,8 @@
<h3>Details Linking</h3>
<p>In this method, the calendar links to the details of the event. This is used when an event has multiple links.</p>
<pre><code>&lt;div id="calendar2"&gt;&lt;/div&gt;
&lt;div class="wet-boew-eventscalendar event-anchoring calendar2"&gt;

&lt;div class="wb-calevt evt-anchor" data-calevt-src="calendar2"&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;section&gt;
Expand Down Expand Up @@ -99,52 +102,53 @@

<section>
<h3>List Filtering</h3>
<p>This option filters out events from the list that are not for the current month. Enable this option by adding the <code>calendar-display-onshow</code> class to each event that should be filtered by month.</p>
<p>Events that do not have the <code>calendar-display-onshow</code> class will always be visible.</p>
<p>This option filters out events from the list that are not for the current month. Enable this option by adding the <code>cal-disp-onshow</code> class to each event that should be filtered by month.</p>
<p>Events that do not have the <code>cal-disp-onshow</code> class will always be visible.</p>
<pre><code>&lt;div id="calendar3"&gt;&lt;/div&gt;
&lt;div class="wet-boew-eventscalendar event-anchoring calendar3"&gt;

&lt;div class="wb-calevt evt-anchor" data-calevt-src="calendar3"&gt;
&lt;section&gt;
&lt;h4&gt;Events List 1&lt;/h4&gt;
&lt;ol&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://www.ec.gc.ca"&gt;Event 1&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-11"&gt;March 11th 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://canada.gc.ca"&gt;Event 2&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-11"&gt;March 11th 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;World Expo Shanghai (Shanghai, China)&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-22"&gt;March 22nd, 2011&lt;/time&gt; to &lt;time datetime="2011-04-26"&gt;April 26th, 2011&lt;/time&gt;&lt;/p&gt;
&lt;p&gt;The Canada Pavilion celebrates the vibrancy and the vitality of Canadian communities and the people within them.&lt;/p&gt;
&lt;p&gt;For more information about Canada at Expo 2010 Shanghai, visit: &lt;a href="http://www.expo2010canada.gc.ca/index-eng.cfm"&gt;www.expo2010canada.gc.ca/index-eng.cfm&lt;/a&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://gcpedia.gc.ca"&gt;Event 4&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-24"&gt;March 24th 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://www.ec.gc.ca"&gt;Event 6&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-04-11"&gt;April 11th 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://canada.gc.ca"&gt;Event 7&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-04-23"&gt;April 23rd 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://canada.gc.ca"&gt;Event 17&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-04-23"&gt;April 23rd 2011&lt;/time&gt;&lt;/p&gt;
Expand Down Expand Up @@ -195,7 +199,7 @@
<tr>
<td><code>wb-ready.wb</code> (v4.0.5+)</td>
<td>Triggered automatically when WET has finished loading and executing.</td>
<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
</td>
Expand Down
37 changes: 20 additions & 17 deletions site/pages/docs/ref/cal-events/cal-events-fr.hbs
View file
Expand Up @@ -32,19 +32,20 @@
<section>
<h2>Mise en œuvre</h2>
<ol>
<li>Ajouter un élément div à la page Web avec un attribut class contenant "wet-boew-calendar-events" et une classe unique (e.g.: <code>&lt;div class="wet-boew-calendar-events unique-class"&gt;&lt;/div&gt;</code>).<br><strong>Note:</strong> votre classe unique doit être la dernière dans la liste de classes.</li>
<li>Ajouter un élément div à la page Web avec un attribut <code>class</code> contenant "wb-calevt" et un nom unique dans un attribut <code>data-calevt-src</code> (e.g.: <code>&lt;div class="wb-calevt" data-calevt-src="unique-name"&gt;&lt;/div&gt;</code>).</li>
<li>Inclure dans l’élément div une liste ordonnée des événements (élément ol) en utilisant la structure suivante pour chaque événement :
<ol>
<li>L’élément de liste doit commencer par un élément d’en-tête (de h2 à h6, selon le contexte de la page).</li>
<li>L’élément de liste doit commencer par un élément d’en-tête (de <code>h2</code> à <code>h6</code>, selon le contexte de la page).</li>
<li>L’élément d’en-tête doit inclure un lien vers la description de l’événement, avec le titre de l’événement comme hyperlien.</li>
<li>La date de l’événement doit être fournie dans un élément time en HTML5 contenu au sein d’un élément de paragraphe (à la suite de l’élément d’en-tête). La date à afficher est contenue dans l’élément time et une date de norme ISO-8601 (p. ex., 2010-03-11) est indiquée dans l’attribut datetime.</li>
<li>La date de l’événement doit être fournie dans un élément <code>time</code> en HTML5 contenu au sein d’un élément de paragraphe (à la suite de l’élément d’en-tête). La date à afficher est contenue dans l’élément <code>time</code> et une date de norme ISO-8601 (p. ex., 2010-03-11) est indiquée dans l’attribut <code>datetime</code>.</li>
</ol>
</li>
<li>Ajouter un deuxième élément div à la page Web avec une valeur d’attribut à identification contenant votre classe unique ci-haut (p.ex., <code>&lt;div id="unique-class"&gt;&lt;/div&gt;</code>). Cela permettra de maintenir en place l’interface de calendrier.</li>
<li>Ajouter un deuxième élément <code>div</code> à la page Web avec le nom unique de l’attribut <code>data-calevt-src</code> ci-haut (p.ex., <code>&lt;div id="unique-name"&gt;&lt;/div&gt;</code>). Cela permettra de maintenir en place l’interface de calendrier.</li>
</ol>
<p>Exemple code :</p>
<pre><code>&lt;div id="calendar1"&gt;&lt;/div&gt;
&lt;div class="wet-boew-eventscalendar calendar1"&gt;

&lt;div class="wb-calevt" data-calevt-src="calendar1"&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;section&gt;
Expand All @@ -67,7 +68,8 @@
<h3>Liaison aux détails</h3>
<p>Dans cette méthode, le calendrier lien avec les détails de l'événement. Ceci est utilisé quand un événement a des liens multiples.</p>
<pre><code>&lt;div id="calendar2"&gt;&lt;/div&gt;
&lt;div class="wet-boew-eventscalendar event-anchoring calendar2"&gt;

&lt;div class="wb-calevt evt-anchor" data-calevt-src="calendar2"&gt;
&lt;ol&gt;
&lt;li&gt;
&lt;section&gt;
Expand Down Expand Up @@ -99,52 +101,53 @@

<section>
<h3>Filtrage de liste</h3>
<p>Cette option filtre des événements de la liste qui ne sont pas pour le mois actuel. Activez cette option en ajoutant la classe <code>calender-display-onshow</code> à chaque événement qui devrait être filtré par le mois.</p>
<p>Les événements qui n'ont pas la classe <code>calendar-display-onshow</code> seront visible toujours.</p>
<p>Cette option filtre des événements de la liste qui ne sont pas pour le mois actuel. Activez cette option en ajoutant la classe <code>cal-disp-onshow</code> à chaque événement qui devrait être filtré par le mois.</p>
<p>Les événements qui n'ont pas la classe <code>cal-disp-onshow</code> seront visible toujours.</p>
<pre><code>&lt;div id="calendar3"&gt;&lt;/div&gt;
&lt;div class="wet-boew-eventscalendar event-anchoring calendar3"&gt;

&lt;div class="wb-calevt evt-anchor" data-calevt-src="calendar3"&gt;
&lt;section&gt;
&lt;h4&gt;Événements - Liste 1&lt;/h4&gt;
&lt;ol&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://www.ec.gc.ca"&gt;Événement 1&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-11"&gt;11 mars 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://canada.gc.ca"&gt;Événement 2&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-11"&gt;11 mars 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;Expo 2010 Shanghai&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-22"&gt;22 mars 2011&lt;/time&gt; au &lt;time datetime="2011-04-26"&gt;26 avril 2011&lt;/time&gt;&lt;/p&gt;
&lt;p&gt;Le Pavillon du Canada souligne le dynamisme et la vitalité des villes canadiennes et de leurs résidents.&lt;/p&gt;
&lt;p&gt;Pour obtenir de plus amples renseignements, visitez le site Web de Canada à Expo 2010 Shanghai à l’adresse suivante : &lt;a href="http://www.expo2010canada.gc.ca/index-fra.cfm"&gt;www.expo2010canada.gc.ca/index-fra.cfm&lt;/a&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://gcpedia.gc.ca"&gt;Événement 4&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-03-24"&gt;24 mars 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://www.ec.gc.ca"&gt;Événement 6&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-04-11"&gt;11 avril 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://canada.gc.ca"&gt;Événement 7&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-04-23"&gt;23 avril 2011&lt;/time&gt;&lt;/p&gt;
&lt;/section&gt;
&lt;/li&gt;
&lt;li class="calendar-display-onshow"&gt;
&lt;li class="cal-disp-onshow"&gt;
&lt;section&gt;
&lt;h5&gt;&lt;a href="http://canada.gc.ca"&gt;Événement 17&lt;/a&gt;&lt;/h5&gt;
&lt;p&gt;&lt;time datetime="2011-04-23"&gt;23 avril 2011&lt;/time&gt;&lt;/p&gt;
Expand Down Expand Up @@ -196,7 +199,7 @@
<tr>
<td><code>wb-ready.wb</code> (v4.0.5+)</td>
<td>Triggered automatically when WET has finished loading and executing.</td>
<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
</td>
Expand Down

0 comments on commit 55aff29

Please sign in to comment.