Fieldflow plugin - Initial commit, transform a basic list into a drop…

… down.
wet-boew · Nov 30, 2016 · da70448 · da70448
1 parent cb29ce2
commit da70448
Show file tree

Hide file tree

Showing 19 changed files with 9,603 additions and 1 deletion.
diff --git a/site/pages/docs/ref/fieldflow/fieldflow-en.hbs b/site/pages/docs/ref/fieldflow/fieldflow-en.hbs
diff --git a/site/pages/docs/ref/fieldflow/fieldflow-fr.hbs b/site/pages/docs/ref/fieldflow/fieldflow-fr.hbs
diff --git a/site/pages/docs/ref/plugins-en.hbs b/site/pages/docs/ref/plugins-en.hbs
@@ -20,6 +20,7 @@
 	<li><a href="favicon/favicon-en.html">Favicon</a> - This plugin provides the ability to add and update the favicon's on a web page.</li>
 	<li><a href="feedback/feedback-en.html">Feedback form</a> - Allows users to submit feedback for a specific Web page or Web site.</li>
 	<li><a href="feeds/feeds-en.html">Feeds</a> - Aggregates and displays entries from one or more Web feeds.</li>
+	<li><a href="fieldflow/fieldflow-en.html">Field flow</a> - Transform a basic list into a drop down.</li>
 	<li><a href="footnotes/footnotes-en.html">Footnotes</a> - Provides a consistent, accessible way of handling footnotes across websites.</li>
 	<li><a href="formvalid/formvalid-en.html">Form validation</a> - Provides generic validation and error message handling for Web forms.</li>
 	<li><a href="geomap/geomap-en.html">Geomap</a> - Displays a dynamic map over which information from additional sources can be overlaid.</li>

diff --git a/site/pages/docs/ref/plugins-fr.hbs b/site/pages/docs/ref/plugins-fr.hbs
@@ -18,6 +18,7 @@
 	<li><a href="data-ajax/data-ajax-fr.html">Data Ajax</a> - Un enveloppeur simple pour AjaxLoader qui insère de contenu télécharger via AJAX.</li>
 	<li><a href="data-inview/data-inview-fr.html">Data Inview</a> - Affiche de contenu superposé quand une section se déplace hors de la clôture.</li>
 	<li><a href="data-picture/data-picture-fr.html">Data Picture</a> - Conversion de Picturefill guidé par l'événement.</li>
+	<li><a href="fieldflow/fieldflow-fr.html">Déroulement de champs</a> - Transforme une simple liste en un liste de choix.</li>
 	<li><a href="equalheight/equalheight-fr.html">Égalisation des hauteurs</a> - Un plugiel d'égalisation des hauteurs réactif.</li>
 	<li><a href="session-timeout/session-timeout-fr.html">Expiration de la session</a> - Ferme la session de l'utilisateur après un certain délai.</li>
 	<li><a href="favicon/favicon-fr.html">Favoricône</a> - Offre la possibilité d'ajouter et de mettre à jour les favoricônes d'une page.</li>
@@ -34,5 +35,5 @@
 	<li><a href="footnotes/footnotes-fr.html">Notes de bas de page</a> - Une méthode cohérente et facile d’accès pour répertorier les notes de bas de page.</li>
 	<li><a href="prettify/prettify-fr.html">Prettify</a> - Affiche de la syntaxe des extraits de code source.</li>
 	<li><a href="tables/tables-fr.html">Tables</a> - Integrates the DataTables plugin into WET providing searching, sorting, filtering, pagination and other advanced features for tables.</li>
-	<li><a href="formvalid/formvalid-fr.html">Validation de formulaires</a> - Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.</li>	
+	<li><a href="formvalid/formvalid-fr.html">Validation de formulaires</a> - Effectue la validation de formulaires Web selon un ensemble de règles de base avant qu'ils soient soumis.</li>
 </ul>
