Edit Draft: Draft/261998

You do not have permission to edit this page, for the following reason:

The action you have requested is limited to users in the group: Users.

Main
css and js

Title:

Content:

For the js code, see [[MediaWiki:Common.js]]

[edit: not added ]
<pre>
/* Lazy loading */
var callback = function(entries, observer) {
    entries.forEach(function(entry){
        if (entry.isIntersecting) {
            var tofetch = entry.target.getAttribute('data-fetch');
            var params = {
                action: 'parse',
                text: tofetch,
                contentmodel: 'wikitext',
                format: 'json'
              },
             api = new mw.Api();
             api.post( params ).done( function ( data ) {
                console.log(data.parse.text['*']);
                entry.target.innerHTML = data.parse.text['*'];
                observer.unobserve(entry.target);
              } )
              .fail( function (data){
                console.log('fail', data);
                entry.target.innerHTML = data+' error';
             });
            }
    });
};

var options = {
  root: document,
  rootMargin: '0px',
  threshold: 1.0
};

var observer = new IntersectionObserver(callback, options);
$('document').ready(function(){
      document.querySelectorAll('[data-fetch]').forEach(function(target){
          observer.observe(target);
       });
});
</pre>

<h2>Example: fetch code</h2>
<pre><div data-fetch="<nowiki>{{#widget:Link
|type=button
|text=Fetched this when visible
|hrefsurround=#
|class=btn btn-warning}}</nowiki>">
</div></pre>
<div data-fetch="<nowiki>{{#widget:Link
|type=button
|text=Fetched this when visible
|hrefsurround=#
|class=btn btn-warning}}</nowiki>">
</div>

<h2>Same but add BS spinner </h2>

<div data-fetch="<nowiki>{{#ask: [[Class::Documentation]] |limit=5 }}
{{#widget:Link
|type=button
|text=Fetched this when visible
|hrefsurround=#
|class=btn btn-warning}}</nowiki>">

<div class="spinner-border text-secondary" role="status">
       <span class="sr-only">Loading...</span>
   </div>

</div>

<h2>Now with some interaction in WSForm</h2>

{{#tag:wsfield
|click to fetch
|type=button
|onclick=document.getElementById('click-to-fetch').setAttribute('style','display:block')
}}

<div id="click-to-fetch" style="display:none" data-fetch="<nowiki>{{#widget:Link
|type=button
|text=Fetched this by removing display:none
|hrefsurround=#
|class=btn btn-warning
}}</nowiki>">

</div>

Css

JavaScript

<html> tags cannot be used outside of normal pages.