Patch - Data-ajax - Fix ajax filter option to consider spaces in the …

…CSS selector (#9758)
wet-boew · May 15, 2024 · 1d4559c · 1d4559c
1 parent 4df2b3e
commit 1d4559c
Show file tree

Hide file tree

Showing 5 changed files with 141 additions and 10 deletions.
diff --git a/src/plugins/ajax-fetch/ajax-fetch.js b/src/plugins/ajax-fetch/ajax-fetch.js
@@ -34,6 +34,10 @@ $document.on( "ajax-fetch.wb", function( event ) {
 	// Separate the URL from the filtering criteria
 	if ( selector ) {
 		fetchOpts.url = urlParts[ 0 ];
+
+		if ( urlParts[ 1 ] ) {
+			selector = urlParts.slice( 1 ).join( " " );
+		}
 	}
 
 	if ( fetchNoCache ) {

diff --git a/src/plugins/data-ajax/ajax/data-ajax-filter-en.html b/src/plugins/data-ajax/ajax/data-ajax-filter-en.html
@@ -3,7 +3,15 @@ <h4>I was ajaxed in and filtered by the URL hash</h4>
 	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
 </section>
 
-<section class="ajaxed-in filter-selector">
-	<h4>I was ajaxed in and filtered by a selector</h4>
-	<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
+<section class="filter-selector">
+	<div class="ajaxed-in">
+		<h4>I was ajaxed in and filtered by a selector</h4>
+		<p>I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.</p>
+		<!-- to illustrate filter out -->
+		<ul class="filter-out-selector">
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+		</ul>
+	</div>
 </section>
diff --git a/src/plugins/data-ajax/ajax/data-ajax-filter-fr.html b/src/plugins/data-ajax/ajax/data-ajax-filter-fr.html
@@ -3,7 +3,15 @@ <h4>J'ai été affiché via Ajax et après filtrer par le &#171;&#160;hash&#160;
 	<p>J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.</p>
 </section>
 
-<section class="ajaxed-in filter-selector">
-	<h4>J'ai été affiché via Ajax et après filtrer par selecteur</h4>
-	<p>J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.</p>
+<section class="filter-selector">
+	<div class="ajaxed-in">
+		<h4>J'ai été affiché via Ajax et après filtrer par selecteur</h4>
+		<p>J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.</p>
+		<!-- Pour illustrer le retrait de contenu par selecteur -->
+		<ul class="filter-out-selector">
+			<li>Item 1</li>
+			<li>Item 2</li>
+			<li>Item 3</li>
+		</ul>
+	</div>
 </section>
diff --git a/src/plugins/data-ajax/data-ajax-en.hbs b/src/plugins/data-ajax/data-ajax-en.hbs
@@ -239,7 +239,7 @@
 </section>
 
 <section>
-	<h2>Filtering the content by the URL hash (<code>ajax/data-ajax-extra-en.html#filter-id</code>, v4.0.12+)</h2>
+	<h2>Filtering the content by the URL hash (<code>ajax/data-ajax-filter-en.html#filter-id</code>, v4.0.12+)</h2>
 	<section>
 		<h3>Example</h3>
 		<div data-ajax-append="ajax/data-ajax-filter-en.html#filter-id" class="original">
@@ -272,7 +272,7 @@
 </section>
 
 <section>
-	<h2>Filtering the content by a selector (<code>ajax/data-ajax-extra-en.html .filter-selector</code>, v4.0.12+)</h2>
+	<h2>Filtering the content by a selector (<code>ajax/data-ajax-filter-en.html .filter-selector</code>, v4.0.12+)</h2>
 	<section>
 		<h3>Example</h3>
 		<div data-ajax-append="ajax/data-ajax-filter-en.html .filter-selector" class="original">
@@ -294,16 +294,71 @@
 	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
 &lt;/section&gt;
 
-&lt;section class=&quot;ajaxed-in filter-selector&quot;&gt;
+&lt;section class=&quot;filter-selector&quot;&gt;&lt;div class="ajaxed-in">
 	&lt;h4&gt;I was ajaxed in and filtered by a selector&lt;/h4&gt;
 	&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
+&lt;!-- to illustrate filter out -->
+&lt;ul class="filter-out-selector">
+	&lt;li>Item 1&lt;/li>
+	&lt;li>Item 2&lt;/li>
+	&lt;li>Item 3&lt;/li>
+&lt;/ul>
+&lt;/div>
 &lt;/section&gt;
 </code></pre>
 			</section>
 		</details>
 	</section>
 </section>
 
+<section>
+	<h2>Filtering out the content by a selector </h2>
+	<section>
+		<h3>Removing one element</h3>
+		<p>Data ajax attribute: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)"</code></p>
+		<div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)" class="original">
+			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+		</div>
+	</section>
+	<section>
+		<h3>Removing multiple elements</h3>
+		<p>Data ajax attribute: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)</code></p>
+		<div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)" class="original">
+			<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
+		</div>
+	</section>
+	<section>
+		<h3>Source code</h3>
+		<details>
+			<summary>View code</summary>
+			<p>Filering out one element, in-page HTML</p>
+			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector)</strong>" class="original"&gt;
+	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
+	&lt;/div&gt;</code></pre>
+			<p>Filering out multiple elements, in-page HTML</p>
+			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector, p)</strong>" class="original"&gt;
+	&lt;p&gt;Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.&lt;/p&gt;
+	&lt;/div&gt;</code></pre>
+			<p>data-ajax-filter-en.html</p>
+			<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
+&lt;h4&gt;I was ajaxed in and filtered by the URL hash&lt;/h4&gt;
+&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
+&lt;/section&gt;
+
+&lt;section class=&quot;filter-selector&quot;&gt;&lt;div class="ajaxed-in">
+&lt;h4&gt;I was ajaxed in and filtered by a selector&lt;/h4&gt;
+&lt;p&gt;I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in. I was ajaxed in.&lt;/p&gt;
+&lt;!-- to illustrate filter out -->
+&lt;ul class="filter-out-selector">
+	&lt;li>Item 1&lt;/li>
+	&lt;li>Item 2&lt;/li>
+	&lt;li>Item 3&lt;/li>
+&lt;/ul>
+&lt;/div&gt;&lt;/section></code></pre>
+		</details>
+	</section>
+</section>
+
 <section>
 	<h2>Alternative syntax</h2>
 	<p>Consult the <a href="../../docs/ref/data-ajax/data-ajax-en.html">documentation</a> for more information regarding the following alternative syntaxt.</p>