diff --git a/src/plugins/fieldflow/advanced-en.hbs b/src/plugins/fieldflow/advanced-en.hbs
diff --git a/src/plugins/fieldflow/advanced-fr.hbs b/src/plugins/fieldflow/advanced-fr.hbs
diff --git a/src/plugins/fieldflow/ajax/ajax-1.html b/src/plugins/fieldflow/ajax/ajax-1.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- DataAjaxFragmentStart -->
+
+<section>
+	<h3>AJAX content Set 1 <span lang="fr">(Ensemble 1)</span></h3>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit turpis nec urna pulvinar, sit amet iaculis est ultrices. Nullam erat elit, pellentesque ac arcu sit amet, pretium scelerisque dui. Ut id porta sapien. Quisque imperdiet turpis quis urna mollis mollis. Vivamus eget laoreet lorem, ac commodo mauris. Vivamus et blandit odio. Donec nec mauris et mauris aliquet viverra vel id nisl. Etiam dui sem, fringilla ac est quis, sollicitudin scelerisque velit. Nulla ac semper erat. Integer lorem nisl, placerat eget facilisis sit amet, molestie at libero. Nam cursus mollis odio, vel viverra sem mollis id.
+
+	<div class="well">
+		<ul>
+			<li>quam</li>
+		</ul>
+	</div>
+
+	<p>Fusce a finibus diam, sed tristique metus. Aliquam auctor tellus cursus, ultrices magna ac, lobortis erat. Praesent ac eros venenatis, fringilla sapien non, cursus mi. Morbi ultrices id sem nec vestibulum. Sed vehicula lacus turpis, ac vestibulum orci feugiat sed. Aliquam quam diam, hendrerit at mi vitae, ornare dictum urna. Proin vehicula mi quam, ac venenatis urna scelerisque nec. Sed aliquet quis dui commodo aliquet. Integer commodo quam sed ultricies laoreet. Fusce ut rutrum enim. Ut erat massa, sollicitudin sit amet auctor a, tincidunt sed nibh. Nulla pulvinar tellus urna, sed tristique tellus lobortis non. Vestibulum at accumsan massa. Proin et diam vitae nisi placerat fermentum sit amet et est. Nunc non est vulputate, aliquet ante ultrices, aliquet est.
+
+	<p>Quisque imperdiet, purus sit amet dapibus venenatis, ligula nulla blandit libero, in tincidunt lorem lorem luctus ligula. Quisque ornare nibh et risus tincidunt, ac pellentesque urna hendrerit. Suspendisse feugiat efficitur cursus. Suspendisse sodales mauris eget diam porttitor, eu scelerisque est condimentum. Nam ultricies pharetra metus eu lobortis. Phasellus urna erat, semper vel mauris congue, convallis varius mi. Sed vestibulum, dolor id blandit aliquam, erat orci dictum tellus, vel malesuada mauris eros fringilla risus.
+
+	<p>Ut sed tempor metus. Mauris sed nisi eu purus consectetur mattis luctus ornare mauris. Vestibulum blandit ullamcorper elit ac tempus. Etiam sed porta tortor. Phasellus congue a mauris lobortis egestas. Praesent porta ligula sapien, ut feugiat magna feugiat in. Proin non bibendum dui, faucibus iaculis nunc. Donec tempus ullamcorper finibus. Integer velit arcu, facilisis eu tincidunt a, faucibus sit amet massa.
+</section>
+
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/fieldflow/ajax/ajax-2.html b/src/plugins/fieldflow/ajax/ajax-2.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- DataAjaxFragmentStart -->
+
+<section>
+	<h3>AJAX content Set 2 <span lang="fr">(Ensemble 2)</span></h3>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit turpis nec urna pulvinar, sit amet iaculis est ultrices. Nullam erat elit, pellentesque ac arcu sit amet, pretium scelerisque dui. Ut id porta sapien. Quisque imperdiet turpis quis urna mollis mollis. Vivamus eget laoreet lorem, ac commodo mauris. Vivamus et blandit odio. Donec nec mauris et mauris aliquet viverra vel id nisl. Etiam dui sem, fringilla ac est quis, sollicitudin scelerisque velit. Nulla ac semper erat. Integer lorem nisl, placerat eget facilisis sit amet, molestie at libero. Nam cursus mollis odio, vel viverra sem mollis id.
+
+	<div class="well">
+		<ul>
+			<li>quam</li>
+			<li>id porta sapien</li>
+		</ul>
+	</div>
+
+	<p>Fusce a finibus diam, sed tristique metus. Aliquam auctor tellus cursus, ultrices magna ac, lobortis erat. Praesent ac eros venenatis, fringilla sapien non, cursus mi. Morbi ultrices id sem nec vestibulum. Sed vehicula lacus turpis, ac vestibulum orci feugiat sed. Aliquam quam diam, hendrerit at mi vitae, ornare dictum urna. Proin vehicula mi quam, ac venenatis urna scelerisque nec. Sed aliquet quis dui commodo aliquet. Integer commodo quam sed ultricies laoreet. Fusce ut rutrum enim. Ut erat massa, sollicitudin sit amet auctor a, tincidunt sed nibh. Nulla pulvinar tellus urna, sed tristique tellus lobortis non. Vestibulum at accumsan massa. Proin et diam vitae nisi placerat fermentum sit amet et est. Nunc non est vulputate, aliquet ante ultrices, aliquet est.
+
+	<p>Quisque imperdiet, purus sit amet dapibus venenatis, ligula nulla blandit libero, in tincidunt lorem lorem luctus ligula. Quisque ornare nibh et risus tincidunt, ac pellentesque urna hendrerit. Suspendisse feugiat efficitur cursus. Suspendisse sodales mauris eget diam porttitor, eu scelerisque est condimentum. Nam ultricies pharetra metus eu lobortis. Phasellus urna erat, semper vel mauris congue, convallis varius mi. Sed vestibulum, dolor id blandit aliquam, erat orci dictum tellus, vel malesuada mauris eros fringilla risus.
+
+	<p>Ut sed tempor metus. Mauris sed nisi eu purus consectetur mattis luctus ornare mauris. Vestibulum blandit ullamcorper elit ac tempus. Etiam sed porta tortor. Phasellus congue a mauris lobortis egestas. Praesent porta ligula sapien, ut feugiat magna feugiat in. Proin non bibendum dui, faucibus iaculis nunc. Donec tempus ullamcorper finibus. Integer velit arcu, facilisis eu tincidunt a, faucibus sit amet massa.
+</section>
+
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/fieldflow/ajax/ajax-3.html b/src/plugins/fieldflow/ajax/ajax-3.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- DataAjaxFragmentStart -->
+
+<section>
+	<h3>AJAX content Set 3 <span lang="fr">(Ensemble 3)</span></h3>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit turpis nec urna pulvinar, sit amet iaculis est ultrices. Nullam erat elit, pellentesque ac arcu sit amet, pretium scelerisque dui. Ut id porta sapien. Quisque imperdiet turpis quis urna mollis mollis. Vivamus eget laoreet lorem, ac commodo mauris. Vivamus et blandit odio. Donec nec mauris et mauris aliquet viverra vel id nisl. Etiam dui sem, fringilla ac est quis, sollicitudin scelerisque velit. Nulla ac semper erat. Integer lorem nisl, placerat eget facilisis sit amet, molestie at libero. Nam cursus mollis odio, vel viverra sem mollis id.
+
+	<div class="well">
+		<ul>
+			<li>quam</li>
+			<li>id porta sapien</li>
+			<li>Vestibulum at accumsan massa</li>
+		</ul>
+	</div>
+
+	<p>Fusce a finibus diam, sed tristique metus. Aliquam auctor tellus cursus, ultrices magna ac, lobortis erat. Praesent ac eros venenatis, fringilla sapien non, cursus mi. Morbi ultrices id sem nec vestibulum. Sed vehicula lacus turpis, ac vestibulum orci feugiat sed. Aliquam quam diam, hendrerit at mi vitae, ornare dictum urna. Proin vehicula mi quam, ac venenatis urna scelerisque nec. Sed aliquet quis dui commodo aliquet. Integer commodo quam sed ultricies laoreet. Fusce ut rutrum enim. Ut erat massa, sollicitudin sit amet auctor a, tincidunt sed nibh. Nulla pulvinar tellus urna, sed tristique tellus lobortis non. Vestibulum at accumsan massa. Proin et diam vitae nisi placerat fermentum sit amet et est. Nunc non est vulputate, aliquet ante ultrices, aliquet est.
+
+	<p>Quisque imperdiet, purus sit amet dapibus venenatis, ligula nulla blandit libero, in tincidunt lorem lorem luctus ligula. Quisque ornare nibh et risus tincidunt, ac pellentesque urna hendrerit. Suspendisse feugiat efficitur cursus. Suspendisse sodales mauris eget diam porttitor, eu scelerisque est condimentum. Nam ultricies pharetra metus eu lobortis. Phasellus urna erat, semper vel mauris congue, convallis varius mi. Sed vestibulum, dolor id blandit aliquam, erat orci dictum tellus, vel malesuada mauris eros fringilla risus.
+
+	<p>Ut sed tempor metus. Mauris sed nisi eu purus consectetur mattis luctus ornare mauris. Vestibulum blandit ullamcorper elit ac tempus. Etiam sed porta tortor. Phasellus congue a mauris lobortis egestas. Praesent porta ligula sapien, ut feugiat magna feugiat in. Proin non bibendum dui, faucibus iaculis nunc. Donec tempus ullamcorper finibus. Integer velit arcu, facilisis eu tincidunt a, faucibus sit amet massa.
+</section>
+
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/fieldflow/ajax/ajax-4.html b/src/plugins/fieldflow/ajax/ajax-4.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- DataAjaxFragmentStart -->
+
+<section>
+	<h3>AJAX content Set 4 <span lang="fr">(Ensemble 4)</span></h3>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit turpis nec urna pulvinar, sit amet iaculis est ultrices. Nullam erat elit, pellentesque ac arcu sit amet, pretium scelerisque dui. Ut id porta sapien. Quisque imperdiet turpis quis urna mollis mollis. Vivamus eget laoreet lorem, ac commodo mauris. Vivamus et blandit odio. Donec nec mauris et mauris aliquet viverra vel id nisl. Etiam dui sem, fringilla ac est quis, sollicitudin scelerisque velit. Nulla ac semper erat. Integer lorem nisl, placerat eget facilisis sit amet, molestie at libero. Nam cursus mollis odio, vel viverra sem mollis id.
+
+	<div class="well">
+		<ul>
+			<li>quam</li>
+			<li>id porta sapien</li>
+			<li>Vestibulum at accumsan massa</li>
+			<li>lorem lorem luctus ligula</li>
+		</ul>
+	</div>
+
+	<p>Fusce a finibus diam, sed tristique metus. Aliquam auctor tellus cursus, ultrices magna ac, lobortis erat. Praesent ac eros venenatis, fringilla sapien non, cursus mi. Morbi ultrices id sem nec vestibulum. Sed vehicula lacus turpis, ac vestibulum orci feugiat sed. Aliquam quam diam, hendrerit at mi vitae, ornare dictum urna. Proin vehicula mi quam, ac venenatis urna scelerisque nec. Sed aliquet quis dui commodo aliquet. Integer commodo quam sed ultricies laoreet. Fusce ut rutrum enim. Ut erat massa, sollicitudin sit amet auctor a, tincidunt sed nibh. Nulla pulvinar tellus urna, sed tristique tellus lobortis non. Vestibulum at accumsan massa. Proin et diam vitae nisi placerat fermentum sit amet et est. Nunc non est vulputate, aliquet ante ultrices, aliquet est.
+
+	<p>Quisque imperdiet, purus sit amet dapibus venenatis, ligula nulla blandit libero, in tincidunt lorem lorem luctus ligula. Quisque ornare nibh et risus tincidunt, ac pellentesque urna hendrerit. Suspendisse feugiat efficitur cursus. Suspendisse sodales mauris eget diam porttitor, eu scelerisque est condimentum. Nam ultricies pharetra metus eu lobortis. Phasellus urna erat, semper vel mauris congue, convallis varius mi. Sed vestibulum, dolor id blandit aliquam, erat orci dictum tellus, vel malesuada mauris eros fringilla risus.
+
+	<p>Ut sed tempor metus. Mauris sed nisi eu purus consectetur mattis luctus ornare mauris. Vestibulum blandit ullamcorper elit ac tempus. Etiam sed porta tortor. Phasellus congue a mauris lobortis egestas. Praesent porta ligula sapien, ut feugiat magna feugiat in. Proin non bibendum dui, faucibus iaculis nunc. Donec tempus ullamcorper finibus. Integer velit arcu, facilisis eu tincidunt a, faucibus sit amet massa.
+</section>
+
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/fieldflow/ajax/ajax-5.html b/src/plugins/fieldflow/ajax/ajax-5.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- DataAjaxFragmentStart -->
+
+<section>
+	<h3>AJAX content Set 5 <span lang="fr">(Ensemble 5)</span></h3>
+
+	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc hendrerit turpis nec urna pulvinar, sit amet iaculis est ultrices. Nullam erat elit, pellentesque ac arcu sit amet, pretium scelerisque dui. Ut id porta sapien. Quisque imperdiet turpis quis urna mollis mollis. Vivamus eget laoreet lorem, ac commodo mauris. Vivamus et blandit odio. Donec nec mauris et mauris aliquet viverra vel id nisl. Etiam dui sem, fringilla ac est quis, sollicitudin scelerisque velit. Nulla ac semper erat. Integer lorem nisl, placerat eget facilisis sit amet, molestie at libero. Nam cursus mollis odio, vel viverra sem mollis id.
+
+	<div class="well">
+		<ul>
+			<li>quam</li>
+			<li>id porta sapien</li>
+			<li>Vestibulum at accumsan massa</li>
+			<li>lorem lorem luctus ligula</li>
+			<li>Suspendisse sodales mauris eget</li>
+		</ul>
+	</div>
+
+	<details>
+		<summary>This is a Summary Element</summary>
+		<p>This is a paragraph inside a details element
+	</details>
+	<p>The previous block have the following source code:
+	<pre><code>&lt;details&gt;
+	&lt;summary&gt;This is a Summary Element&lt;/summary&gt;
+	&lt;p&gt;This is a paragraph inside a details element
+&lt;/details&gt;</code></pre>
+
+	<p>Fusce a finibus diam, sed tristique metus. Aliquam auctor tellus cursus, ultrices magna ac, lobortis erat. Praesent ac eros venenatis, fringilla sapien non, cursus mi. Morbi ultrices id sem nec vestibulum. Sed vehicula lacus turpis, ac vestibulum orci feugiat sed. Aliquam quam diam, hendrerit at mi vitae, ornare dictum urna. Proin vehicula mi quam, ac venenatis urna scelerisque nec. Sed aliquet quis dui commodo aliquet. Integer commodo quam sed ultricies laoreet. Fusce ut rutrum enim. Ut erat massa, sollicitudin sit amet auctor a, tincidunt sed nibh. Nulla pulvinar tellus urna, sed tristique tellus lobortis non. Vestibulum at accumsan massa. Proin et diam vitae nisi placerat fermentum sit amet et est. Nunc non est vulputate, aliquet ante ultrices, aliquet est.
+
+	<p>Following this paragraph we have this code <code>&lt;div data-ajax-append=&quot;ajax/ajax-5a.html&quot;&gt;&lt;/div&gt;</code>
+	<div data-ajax-append="ajax/ajax-5a.html"></div>
+
+	<p>Quisque imperdiet, purus sit amet dapibus venenatis, ligula nulla blandit libero, in tincidunt lorem lorem luctus ligula. Quisque ornare nibh et risus tincidunt, ac pellentesque urna hendrerit. Suspendisse feugiat efficitur cursus. Suspendisse sodales mauris eget diam porttitor, eu scelerisque est condimentum. Nam ultricies pharetra metus eu lobortis. Phasellus urna erat, semper vel mauris congue, convallis varius mi. Sed vestibulum, dolor id blandit aliquam, erat orci dictum tellus, vel malesuada mauris eros fringilla risus.
+
+	<p>Ut sed tempor metus. Mauris sed nisi eu purus consectetur mattis luctus ornare mauris. Vestibulum blandit ullamcorper elit ac tempus. Etiam sed porta tortor. Phasellus congue a mauris lobortis egestas. Praesent porta ligula sapien, ut feugiat magna feugiat in. Proin non bibendum dui, faucibus iaculis nunc. Donec tempus ullamcorper finibus. Integer velit arcu, facilisis eu tincidunt a, faucibus sit amet massa.
+</section>
+
+<!-- DataAjaxFragmentEnd -->
+</html>
diff --git a/src/plugins/fieldflow/ajax/ajax-5a.html b/src/plugins/fieldflow/ajax/ajax-5a.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- DataAjaxFragmentStart -->
+
+<section class="mrgn-lft-lg">
+	<h4>AJAX sub-content Set 5a <span lang="fr">(Ensemble de sous-contenu 5a)</span></h4>
+
+	<p>Paragraph 1 <strong>Blabla A</strong></p>
+
+	<details>
+		<summary>This is a Summary Element</summary>
+		<p>This is a paragraph inside a details element
+	</details>
+
+	<p>The previous block have the following source code:
+	<pre><code>&lt;details&gt;
+	&lt;summary&gt;This is a Summary Element&lt;/summary&gt;
+	&lt;p&gt;This is a paragraph inside a details element
+&lt;/details&gt;</code></pre>
+
+	<p>Quisque imperdiet, purus sit amet dapibus venenatis, ligula nulla blandit libero, in tincidunt lorem lorem luctus ligula. Quisque ornare nibh et risus tincidunt, ac pellentesque urna hendrerit. Suspendisse feugiat efficitur cursus. Suspendisse sodales mauris eget diam porttitor, eu scelerisque est condimentum. Nam ultricies pharetra metus eu lobortis. Phasellus urna erat, semper vel mauris congue, convallis varius mi. Sed vestibulum, dolor id blandit aliquam, erat orci dictum tellus, vel malesuada mauris eros fringilla risus.
+
+	<p>Ut sed tempor metus. Mauris sed nisi eu purus consectetur mattis luctus ornare mauris. Vestibulum blandit ullamcorper elit ac tempus. Etiam sed porta tortor. Phasellus congue a mauris lobortis egestas. Praesent porta ligula sapien, ut feugiat magna feugiat in. Proin non bibendum dui, faucibus iaculis nunc. Donec tempus ullamcorper finibus. Integer velit arcu, facilisis eu tincidunt a, faucibus sit amet massa.
+
+	<p><strong>End of Set 5a <span lang="fr">(Fin de l'ensemble 5a)</span></strong></p>
+	<hr />
+
+</section>
+
+<!-- DataAjaxFragmentEnd -->
+</html>