How to use navigable method in wpt

Best JavaScript code snippet using wpt

developr.navigable.js

Source:developr.navigable.js Github

copy

Full Screen

1/**2 *3 * '||''|. '||4 * || || .... .... ... .... || ... ... ... ... ..5 * || || .|...|| '|. | .|...|| || .| '|. ||' || ||' ''6 * || || || '|.| || || || || || | ||7 * .||...|' '|...' '| '|...' .||. '|..|' ||...' .||.8 * ||9 * --------------- By Display:inline ------------- '''' -----------10 *11 * Navigable menus plugin12 *13 * Structural good practices from the article from Addy Osmani 'Essential jQuery plugin patterns'14 * @url http://coding.smashingmagazine.com/2011/10/11/essential-jquery-plugin-patterns/15 */16/*17 * The semi-colon before the function invocation is a safety18 * net against concatenated scripts and/or other plugins19 * that are not closed properly.20 */21;(function($, window, document)22{23 /*24 * window and document are passed through as local variables rather than as globals, because this (slightly)25 * quickens the resolution process and can be more efficiently minified.26 */27 // Objects cache28 var doc = $(document),29 // Global animation switch30 animate = true;31 // Navigable menus32 doc.on('click', '.navigable li, .navigable li > span, .navigable li > a', function(event)33 {34 // Only work if the element is the event's target35 if (event.target !== this)36 {37 return;38 }39 // Clicked element40 var clicked = $(this),41 // LI element42 li = $(this).closest('li'),43 // Sub-menu44 submenu = li.children('ul:first'),45 // List of all ul above the current li46 allUL = li.parentsUntil('.navigable', 'ul'),47 // Current li ul48 parentUL = allUL.eq(0),49 // Main ul50 mainUL = allUL.eq(-1),51 // Root navigable element52 root = mainUL.closest('.navigable'),53 // Settings54 settings = $.extend({}, $.template.navigable, root.data('navigable-options')),55 // Back button56 back = root.children('.back'),57 backText,58 // Load indicator59 load = root.children('.load'),60 // Other vars61 current, url, delayedOpen, text;62 // Prepare on first call63 if (!mainUL.hasClass('fixed'))64 {65 root.height(mainUL.outerHeight(true));66 mainUL.addClass('fixed');67 }68 // Create back button if needed69 if (back.length === 0)70 {71 // Text72 text = settings.backText || '&nbsp;';73 // Create element74 back = $('<div class="back"><span class="back-arrow"></span><span class="back-text">'+text+'</span></div>').prependTo(root).click(function(event)75 {76 var current = root.data('navigableCurrent'),77 target, left, backHeight, parentLi, parentLink;78 // If no current element, we're already at the top level79 if (!current)80 {81 back.stop(true)[animate ? 'animate' : 'css']({ marginTop: -back.outerHeight()+'px' });82 return;83 }84 // Get parent target85 target = current.parent().closest('ul');86 // Check if working on the main UL87 if (target.hasClass('fixed'))88 {89 right = 0;90 backHeight = 0;91 root.removeData('navigableCurrent');92 back.stop(true)[animate ? 'animate' : 'css']({ marginTop: -back.outerHeight()+'px' });93 }94 else95 {96 right = -target.parentsUntil('.navigable', 'ul').length*100;97 backHeight = back.outerHeight();98 root.data('navigableCurrent', target);99 // Text100 if (settings.backText)101 {102 backText.text(settings.backText);103 }104 else105 {106 parentLi = target.closest('li');107 parentLink = parentLi.children('a, span').first();108 if (!parentLink.length)109 {110 parentLink = parentLi;111 }112 backText.text(parentLink.contents().filter(function(){ return(this.nodeType == 3); }).text() );113 }114 }115 // Set root element size according to target size116 root.stop(true)[animate ? 'animate' : 'css']({ height: (target.outerHeight(true)+backHeight)+'px' });117 // Move whole navigation to reveal target ul118 mainUL.stop(true)[animate ? 'animate' : 'css']({ right: right+'%' });119 // Send close event120 current.parent().closest('li').trigger('navigable-close');121 });122 // Hide it123 back.css({ marginTop: -back.outerHeight()+'px' });124 }125 // Button126 backText = back.children('.back-text');127 // If there is a load indicator on, remove it first128 if (load.length > 0)129 {130 // Currently displayed UL131 current = root.data('navigableCurrent') || mainUL;132 // Animation and callback133 mainUL.stop(true)[animate ? 'animate' : 'css']({ right: -(current.parentsUntil('.navigable', 'ul').length*100)+'%' }, 'fast');134 load.stop(true).removeData('navigable-target');135 if (animate)136 {137 load.animate({ left: '-10%' }, 'fast', function()138 {139 load.remove();140 clicked.click();141 });142 // Prevent default behavior143 event.preventDefault();144 // Done for now145 return;146 }147 else148 {149 load.remove();150 }151 }152 // If there is a submenu153 if (submenu.length > 0)154 {155 // If not ready yet156 if (parentUL.outerHeight(true) === 0 && allUL.length < 3)157 {158 // Delay action159 delayedOpen = function()160 {161 if (parentUL.outerHeight(true) > 0)162 {163 animate = false;164 clicked.click();165 animate = true;166 }167 else168 {169 setTimeout(delayedOpen, 40);170 }171 };172 setTimeout(delayedOpen, 40);173 return;174 }175 // Set as current176 root.data('navigableCurrent', submenu);177 // Hide previously open submenus178 parentUL.find('ul').hide();179 // Display parent menus180 allUL.show();181 // Display it182 submenu.show();183 // Correct position if needed184 submenu.add(allUL.not(':last')).each(function(i)185 {186 var menu = $(this),187 parent = menu.parent();188 if ($.inArray(parent.css('position'), ['relative', 'absolute']) > -1)189 {190 menu.css('top', -parent.position().top+'px');191 }192 });193 /*194 * Animation195 */196 // Set root element size according to target size197 root.stop(true).height(parentUL.outerHeight(true)+back.outerHeight(true))[animate ? 'animate' : 'css']({ height: (submenu.outerHeight(true)+back.outerHeight())+'px' });198 // Move whole navigation to reveal target ul199 mainUL.stop(true)[animate ? 'animate' : 'css']({ right: -(allUL.length*100)+'%' });200 // Show back button201 back[animate ? 'animate' : 'css']({ marginTop: 0 });202 backText.text(settings.backText || clicked.contents().filter(function(){ return(this.nodeType == 3); }).text() );203 // Send open event204 li.trigger('navigable-open');205 // Prevent default behavior206 event.preventDefault();207 }208 else if (clicked.hasClass('navigable-ajax'))209 {210 // Get target url211 url = clicked.is('a') ? clicked.attr('href') : clicked.data('navigable-url');212 // If valid213 if (url && typeof url === 'string' && $.trim(url).length > 0 && url.substr(0, 1) !== '#')214 {215 // Load indicator216 load = $('<div class="load" style="left: -10%"></div>').appendTo(root);217 // Mémorise the current element in the load indicator, so in case of concurrent loads, only the last one gets open218 load.data('navigable-target', this);219 // Move whole navigation to reveal load indicator220 mainUL.stop(true)[animate ? 'animate' : 'css']({ right: -((allUL.length-1)*100+10)+'%' });221 // Show load222 load[animate ? 'animate' : 'css']({ left: '0%' });223 // Load submenu224 $.ajax(url, {225 error: function(jqXHR, textStatus, errorThrown)226 {227 // Refresh load notification since it may have changed since the request was sent228 var load = root.children('.load'),229 current;230 // If notification system is enabled231 if (window.notify)232 {233 window.notify('Menu loading failed with the status "'+textStatus+'"');234 }235 // If related load is still here236 if (load.length > 0 && load.data('navigable-target') === clicked[0])237 {238 // Currently displayed UL239 current = root.data('navigableCurrent') || mainUL;240 // Animation and callback241 mainUL.stop(true)[animate ? 'animate' : 'css']({ right: -(current.parentsUntil('.navigable', 'ul').length*100)+'%' }, 'fast');242 load.stop(true).removeData('navigable-target');243 if (animate)244 {245 load.animate({ left: '-10%' }, 'fast', function()246 {247 // Remove load, not needed anymore248 load.remove();249 });250 }251 else252 {253 load.remove();254 }255 }256 },257 success: function(data, textStatus, jqXHR)258 {259 // Refresh load notification since it may have changed since the request was sent260 var load = root.children('.load');261 // Remove ajax marker, mark as loaded262 clicked.removeClass('navigable-ajax').addClass('navigable-ajax-loaded');263 // Append data264 li.append(data);265 // If related load is still here266 if (load.length > 0 && load.data('navigable-target') === clicked[0])267 {268 // Remove load, not needed anymore269 load.remove();270 // Finally open the clicked element271 clicked.click();272 }273 }274 });275 // Prevent default behavior276 event.preventDefault();277 }278 }279 else if (clicked.hasClass('navigable-ajax-loaded'))280 {281 // Probably an ajax menu who loaded nothing, prevent default behavior282 event.preventDefault();283 }284 });285 /**286 * Reset navigable position to main menu287 */288 $.fn.navigableReset = function()289 {290 this.filter('.navigable').each( function(i)291 {292 // Navigable element293 var root = $(this),294 // Back button295 back = root.children('.back');296 // If valid297 if (back.length > 0)298 {299 while (root.data('navigableCurrent'))300 {301 back.click();302 }303 }304 });305 return this;306 };307 // Add to template setup function308 $.template.addSetupFunction(function(self, children)309 {310 // Current open menu element311 this.findIn(self, children, '.navigable-current').each(function(i)312 {313 var closest = $(this).closest('ul').closest('li, .navigable'),314 child;315 // Check if in a submenu316 if (closest.length > 0 && !closest.hasClass('navigable'))317 {318 // Disable animation319 animate = false;320 // Is there a span or a link?321 child = closest.children('a, span').first();322 if (child.length > 0)323 {324 child.click();325 }326 else327 {328 closest.click();329 }330 // Enable animation331 animate = true;332 }333 });334 return this;335 });336 /**337 * Navigable menu defaults338 * @var object339 */340 $.template.navigable = {341 /**342 * Text of the back button, or false to use the parent element's text343 * @var string|boolean344 */345 backText: false346 };...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptools = require('wptools');2var page = wptools.page('Sachin Tendulkar');3page.get(function(err, resp) {4 if (err) {5 console.log(err);6 } else {7 resp.data.navigable(function(err, resp) {8 if (err) {9 console.log(err);10 } else {11 console.log(resp);12 }13 });14 }15});16{ 'Sachin Tendulkar': 17 { name: 'Sachin Tendulkar',

Full Screen

Using AI Code Generation

copy

Full Screen

1 if (err) {2 console.log(err);3 } else {4 console.log(navigable);5 }6});7 .then(function (navigable) {8 console.log(navigable);9 })10 .catch(function (err) {11 console.log(err);12 });13{14}15{16}

