Categories
Plugins

blapy

Blapy

If you like Blapy, I’ll be pleased that you star it ūüôā

Blapy is a jQuery plugin that helps you to create and manage ajax and single page web applications (SPA) with almost no javascript coding to do it.
Your web application is built the usual way of generating web pages like with php or any standard CMS and Blapy will transform it into a dynamic web application with ajaxified contents.
So, it may help you to transform your “normal” web site in a web application without the hassle of changing the way you develop websites.
Blapy will speed up your page load too as it won’t load all the internet files every page change but only the requested new contents.
Blapy is json compliant too and eases the integration of ajax/rest API with templating and routing services very simple to use… Blapy will be the “V-iew” in an MVC application approach…
The best of all is that your web application will be fully SEO compliant as Blapy uses normal URLs to do the routing and your html rendering output from your server to update your application blocks!
Have a look on the “Hello World” demo and other demos
Go and see the demo: http://www.intersel.net/demos/intersel/Blapy/demos/helloworld/
You can have a look on a more complete example based on the SB Admin 2 – Free Bootstrap Admin Theme (you can see the original one here)
or test the “To do list” web Apps demo made with Blapy and inspired from TodoMVC
This one allows to dynamically load and display blapy block contents that were hidden and which need to be displayed as they became visible.
All the demos found in the demos directory can be tested there : http://www.intersel.net/demos/intersel/Blapy/demos/
We invite you to have a deep look in the code source of the demos as they use quite every possible features and configurations available in Blapy as they are used to test the library.
How to install
As it is a simple jQuery plugin… copy all the provided Blapy directories somewhere in your project, then include the needed javascript libraries in your code then call the Blapy function… and you’re done…
As an “Hello world” example:
¬†¬†¬†¬†¬†¬†¬†¬†Hello¬†World…¬†¬†

   
Table of Contents

Blapy
Have a look on the “Hello World” demo and other demos
Who may need it?
Why would I use that?!
How does it work?
How to configure my pages to become pages of a web application?
General algorithm of Blapy
.Blapy(options)
Blapy Blocks
Blapy Links
Triggered events

Blapy_PageLoaded
Blapy_PageReady
Blapy_beforePageLoad
Blapy_beforeContentChange
Blapy_afterContentChange
Blapy_doCustomChange
Blapy_ErrorOnPageChange

Sending events to Blapy

“loadURL” event
“postData” event
“updateBlock” event

Blapy parameters sent when calling a URL
Blapy animation plugin functions
LIBRARY DEPENDENCIES
FAQ
Problem resolutions
Contact

Who may need it?
Everyone using a CMS that generates web pages from a server and would like to transform his website to a client application-like website, ie that does not reload each page during the user navigation but only the needed blocks within the page.
Everyone who…

would like to keep the way he builds websites but would like to have it behaves like an ajax web application.
gave up with AngularJS and other javascript frameworks to build web app… like me ūüėČ
wants to integrate json REST API with a simple approach without coding…
is starting with Javascript…
does not want to learn a Nth new framework to do websites…
wants to keep the application SEO compliant with google…

And, as I just discovered it recently, for those who are using pjax, Blapy may be a good alternative too… You’ll tell me!
Why would I use that?!
The concept of a web application getting data through REST Api with a client application that is doing the job of connecting the whole to build an application is quite a difficult job with a steep learning curve…
Whereas PHP -or whatever web server languages- websites built on a standard CMS are easier to handle… Any standard CMS does the page rendering job quite naturally for years… Except that it reloads pages when clicking a link… or it needs to develop ajax calls to dynamically update parts of the page…
So, the idea is to provide a simple environment that don’t change your habits when creating your website without having the hassle of creating ajax calls.
The benefits of using Blapy?

