Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Core - wb: add separate initialization for components when in basic HTML mode #9536

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Core - wb: add separate initialization for components when in basic HTML mode #9536

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
9 changes: 9 additions & 0 deletions site/pages/docs/ref/data-ajax/data-ajax-en.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -269,6 +269,15 @@
</div>
</code></pre>
</section>
<section>
<h2>Execute the plugin in basic HTML mode</h2>
<p>To execute the plugin in basic HTML mode the following attribute should be present <code>data-wb-basic-ajax=true</code></p>
<pre><code>&lt;section data-wb-basic-ajax=true data-ajax-after="ajax/data-ajax-extra-en.html" class="original"&gt;
&lt;h4&gt;Hello World&lt;/h4&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;/section&gt;
</code></pre>
</section>
<section>
<h2>Events</h2>
<table class="table">
Expand Down
9 changes: 9 additions & 0 deletions site/pages/docs/ref/data-ajax/data-ajax-fr.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -272,6 +272,15 @@
&lt;/div&gt;
</code></pre>
</section>
<section>
<h2>Exécuter le plugiciel en version HTML simplifiée</h2>
<p>Pour exécuter le plugin en version HTML simplifiée, l'attribut suivant doit être présent <code>data-wb-basic-ajax=true</code></p>
<pre><code>&lt;section data-wb-basic-ajax=true data-ajax-after="ajax/data-ajax-extra-en.html" class="original"&gt;
&lt;h4&gt;Bonjour le monde&lt;/h4&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. Exemple de texte. Exemple de texte.&lt;/p&gt;
&lt;/section&gt;
</code></pre>
</section>
<section>
<h2>Events</h2>
<table class="table">
Expand Down
16 changes: 6 additions & 10 deletions src/core/wb.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,6 +178,7 @@ var getUrlParts = function( url ) {
isReady: false,
ignoreHashChange: false,
initQueue: 0,
initType: disabled ? "wb-basic-init" : "wb-init",

getPath: function( property ) {
return Object.prototype.hasOwnProperty.call( this, property ) ? this[ property ] : undef;
Expand All @@ -195,7 +196,7 @@ var getUrlParts = function( url ) {
var eventTarget = event.target,
isEvent = !!eventTarget,
node = isEvent ? eventTarget : event,
initedClass = componentName + "-inited",
initedClass = this.isDisabled ? componentName + "-basic-inited" : componentName + "-inited",
isDocumentNode = node === document;

// Filter out any events triggered by descendants and only initializes
Expand Down Expand Up @@ -225,8 +226,8 @@ var getUrlParts = function( url ) {
// Trigger any nested elements (excluding nested within nested)
$elm
.find( wb.allSelectors )
.addClass( "wb-init" )
.filter( ":not(#" + $elm.attr( "id" ) + " .wb-init .wb-init)" )
.addClass( this.initType )
.filter( ":not(#" + $elm.attr( "id" ) + " ." + this.initType + " ." + this.initType + ")" )
.trigger( "timerpoke.wb" );

// Identify that the component is ready
Expand Down Expand Up @@ -294,11 +295,6 @@ var getUrlParts = function( url ) {
len = wb.selectors.length,
i;

// Lets ensure we are not running if things are disabled
if ( wb.isDisabled && selector !== "#wb-tphp" ) {
return 0;
}

// Check to see if the selector is already targeted
for ( i = 0; i !== len; i += 1 ) {
if ( wb.selectors[ i ] === selector ) {
Expand Down Expand Up @@ -347,7 +343,7 @@ var getUrlParts = function( url ) {
}

// Keep only the non-nested plugin/polyfill elements
$elms = $foundElms.filter( ":not(.wb-init .wb-init)" ).addClass( "wb-init" );
$elms = $foundElms.filter( ":not(." + this.initType + " ." + this.initType + ")" ).addClass( this.initType );
} else {
$elms = $( selectorsLocal.join( ", " ) );
}
Expand Down Expand Up @@ -586,7 +582,7 @@ Modernizr.load( [
let isTrident = new Boolean( window.navigator.msSaveOrOpenBlob );

// Bind the init event of the plugin
$document.one( "timerpoke.wb wb-init." + componentName, selector, function() {
$document.one( "timerpoke.wb " + this.initType + "." + componentName, selector, function() {

// Start initialization
wb.init( document, componentName, selector );
Expand Down
33 changes: 31 additions & 2 deletions src/plugins/data-ajax/data-ajax-en.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,8 +42,8 @@
<section>
<h4>data-ajax-extra-en.html</h4>
<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
&lt;h4&gt;J'ai été affiché via Ajax&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. J'ai été affiché via Ajax. J'ai été affiché via Ajax.&lt;/p&gt;
&lt;h4&gt;I was ajaxed in&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;</code></pre>
</section>

Expand Down Expand Up @@ -366,3 +366,32 @@
&lt;/div&gt;</code></pre>
</details>
</section>

<section>
<h2>Activate the plugin in basic html mode (<code>data-wb-basic-ajax=true</code>)</h2>
<section>
<h3>Example</h3>
<section data-wb-basic-ajax=true data-ajax-after="ajax/data-ajax-extra-en.html" class="original">
<h4>Hello World</h4>
<p>Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text. Example text.</p>
</section>
<details>
<summary>View code</summary>
<section>
<h4>In-page HTML</h4>
<pre><code>&lt;section data-wb-basic-ajax=true data-ajax-after="ajax/data-ajax-extra-en.html" class="original"&gt;
&lt;h4&gt;Hello World&lt;/h4&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;/section&gt;
</code></pre>
</section>
<section>
<h4>data-ajax-extra-en.html</h4>
<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
&lt;h4&gt;I was ajaxed in&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;</code></pre>
</section>
</details>
</section>
</section>
28 changes: 28 additions & 0 deletions src/plugins/data-ajax/data-ajax-fr.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -364,3 +364,31 @@
&lt;/div&gt;</code></pre>
</details>
</section>

<section>
<h2>Activer le plugiciel en version HTML simplifiée (<code>data-ajax-after</code>)</h2>
<section>
<h3>Exemple</h3>
<section data-wb-basic-ajax=true data-ajax-after="ajax/data-ajax-extra-fr.html" class="original">
<h4>Bonjour tout le monde</h4>
<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>
</section>
<details>
<summary>Visualiser le code</summary>
<section>
<h4>HTML dans la page</h4>
<pre><code>&lt;section data-wb-basic-ajax=true data-ajax-after="ajax/data-ajax-extra-fr.html" class="original"&gt;
&lt;h4&gt;Bonjour tout le monde&lt;/h4&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;/section&gt;</code></pre>
<section>
<h4>data-ajax-extra-fr.html</h4>
<pre><code>&lt;section class=&quot;ajaxed-in&quot;&gt;
&lt;h4&gt;J'ai été affiché via Ajax&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;</code></pre>
</section>
</section>
</details>
</section>
</section>
27 changes: 25 additions & 2 deletions src/plugins/data-ajax/data-ajax.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,11 +34,34 @@ var componentName = "wb-data-ajax",
],
selectorsLength = selectors.length,
selector = selectors.join( "," ),
initEvent = "wb-init." + componentName,
initEvent = wb.isDisabled ? "wb-basic-init" + selector : "wb-init" + selector,
updateEvent = "wb-update." + componentName,
contentUpdatedEvent = "wb-contentupdated",
$document = wb.doc,
s,
basicInit = function( event ) {

// Start initialization
// returns DOM object = proceed with init
// returns undefined = do not proceed with init (e.g., already initialized)
var ajxInfo = getAjxInfo( event.target ),
ajaxType = ajxInfo.type,
elm = wb.init( event, componentName + "-" + ajaxType, selector );

// Run the plugin only if data-wb-basic-ajax attribute is present
if ( $( elm ).data( "wbBasicAjax" ) ) {
if ( elm && ajxInfo.url ) {

ajax.call( this, event, ajxInfo );

// Identify that initialization has completed
wb.ready( $( elm ), componentName, [ ajaxType ] );
}
} else {
wb.ready( $( elm ), componentName );
}
},


/**
* @method init
Expand Down Expand Up @@ -209,7 +232,7 @@ $document.on( "timerpoke.wb " + initEvent + " " + updateEvent + " ajax-fetched.w

case "timerpoke":
case "wb-init":
init( event );
( wb.isDisabled ) ? basicInit( event ) : init( event );
break;
case "wb-update":
ajax( event );
Expand Down