Full Screen

Using AI Code Generation

copy

Full Screen

1var toolkit = require('wptoolkit');2var wp = new toolkit();3 if (err) {4 console.log('error: ', err);5 }6 console.log('result: ', res);7});8var toolkit = require('wptoolkit');9var wp = new toolkit();10 if (err) {11 console.log('error: ', err);12 }13 console.log('result: ', res);14});15var toolkit = require('wptoolkit');16var wp = new toolkit();17 if (err) {18 console.log('error: ', err);19 }20 console.log('result: ', res);21});22var toolkit = require('wptoolkit');23var wp = new toolkit();24 if (err) {25 console.log('error: ', err);26 }27 console.log('result: ', res);28});29var toolkit = require('wptoolkit');30var wp = new toolkit();31 if (err) {32 console.log('error: ', err);33 }34 console.log('result: ', res);35});36var toolkit = require('wptoolkit');37var wp = new toolkit();38 if (err) {39 console.log('error: ', err);40 }41 console.log('result: ', res);42});43var toolkit = require('wptoolkit');44var wp = new toolkit();45wp.navigable('http

Full Screen

Automation Testing Tutorials

Learn to execute automation testing from scratch with LambdaTest Learning Hub. Right from setting up the prerequisites to run your first automation test, to following best practices and diving deeper into advanced test scenarios. LambdaTest Learning Hubs compile a list of step-by-step guides to help you be proficient with different test automation frameworks i.e. Selenium, Cypress, TestNG etc.

LambdaTest Learning Hubs:

YouTube

You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.

Run wpt automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful