javascript - Formstone asap.js proper usage in wordpress -
i trying use asap.js (docs: http://formstone.it/components/asap/) component on wordpress site. plugin provided formstone set of useful scripts. can't figure out how address wordpress content using script.
i tried code doesn;t seem work nor have errors in chrome's console. can provide me simple example, can start with?
jquery(document).ready(function ($) { var $content, $deferred; $(document).ready(function() { // bind asap events $(window).on("request.asap", pagerequested) .on("progress.asap", pageloadprogress) .on("load.asap", pageloaded) .on("render.asap", pagerendered) .on("error.asap", pageloaderror); $content = $(".mypagewrapper"); // init asap $.asap({ cache: false, selector: "a:not(.no-asap)", transitionout: function() { if ($deferred) { $deferred.reject(); } $deferred = $.deferred(); $content.animate({ opacity: 0 }, 1000, function() { console.log("animate complete"); $deferred.resolve(); }); return $deferred; } }); // remember init first page pagerendered(); }); function pagerequested(e) { // update state reflect loading console.log("request new page"); } function pageloadprogress(e, percent) { // update progress reflect loading console.log("new page load progress", percent); } function pageloaded(e) { // unbind old events , remove plugins console.log("destroy old page"); } function pagerendered(e) { // bind new events , initialize plugins console.log("render new page"); $content.animate({ opacity: 1 }, 1000); } function pageloaderror(e, error) { // watch load errors console.warn("error loading page: ", error); } });
the class="mypagewrapper" used in wordpress theme file content-page.php:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article class="mypagewrapper"> <?php the_content(); ?> </article> <?php endwhile; endif; ?>
you need return json object containing content replaced when making asap request. think work in wordpress, although there better way hook core filters:
<?php $isasap = (isset($_get["fs-asap"]) && $_get["fs-asap"] == "true"); ob_start(); if (have_posts()) : while (have_posts()) : the_post(); if (!$isasap) : ?> <article class="mypagewrapper"> <?php endif; the_content(); if (!$isasap) : ?> </article> <?php endif; endwhile; endif; if ($isasap) : // if asap request, return json object page pieces $page_content = ob_get_clean(); $asap_content = json_encode(array( ".mypagewrapper" => $page_content )); header("content-length: " . strlen($asap_content)); die($asap_content); endif; ?>
Comments
Post a Comment