no difficult framework to understand how to build a web application
no REST or Ajax url end points to develop. Of course, you can do that if you like to have your application that way ūüėČ
no change in your habit to develop website: building the pages with Blapy don’t change from the “static” usual way of doing a website, meaning you can continue to use your standard LAMP and CMS environement
configuration is simple and quite natural: it uses html5 “data” attributes to configure the Blapy configuration and there is quite nothing to do from an existing website ūüôā
the ajax things are done behind the scene with no js lines of code to implement them
the history of browsing is kept as any smart framework
completly compliant with any existing html/js code
SEO compliant as the server keeps the control on the application behaviour on the loaded pages and blocks, and so it is able to deliver correct contents to search engines as google.

How does it work?
The main simple idea behind Blapy is to automatically and dynamically bind and update html blocks in ajax during the web navigation from page to page.
Simple ūüėČ but powerful…
Rules defined on the html blocks with data attributes will specify how the blocks should be updated with their new dynamic contents.
let’s have a first html file test1.html with some blocks with special attributes we will see later on…
  

I’m¬†test1.html¬†file

  

      

  • Hello¬†World!
  • ¬†¬†

  • How¬†is¬†it¬†going?
  • ¬†¬†

    Hello World  


Let’s imagine now that you would like that the website loads and updates only the “mainContainer” part without updating the whole page when we click on the test2.html link…
You surely know that you would need to call a URL in ajax, get the new content from the server and update the container with jQuery html function…
Perhaps meet some problem with the browser history when going back… etc… etc…
With Blapy, just create a second test2.html file as usual: it will be quite the same than test1.html (let’s imagine the files are php generated…) with a new content in the “mainContainer” part :
  

I am test2.html file

  

        How is it going?  


These two html files will load and behave normally if you load them and click the links.
Well, just add at the end of your files this little script :

You will then see that when clicking on the page links, only the ‘data-blapy-container’ block is changed without reloading the whole page! You can see that as the title has not changed…
Tada! you’ve got a client web application ūüôā
How to configure my pages to become pages of a web application?
Identify the common blocks between your different pages

Identify the common blocks (div, p, … html tags) between your pages. When you use a CMS, these blocks are the same ones than those you identified when building your website.

        How is it going?  

Tell to Blapy that these blocks are the ones that may be updated from page to page:

add a “data-blapy-container” attribute set to true in order to configure this container as a Blapy container
give a name identifier to the container with the “data-blapy-container-name” attribute in order to identify this content block as unique.
give a content name to identify each unique page content to be used with the “data-blapy-container-content” attribute.

        How is it going?  

You can create as many Blapy containers as you need parts of your page to be updated.
Identify the links that update contents

Identify the links pointing to pages that have contents you would like to use to update the content blocks of your current page.

Hello World!

Tell the links that they need to be handled by Blapy by using the “data-blapy-link” attribute.

Hello World!

Call Blapy jquery script on the body of your page (or any main div in your page)… The html block should have an “id” attribute.

      How is it going?  

 
That’s it: your blocks will be automatically updated by ajax calls to the other pages according to your configuration.
General algorithm of Blapy
The general algorithm of Blapy is the following:

when a link is called (clicked) and if it is a “blapy-link”,

get the new content from the clicked page through an ajax call
get all the “blapy-container” of the current page
for each “blapy-container” of the current page

Get the “blapy-container” with the same name (“blapy-container-name”) from the new page
Compare “blapy-container-content” : is the current “blapy-container-content” different from the new one?

if “yes”, then change the “blapy-container” with the new one

.Blapy(options)
Blapy is the jQuery function that starts your web application.
$(“#“).Blapy(options);
Options
Options is a javascript object. It can take as input the following possible option parameters :

debug: (default:false) if true, then log things in the console
LogLevel: (default:1) log level: 1: error ; 2: warning; 3: notice
AlertError: (default:false) show an alert box on error messages if true
activeSammy: (default:false) if set to true, will use Sammy for URL routing
pageLoadedFunction: (default:null) function to call when the page is loaded
pageReadyFunction: (default:null) function to call when the page is ready
beforePageLoad: (default:null) function to call before the page load the new content
beforeContentChange: (default:null) function to call when a Blapy bloc will have its content changed
afterContentChange: (default:null) function to call after a Blapy bloc has its content changed
afterPageChange: (default:null) function to call when the page had all its content changed
onErrorOnPageChange: (default:null) function to call when the page got an error during change
fsmExtension: (default:null) Finite State Machine (iFSM) definition in order to extend the default blapy’s iFSM engine

Example:
¬†¬†¬†¬†$(¬†document¬†).ready(function()¬†{¬†¬†¬†¬†¬†¬†¬†¬†$(‘#bodyId’).Blapy({activeSammy:true,debug:true,LogLevel:2})¬†¬†¬†¬†});
Remarks
Blapy absolutely needs to be called on an object with an “id” set.
That means that if you’d like to bind Blapy to the “body”, you have to set an id on the body element:

You can have as many separate Blapy blocks as you like.
¬†¬†¬†¬†$(¬†document¬†).ready(function()¬†{¬†¬†¬†¬†¬†¬†¬†¬†$(‘#myBlapyApp1,#myBlapyApp2,#myBlapyApp3′).Blapy();¬†¬†¬†¬†});
This way, you will be able to tell which application a Blapy block should update when loaded.
See “data-blapy-applyon” option on Blapy blocks.
Blapy Blocks
Blapy blocks are the parts where you would like the content to be updated from external contents downloaded through ajax calls by Blapy.
A Blapy block may be any html element where you have set Blapy attributes that define the behaviour as Blapy blocks.
These attributes are analysed from the external Blapy block in order to know how the updating process should be applied on the current block.
To define a Blapy Block, you need to use the following attributes:
Attributes

data-blapy-container: set to “true”, tells that the current html tag is Blapy block.
data-blapy-container-name: gives the name of the Blapy block. It will identify the block.
data-blapy-container-content: gives the subject of the content. It will identify the content of the block.
data-blapy-update (option, default:’update’): tells how Blapy should update the Blapy block when an external page or content is loaded.

update: if the container-name is found from the external content and its container-content is different from the current page,
the Blapy block of the current page is to be replaced by the new one
force-update: if the container-name is found from the external content, the Blapy block of the current page is to be replaced by the new one
append: if the container-name is found from the external content, the external content should be added to the end of the current Blapy block content.
prepend: if the container-name is found from the external content, the external content should be added before the current Blapy block content.
replace: if the container-name is found from the external content, the inner content of the external content should replace the current Blapy block content.
json: the content of the current container is considered to be a (Mustache or json2html) template to apply on json data.
When the blapy block needs to be updated, then it is considered that the new content is a json object or an array of json objects that will be parsed with the given template.
These json data will be applied on the template. These parameters allows the json configuration:

data-blapy-template-file (option): defines a URL called to get the template to apply on json data if the container (that is used to define the template) is empty
data-blapy-template-wrap (option): once the json data are rendered, it is possible to wrap the result by giving the wrap html tag (ex: “

“)
data-blapy-template-header (option): once the json data are rendered, it is possible to set a header (ex: “

“)
data-blapy-template-footer (option): once the json data are rendered, it is possible to set a footer (ex: “

“)
data-blapy-template-default-id (option): if multiple templates are set, set the default one to use on initialization. Default to the first found one.
data-blapy-template-mustache-delimiterStart (option): available for mustache template, blapy will change the default start and end delimiters and use the new mustache delimiters when parsing the block. Actually, the new delimiters are set at the beginning of the template just before rendering, allowing blocks parsed within blocks with different rendering tags. Example: “<%" data-blapy-template-mustache-delimiterEnd (option): available for mustache template and should be defined if data-blapy-template-mustache-delimiterStart is defined. Example: "%>”
data-blapy-template-init (option): a (REST) URL to get json data to use to initialize the block

data-blapy-template-init-params (option): json string of the parameters to send to the URL
data-blapy-template-init-method (option): ‘GET’ (default) || ‘POST’ || ‘PUT’ || ‘DELETE’
data-blapy-template-init-fromproperty (option): path to the property in the returned json that should be used as data input. eg: “data.results” will use the object found in jsonReturnData.data.results as the json data to use
data-blapy-template-init-search (option): “==[,==,…]” will get the objects that match the query. Examples:

id==2, will get all objects that have their ‘id’ property equals to ‘2’
id== , will get all objects that have an ‘id’ property
==2, will get all objects that have properties equals to ‘2’

data-blapy-template-init-processdata (option): a function name that take a json object and should return a json object. It will be called once the json data is received from the url and before to be processed in its blapy block.
data-blapy-template-init-purejson (option): ‘0’ (“blapy oriented” json) || ‘1’ (default) (not “blapy oriented” json),

remove: if the container-name is found from the external content, then the Blapy block is to be removed.
custom: if the container-name is found from the external content, then we call the custom change ‘doCustomChange’ if defined
and send the Blapy_doCustomChange event.
[an animation plugin function name]: if the container-name is found from the external content,
function to call and apply to do the content change.
The available plugin functions may be found in the Blapy_AnimationPlugins.js file.

data-blapy-update-rule: [‘local’|’external’ (default)], if ‘local’, will use the data-blapy-update rule defined in the current block, else will use the one defined in the external block. Exception to the default value, a “json” block is always “local”.
data-blapy-applyon (option, default:’all’): By default, the Blapy blocks loaded by a Blapy link will be tried on all Blapy blocks.
If defined, the external container will only be applied on the matched Blapy blocks contained in the given application id element.
data-blapy-href (option): a URL to call on data-blapy-updateblock-time (if set) or on data-blapy-updateblock-ondisplay
data-blapy-updateblock-time (option): a time in milliseconds when the URL set in ‘data-blapy-href’ should be called to update the block.
data-blapy-updateblock-ondisplay (option): if set to true, the block will be initialized from data-blapy-href or from data-blapy-template-init (if data-blapy-update is set to “json”) when the element becomes visible (after a scroll).

Examples
                    

a Content

¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†This¬†is¬†content…¬†¬†¬†¬†¬†¬†¬†¬†

                

Blapy Links
A Blapy Link is a url link that should be handled by Blapy.
A Blapy link may be attached to the html “” or “

” tags by specifying a “data-blapy-link” attribute on it.
It may be attached to other kind of tag, then you will have to specify the “data-blapy-href” attribute to explicit the hyperlink.
Remarks on blapy links on tags that are not “a” or “form”

In this case, Blapy automatically binds a click event on this element in order to simulate an anchor.
The routing mecanism done with Sammy does not apply on them.

To define a Blapy Link, here are its attributes:
Attributes

data-blapy-link: tells that the current link has to be handled by Blapy.

set to “true” (or void), Blapy will “get” the content of the link and will process the blapy blocks matching with the current application content

Remarks: if data-blapy-link is set to a form, the “method” configuration (eg. “GET”, “POST”, “PUT”, “DELETE”) is used to get the content.
You can add this proprety “method” to a A dom element to set the method to use when the link is clicked.

data-blapy-href: if not bound to a “A” or “FORM” tag, it tells the hyperlink to use.

data-blapy-params: a json string to set paramaters to send along to the link to call

data-blapy-embedding-blockid: tells to embed the return source of the link in a blapy block of the given name. Usefull for return sources that are not ‘blapy’ formatted and that address a specific block…

data-blapy-active-blapyId: useful in the case the link is embedded in several different blapy objects, it gives the correct blapy object for the link. If not set, the link will be processed by all the blapy objects that contain the link.

data-blapy-noblapydata: if set to “1”, no blapy information data are sent to the URL.

Examples

Triggered events
Blapy generates the specific events during the Blapy object change processing.
Some events are sent to the DOM element on which you create the jquery blapy object, some apply on the blapy block where occurs the processing.
Blapy_PageLoaded
Triggered when a page is fully and normally loaded and sent to the blapy object once when it is initialized.
Blapy_PageReady
Triggered when the page is ready after a change in the page, and sent to the blapy object.
It is triggered after a “loadURL” or “postData” event sent to Blapy (see hereafter).
Blapy_beforePageLoad
Triggered before a page loads its new content and sent to the blapy object.

Parameters: the Blapy json data sent to the URL

[data].aUrl: url to call
[data].params: json of the parameters to send to aUrl

Blapy_afterPageChange
Triggered after a page loaded its new content and sent to the blapy object.

Parameters: the Blapy json data sent to the URL

[data].aUrl: url to call
[data].params: json of the parameters to send to aUrl

Blapy_beforeContentChange
Triggered before a Blapy block content change and sent to the (jquery) blapy Block that will change.

Parameters:

the Blapy block

Blapy_afterContentChange
Triggered after a a Blapy block content has changed and sent to the (jquery) blapy Block that has changed..

Parameters:

the Blapy block

Blapy_doCustomChange
Triggered if data-blapy-update=’custom’, sent to the object that should change its content

Parameters:

newObject : the new Blapy Block

Blapy_ErrorOnPageChange
Triggered when an error occured during a page content change.

Parameters:

anError: the error message

Examples
To listen to Blapy events, you may use the jQuery ‘on’ function as in this example:
¬†¬†¬†¬†$(“#myBlapy”).on(¬†“Blapy_ErrorOnPageChange”,¬†function(event,anError)¬†{¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†alert(¬†anError¬†);¬†¬†¬†¬†});¬†¬†¬†¬†$(“#myBlapy”).on(¬†“Blapy_beforePageLoad”,¬†function(event,anError)¬†{¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†alert(¬†‘call¬†before¬†loading¬†new¬†blocks…’¬†);¬†¬†¬†¬†});¬†¬†¬†¬†//assure¬†that¬†the¬†event¬†will¬†be¬†received¬†by¬†the¬†new¬†DOM¬†object¬†#mainContainer¬†if¬†it¬†has¬†been¬†replaced¬†by¬†Blapy¬†¬†¬†¬†$(document).on(¬†“Blapy_afterContentChange”,”#mainContainer”,¬†function(event,aBlock)¬†{¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†alert(¬†‘Blapy_afterContentChange¬†of¬†block¬†‘+$(aBlock).attr(‘id’));//aBlock¬†refer¬†to¬†the¬†#mainContainer¬†dom¬†object¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†¬†});
Sending events to Blapy
You can activate some features of Blapy by sending events to it with the ‘trigger’ function of jQuery:
$(‘#‘).trigger(,{¬†¬†aUrl:,¬†¬†params:{}¬†¬†…¬†¬†});
“loadURL” event
This event allows you to call a URL.
$(‘#‘).trigger(‘loadUrl’,{¬†¬†aUrl:,¬†¬†params:{¬†¬†¬†¬†embeddingBlockId:¬†¬†},¬†¬†noBlapyData:”<0|1>“});
params

aUrl: the Url to call
params:

embeddingBlockId (optional): a block container name (data-blapy-container-name)

noBlapyData: if set to “1”, no blapy information are sent (default: blapy data are sent)

Example
$(‘#myBlapy’).trigger(‘loadUrl’,{¬†¬†aUrl:”helloworld_2.php”,});
“postData” event
$(‘#‘).trigger(‘postData’,{¬†¬†aUrl:”“,¬†¬†params:{¬†¬†¬†¬†embeddingBlockId:””¬†¬†},¬†¬†method:”“,¬†¬†noBlapyData:”<0|1>“});
params

aUrl: the Url to call
params:

embeddingBlockId (optional): a block container name (data-blapy-container-name)
any property/value to send to the server

method (option)

‘post’ (default)
‘put’
‘delete’
‘get’ (same behaviour than “loadURL” event in this case)

noBlapyData: if set to “1”, no blapy information are sent (default: blapy data are sent)

Example
$(“#myBlapy”).trigger(‘postData’,{¬†¬†aUrl:”testForm.php”,¬†¬†params:{fname:’Emmanuel’,lname:’Podvin’}});
“updateBlock” event
This event allows you to call Blapy to directly update a Blapy block.
$(‘#‘).trigger(‘updateBlock’,{¬†¬†html:,¬†¬†params:{embeddingBlockId:}});
params

html

any blapy content (blapy blocks, json string or objects, …)

params:

embeddingBlockId (optional): a block container name (data-blapy-container-name)

Example
$(‘#myBlapy’).trigger(‘updateBlock’,{¬†¬†¬†¬†html:”[{name:”John¬†Doe”}]”,¬†¬†¬†¬†params:{embeddingBlockId:’myBlapyBlock’}¬†¬†});
“reloadBlock” event
This event allows you to reload the Blapy blocks using their init configuration (init url).
$(‘#‘).trigger(‘reloadBlock’,{¬†¬†params:{¬†¬†¬†¬†embeddingBlockId:,¬†¬†¬†¬†templateId:¬†¬†}});
params

params:

embeddingBlockId (optional): a block container name (data-blapy-container-name). If none given, all the json blocks are reloaded.
templateId (optional): an id of an xmp object that describes a json template of a json block. if “embeddingBlockId” set, then only this block will be updated, else all the blocks will be updated with this new setting.

Example
$(‘#myBlapy’).trigger(‘reloadBlock’,{¬†¬†params:{embeddingBlockId:’myBlapyBlock’}});
Blapy parameters sent when calling a URL
When Blapy calls a ‘Blapy Link’, the following parameters are sent along the other GET/POST/PUT/DELETE parameters:

blapycall=1 – tells that the call is coming from Blapy
blapyaction=[anAction] -tells the kind of action that will be operated

update: blocks will be updated

Knowing these parameters allows you to optimize the generated html returned by the server to the client, so sending back only the useful html blocks instead of the full html page.
You can deactivate the sending of these data by configuring the data-blapy-noblapydata parameter.
JSON template
The json template are the content definition of a blapy json block type (cf. data-blapy-update) that will be parsed on json data sent to the block.
A json template may use “Mustache” or “json2html” tags.
When the blapy block has its property “data-blapy-update” set to “json”, the content of the block is considered to be a template.
Example
  My name is {{firstname}}!

if the response of “myJsonData.json” is an array of json data, something like that:
[¬†¬†{“firstname”:”Emmanuel”},¬†¬†{“firstname”:”Maryse”},¬†¬†{“firstname”:”Augustin”},]
The resulting parse of the blapy block in the browser will be:
  My name is Emmanuel!
  My name is Maryse!
  My name is Augustin!

Remarks
It is possible to have blapy blocks inside your template. They will be parsed once the template is applied on the json data. This way, you can have blapy blocks that are configured with your json data…
If the received json data is an array (like in the above example), Blapy will automatically add a property “blapyIndex” setting the index of the item in the array.
For the above example, the json data to be parsed on the template will actually be
[¬†¬†{“firstname”:”Emmanuel”,”blapyIndex”:”1″},¬†¬†{“firstname”:”Maryse”,”blapyIndex”:”2″},¬†¬†{“firstname”:”Augustin”,”blapyIndex”:”3″},]
This “blapyIndex” may be used in your template as any other of properties (${blapyIndex} or {{blapyIndex}})…
It starts from 1… if json data is not an array, then blapyIndex is set to 0.
Multiple templates
According to the context, you may need to change the template of your block to display differently your data.
It is so possible to define several templates for the same block. These templates can be selected through the Blapy API with the message “reloadBlock”.
The way to describe them needs the use of the XMP tag and the “data-blapy-container-tpl” (to be set to true) and “data-blapy-container-tpl-id” properties, like in the following example:
The “data-blapy-template-default-id” property may be used to set the default template by default.
      My name is {{firstname}}!
  

¬†¬†<xmp¬†style="display:none"¬†data-blapy-container-tpl="true"¬†data-blapy-container-tpl-id="secondTPL">¬†¬†¬†¬†Is¬†{{firstname}}¬†your¬†firstname?<br />¬†¬†<xmp></section> <p>You may call the &#8220;reloadBlock&#8221; event message to change the template. It will reload the json data from the server too.<br /> Blapy animation plugin functions<br /> It is possible to create its own animation plugin functions on Blapy blocks when they are loaded.<br /> It is also a way to hook features on the content that will be placed in a Blapy block&#8230;<br /> The prototype of an animation plugin function is :<br /> theBlapy.prototype.myAnimationFunction¬†=¬†function¬†(oldContainer,newContainer)¬†{}<br /> Have a look in the Blapy_AnimationPlugins.js and add your new functions in it inspired by the existing functions.<br /> LIBRARY DEPENDENCIES<br /> To work properly, you need to include the following javascript libraries:</p> <p>jQuery (>= 3.x)</p> <p><script type="text/javascript" src="extlib/jquery-3.3.1.min.js"></script></p> <p>iFSM by intersel</p> <p>this library manages finite state machines and needs these libraries:</p> <p>doTimeout by &#8220;Cowboy&#8221; Ben Alman<br /> this library brings some very usefull feature on the usual javascript setTimeout function like Debouncing, Delays &#038; Polling Loops, Hover Intent&#8230;<br /> <script type="text/javascript" src="extlib/jquery.dotimeout.js"></script></p> <p>attrchange by Selvakumar Arumugam</p> <p>a simple jQuery function to bind a listener function to any HTML element on attribute change<br /> <script type="text/javascript" src="extlib/jquery.attrchange.js"></script></p> <p>json2html (optional if blapy block does not use json feature or use &#8220;Mustache&#8221; template engine)</p> <p>json</p> <p><a href="https://github.com/intersel/Blapy" target="_blank" rel="noopener"><strong>GitHub Repo</strong></a></p> <div class="crp_related "><h4>Related Plugins:</h4><ul><li><a href="https://jqueryplugins.net/2021/08/18/jquery-scrollable/" class="crp_link post-612"><span class="crp_title">jquery.scrollable</span></a><span class="crp_excerpt"> jQuery.scrollable Setup ‚Äď Why? ‚Äď Usage ‚Äď Browser support ‚Äď Build&hellip;</span></li><li><a href="https://jqueryplugins.net/2021/08/18/wjs/" class="crp_link post-1027"><span class="crp_title">wjs</span></a><span class="crp_excerpt"> Introduction Wjs is a front end development toolkit designed to bring&hellip;</span></li><li><a href="https://jqueryplugins.net/2021/08/18/jquery-mockjax/" class="crp_link post-98"><span class="crp_title">jquery-mockjax</span></a><span class="crp_excerpt"> jQuery Mockjax: Ajax request mocking http://github.com/jakerella/jquery-mockjax/ There are some minor breaking&hellip;</span></li></ul><div class="crp_clear"></div></div> </div><!-- .entry-content --> </div><!-- .post-inner --> <div class="section-inner"> </div><!-- .section-inner --> <nav class="pagination-single section-inner" aria-label="Post" role="navigation"> <hr class="styled-separator is-style-wide" aria-hidden="true" /> <div class="pagination-single-inner"> <a class="previous-post" href="https://jqueryplugins.net/2021/08/18/socratrees-socratrees-webplugin/"> <span class="arrow" aria-hidden="true">&larr;</span> <span class="title"><span class="title-inner">@socratrees/socratrees-webplugin</span></span> </a> <a class="next-post" href="https://jqueryplugins.net/2021/08/18/interactiveimagejs/"> <span class="arrow" aria-hidden="true">&rarr;</span> <span class="title"><span class="title-inner">interactiveimagejs</span></span> </a> </div><!-- .pagination-single-inner --> <hr class="styled-separator is-style-wide" aria-hidden="true" /> </nav><!-- .pagination-single --> </article><!-- .post --> </main><!-- #site-content --> <div class="footer-nav-widgets-wrapper header-footer-group"> <div class="footer-inner section-inner"> <aside class="footer-widgets-outer-wrapper" role="complementary"> <div class="footer-widgets-wrapper"> <div class="footer-widgets column-one grid-item"> <div class="widget widget_block"><div class="widget-content"> <div class="wp-block-group"><div class="wp-block-group__inner-container"> <figure class="wp-block-image size-full"><a href="https://jmjwebdesign.com/" target="_blank"><img loading="lazy" width="300" height="50" src="https://jqueryplugins.net/wp-content/uploads/2021/08/jmj-website-design-new-logo-dark-bg-e1628722344245.png" alt="" class="wp-image-23"/></a></figure> </div></div> </div></div><div class="widget widget_block"><div class="widget-content"> <div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div> </div></div><div class="widget widget_block"><div class="widget-content"> <div class="wp-block-group"><div class="wp-block-group__inner-container"></div></div> </div></div> </div> <div class="footer-widgets column-two grid-item"> <div class="widget widget_block widget_categories"><div class="widget-content"><ul class="wp-block-categories-list wp-block-categories"> <li class="cat-item cat-item-4"><a href="https://jqueryplugins.net/category/insights/">Insights</a> (5) </li> <li class="cat-item cat-item-6"><a href="https://jqueryplugins.net/category/plugins/">Plugins</a> (1,718) </li> <li class="cat-item cat-item-5"><a href="https://jqueryplugins.net/category/trends/">Trends</a> (1) </li> </ul></div></div> </div> </div><!-- .footer-widgets-wrapper --> </aside><!-- .footer-widgets-outer-wrapper --> </div><!-- .footer-inner --> </div><!-- .footer-nav-widgets-wrapper --> <footer id="site-footer" role="contentinfo" class="header-footer-group"> <div class="section-inner"> <div class="footer-credits"> <p class="footer-copyright">&copy; 2021 <a href="https://jqueryplugins.net/">JQuery Plugins</a> </p><!-- .footer-copyright --> <p class="powered-by-wordpress"> <a href="/privacy-policy/">Privacy/Contact</a> </a> </p><!-- .powered-by-wordpress --> </div><!-- .footer-credits --> <a class="to-the-top" href="#site-header"> <span class="to-the-top-long"> To the top <span class="arrow" aria-hidden="true">&uarr;</span> </span><!-- .to-the-top-long --> <span class="to-the-top-short"> Up <span class="arrow" aria-hidden="true">&uarr;</span> </span><!-- .to-the-top-short --> </a><!-- .to-the-top --> </div><!-- .section-inner --> </footer><!-- #site-footer --> <script src='https://jqueryplugins.net/wp-includes/js/dist/vendor/regenerator-runtime.min.js?ver=0.13.7' id='regenerator-runtime-js'></script> <script src='https://jqueryplugins.net/wp-includes/js/dist/vendor/wp-polyfill.min.js?ver=3.15.0' id='wp-polyfill-js'></script> <script id='contact-form-7-js-extra'> var wpcf7 = {"api":{"root":"https:\/\/jqueryplugins.net\/wp-json\/","namespace":"contact-form-7\/v1"}}; </script> <script src='https://jqueryplugins.net/wp-content/plugins/contact-form-7/includes/js/index.js?ver=5.4.2' id='contact-form-7-js'></script> <script src='https://jqueryplugins.net/wp-includes/js/wp-embed.min.js?ver=5.8.1' id='wp-embed-js'></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> </body> </html>
header
footer