diff --git a/src/plugins/data-ajax/data-ajax-fr.hbs b/src/plugins/data-ajax/data-ajax-fr.hbs
@@ -293,14 +293,70 @@
 	&lt;p&gt;J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.&lt;/p&gt;
 &lt;/section&gt;
 
-&lt;section class=&quot;ajaxed-in filter-selector&quot;&gt;
+&lt;section class=&quot;filter-selector&quot;&gt;&div class="ajaxed-in">
 	&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par selecteur&lt;/h4&gt;
 	&lt;p&gt;J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.&lt;/p&gt;
+&lt;!-- Pour illustrer le retrait de contenu par selecteur -->
+&lt;ul class="filter-out-selector">
+	&lt;li>Item 1&lt;/li>
+	&lt;li>Item 2&lt;/li>
+	&lt;li>Item 3&lt;/li>
+&lt;/ul>
+&lt;/div>
 &lt;/section&gt;</code></pre>
 			</section>
 		</details>
 	</section>
 </section>
+
+<section>
+	<h2>Retirer du contenu via un sélecteur</h2>
+	<section>
+		<h3>Retrait d'un élément</h3>
+		<p>Attribut data ajax: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector)"</code></p>
+		<div data-ajax-replace="ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector)" class="original">
+			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
+		</div>
+	</section>
+	<section>
+		<h3>Retrait de plusieurs éléments</h3>
+		<p>Attribut data ajax: <code>data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *:not(.filter-out-selector, p)"</code></p>
+		<div data-ajax-replace="ajax/data-ajax-filter-fr.html .filter-selector > div > *:not(.filter-out-selector, p)" class="original">
+			<p>Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.</p>
+		</div>
+	</section>
+	<section>
+		<h3>Code source</h3>
+		<details>
+			<summary>Visualiser le code</summary>
+			<p>Retrait d'un élément, HTML dans la page</p>
+			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector)</strong>" class="original"&gt;
+	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
+	&lt;/div&gt;</code></pre>
+			<p>Retrait de plusieurs éléments, HTML dans la page</p>
+			<pre><code>&lt;div data-ajax-replace="ajax/data-ajax-filter-en.html .filter-selector > div > *<strong>:not(.filter-out-selector, p)</strong>" class="original"&gt;
+	&lt;p&gt;Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.&lt;/p&gt;
+	&lt;/div&gt;</code></pre>
+			<p>data-ajax-filter-fr.html</p>
+			<pre><code>&lt;section id=&quot;filter-id&quot; class=&quot;ajaxed-in&quot;&gt;
+&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par le &amp;#171;&amp;#160;hash&amp;#160;&amp;#187; de l'URL&lt;/h4&gt;
+&lt;p&gt;J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.&lt;/p&gt;
+&lt;/section&gt;
+
+&lt;section class=&quot;filter-selector&quot;&gt;&lt;div class="ajaxed-in">
+&lt;h4&gt;J'ai été affiché via Ajax et après filtrer par selecteur&lt;/h4&gt;
+&lt;p&gt;J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax. J'ai été affiché via Ajax.&lt;/p&gt;
+&lt;!-- Pour illustrer le retrait de contenu par selecteur -->
+&lt;ul class="filter-out-selector">
+	&lt;li>Item 1&lt;/li>
+	&lt;li>Item 2&lt;/li>
+	&lt;li>Item 3&lt;/li>
+&lt;/ul>
+&lt;/div&gt;&lt;/section></code></pre>
+		</details>
+	</section>
+</section>
+
 <section>
 	<h2>Syntaxe alternative</h2>
 	<p>Veuillez consulter la <a href="../../docs/ref/data-ajax/data-ajax-fr.html">documentation</a> pour de plus ample renseignement concernant cette syntaxe alternative.</p>