How to use toElement method in wpt

Best JavaScript code snippet using wpt

Scrollspy.js

Source:Scrollspy.js Github

copy

Full Screen

...8 before(function() {9 dom.enterDocument('<style id="style">body{margin:0;padding:0;}');10 });11 after(function() {12 dom.exitDocument(dom.toElement('#style'));13 });14 afterEach(function() {15 if (spy) {16 spy.dispose();17 }18 if (scrollElement) {19 scrollElement.scrollTop = 0;20 } else {21 window.scrollTo(0, 0);22 }23 });24 describe('Container', function() {25 before(function() {26 dom.enterDocument(27 '<ul id="element" style="position:relative;height:500px;margin:0;">' +28 '<li><a id="element1" href="#link1">link1</a></li>' +29 '<li><a id="element2" href="#link2">link2</a></li>' +30 '<li><a id="element3" href="#link3">link3</a></li>' +31 '<li><a id="element4" href="#link4">link4</a></li>' +32 '<li><a id="element5" href="#link5">link5</a></li></ul>'33 );34 dom.enterDocument(35 '<div id="scrollElement" style="position:relative;height:500px;overflow-y:auto;">' +36 '<div id="link1" style="height:500px;">Link1</div>' +37 '<div id="link2" style="height:500px;">Link2</div>' +38 '<div id="link3" style="height:500px;">Link3</div>' +39 '<div id="link4" style="height:500px;">Link4</div>' +40 '<div id="link5" style="height:500px;">Link5</div></div>'41 );42 element = dom.toElement('#element');43 scrollElement = dom.toElement('#scrollElement');44 });45 after(function() {46 dom.exitDocument(element);47 dom.exitDocument(scrollElement);48 scrollElement = null;49 });50 it('should activate element at offset', function() {51 spy = new Scrollspy({52 element: element,53 scrollElement: scrollElement,54 offset: 0,55 });56 assert.ok(dom.hasClass(dom.toElement('#element1'), 'active'));57 });58 it('should activate element when scrolling', function(done) {59 spy = new Scrollspy({60 element: element,61 scrollElement: scrollElement,62 offset: 0,63 });64 scrollElement.scrollTop = 500;65 nextScrollTick(function() {66 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));67 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));68 scrollElement.scrollTop = 1000;69 nextScrollTick(function() {70 assert.ok(71 !dom.hasClass(dom.toElement('#element1'), 'active')72 );73 assert.ok(74 !dom.hasClass(dom.toElement('#element2'), 'active')75 );76 assert.ok(77 dom.hasClass(dom.toElement('#element3'), 'active')78 );79 scrollElement.scrollTop = 1500;80 nextScrollTick(function() {81 assert.ok(82 !dom.hasClass(dom.toElement('#element1'), 'active')83 );84 assert.ok(85 !dom.hasClass(dom.toElement('#element2'), 'active')86 );87 assert.ok(88 !dom.hasClass(dom.toElement('#element3'), 'active')89 );90 assert.ok(91 dom.hasClass(dom.toElement('#element4'), 'active')92 );93 done();94 }, scrollElement);95 }, scrollElement);96 }, scrollElement);97 });98 it('should activate element when scrolling at offset', function(done) {99 spy = new Scrollspy({100 element: element,101 scrollElement: scrollElement,102 offset: 100,103 });104 scrollElement.scrollTop = 400;105 nextScrollTick(function() {106 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));107 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));108 done();109 }, scrollElement);110 });111 it('should activate last element when scrolling to maximum position', function(done) {112 spy = new Scrollspy({113 element: element,114 scrollElement: scrollElement,115 offset: 0,116 });117 scrollElement.scrollTop = 99999;118 nextScrollTick(function() {119 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));120 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));121 assert.ok(!dom.hasClass(dom.toElement('#element3'), 'active'));122 assert.ok(!dom.hasClass(dom.toElement('#element4'), 'active'));123 assert.ok(dom.hasClass(dom.toElement('#element5'), 'active'));124 done();125 }, scrollElement);126 });127 it('should always activate closest element when scrolling', function(done) {128 spy = new Scrollspy({129 element: element,130 scrollElement: scrollElement,131 offset: 0,132 });133 scrollElement.scrollTop = 1000;134 nextScrollTick(function() {135 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));136 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));137 assert.ok(dom.hasClass(dom.toElement('#element3'), 'active'));138 assert.ok(!dom.hasClass(dom.toElement('#element4'), 'active'));139 assert.ok(!dom.hasClass(dom.toElement('#element5'), 'active'));140 done();141 }, scrollElement);142 });143 it('should update current active index when scroll element is changed', function() {144 spy = new Scrollspy({145 element: element,146 scrollElement: scrollElement,147 offset: 0,148 });149 dom.exitDocument(scrollElement);150 dom.enterDocument(151 '<div id="scrollElement" style="position:relative;height:500px;overflow-y:auto;">' +152 '<div id="link2" style="height:500px;">Link2</div>' +153 '<div id="link1" style="height:500px;">Link1</div>' +154 '<div id="link3" style="height:500px;">Link3</div>' +155 '<div id="link4" style="height:500px;">Link4</div>' +156 '<div id="link5" style="height:500px;">Link5</div></div>'157 );158 scrollElement = dom.toElement('#scrollElement');159 spy.scrollElement = scrollElement;160 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));161 });162 it('should listen to scrolls on the new scroll element', function(done) {163 spy = new Scrollspy({164 element: element,165 scrollElement: scrollElement,166 offset: 0,167 });168 dom.exitDocument(scrollElement);169 dom.enterDocument(170 '<div id="scrollElement" style="position:relative;height:500px;overflow-y:auto;">' +171 '<div id="link2" style="height:500px;">Link2</div>' +172 '<div id="link1" style="height:500px;">Link1</div>' +173 '<div id="link3" style="height:500px;">Link3</div>' +174 '<div id="link4" style="height:500px;">Link4</div>' +175 '<div id="link5" style="height:500px;">Link5</div></div>'176 );177 scrollElement = dom.toElement('#scrollElement');178 spy.scrollElement = scrollElement;179 scrollElement.scrollTop = 1000;180 nextScrollTick(function() {181 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));182 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));183 assert.ok(dom.hasClass(dom.toElement('#element3'), 'active'));184 assert.ok(!dom.hasClass(dom.toElement('#element4'), 'active'));185 assert.ok(!dom.hasClass(dom.toElement('#element5'), 'active'));186 done();187 }, scrollElement);188 });189 });190 describe('Document', function() {191 before(function() {192 dom.enterDocument(193 '<div id="contentElement" style="position:relative;">' +194 '<div id="link1" style="height:5000px;">Link1</div>' +195 '<div id="link2" style="height:5000px;">Link2</div>' +196 '<div id="link3" style="height:5000px;">Link3</div>' +197 '<div id="link4" style="height:5000px;">Link4</div></div>'198 );199 dom.enterDocument(200 '<ul id="element">' +201 '<li><a id="element1" href="#link1">link1</a></li>' +202 '<li><a id="elementNoHash" href="/noHash">No Hash</a></li>' +203 '<li><a id="element2" href="#link2">link2</a></li>' +204 '<li><a id="elementNoContent" href="#noContent">No Content</a></li>' +205 '<li><a id="element3" href="#link3">link3</a></li>' +206 '<li><a id="element4" href="#link4">link4</a></li></ul>'207 );208 element = dom.toElement('#element');209 });210 after(function() {211 dom.exitDocument(element);212 dom.exitDocument(dom.toElement('#contentElement'));213 });214 it('should activate element', function() {215 spy = new Scrollspy({216 element: element,217 offset: 0,218 });219 assert.ok(dom.hasClass(dom.toElement('#element1'), 'active'));220 });221 it('should not activate any element if scroll position is before all of them', function() {222 dom.toElement('#contentElement').style.marginTop = '50px';223 spy = new Scrollspy({224 element: element,225 offset: 0,226 });227 assert.ok(!document.querySelector('.active'));228 dom.toElement('#contentElement').style.marginTop = '0px';229 });230 it('should activate resolved element', function() {231 spy = new Scrollspy({232 element: element,233 offset: 0,234 resolveElement: function(el) {235 return el.parentNode;236 },237 });238 assert.ok(239 dom.hasClass(dom.toElement('#element1').parentNode, 'active')240 );241 });242 it('should activate element when scrolling', function(done) {243 spy = new Scrollspy({244 element: element,245 offset: 0,246 });247 window.scrollTo(0, 5000);248 nextScrollTick(function() {249 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));250 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));251 window.scrollTo(0, 10000);252 nextScrollTick(function() {253 assert.ok(254 !dom.hasClass(dom.toElement('#element1'), 'active')255 );256 assert.ok(257 !dom.hasClass(dom.toElement('#element2'), 'active')258 );259 assert.ok(260 dom.hasClass(dom.toElement('#element3'), 'active')261 );262 window.scrollTo(0, 15000);263 nextScrollTick(function() {264 assert.ok(265 !dom.hasClass(dom.toElement('#element1'), 'active')266 );267 assert.ok(268 !dom.hasClass(dom.toElement('#element2'), 'active')269 );270 assert.ok(271 !dom.hasClass(dom.toElement('#element3'), 'active')272 );273 assert.ok(274 dom.hasClass(dom.toElement('#element4'), 'active')275 );276 done();277 });278 });279 });280 });281 it('should deactivates all elements when window is scrolled to position before all elements', function(done) {282 dom.toElement('#contentElement').style.marginTop = '50px';283 spy = new Scrollspy({284 element: element,285 offset: 0,286 });287 window.scrollTo(0, 50);288 nextScrollTick(function() {289 assert.ok(dom.hasClass(dom.toElement('#element1'), 'active'));290 window.scrollTo(0, 0);291 nextScrollTick(function() {292 assert.ok(!document.querySelector('.active'));293 dom.toElement('#contentElement').style.marginTop = '0px';294 done();295 });296 });297 });298 it('should activate element when scrolling at offset', function(done) {299 spy = new Scrollspy({300 element: element,301 offset: 1000,302 });303 window.scrollTo(0, 4000);304 nextScrollTick(function() {305 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));306 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));307 done();308 });309 });310 it('should update active element when the value of the offset state changes', function(done) {311 spy = new Scrollspy({312 element: element,313 offset: 0,314 });315 window.scrollTo(0, 4000);316 nextScrollTick(function() {317 assert.ok(dom.hasClass(dom.toElement('#element1'), 'active'));318 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));319 spy.offset = 1000;320 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));321 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));322 done();323 });324 });325 it('should activate last element when scrolling to maximum position', function(done) {326 spy = new Scrollspy({327 element: element,328 offset: 0,329 });330 window.scrollTo(0, 99999);331 nextScrollTick(function() {332 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));333 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));334 assert.ok(!dom.hasClass(dom.toElement('#element3'), 'active'));335 assert.ok(dom.hasClass(dom.toElement('#element4'), 'active'));336 done();337 });338 });339 it('should activate last element when scrolling to maximum position with offset', function(done) {340 spy = new Scrollspy({341 element: element,342 offset: 100,343 });344 window.scrollTo(0, 99999);345 nextScrollTick(function() {346 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));347 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));348 assert.ok(!dom.hasClass(dom.toElement('#element3'), 'active'));349 assert.ok(dom.hasClass(dom.toElement('#element4'), 'active'));350 done();351 });352 });353 it('should activate index of closest element when scrolling', function(done) {354 spy = new Scrollspy({355 element: element,356 offset: 0,357 });358 window.scrollTo(0, 10000);359 nextScrollTick(function() {360 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));361 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));362 assert.ok(dom.hasClass(dom.toElement('#element3'), 'active'));363 assert.ok(!dom.hasClass(dom.toElement('#element4'), 'active'));364 done();365 });366 });367 it('should activate the right item on the new element when it changes', function() {368 spy = new Scrollspy({369 element: element,370 offset: 0,371 });372 dom.enterDocument(373 '<ul id="newElement">' +374 '<li><a id="newElement1" href="#link1">link1</a></li>' +375 '<li><a id="newElement2" href="#link2">link2</a></li>' +376 '<li><a id="newElement3" href="#link3">link3</a></li>' +377 '<li><a id="newElement4" href="#link4">link4</a></li></ul>'378 );379 spy.element = '#newElement';380 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));381 assert.ok(dom.hasClass(dom.toElement('#newElement1'), 'active'));382 dom.exitDocument(spy.element);383 });384 it('should update active item when the selector changes', function(done) {385 dom.addClasses(dom.toElement('#element1'), 'mySelector');386 dom.addClasses(dom.toElement('#element3'), 'mySelector');387 spy = new Scrollspy({388 element: element,389 offset: 0,390 });391 window.scrollTo(0, 5000);392 nextScrollTick(function() {393 assert.ok(!dom.hasClass(dom.toElement('#element1'), 'active'));394 assert.ok(dom.hasClass(dom.toElement('#element2'), 'active'));395 spy.selector = '.mySelector';396 assert.ok(dom.hasClass(dom.toElement('#element1'), 'active'));397 assert.ok(!dom.hasClass(dom.toElement('#element2'), 'active'));398 done();399 });400 });401 });402});403const nextScrollTick = function(fn, optionalElement) {404 dom.once(optionalElement || document, 'scroll', fn);...

Full Screen

Full Screen

ks_effect.js

Source:ks_effect.js Github

copy

Full Screen

1// This is a collection of Transition effects.2// All effects receive the following parameters.3// (fromElements, toElement, backwards, callback)4//5// The toElement should always be hidden before calling6// KSEffect.7var KSEffect = new KSEffect();8function KSEffect () {9 function setStyleStashingOriginal(element, styleKey, value){10 var current_value = element.style[styleKey];11 element.setAttribute('data-stash-' + styleKey, current_value);12 element.style[styleKey] = value;13 }14 function resetStyleFromStash(element, styleKey) {15 var stashValue = element.getAttribute('data-stash-' + styleKey);16 element.style[styleKey] = stashValue;17 element.removeAttribute('data-stash-' + styleKey);18 }19 function resetAllStylesFromStash(element) {20 var allAttributes = element.attributes;21 for (var i = 0; i < allAttributes.length; i++) {22 var attr = allAttributes[i]23 if (attr.name.indexOf('data-stash-') == 0) {24 var styleKey = attr.name.slice(11);25 resetStyleFromStash(element, styleKey);26 }27 };28 }29 this.noEffect = function(fromElements, toElement, backwards, callback) {30 toElement.style.display = 'block';31 for (var i = 0; i < fromElements.length; i++) {32 fromElements[i].style.display = 'none';33 }34 if (callback) callback();35 }36 this.cssGlow = function(fromElements, toElement, backwards, callback) {37 toElement.style.display = 'block';38 for (var i = 0; i < fromElements.length; i++) {39 fromElements[i].style.display = 'none';40 }41 kss.addClass(toElement, 'css_glow_transition')42 if (callback) callback();43 }44 this.cssSlide = function (fromElements, toElement, backwards, callback) {45 // Hide the toElement as soon as possible.46 // Safari is OK, but Firefox seems to be slow to prepare and the47 // toElement gets in the way.48 toElement.style.display = 'none'; 49 var slideTransitionDuration = '400ms';50 var slideTimingFunction = 'ease';51 var width = 0;52 var fromElementsHeight = 0;53 // Calculate the width of the fromElements so we know how much54 // distance we need to slide.55 for (var i = 0; i < fromElements.length; i++) {56 var thisWidth = Math.min(fromElements[i].scrollWidth, window.innerWidth);57 width = Math.max(width, thisWidth);58 };59 // Calculate the max height of the fromElements so we know how much60 // distance we need to slide.61 for (var i = 0; i < fromElements.length; i++) {62 var fromElement = fromElements[i];63 var thisHeight = fromElement.offsetTop + fromElement.scrollHeight;64 fromElementsHeight = Math.max(fromElementsHeight, thisHeight);65 };66 // Now we know what the transformation CSS should look like67 // toStart is what we do to place the toElement in the start position.68 var toStart = 'translateX(' + (backwards ? '-' : '') + width + 'px)';69 // fromEnd is where the fromElements end up.70 var fromEnd = 'translateX(' + (backwards ? '' : '-') + width + 'px)';71 // Prepare parentNode72 // If the toElement is a sub-page, we have to set the parentNode73 // so that it will hide the toElement when it flows out.74 // To do this, we use overflow: 'hidden'. However, since the 75 // sub-pages will have position:absolute, the parentNode most76 // likely will have zero height and therefore will hide the77 // fromElement.78 // To fix this, we set the min-height of the parentNode to fit79 // the toElement.80 // This can cause flicker so turn on only if we really need it.81 // We only need it when we are not transitioning on a page element.82 if (!kss.hasClass(toElement, 'page')) {83 // toElement.parentNode.style.minHeight = Math.max((toElement.offsetTop + toElement.scrollHeight), toElement.parentNode.scrollHeight) + 'px';84 toElement.parentNode.style.minHeight = Math.max(toElement.parentNode.scrollHeight,85 (toElement.offsetTop + toElement.scrollHeight),86 fromElementsHeight87 ) + 'px';88 toElement.parentNode.style.overflow = 'hidden';89 toElement.parentNode.style.position = 'relative';90 }91 // ** Prepare toElement **92 // Crop to fit size of the container93 // toElement.style.overflow = 'hidden'; 94 // hiding seems to cause flicker. Still investigating.95 toElement.style.overflow = 'visible';96 // We're going to move toElement to the start position.97 // Set duration to 0 so this happens instantly.98 setStyleWithVendorPrefix(toElement, {99 transitionDuration: '0ms',100 // http://stackoverflow.com/questions/3683211/ipad-safari-mobile-seems-to-ignore-z-indexing-position-for-html5-video-elements101 transformStyle: "preserve-3d"102 })103 setStyleWithVendorPrefix(toElement, {104 // Move the toElement to the start Position105 transform: toStart,106 // Prime the toElement for transition107 transitionDuration: slideTransitionDuration,108 transitionTimingFunction: slideTimingFunction109 })110 // ** Prepare fromElements **111 for (var i = 0; i < fromElements.length; i++) {112 // Crop to fit size of the container113 fromElements[i].style.overflow = 'hidden';114 setStyleWithVendorPrefix(fromElements[i], {115 transitionDuration: slideTransitionDuration,116 transitionTimingFunction: slideTimingFunction117 })118 var thisWidth = Math.min(fromElements[i].offsetWidth, window.innerWidth);119 // Get the width of the fattest fromElement and put it into width.120 // TODO: Refactor!!121 width = Math.max(width, thisWidth);122 };123 function startTrans() {124 // Pull the trigger for fromElements125 for (var i = 0; i < fromElements.length; i++) {126 setStyleWithVendorPrefix(fromElements[i], {127 transform: fromEnd,128 // perspective: '1000',129 backfaceVisibility: 'hidden'130 })131 }132 // Pull the trigger for toElement133 setStyleWithVendorPrefix(toElement,{134 transform: 'translateX(0%)', //toEnd135 // perspective: '1000',136 backfaceVisibility: 'hidden'137 })138 }139 // Clean up after transition140 function resetElements(){141 toElement.style.overflow = '';142 setStyleWithVendorPrefix(toElement, {143 transitionDuration: '0ms',144 transform: '',145 // backfaceVisibility: '',146 transformOrigin: ''147 })148 setStyleWithVendorPrefix(toElement.parentNode, {149 transitionDuration: '0ms'150 })151 toElement.parentNode.style.height = '';152 toElement.parentNode.style.overflow = '';153 for (var i = 0; i < fromElements.length; i++) {154 fromElements[i].style.overflow = '';155 fromElements[i].style.display = 'none';156 setStyleWithVendorPrefix(fromElements[i], {157 transitionDuration: '0ms',158 transformOrigin: '',159 transform: ''160 // backfaceVisibility: ''161 })162 }163 toElement.removeEventListener('webkitTransitionEnd', resetElements);164 toElement.removeEventListener('transitionend', resetElements);165 }166 // Support other browsers http://stackoverflow.com/questions/2794148/css3-transition-events167 function newCallback() {168 toElement.removeEventListener('webkitTransitionEnd', newCallback, false);169 toElement.removeEventListener('transitionend', newCallback, false);170 callback && callback();171 }172 toElement.addEventListener('webkitTransitionEnd', resetElements, false);173 toElement.addEventListener('webkitTransitionEnd', newCallback, false);174 toElement.addEventListener('transitionend', resetElements, false);175 toElement.addEventListener('transitionend', newCallback, false);176 // Show the toElement177 toElement.style.display = 'block';178 // And pull the master trigger.179 setTimeout(startTrans, 0);180 }181 this.cssPulse = function (fromElements, toElement, backwards, callback) {182 function startTrans(){183 kss.addClass(toElement, "css_pulse_transition");184 for (var i = 0; i < fromElements.length; i++) {185 fromElements[i].style.display = 'none';186 }187 }188 function resetElements(){189 kss.removeClass(toElement, "css_pulse_transition");190 toElement.removeEventListener('webkitAnimationEnd', resetElements);191 toElement.removeEventListener('animationend', resetElements);192 }193 toElement.addEventListener('webkitAnimationEnd', resetElements, false);194 toElement.addEventListener('animationend', resetElements, false);195 // Show the toElement196 toElement.style.display = 'block';197 // And pull the master trigger.198 setTimeout(startTrans, 0);199 }200 // DEPRECATED: We should rewrite this like we do for cssPulse201 this.cssPop = function (fromElements, toElement, backwards, callback) {202 // TODO: display all fromElements in log203 console.log('pop animation fromElement: ' + (fromElements[0] && fromElements[0].id) + ' toElement: ' + toElement.id);204 toElement.style.display = 'none';205 // ** Prepare to Element **206 // Safari has an issue where the initial scale is used to calculate the scrollbars.207 // Hence if there are no scrollbars at the initial scale and then at the final scale208 // we need scrollbars because the element doesn't fit the viewport, we still don't209 // get scrollbars and cannot scroll. 210 // We work around this by first setting the height to a very large value (higher than211 // any display), doing the transitions, and then resetting the height.212 toElement.style.height = "3000px";213 setStyleWithVendorPrefix(toElement, {214 transitionDuration: '0ms',215 transformOrigin: "50% 0%",216 transform: 'scale(0.9)',217 // perspective: '1000',218 // backfaceVisibility: 'hidden' 219 })220 function startTrans(){221 setStyleWithVendorPrefix(toElement,{222 transitionDuration: '300ms',223 transform: 'scale(1.0)'224 })225 for (var i = 0; i < fromElements.length; i++) {226 fromElements[i].style.display = 'none';227 }228 }229 function resetElements(){230 toElement.style.overflow = '';231 toElement.style.height = '';232 setStyleWithVendorPrefix(toElement, {233 transitionDuration: '0ms',234 transformOrigin: '',235 transform: ''236 // backfaceVisibility: ''237 })238 toElement.style.position = '';239 for (var i = 0; i < fromElements.length; i++) {240 setStyleWithVendorPrefix(fromElements[i], {241 transitionDuration: '0ms',242 transformOrigin: '',243 transform: ''244 // backfaceVisibility: ''245 })246 fromElements[i].style.overflow = '';247 fromElements[i].style.display = 'none';248 }249 toElement.removeEventListener('webkitTransitionEnd', resetElements);250 toElement.removeEventListener('transitionend', resetElements);251 }252 toElement.addEventListener('webkitTransitionEnd', resetElements, false);253 toElement.addEventListener('transitionend', resetElements, false);254 // Show the toElement255 toElement.style.display = 'block';256 // And pull the master trigger.257 setTimeout(startTrans, 0);258 }259 this.horizontalFlip = function(fromElements, toElement, backwards, callback) {260 console.log('flip animation fromElement: ' + (fromElements[0] && fromElements[0].id) + ' toElement: ' + toElement.id);261 kss.show(toElement);262 setStyleWithVendorPrefix(document.body, {263 transformOrigin: "50% 30%",264 transitionDuration: '0ms',265 perspective:"2000px"266 })267 setStyleWithVendorPrefix(toElement, {268 transformOrigin: "50% 0%",269 transitionDuration: '0ms',270 backfaceVisibility: 'hidden',271 transform: 'rotateY(180deg)',272 });273 setStyleWithVendorPrefix(fromElements[0], {274 transitionDuration: '0ms',275 backfaceVisibility: 'hidden'276 });277 function startTrans(){278 kss.show(toElement);279 setStyleWithVendorPrefix(toElement, {280 transitionDuration: '750ms',281 transform: 'rotateY(0deg)',282 });283 setStyleWithVendorPrefix(fromElements[0], {284 transitionDuration: '750ms',285 transform: 'rotateY(-180deg)',286 });287 }288 function resetElements(){289 setStyleWithVendorPrefix(toElement, {290 transitionDuration: '0ms',291 transformOrigin: '',292 transform: ''293 // backfaceVisibility: ''294 })295 toElement.style.overflow = '';296 for (var i = 0; i < fromElements.length; i++) {297 setStyleWithVendorPrefix(fromElements[i], {298 transitionDuration: '0ms',299 transformOrigin: '',300 transform: ''301 // backfaceVisibility: ''302 })303 fromElements[i].style.overflow = '';304 fromElements[i].style.display = 'none';305 }306 toElement.removeEventListener('webkitTransitionEnd', resetElements);307 toElement.removeEventListener('transitionend', resetElements);308 }309 function newCallback() {310 toElement.removeEventListener('webkitTransitionEnd', newCallback, false);311 toElement.removeEventListener('transitionend', newCallback, false);312 callback();313 }314 toElement.addEventListener('webkitTransitionEnd', resetElements, false);315 toElement.addEventListener('webkitTransitionEnd', newCallback, false);316 toElement.addEventListener('transitionend', resetElements, false);317 toElement.addEventListener('transitionend', newCallback, false);318 setTimeout(startTrans, 0);319 }320 function setStyleWithVendorPrefix(element, styleValueSet) {321 if (!element) return;322 var prefixes = ['webkit', 'Moz'];323 for (var styleName in styleValueSet) {324 for (i = 0; i < prefixes.length; i++) {325 var capitalizedStyleName = styleName.slice(0,1).toUpperCase() + styleName.slice(1);326 element.style[prefixes[i] + capitalizedStyleName] = styleValueSet[styleName];327 }328 element.style[styleName] = styleValueSet[styleName];329 }330 }331 // Make function public332 this.setStyleWithVendorPrefix = setStyleWithVendorPrefix;...

Full Screen

Full Screen

xml.js

Source:xml.js Github

copy

Full Screen

...23 file.seek(0);24 QString XMLObjectsSettings(file.readAll());25 QDomElement deRoot = ddSettings->documentElement();26 QDomNode dnFormations = deRoot.firstChild();27 while(!dnFormations.isNull() && (dnFormations.toElement().tagName() == "OBJECT"))28 {29 SettingsObjects_t setObj;30 setObj.m_objID = dnFormations.toElement().attribute("objectID");31 setObj.m_name = dnFormations.toElement().attribute("name");32 if (setObj.m_objID.isEmpty())33 continue;34 QDomNode objectSettinsNode = dnFormations.firstChild();35 while (!objectSettinsNode.isNull())36 {37 if (objectSettinsNode.toElement().tagName() == "INTERFACES")38 {39 QDomNode interface = objectSettinsNode.firstChild();40 while (!interface.isNull())41 {42 Inteface inter_face;43 if (interface.toElement().attribute("ip").isEmpty())44 continue;45 inter_face.m_host.setAddress(interface.toElement().attribute("ip"));46 inter_face.m_port = interface.toElement().attribute("port").isEmpty() ? DEFAULT_PORT : dnFormations.toElement().attribute("port").toUShort();47 setObj.m_interfaces.append(inter_face);48 interface = interface.nextSibling();49 }50 }51 if (objectSettinsNode.toElement().tagName() == "USERS")52 {53 QDomNode userNode = objectSettinsNode.firstChild();54 while (!userNode.isNull())55 {56 User_t user;57 user.ip.setAddress(userNode.toElement().attribute("ip"));58 user.name = userNode.toElement().attribute("name");59 setObj.m_users.append(user);60 userNode = userNode.nextSibling();61 }62 }63 if (objectSettinsNode.toElement().tagName() == "LOGICAL_NAMES")64 {65 readLogicalNames(&setObj, objectSettinsNode);66 }67 objectSettinsNode = objectSettinsNode.nextSibling();68 }69 setObj.m_curentInterface = (setObj.m_interfaces.count()>0) ? 0 : -1;70 setObj.m_port = dnFormations.toElement().attribute("port").toUInt();71 if (dnFormations.toElement().attribute("type").toInt() == 1)72 {73 setObj.m_isCurrent = true;74 }75 else76 setObj.m_isCurrent = false;77 dnFormations = dnFormations.nextSibling();78 // readLogicalNames(settingsPath, &setObj);79 setObj.m_XMLobjectsSettings = XMLObjectsSettings;80 iface->addSpdServer(setObj);81 } 82 delete ddSettings;83 return true;84}85struct SettingsObjects_t86{87 void clear()88 {89 m_logicalNames.clear();90 }91 LogicalName_t getLogicalByName(const QString & logicalName)92 {93 auto it = m_logicalNames.find(logicalName);94 return (it != m_logicalNames.end()) ? it.value() : LogicalName_t();95 }96 QString m_objID;97 QString m_name;98 QString m_comment;99 QList<Inteface> m_interfaces;100 QList<User_t> m_users;101 quint16 m_port;102 bool m_isCurrent;103 qint16 m_curentInterface;104 QMap<QString, LogicalName_t> m_logicalNames;105 QString m_XMLobjectsSettings;106};107bool SpdSettings::readLogicalNames( SettingsObjects_t * setObj, QDomNode logicalNamesNode )108{109 //setObj->clear();110 QDomNode dnLogicalNames = logicalNamesNode.firstChild();111 while(!dnLogicalNames.isNull() && (dnLogicalNames.toElement().tagName() == "LOGICAL_NAME"))112 {113 LogicalName_t logicalName;114 logicalName.m_logicalName = dnLogicalNames.toElement().attribute("logicalName");115 logicalName.m_object = dnLogicalNames.toElement().attribute("destObject");116 logicalName.m_host = dnLogicalNames.toElement().attribute("destHost");117 logicalName.m_name = dnLogicalNames.toElement().attribute("destName");118 Handler_t handler;119 QDomNode dnHandler = dnLogicalNames.firstChild();120 if (!dnHandler.isNull() && dnHandler.toElement().tagName() == "HANDLER")121 {122 while (!dnHandler.isNull())123 {124 QDomNode dnParams = dnHandler.firstChild();125 while (!dnParams.isNull())126 {127 if (dnParams.toElement().nodeName() == "DO_COPY")128 handler.m_doCopy = dnParams.toElement().text().toInt();129 else if (dnParams.toElement().nodeName() == "COPY_PATH")130 handler.m_copyPath = dnParams.toElement().text();131 else if (dnParams.toElement().nodeName() == "CHANGE_NAME")132 handler.m_changeName = dnParams.toElement().text().toInt();133 else if (dnParams.toElement().nodeName() == "FILE_NAME")134 handler.m_fileName = dnParams.toElement().text();135 else if (dnParams.toElement().nodeName() == "OVERWRITE")136 handler.m_overwrite = dnParams.toElement().text().toInt();137 else if (dnParams.toElement().nodeName() == "DELETE_SRC")138 handler.m_deleteSrc = dnParams.toElement().text().toInt();139 else if (dnParams.toElement().nodeName() == "EXEC_APP")140 handler.m_execApp = dnParams.toElement().text().toInt();141 else if (dnParams.toElement().nodeName() == "APP_NAME")142 handler.m_appName = dnParams.toElement().text();143 else if (dnParams.toElement().nodeName() == "WAIT_EXEC")144 handler.m_waitExec = dnParams.toElement().text().toInt();145 else if (dnParams.toElement().nodeName() == "WAIT_TIME")146 handler.m_waitTime = dnParams.toElement().text().toInt();147 else if (dnParams.toElement().nodeName() == "PASSED_FULL_FILE_NAME")148 handler.m_paramFullFileName = dnParams.toElement().text().toInt();149 else if (dnParams.toElement().nodeName() == "PASSED_FILE_NAME")150 handler.m_paramFileName = dnParams.toElement().text().toInt();151 else if (dnParams.toElement().nodeName() == "PASSED_LOGICAL_NAME")152 handler.m_paramLogicalName = dnParams.toElement().text().toInt();153 dnParams = dnParams.nextSibling();154 }155 dnHandler = dnHandler.nextSibling();156 logicalName.m_handlers.append(handler);157 }158 }159 if (setObj)160 setObj->m_logicalNames.insert(logicalName.m_logicalName, logicalName);161 dnLogicalNames = dnLogicalNames.nextSibling();162 }163 return true;...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wptools = require('wptools');2var page = wptools.page('Albert Einstein');3page.get(function(err, resp) {4 var infobox = resp.data.infobox;5 var image = infobox.image.toElement().attr('src');6 console.log(image);7});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var element = wptoolkit.toElement('test');2var element = wptoolkit.toElement('test');3var element = wptoolkit.toElement('test');4var element = wptoolkit.toElement('test');5var element = wptoolkit.toElement('test');6var element = wptoolkit.toElement('test');7var element = wptoolkit.toElement('test');8var element = wptoolkit.toElement('test');9var element = wptoolkit.toElement('test');10var element = wptoolkit.toElement('test');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1function test(){2 var e = document.getElementById("a");3 var s = e.toElement();4 var s2 = e.toElement(1);5 alert(s + ":" + s2);6}

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1$(document).ready(function() {2 var articleContent = "";3 var articleTitle = "";4 var articleId = "";5 var article = "";6 var articleText = "";7 var title = "";8 var content = "";9 var articleId = "";10 var articleContent = "";11 $(".article").live("tap", function(e) {12 e.preventDefault();13 articleId = e.toElement.id;14 article = $(this).find("#" + articleId);15 articleContent = article.html();16 articleTitle = article.find(".title").html();17 articleText = article.find(".text").html();18 title = "<h2>" + articleTitle + "</h2>";19 content = "<p>" + articleText + "</p>";20 articleContent = title + content;21 $("#articleContent").html(articleContent);22 $("#articleContent").slideDown();23 return false;24 });25 $("#closeArticle").live("tap", function(e) {26 e.preventDefault();27 $("#articleContent").slideUp();28 return false;29 });30});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wpt = require('webpagetest');2var test = new wpt('A.2f0e2c2c2e8b1e4f0d4b4e4f4f8c8f4', 'www.webpagetest.org');3 if (err) return console.error(err);4 console.log('Test status:', data.statusText);5 test.getTestResults(data.data.testId, function(err, data) {6 if (err) return console.error(err);7 console.log('First view:', data.data.average.firstView);8 console.log('Repeat view:', data.data.average.repeatView);9 console.log('Test ID:', data.data.testId);10 });11});12var wpt = require('webpagetest');13var test = new wpt('A.2f0e2c2c2e8b1e4f0d4b4e4f4f8c8f4', 'www.webpagetest.org');14 if (err) return console.error(err);15 console.log('Test status:', data.statusText);16 test.getTestResults(data.data.testId, function(err, data) {17 if (err) return console.error(err);18 console.log('First view:', data.data.average.firstView);19 console.log('Repeat view:', data.data.average.repeatView);20 console.log('Test ID:', data.data.testId);21 });22});23var wpt = require('webpagetest');24var test = new wpt('A.2f0e2c2c2e8b1e4f0d4b4e4f4f8c8f4', 'www.webpagetest.org');25 if (err) return console.error(err);26 console.log('Test status:', data.statusText);27 test.getTestResults(data.data.testId, function(err, data) {28 if (err) return console.error(err);29 console.log('First view:', data.data.average.firstView);30 console.log('Repeat view:', data.data

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var wpt = require('webpagetest');2var client = wpt('A.7d1e8a2e7c3b3e0d6c39a8a9b1a9b6d5');3 if (err) return console.error(err);4 console.log('Test submitted to WebPagetest for %s', data.data.url);5 console.log('Poll the test results at %s/jsonResult.php?test=%s', data.data.userUrl, data.data.testId);6 console.log('Test status can be seen at %s/result/%s/', data.data.userUrl, data.data.testId);7});8var wpt = require('webpagetest');9var client = wpt('A.7d1e8a2e7c3b3e0d6c39a8a9b1a9b6d5');10client.getTestResults('170711_1T_1a6c0d8a8f9a9b0d9b0a0b8d8e', function(err, data) {11 if (err) return console.error(err);12 console.log(data);13});14var wpt = require('webpagetest');15var client = wpt('A.7d1e8a2e7c3b3e0d6c39a8a9b1a9b6d5');16client.getTestStatus('170711_1T_1a6c0d8a8f9a9b0d9b0a0b8d8e', function(err, data) {17 if (err) return console.error(err);18 console.log(data);19});20var wpt = require('webpagetest');21var client = wpt('A.7d1e8a2e7c3b3e0d6c39a8a9b1a9b6d5');22client.getLocations(function(err, data) {23 if (err) return console.error(err);24 console.log(data);25});26var wpt = require('webpagetest

Full Screen

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.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful