Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

How to use transformValue method in Playwright Internal

Best JavaScript code snippet using playwright-internal

iphone.js

Source:iphone.js

1/**2 * Magento3 *4 * NOTICE OF LICENSE5 *6 * This source file is subject to the Academic Free License (AFL 3.0)7 * that is bundled with this package in the file LICENSE_AFL.txt.8 * It is also available through the world-wide-web at this URL:9 * http://opensource.org/licenses/afl-3.0.php10 * If you did not receive a copy of the license and are unable to11 * obtain it through the world-wide-web, please send an email12 * to license@magentocommerce.com so we can send you a copy immediately.13 *14 * DISCLAIMER15 *16 * Do not edit or add to this file if you wish to upgrade Magento to newer17 * versions in the future. If you wish to customize Magento for your18 * needs please refer to http://www.magentocommerce.com for more information.19 *20 * @category    design21 * @package     default_iphone22 * @copyright   Copyright (c) 2012 Magento Inc. (http://www.magentocommerce.com)23 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)24 */25 // Homepage categories and subcategories slider26document.observe("dom:loaded", function() {27    transEndEventNames = {28        'WebkitTransition' : 'webkitTransitionEnd',29        'MozTransition'    : 'transitionend',30        'OTransition'      : 'oTransitionEnd',31        'msTransition'     : 'MSTransitionEnd',32        'transition'       : 'transitionend'33    },34    transEndEventName = transEndEventNames[ Modernizr.prefixed('transition') ];35    function handler(position) {36        var lat = position.coords.latitude,37            lng = position.coords.longitude;38        //alert(latitude + ' ' + longitude);39        var geocoder = new google.maps.Geocoder();40        function codeLatLng() {41            var latlng = new google.maps.LatLng(lat, lng);42            geocoder.geocode({'latLng': latlng}, function(results, status) {43                if (status == google.maps.GeocoderStatus.OK) {44                    if (results[0]) {45                        alert(results[0].formatted_address);46                    }47                } else {48                    alert("Geocoder failed due to: " + status);49                }50            });51        }52        //codeLatLng();53    }54    var loadMore = Class.create({55        initialize: function (list, href, pattern) {56            var that = this;57            58            this.list = list;59            this.list.insert({ after : '<div class="more"><span id="more_button" class="more-button">More</span></div>'});60            this.href = href.readAttribute('href');61            this.button = $('more_button');62            this.holder = new Element('div', { 'class': 'response-holder' });63            64            this.button.observe('click', function () {65                if ( !that.button.hasClassName('loading') ) {66                    new Ajax.Request(that.href, {67                        onCreate: function () {68                            that.button.addClassName('loading');69                        },70                        onComplete: function(response) {71                            if (200 == response.status) {72                                that.holder.update(response.responseText).select(pattern).each(function(elem) {73                                    that.list.insert({ bottom : elem });74                                });75                                that.href = that.holder.select('.next-page')[0].readAttribute('href');76                                that.button.removeClassName('loading');77                                if ( !that.href ) {78                                    that.button.up().remove();79                                }80                            }81                        }82                    });83                }84            });85        }86    });87    if ( $$('.c-list')[0] && $$('.next-page')[0]  ) {88        var loadMoreCategory = new loadMore(89            $$('.c-list')[0],90            $$('.next-page')[0],91            '.c-list > li'92        )93    }94    95    if ( $$('.downloadable-products-history .list')[0] && $$('.next-page')[0]  ) {96        var loadMoreCategory = new loadMore(97            $$('.downloadable-products-history .list')[0],98            $$('.next-page')[0],99            '.downloadable-products-history .list > li'100        )101    }102    103    if ( $$('.review-history .list')[0] && $$('.next-page')[0]  ) {104        var loadMoreCategory = new loadMore(105            $$('.review-history .list')[0],106            $$('.next-page')[0],107            '.review-history .list > li'108        )109    }110    111    if ( $$('.recent-orders .data-table')[0] && $$('.next-page')[0]  ) {112        var loadMoreCategory = new loadMore(113            $$('.recent-orders .data-table')[0],114            $$('.next-page')[0],115            '.recent-orders .data-table tbody > tr'116        )117    }118    119    //-----------------------------//120    $$('label[for]').each(function(label) {121        label.observe('click', function() {});122    });123    124    $$('input.validate-email').each(function (input) {125        input.writeAttribute('type', 'email');126    });127    128    $$('.form-list img[src*="calendar.gif"]').each(function (img) {129        img.up().insert({ 'top' : img });130    });131    if ( navigator.geolocation ) {132        //navigator.geolocation.getCurrentPosition(handler);133    }134    if ( $('my-reviews-table') ) {135        $('my-reviews-table').wrap('div', { 'class' : 'my-reviews-table-wrap' });136    }137    138    $$('.my-account .dashboard .box-title').each(function (elem) {139        elem.observe('click', function (e) {140            if ( e.target.hasClassName('box-title') ) {141                this.toggleClassName('collapsed').next().toggle();142            }143        }).next().hide();144    });145    var transformPref = Modernizr.prefixed('transform');146    function supportsTouchCallout () {147        var div = document.createElement('div'),148            supports = div.style['webkitTouchCallout'] !== undefined || div.style['touchCallout'] !== undefined;149        return supports150    }151    $$('input[name=qty], input[name*=super_group], input[name*=qty]').each(function (el) {152        var defaultValue = el.value;153        el.observe('focus', function () {154            if (this.value == defaultValue) this.value = '';155        });156        el.observe('blur', function () {157            if (this.value == "") this.value = defaultValue;158        });159    });160    if ( $('product-review-table') ) {161        $('product-review-table').wrap('div', {'class' : 'review-table-wrap'}).on('click', 'input[type="radio"]', function (e) {162            $this = e.target;163            $this.up('tr').select('td').invoke('removeClassName', 'checked');164            $this.up().previousSiblings().each(function (td) {165                if ( td.hasClassName('value') ) {166                    td.addClassName('checked');167                }168            });169        });170    }171    function is_touch_device() {172      try {173        document.createEvent("TouchEvent");174        return true;175      } catch (e) {176        return false;177      }178    }179    var touch = is_touch_device();180    $$('select[multiple]').each(function (select) {181        var select_options = new Element('ol', {'class': 'select-multiple-options'}).wrap('div', { 'class' : 'select-multiple-options-wrap' }),182            selected;183        select.wrap('div', { 'class': 'select-multiple-wrap' });184        select.select('option').each(function(option) {185            select_options.down().insert({ bottom : new Element('li', { 'class' :  'select-option', 'data-option-value' : option.value }).update(option.text) });186        });187        select_options.insert({ top : new Element('div', { 'class' : 'select-heading' }).update('Choose options...').insert({ top : new Element('span', { 'class' : 'select-close' }).update('Ã') }) });188        var closeSelect = function() {189            select_options.setStyle({ 'visibility' : 'hidden' });190            selected = [];191            select.select('option').each(function (option) {192                if (option.selected) {193                    selected.push(option.text)194                }195            });196            if (selected.size() > 0) {197                select.previous().update('<span class="selected-counter"></span>' + selected.join(', ')).addClassName('filled');198                select.previous().select('span')[0].update(selected.size());199            } else {200                select.previous().update('Choose options...').removeClassName('filled');201            }202            document.stopObserving('click', closeSelect);203        }204        select_options.select('.select-close')[0].observe('click', closeSelect );205        select_options.on('click', '.select-option', function(e, elem) {206            var option = select.select('option[value=' + elem.readAttribute('data-option-value') + ']')[0];207            elem.toggleClassName('active');208            if (option.selected) {209                option.selected = false210            } else {211                option.selected = true;212            }213            if (typeof bundle !== 'undefined') bundle.changeSelection(select);214        });215        select.insert({ before : select_options });216        select.insert({217            before: new Element('div', {'class': 'select-multiple'}).update("Choose options...").observe('click', function(e) {218                    select.previous('.select-multiple-options-wrap').setStyle({ 'visibility' : 'visible' }).observe('click', function(e) {219                        e.stopPropagation();220                    });221                    setTimeout(function() {222                        document.observe('click', closeSelect)223                    }, 1);224                })225        });226        select.setStyle({ 'visibility' : 'hidden', 'position' : 'absolute' });227    });228    var supportsOrientationChange = "onorientationchange" in window,229    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";230    Event.observe(window, orientationEvent, function() {231        var orientation, page, transformValue = {};232        switch(window.orientation){233            case 0:234            orientation = "portrait";235            break;236            case -90:237            orientation = "landscape";238            break;239            case 90:240            orientation = "landscape";241            break;242        }243        if ( $('nav-container') ) {244            setTimeout(function () {245                $$("#nav-container ul").each(function(ul) {246                    ul.setStyle({'width' : document.body.offsetWidth + "px"});247                });248                page = Math.floor(Math.abs(sliderPosition/viewportWidth));249                sliderPosition = (sliderPosition + viewportWidth*page) - document.body.offsetWidth*page;250                viewportWidth = document.body.offsetWidth;251                if ( Modernizr.csstransforms3d ) {252                    transformValue[transformPref] = "translate3d(" + sliderPosition + "px, 0, 0)";253                } else if ( Modernizr.csstransforms ) {254                    transformValue[transformPref] = "translate(" + sliderPosition + "px, 0)";255                }256                $("nav-container").setStyle(transformValue);257                if ( upSellCarousel ) {258                    if (orientation === 'landscape') {259                        upSellCarousel.resize(3);260                    } else {261                        upSellCarousel.resize(2);262                    }263                }264            }, 400);265        }266    });267    //alert(Modernizr.prefixed('transform'));268    // Home Page Slider269    //alert(transformPref);270    var sliderPosition = 0,271        viewportWidth = document.body.offsetWidth,272        last,273        diff;274    $$("#nav-container ul").each(function(ul) { ul.style.width = document.body.offsetWidth + "px"; });275    $$("#nav a").each(function(sliderLink) {276        if (sliderLink.next(0) !== undefined) {277            sliderLink.clonedSubmenuList = sliderLink.next(0);278            sliderLink.observe('click', function(e) {279                e.preventDefault();280                var transformValue = {}281                //homeLink.hasClassName('disabled') ? homeLink.removeClassName('disabled') : '';282                if (last) {283                    diff = e.timeStamp - last284                }285                last = e.timeStamp;286                if (diff && diff < 200) {287                    return288                }289                if (!this.clonedSubmenuList.firstDescendant().hasClassName('subcategory-header')) {290                    var subcategoryHeader = new Element('li', {'class': 'subcategory-header'});291                    subcategoryHeader.insert({292                        top: new Element('button', {'class': 'previous-category'}).update("Back").wrap('div', {'class':'button-wrap'}),293                        bottom: this.innerHTML294                    });295                    this.clonedSubmenuList.insert({296                        top: subcategoryHeader297                    });298                    subcategoryHeader.insert({ after : new Element('li').update('<a href="' + sliderLink.href + '"><span>All Products</span></a>') });299                    this.clonedSubmenuList.firstDescendant().firstDescendant().observe('click', function(e) {300                        if (last) {301                            diff = e.timeStamp - last302                        }303                        last = e.timeStamp;304                        if (diff && diff < 200) {305                            return306                        }307                        if ( Modernizr.csstransforms3d ) {308                            transformValue[transformPref] = "translate3d(" + (document.body.offsetWidth + sliderPosition) + "px, 0, 0)";309                        } else if ( Modernizr.csstransforms ) {310                            transformValue[transformPref] = "translate(" + (document.body.offsetWidth + sliderPosition) + "px, 0)";311                        }312                        $("nav-container").setStyle(transformValue);313                        sliderPosition = sliderPosition + document.body.offsetWidth;314                        setTimeout(function() { $$("#nav-container > ul:last-child")[0].remove(); $("nav-container").setStyle({'height' : 'auto'})  }, 250)315                    });316                    new NoClickDelay(this.clonedSubmenuList);317                };318                $("nav-container").insert(this.clonedSubmenuList.setStyle({'width' : document.body.offsetWidth + 'px'}));319                $('nav-container').setStyle({'height' : this.clonedSubmenuList.getHeight() + 'px'});320                if ( Modernizr.csstransforms3d ) {321                    transformValue[transformPref] = "translate3d(" + (sliderPosition - document.body.offsetWidth) + "px, 0, 0)";322                } else if ( Modernizr.csstransforms ) {323                    transformValue[transformPref] = "translate(" + (sliderPosition - document.body.offsetWidth) + "px, 0)";324                }325                $("nav-container").setStyle(transformValue);326                sliderPosition = sliderPosition - document.body.offsetWidth;327            });328        };329    });330    function getSupportedProp(proparray){331        var root = document.documentElement;332        for ( var i = 0; i < proparray.length; i++ ) {333            if ( typeof root.style[proparray[i]] === "string") {334                return proparray[i];335            }336        }337    }338    function NoClickDelay(el) {339        if ( getSupportedProp(['OTransform']) ) {340            return341        }342        this.element = typeof el == 'object' ? el : document.getElementById(el);343        if( window.Touch ) this.element.addEventListener('touchstart', this, false);344    }345    NoClickDelay.prototype = {346        handleEvent: function(e) {347            switch(e.type) {348                case 'touchstart': this.onTouchStart(e); break;349                case 'touchmove': this.onTouchMove(e); break;350                case 'touchend': this.onTouchEnd(e); break;351            }352        },353        onTouchStart: function(e) {354            this.moved = false;355            this.theTarget = document.elementFromPoint(e.targetTouches[0].clientX, e.targetTouches[0].clientY);356            if(this.theTarget.nodeType == 3) this.theTarget = theTarget.parentNode;357            this.theTarget.className+= ' pressed';358            this.element.addEventListener('touchmove', this, false);359            this.element.addEventListener('touchend', this, false);360        },361        onTouchMove: function() {362            this.moved = true;363            this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');364        },365        onTouchEnd: function(e) {366            e.preventDefault();367            this.element.removeEventListener('touchmove', this, false);368            this.element.removeEventListener('touchend', this, false);369            if( !this.moved && this.theTarget ) {370                this.theTarget.className = this.theTarget.className.replace(/ ?pressed/gi, '');371                var theEvent = document.createEvent('MouseEvents');372                theEvent.initEvent('click', true, true);373                this.theTarget.dispatchEvent(theEvent);374            }375            this.theTarget = undefined;376        }377    };378    if (document.getElementById('nav')) {379        new NoClickDelay(document.getElementById('nav'));380    }381    //iPhone header menu382    $$('dt.menu a')[0].observe('click', function(e) {383            var parent = this.up(), transformValue = {};384            if (parent.hasClassName('active')) {385                parent.removeClassName('active');386                if ( Modernizr.csstransforms3d ) {387                    transformValue[transformPref] = 'translate3d(0, -100%, -1px)';388                } else if ( Modernizr.csstransforms ) {389                    transformValue[transformPref] = 'translate3d(0, -100%)';390                    transformValue['visibility']  = 'hidden';391                }392                $$('.menu-box')[0].setStyle(transformValue);393            } else {394                this.removeClassName('active');395                if ( Modernizr.csstransforms3d ) {396                    transformValue[transformPref] = 'translate3d(0, -100%, -1px)';397                } else if ( Modernizr.csstransforms ) {398                    transformValue[transformPref] = 'translate3d(0, -100%)';399                    transformValue['visibility']  = 'hidden';400                }401                $$('.menu-box')[0].setStyle(transformValue);402                parent.addClassName('active');403                if ( Modernizr.csstransforms3d ) {404                    transformValue[transformPref] = 'translate3d(0, 0%, -1px)';405                    transformValue['visibility']  = 'visible';406                } else if ( Modernizr.csstransforms ) {407                    transformValue[transformPref] = 'translate3d(0, 0%)';408                    transformValue['visibility']  = 'visible';409                }410                parent.next().setStyle(transformValue);411            };412            e.preventDefault();413        });414    if ( $('menu') ) {415        $('menu').select('dd').each(function (elem) {416            elem.observe('webkitTransitionEnd', function (e) {417                if ( !elem.previous().hasClassName('active') ) {418                    elem.setStyle({'visibility' : 'hidden'});419                } else {420                    elem.setStyle({'top' : '1px'});421                }422            });423        });424    }425    //iPhone header menu switchers426    if( $$('#language-switcher li.selected a')[0] ) {427        var curLang = $$('#language-switcher li.selected a')[0].innerHTML;428        $('current-language').update(curLang);429        $$('#language-switcher > a')[0].observe('click', function (e) {430            if ( !this.next().visible() )431                $$('.switcher-options').invoke('hide');432            this.next().toggle().toggleClassName('visible');433            e.preventDefault();434        });435    }436    if( $$('#store-switcher li.selected a')[0] ) {437        var curStore = $$('#store-switcher li.selected a')[0].innerHTML;438        $('current-store').update(curStore);439        $$('#store-switcher > a')[0].observe('click', function (e) {440            if ( !ithis.next().visible() )441                $$('.switcher-options').invoke('hide');442            this.next().toggle().toggleClassName('visible');443            e.preventDefault();444        });445     }446    //Slider447    var Carousel = Class.create({448       initialize: function (carousel, itemsContainer, options) {449           this.options  = Object.extend({450              visibleElements: 3,451              threshold: {452                  x: 30,453                  y: 40454              },455              preventDefaultEvents: false456           }, options || {});457           this.carousel = carousel;458           this.items    = itemsContainer.addClassName('carousel-items');459           this.itemsWrap = this.items.wrap('div', {'class' : 'carousel-items-wrap'});460           this.itemsLength = this.items.childElements().size();461           this.counter  = this.carousel.insert(new Element('div', {'class' : 'counter'})).select('.counter')[0];462           this.controls = carousel.select('.controls')[0] || this.carousel.insert({ top: new Element('div', { 'class' : 'controls'}) }).select('.controls')[0];463           this.prevButton = carousel.select('.prev')[0] || this.controls.insert({ top: new Element('span', { 'class' : 'prev'}) }).select('.prev')[0].addClassName('disabled');464           this.nextButton = carousel.select('.next')[0] || this.controls.insert({ top: new Element('span', { 'class' : 'next'}) }).select('.next')[0];465           this.originalCoord = { x: 0, y: 0 };466           this.finalCoord    = { x: 0, y: 0 };467           this.carousel.wrap('div', { 'class' : 'carousel-wrap' });468           this.nextButton.observe('click', this.moveRight.bind(this));469           this.prevButton.observe('click', this.moveLeft.bind(this));470           this.itemsWrap.observe('touchstart', this.touchStart.bind(this));471           this.itemsWrap.observe('touchmove', this.touchMove.bind(this));472           this.itemsWrap.observe('touchend', this.touchEnd.bind(this));473       },474       init: function () {475           this.itemPos  = 0;476           this.lastItemPos = (this.itemsLength-this.options.visibleElements) * 100/this.options.visibleElements;477           this.itemWidth = 100/this.options.visibleElements + '%';478           this.screens  = Math.ceil(this.itemsLength/this.options.visibleElements);479           this.resizeChilds();480           this.drawCounter();481           return this;482        },483        resize: function(visibleElements) {484            var transformValue = {};485            this.options.visibleElements = visibleElements;486            this.counter.childElements().invoke('remove');487            if ( Modernizr.csstransforms3d ) {488                transformValue[transformPref] = 'translateX(' + 0 + '%)';489            } else if ( Modernizr.csstransforms ) {490                transformValue[transformPref] = 'translate(' + 0 + '%, 0)';491            }492            this.items.setStyle(transformValue);493            this.prevButton.addClassName('disabled');494            this.nextButton.removeClassName('disabled');495            this.init();496        },497        resizeChilds: function () {498           this.items.childElements().each( function(n) {499              n.setStyle({500                  'width': this.itemWidth501              });502           }, this);503        },504        drawCounter: function () {505            if (this.screens > 1) {506                 if (this.controls)507                     this.controls.show()508                 for (var i = 0; i < this.screens; i++) {509                   if (i === 0) {510                       this.counter.insert(new Element('span', {'class': 'active'}));511                   } else {512                       this.counter.insert(new Element('span'));513                   }514               };515           } else {516               if (this.controls)517                   this.controls.hide();518           }519        },520        moveRight: function (e) {521            if(Math.abs(this.itemPos) < this.lastItemPos) {522                var transformValue = {};523                this.itemPos -= 100/this.options.visibleElements * this.options.visibleElements;524                if ( Modernizr.csstransforms3d ) {525                    transformValue[transformPref] = 'translateX(' + this.itemPos + '%)';526                    transformValue['position']    = 'relative';527                } else if ( Modernizr.csstransforms ) {528                    transformValue[transformPref] = 'translate(' + this.itemPos + '%, 0)';529                    transformValue['position']    = 'relative';530                }531                this.items.setStyle(transformValue);532                if (Math.abs(this.itemPos) >= this.lastItemPos) {533                    this.nextButton.addClassName('disabled');534                }535                if (this.prevButton.hasClassName('disabled')) {536                    this.prevButton.removeClassName('disabled');537                };538                this.counter.select('.active')[0].removeClassName('active').next().addClassName('active');539            }540        },541        moveLeft: function (e) {542            if (this.itemPos !== 0) {543                var transformValue = {};544                this.itemPos += 100/this.options.visibleElements * this.options.visibleElements;545                if ( Modernizr.csstransforms3d ) {546                    transformValue[transformPref] = 'translateX(' + this.itemPos + '%)';547                    transformValue['position']    = 'relative';548                } else if ( Modernizr.csstransforms ) {549                    transformValue[transformPref] = 'translate(' + this.itemPos + '%, 0)';550                    transformValue['position']    = 'relative';551                }552                this.items.setStyle(transformValue);553                if(this.itemPos === 0) {554                    this.prevButton.addClassName('disabled');555                };556                if (this.nextButton.hasClassName('disabled')) {557                    this.nextButton.removeClassName('disabled');558                };559                this.counter.select('.active')[0].removeClassName('active').previous().addClassName('active');560            }561        },562        touchStart: function (e) {563            this.originalCoord.x = event.targetTouches[0].pageX;564            this.originalCoord.y = event.targetTouches[0].pageY;565        },566        touchMove: function (e) {567            this.finalCoord.x = e.targetTouches[0].pageX;568            this.finalCoord.y = e.targetTouches[0].pageY;569            var changeX = 0;570            changeX = this.originalCoord.x - this.finalCoord.x;571            if(Math.abs(changeX) > this.options.threshold.x) {572                e.preventDefault();573            }574        },575        touchEnd: function (e) {576            if ( e.preventSwipe ) {577                return578            }579            var changeX;580            changeX = this.originalCoord.x - this.finalCoord.x;581            if(changeX > this.options.threshold.x) {582                this.moveRight(e);583            }584            if(changeX < this.options.threshold.x * -1) {585                this.moveLeft(e);586            }587        }588    });589    if ( $$('.box-up-sell')[0] ) {590        var upSellCarousel = new Carousel($$('.box-up-sell')[0], $$('.products-grid')[0], {591            visibleElements: 2,592            preventDefaultEvents: true593        }).init();594    }595    /*596    if ( $$('.product-gallery')[0] ) {597        var galleryCarousel = new Carousel($$('.product-gallery')[0], $$('.product-gallery > ul')[0], {598            visibleElements: 1,599            preventDefaultEvents: false600        }).init();601    }602    */603    if ( $$('.product-view .product-image li').size() > 1 ) {604        var productGallery = new Carousel($$('.product-view .product-image')[0], $$('.product-image ul')[0], {605            visibleElements: 1,606            preventDefaults: false607        }).init();608    }609    // Swipe Functionality610    var Swipe = Class.create( Carousel, {611        initialize: function (elem, swipeLeft, swipeRight, options) {612            this.options  = Object.extend({613                threshold: {614                    x: 50,615                    y: 20616                },617                preventDefaultEvents: false618            }, options || {});619            this.elem = elem;620            this.originalCoord = { x: 0, y: 0 };621            this.finalCoord    = { x: 0, y: 0 };622            this.elem.observe('touchstart', this.touchStart.bind(this));623            this.elem.observe('touchmove', this.touchMove.bind(this));624            this.elem.observe('touchend', this.touchEnd.bind(this));625            this.moveLeft = swipeRight;626            this.moveRight = swipeLeft;627        }628    });629    /*630    var verticalSwipe = Class.create( Carousel, {631        initialize: function (elem, swipeUp, swipeDown, options) {632            this.options  = Object.extend({633                threshold: {634                    x: 10,635                    y: 10636                },637                preventDefaultEvents: false638            }, options || {});639            this.elem = elem;640            this.originalCoord = { x: 0, y: 0 };641            this.finalCoord    = { x: 0, y: 0 };642            this.elem.observe('touchstart', this.touchStart.bind(this));643            this.elem.observe('touchmove', this.touchMove.bind(this));644            this.elem.observe('touchend', this.touchEnd.bind(this));645            this.moveLeft = swipeDown;646            this.moveRight = swipeUp;647        },648        touchStart: function (e) {649            e.preventDefault();650            this.originalCoord.x = event.targetTouches[0].pageX;651            this.originalCoord.y = event.targetTouches[0].pageY;652        },653        touchMove: function (e) {654            this.finalCoord.x = e.targetTouches[0].pageX;655            this.finalCoord.y = e.targetTouches[0].pageY;656        },657        touchEnd: function (e) {658            var changeY = this.originalCoord.y - this.finalCoord.y;659            if(changeY > this.options.threshold.y) {660                this.moveRight();661            }662            if(changeY < this.options.threshold.y * -1) {663                this.moveLeft();664            }665        }666    });667    if ( $$('.block-cart')[0] ) {668        new verticalSwipe($$('dt.cart')[0],669            function () {670            },671            function () {672                $$('.block-cart')[0].setStyle({'webkitTransform':'translate3d(0, 42px, 0)'})673            }674        );675    };676    */677    zoomGallery = Class.create({678        initialize: function (gallery, options) {679            this.options  = Object.extend({680                threshold: {681                  x: 30,682                  y: 40683              }684            }, options || {});685            this.gallery = gallery;686            this.counter  = this.gallery.insert({after : new Element('div', {'class' : 'counter'})}).next();687            this.controls = gallery.select('.controls')[0] || this.gallery.insert({ bottom: new Element('div', { 'class' : 'controls'}) }).select('.controls')[0];688            this.prevButton = gallery.select('.prev')[0] || this.controls.insert({ top: new Element('span', { 'class' : 'prev'}) }).select('.prev')[0].addClassName('disabled');689            this.nextButton = gallery.select('.next')[0] || this.controls.insert({ top: new Element('span', { 'class' : 'next'}) }).select('.next')[0];690            this.wrap = this.gallery.down();691            this.scale = 1.0;692            this.dimensions;693            this.items    = gallery.select('img');694            this.itemsLength = this.items.size();695            this.pos = 0;696            this.step = (100/this.itemsLength).toFixed(2) * 1;697            this.lastPos = this.step * this.itemsLength;698            this.originalCoord = { x: 0, y: 0 };699            this.finalCoord    = { x: 0, y: 0 };700            this.offset = { x: 0, y: 0 };701            this.ret = { x: 0, y: 0 };702            703            this.nextButton.observe('click', this.moveRight.bind(this));704            this.prevButton.observe('click', this.moveLeft.bind(this));705            706            if (this.itemsLength < 2) {707                this.controls.hide();708            }709            this.items.each(function (item) {710                item.observe('touchstart', this.touchStart.bind(this));711                item.observe('touchmove', this.touchMove.bind(this));712                item.observe('touchend', this.touchEnd.bind(this));713                item.observe('gesturestart', this.gestureStart.bind(this));714                item.observe('gesturechange', this.gestureChange.bind(this));715                item.observe('gestureend', this.gestureEnd.bind(this));716            }.bind(this));717            this.wrap.setStyle({718                'width' : this.itemsLength * 100 + '%'719            });720            this.drawCounter();721        },722        drawCounter: function () {723            if (this.itemsLength > 1) {724                for (var i = 0; i < this.itemsLength; i++) {725                    if (i === 0) {726                        this.counter.insert(new Element('span', {'class': 'active'}));727                    } else {728                    this.counter.insert(new Element('span'));729                    }730                };731            }732        },733        moveRight: function (elem) {734            if (this.pos !== this.lastPos - this.step) {735            736                if(elem == event) {737                    this.items.each(function (elm) {738                        elm.setStyle({739                            'webkitTransition' : '300ms linear',740                            'webkitTransform' : 'scale3d(1, 1, 1)'741                        });742                    });743                } else {744                    elem.setStyle({745                        'webkitTransition' : '300ms linear',746                        'webkitTransform' : 'scale3d(1, 1, 1)'747                    });748                }749                this.scale = 1.0;750                this.pos += this.step;751                var transformValue = {};752                if ( Modernizr.csstransforms3d ) {753                    this.wrap.setStyle({754                        'webkitTransition' : '300ms linear',755                        'webkitTransform' : 'translate3d(' + this.pos*-1 + '%, 0, 0)'756                    });757                } else if ( Modernizr.csstransforms ) {758                    transformValue[transformPref] = 'translate(' + this.pos*-1 + '%, 0)';759                    this.wrap.setStyle(transformValue);760                }761                762                if (this.pos == this.lastPos - this.step) {763                    this.nextButton.addClassName('disabled');764                }765                if (this.prevButton.hasClassName('disabled')) {766                    this.prevButton.removeClassName('disabled');767                };768                this.counter.select('.active')[0].removeClassName('active').next().addClassName('active');769            }770        },771        moveLeft: function (elem) {772            if (this.pos !== 0) {773                if(elem == event) {774                    this.items.each(function (elm) {775                        elm.setStyle({776                            'webkitTransition' : '300ms linear',777                            'webkitTransform' : 'scale3d(1, 1, 1)'778                        });779                    });780                } else {781                    elem.setStyle({782                        'webkitTransition' : '300ms linear',783                        'webkitTransform' : 'scale3d(1, 1, 1)'784                    });785                }786                this.scale = 1.0;787                this.pos -= this.step;788                var transformValue = {};789                if ( Modernizr.csstransforms3d ) {790                    this.wrap.setStyle({791                        'webkitTransition' : '300ms linear',792                        'webkitTransform' : 'translate3d(' + this.pos*-1 + '%, 0, 0)'793                    });794                } else if ( Modernizr.csstransforms ) {795                    transformValue[transformPref] = 'translate(' + this.pos*-1 + '%, 0)';796                    this.wrap.setStyle(transformValue);797                }798                799                if (this.pos == 0) {800                    this.prevButton.addClassName('disabled');801                }802                if (this.nextButton.hasClassName('disabled')) {803                    this.nextButton.removeClassName('disabled');804                };805                this.counter.select('.active')[0].removeClassName('active').previous().addClassName('active');806            }807            //console.log('moveLeft()');808        },809        gestureStart : function (e) {810            var $this = e.target;811            e.preventDefault();812            this.gestureStart = true;813            this.dimensions = $this.getDimensions();814        },815        gestureChange : function (e) {816            e.preventDefault();817            var $this = e.target818            if ( (e.scale * this.scale) > 2 )819                return820            $this.setStyle({821                'webkitTransition' : '',822                'webkitTransform' : 'scale3d(' + (e.scale * this.scale) + ', ' + (e.scale * this.scale) + ', 1)',823            });824        },825        gestureEnd : function (e) {826            var $this = e.target;827            if ( (e.scale * this.scale) < 1 ) {828                $this.setStyle({829                    'webkitTransition' : '300ms linear',830                    'webkitTransform' : 'scale3d(1, 1, 1)'831                });832                this.scale = 1.0;833            } else if ( e.scale > 2 ) {834                this.scale = 2;835            } else {836                this.scale *= e.scale;837            }838            setTimeout(function () {839                this.gestureStart = false;840            }.bind(this), 50);841            this.originalCoord.x = this.originalCoord.y = this.finalCoord.x = this.finalCoord.y = this.offset.x = this.offset.y = 0;842        },843        touchStart: function (e) {844            var $this = e.target;845            if (e.targetTouches.length != 1) {846                return false847            }848            this.t1 = Date.now();849            this.originalCoord.x = e.targetTouches[0].clientX;850            this.originalCoord.y = e.targetTouches[0].clientY;851            $this.setStyle({ 'webkitTransition' : '' });852        },853        touchMove: function (e) {854            this.finalCoord.x = e.targetTouches[0].clientX;855            this.finalCoord.y = e.targetTouches[0].clientY;856            if (e.targetTouches.length != 1 || this.scale === 1.0 || this.gestureStart)857                return false858            e.preventDefault();859            var $this = e.target;860            var changeX = this.offset.x + this.finalCoord.x - this.originalCoord.x,861                changeY = this.offset.y + this.finalCoord.y - this.originalCoord.y,862                topX = (this.dimensions.width  * (this.scale - 1))/2,863                topY = (this.dimensions.height * (this.scale - 1))/2,864                tension = 1.55;865            if ( topX < Math.abs(changeX) ) {866                if ( changeX < 0 ) {867                    changeX = changeX - (changeX + topX)/tension;868                } else {869                    changeX = changeX - (changeX - topX)/tension;870                }871            }872            if ( topY < Math.abs(changeY) ) {873                if ( changeY < 0 ) {874                    changeY = changeY - (changeY + topY)/tension;875                } else {876                    changeY = changeY - (changeY - topY)/tension;877                }878            }879            $this.setStyle({880                'webkitTransform' : 'translate3d(' + changeX + 'px,' + changeY + 'px, 0) scale3d(' + this.scale + ',' + this.scale  + ',1)'881            });882        },883        touchEnd: function (e) {884            this.t2 = Date.now();885            var $this = e.target,886                timeDelta = this.t2 - this.t1,887                changeX = this.originalCoord.x - this.finalCoord.x,888                changeY = this.originalCoord.y - this.finalCoord.y;889            if(changeX > this.options.threshold.x && Math.abs(changeY) < 40 && timeDelta < 300) {890                this.moveRight($this);891            }892            if(changeX < this.options.threshold.x * -1 && Math.abs(changeY) < 40 && timeDelta < 300) {893                this.moveLeft($this);894            }895            if (e.targetTouches.length > 0 || this.gestureStart || timeDelta < 100)896                return false;897            this.offset.x += this.finalCoord.x - this.originalCoord.x;898            this.offset.y += this.finalCoord.y - this.originalCoord.y;899            var topX = (this.dimensions.width  * (this.scale - 1))/2,900                topY = (this.dimensions.height * (this.scale - 1))/2,901                moved = false;902            if ( Math.abs(this.offset.x) > topX ) {903                moved = true;904                $this.setStyle({905                    'webkitTransition' : '-webkit-transform 100ms ease-out',906                    'webkitTransform' : 'translate3d(' + (this.offset.x  < 0 ? topX*-1 : topX) + 'px,' + this.offset.y + 'px, 0) scale3d(' + this.scale + ',' + this.scale  + ',1)'907                });908                this.offset.x = this.offset.x  < 0 ? topX*-1 : topX;909            }910            if ( Math.abs(this.offset.y) > topY ) {911                moved = true;912                $this.setStyle({913                    'webkitTransition' : '-webkit-transform 100ms ease-out',914                    'webkitTransform' : 'translate3d(' + this.offset.x + 'px,' + (this.offset.y  < 0 ? topY*-1 : topY) + 'px, 0) scale3d(' + this.scale + ',' + this.scale  + ',1)'915                });916                this.offset.y = this.offset.y  < 0 ? topY*-1 : topY;917            }918            if ( Math.abs(this.offset.x) > topX && Math.abs(this.offset.y) > topY && !moved ) {919                $this.setStyle({920                    'webkitTransition' : '-webkit-transform 100ms ease-out',921                    'webkitTransform' : 'translate3d(' + (this.offset.x  < 0 ? topX*-1 : topX) + 'px,' + (this.offset.y  < 0 ? topY*-1 : topY) + 'px, 0) scale3d(' + this.scale + ',' + this.scale  + ',1)'922                });923                this.offset.x = this.offset.x  < 0 ? topX*-1 : topX;924                this.offset.y = this.offset.y  < 0 ? topY*-1 : topY;925            }926        },927    });928    if ( $$('.c-list') && supportsTouchCallout() ) {929        $$('.c-list .product-image').each(function(n) {930            var parent = n.up('a'),931                clone  = n.up().clone(true).addClassName('cloned');932            parent.insert(clone.wrap('div', {'class' : 'cloned-wrap'}));933            new webkit_draggable(clone.up(), { handle : clone.select('.product-image')[0], revert : true, scroll : true, onStart : function(r, e) {934                    r.setStyle({'opacity':'100'}).down('.wrap').addClassName('drop-start');935                },936                onEnd : function(r, e) {937                    r.setStyle({'opacity':'0'}).down('.wrap').removeClassName('drop-start');938                }939            });940        });941        webkit_drop.add($('menu'),942        {943            onDrop : function(elem, e) { e.preventDefault(); setLocation(elem.up('li').down('.actions li:last-child a').readAttribute('href')); elem.remove(); },944            onOver : function(elem, e) { e.preventDefault(); elem.down().addClassName('to-cart-animate'); },945            onOut  : function(elem) { elem.down().removeClassName('to-cart-animate'); }946        });947    }948    if ( $('customer-reviews') ) {949        $('customer-reviews').select('dt > a').each(function (a) {950            a.replace('<h3>' + a.innerHTML + '</h3>');951        });952    }...

JSValueTransformerTests.js

Source:JSValueTransformerTests.js

...17'use strict';18JSClass("JSValueTransformerTests", TKTestSuite, {19    testIsNullTransformer: function(){20        var transformer = JSIsNullValueTransformer;21        var value = transformer.transformValue(null);22        TKAssertExactEquals(value, true);23        value = transformer.transformValue(undefined);24        TKAssertExactEquals(value, false);25        value = transformer.transformValue("asdf");26        TKAssertExactEquals(value, false);27        value = transformer.transformValue("");28        TKAssertExactEquals(value, false);29        value = transformer.transformValue(1);30        TKAssertExactEquals(value, false);31        value = transformer.transformValue(0);32        TKAssertExactEquals(value, false);33        value = transformer.transformValue(true);34        TKAssertExactEquals(value, false);35        value = transformer.transformValue(false);36        TKAssertExactEquals(value, false);37        value = transformer.transformValue([1]);38        TKAssertExactEquals(value, false);39        value = transformer.transformValue([]);40        TKAssertExactEquals(value, false);41        value = transformer.transformValue({a: 1});42        TKAssertExactEquals(value, false);43        value = transformer.transformValue({});44        TKAssertExactEquals(value, false);45        value = transformer.transformValue(NaN);46        TKAssertExactEquals(value, false);47        value = transformer.transformValue(Infinity);48        TKAssertExactEquals(value, false);49        TKAssertThrows(function(){50            transformer.reverseTransformValue(true);51        });52        TKAssertThrows(function(){53            transformer.reverseTransformValue(false);54        });55    },56    testIsNotNullTransformer: function(){57        var transformer = JSIsNotNullValueTransformer;58        var value = transformer.transformValue(null);59        TKAssertExactEquals(value, false);60        value = transformer.transformValue(undefined);61        TKAssertExactEquals(value, true);62        value = transformer.transformValue("asdf");63        TKAssertExactEquals(value, true);64        value = transformer.transformValue("");65        TKAssertExactEquals(value, true);66        value = transformer.transformValue(1);67        TKAssertExactEquals(value, true);68        value = transformer.transformValue(0);69        TKAssertExactEquals(value, true);70        value = transformer.transformValue(true);71        TKAssertExactEquals(value, true);72        value = transformer.transformValue(false);73        TKAssertExactEquals(value, true);74        value = transformer.transformValue([1]);75        TKAssertExactEquals(value, true);76        value = transformer.transformValue([]);77        TKAssertExactEquals(value, true);78        value = transformer.transformValue({a: 1});79        TKAssertExactEquals(value, true);80        value = transformer.transformValue({});81        TKAssertExactEquals(value, true);82        value = transformer.transformValue(NaN);83        TKAssertExactEquals(value, true);84        value = transformer.transformValue(Infinity);85        TKAssertExactEquals(value, true);86        TKAssertThrows(function(){87            transformer.reverseTransformValue(true);88        });89        TKAssertThrows(function(){90            transformer.reverseTransformValue(false);91        });92    },93    testIsEmptyTransformer: function(){94        var transformer = JSIsEmptyValueTransformer;95        var value = transformer.transformValue(null);96        TKAssertExactEquals(value, true);97        value = transformer.transformValue(undefined);98        TKAssertExactEquals(value, true);99        value = transformer.transformValue("asdf");100        TKAssertExactEquals(value, false);101        value = transformer.transformValue("");102        TKAssertExactEquals(value, true);103        value = transformer.transformValue(1);104        TKAssertExactEquals(value, false);105        value = transformer.transformValue(0);106        TKAssertExactEquals(value, true);107        value = transformer.transformValue(true);108        TKAssertExactEquals(value, false);109        value = transformer.transformValue(false);110        TKAssertExactEquals(value, true);111        value = transformer.transformValue([1]);112        TKAssertExactEquals(value, false);113        value = transformer.transformValue([]);114        TKAssertExactEquals(value, true);115        value = transformer.transformValue({a: 1});116        TKAssertExactEquals(value, false);117        value = transformer.transformValue({});118        TKAssertExactEquals(value, false);119        value = transformer.transformValue(NaN);120        TKAssertExactEquals(value, true);121        value = transformer.transformValue(Infinity);122        TKAssertExactEquals(value, false);123        TKAssertThrows(function(){124            transformer.reverseTransformValue(true);125        });126        TKAssertThrows(function(){127            transformer.reverseTransformValue(false);128        });129    },130    testIsNotEmptyTransformer: function(){131        var transformer = JSIsNotEmptyValueTransformer;132        var value = transformer.transformValue(null);133        TKAssertExactEquals(value, false);134        value = transformer.transformValue(undefined);135        TKAssertExactEquals(value, false);136        value = transformer.transformValue("asdf");137        TKAssertExactEquals(value, true);138        value = transformer.transformValue("");139        TKAssertExactEquals(value, false);140        value = transformer.transformValue(1);141        TKAssertExactEquals(value, true);142        value = transformer.transformValue(0);143        TKAssertExactEquals(value, false);144        value = transformer.transformValue(true);145        TKAssertExactEquals(value, true);146        value = transformer.transformValue(false);147        TKAssertExactEquals(value, false);148        value = transformer.transformValue([1]);149        TKAssertExactEquals(value, true);150        value = transformer.transformValue([]);151        TKAssertExactEquals(value, false);152        value = transformer.transformValue({a: 1});153        TKAssertExactEquals(value, true);154        value = transformer.transformValue({});155        TKAssertExactEquals(value, true);156        value = transformer.transformValue(NaN);157        TKAssertExactEquals(value, false);158        value = transformer.transformValue(Infinity);159        TKAssertExactEquals(value, true);160        TKAssertThrows(function(){161            transformer.reverseTransformValue(true);162        });163        TKAssertThrows(function(){164            transformer.reverseTransformValue(false);165        });166    },167    testNegateBooleanTransformer: function(){168        var transformer = JSNegateBooleanValueTransformer;169        var value = transformer.transformValue(null);170        TKAssertExactEquals(value, true);171        value = transformer.transformValue(undefined);172        TKAssertExactEquals(value, true);173        value = transformer.transformValue("asdf");174        TKAssertExactEquals(value, false);175        value = transformer.transformValue("");176        TKAssertExactEquals(value, true);177        value = transformer.transformValue(1);178        TKAssertExactEquals(value, false);179        value = transformer.transformValue(0);180        TKAssertExactEquals(value, true);181        value = transformer.transformValue(true);182        TKAssertExactEquals(value, false);183        value = transformer.transformValue(false);184        TKAssertExactEquals(value, true);185        value = transformer.transformValue([1]);186        TKAssertExactEquals(value, false);187        value = transformer.transformValue([]);188        TKAssertExactEquals(value, false);189        value = transformer.transformValue({a: 1});190        TKAssertExactEquals(value, false);191        value = transformer.transformValue({});192        TKAssertExactEquals(value, false);193        value = transformer.transformValue(NaN);194        TKAssertExactEquals(value, true);195        value = transformer.transformValue(Infinity);196        TKAssertExactEquals(value, false);197        value = transformer.reverseTransformValue(null);198        TKAssertExactEquals(value, true);199        value = transformer.reverseTransformValue(undefined);200        TKAssertExactEquals(value, true);201        value = transformer.reverseTransformValue("asdf");202        TKAssertExactEquals(value, false);203        value = transformer.reverseTransformValue("");204        TKAssertExactEquals(value, true);205        value = transformer.reverseTransformValue(1);206        TKAssertExactEquals(value, false);207        value = transformer.reverseTransformValue(0);208        TKAssertExactEquals(value, true);209        value = transformer.reverseTransformValue(true);210        TKAssertExactEquals(value, false);211        value = transformer.reverseTransformValue(false);212        TKAssertExactEquals(value, true);213        value = transformer.reverseTransformValue([1]);214        TKAssertExactEquals(value, false);215        value = transformer.reverseTransformValue([]);216        TKAssertExactEquals(value, false);217        value = transformer.reverseTransformValue({a: 1});218        TKAssertExactEquals(value, false);219        value = transformer.reverseTransformValue({});220        TKAssertExactEquals(value, false);221        value = transformer.reverseTransformValue(NaN);222        TKAssertExactEquals(value, true);223        value = transformer.reverseTransformValue(Infinity);224        TKAssertExactEquals(value, false);225    },226    testCommaSeparatedListValueTransformer: function(){227        var transformer = JSCommaSeparatedListValueTransformer;228        var value = transformer.transformValue(null);229        TKAssertExactEquals(value, '');230        value = transformer.transformValue(undefined);231        TKAssertExactEquals(value, '');232        value = transformer.transformValue(['one', 'two']);233        TKAssertExactEquals(value, 'one, two');234        TKAssertThrows(function(){235            value = transformer.transformValue("");236        });237        TKAssertThrows(function(){238            value = transformer.transformValue('abc');239        });240        TKAssertThrows(function(){241            TKAssertExactEquals(value, 1);242        });243        TKAssertThrows(function(){244            value = transformer.transformValue(0);245        });246        TKAssertThrows(function(){247            value = transformer.transformValue(true);248        });249        TKAssertThrows(function(){250            value = transformer.transformValue(false);251        });252        value = transformer.transformValue([1]);253        TKAssertExactEquals(value, '1');254        value = transformer.transformValue([]);255        TKAssertExactEquals(value, '');256        TKAssertThrows(function(){257            value = transformer.transformValue({a: 1});258        });259        TKAssertThrows(function(){260            value = transformer.transformValue({});261        });262        TKAssertThrows(function(){263            value = transformer.transformValue(NaN);264        });265        TKAssertThrows(function(){266            value = transformer.transformValue(Infinity);267        });268        value = transformer.reverseTransformValue(null);269        TKAssertExactEquals(value.length, 0);270        value = transformer.reverseTransformValue(undefined);271        TKAssertExactEquals(value.length, 0);272        value = transformer.reverseTransformValue("asdf");273        TKAssertExactEquals(value.length, 1);274        TKAssertExactEquals(value[0], 'asdf');275        value = transformer.reverseTransformValue("one,two");276        TKAssertExactEquals(value.length, 2);277        TKAssertExactEquals(value[0], 'one');278        TKAssertExactEquals(value[1], 'two');279        value = transformer.reverseTransformValue("one,two,three");280        TKAssertExactEquals(value.length, 3);...

LayoutUberblick.js

Source:LayoutUberblick.js

1import { h } from "hyperapp"2import { LANGUAGE_DE } from '../../language/DE.js'3import NavigationBar from '../navigation/NavigationBar.js'4import BlockValue from '../blocks/BlockValue.js'5import BlockValueEmpty from '../blocks/BlockValueEmpty.js'6import BlockHeadline from '../blocks/BlockHeadline.js'7const Layout = (state, actions) =>8        h("wrapper", {}, [9        h(NavigationBar),10        h("Blockwrapper", {}, [11        h("header", {}, LANGUAGE_DE.layout.title.overview ),12        h("description", {}, LANGUAGE_DE.layout.description.overview ),13        h("Blockgroup", {}, [14          <BlockHeadline15              title="Facebook"16              icon="facebookIcon"17          />,18          <BlockValue19              apiurl=""20              transform="TransformValue"21              title="IMPRESSIONS"22              value="0,091"23              currency="Cent / Click"24              change="-6,7"25              fn={actions.chg_title}26          />,27          <BlockValue28              apiurl=""29              transform="TransformValue"30              title="INTERACTIONS"31              value="0,091"32              currency="Cent / Click"33              change="-6,7"34              fn={actions.chg_title}35          />,36          <BlockValue37              apiurl=""38              transform="TransformValue"39              title="CPC"40              value="0,091"41              currency="Cent / Click"42              change="-6,7"43              fn={actions.chg_title}44          />,45          <BlockValue46              apiurl=""47              transform="TransformValue"48              title="CTR"49              value="0,091"50              currency="Cent / Click"51              change="-6,7"52              fn={actions.chg_title}53          />,54          <BlockValue55              apiurl=""56              transform="TransformValue"57              title="CONVERTIONS"58              value="0,091"59              currency="Cent / Click"60              change="-6,7"61              fn={actions.chg_title}62          />63        ]),64        h("Blockgroup", {}, [65          <BlockHeadline66              title="YouTube"67              icon="youtubeIcon"68          />,69          <BlockValue70              apiurl=""71              transform="TransformValue"72              title="VIEWS"73              value="0,091"74              currency="Cent / Click"75              change="-6,7"76              fn={actions.chg_title}77          />,78          <BlockValue79              apiurl=""80              transform="TransformValue"81              title="VIEWRATE"82              value="0,091"83              currency="Cent / Click"84              change="-6,7"85              fn={actions.chg_title}86          />,87          <BlockValue88              apiurl=""89              transform="TransformValue"90              title="100% COMPLETE RATE"91              value="0,091"92              currency="Cent / Click"93              change="-6,7"94              fn={actions.chg_title}95          />,96          <BlockValue97              apiurl=""98              transform="TransformValue"99              title="CTR"100              value="0,091"101              currency="Cent / Click"102              change="-6,7"103              fn={actions.chg_title}104          />,105          <BlockValue106              apiurl=""107              transform="TransformValue"108              title="SUBSCRIBERS"109              value="0,091"110              currency="Cent / Click"111              change="-6,7"112              fn={actions.chg_title}113          />114        ]),115        h("Blockgroup", {}, [116          <BlockHeadline117              title="Instagram"118              icon="instagramIcon"119          />,120          <BlockValue121              apiurl=""122              transform="TransformValue"123              title="IMPRESSIONS"124              value="0,091"125              currency="Cent / Click"126              change="-6,7"127              fn={actions.chg_title}128          />,129          <BlockValue130              apiurl=""131              transform="TransformValue"132              title="INTERACTIONS"133              value="0,091"134              currency="Cent / Click"135              change="-6,7"136              fn={actions.chg_title}137          />,138          <BlockValue139              apiurl=""140              transform="TransformValue"141              title="CPC"142              value="0,091"143              currency="Cent / Click"144              change="-6,7"145              fn={actions.chg_title}146          />,147          <BlockValue148              apiurl=""149              transform="TransformValue"150              title="CTR"151              value="0,091"152              currency="Cent / Click"153              change="-6,7"154              fn={actions.chg_title}155          />,156          <BlockValue157              apiurl=""158              transform="TransformValue"159              title="CONVERSIONS"160              value="0,091"161              currency="Cent / Click"162              change="-6,7"163              fn={actions.chg_title}164          />165        ]),166        h("Blockgroup", {}, [167          <BlockHeadline168              title="SEA"169              icon="seaIcon"170          />,171          <BlockValue172              apiurl=""173              transform="TransformValue"174              title="IMPRESIONS"175              value="0,091"176              currency="Cent / Click"177              change="-6,7"178              fn={actions.chg_title}179          />,180          <BlockValueEmpty/>,181          <BlockValue182              apiurl=""183              transform="TransformValue"184              title="CPC"185              value="0,091"186              currency="Cent / Click"187              change="-6,7"188              fn={actions.chg_title}189          />,190          <BlockValue191              apiurl=""192              transform="TransformValue"193              title="CTR"194              value="0,091"195              currency="Cent / Click"196              change="-6,7"197              fn={actions.chg_title}198          />,199          <BlockValue200              apiurl=""201              transform="TransformValue"202              title="CONVERSIONS"203              value="0,091"204              currency="Cent / Click"205              change="-6,7"206              fn={actions.chg_title}207          />208        ]),209        h("Blockgroup", {}, [210          <BlockHeadline211              title="Native"212              icon="nativeIcon"213          />,214          <BlockValue215              apiurl=""216              transform="TransformValue"217              title="IMPRESIONS"218              value="0,091"219              currency="Cent / Click"220              change="-6,7"221              fn={actions.chg_title}222          />,223          <BlockValueEmpty/>,224          <BlockValue225              apiurl=""226              transform="TransformValue"227              title="CPC"228              value="0,091"229              currency="Cent / Click"230              change="-6,7"231              fn={actions.chg_title}232          />,233          <BlockValue234              apiurl=""235              transform="TransformValue"236              title="CTR"237              value="0,091"238              currency="Cent / Click"239              change="-6,7"240              fn={actions.chg_title}241          />,242          <BlockValue243              apiurl=""244              transform="TransformValue"245              title="CONVERSIONS"246              value="0,091"247              currency="Cent / Click"248              change="-6,7"249              fn={actions.chg_title}250          />251        ]),252        ]),253        h("split", {}, [254          h("div", {},"")255        ])256      ])...

torrentListPropMap.js

Source:torrentListPropMap.js

1const regEx = require('../../shared/util/regEx');2const torrentListPropMap = new Map();3const booleanTransformer = value => value === '1';4const dateTransformer = dirtyDate => {5  if (!dirtyDate) {6    return '';7  }8  const date = dirtyDate.trim();9  if (date === '0') {10    return '';11  }12  return date;13};14const defaultTransformer = value => value;15torrentListPropMap.set('hash', {16  methodCall: 'd.hash=',17  transformValue: defaultTransformer,18});19torrentListPropMap.set('name', {20  methodCall: 'd.name=',21  transformValue: defaultTransformer,22});23torrentListPropMap.set('message', {24  methodCall: 'd.message=',25  transformValue: defaultTransformer,26});27torrentListPropMap.set('state', {28  methodCall: 'd.state=',29  transformValue: defaultTransformer,30});31torrentListPropMap.set('isStateChanged', {32  methodCall: 'd.state_changed=',33  transformValue: booleanTransformer,34});35torrentListPropMap.set('isActive', {36  methodCall: 'd.is_active=',37  transformValue: booleanTransformer,38});39torrentListPropMap.set('isComplete', {40  methodCall: 'd.complete=',41  transformValue: booleanTransformer,42});43torrentListPropMap.set('isHashChecking', {44  methodCall: 'd.is_hash_checking=',45  transformValue: booleanTransformer,46});47torrentListPropMap.set('isOpen', {48  methodCall: 'd.is_open=',49  transformValue: booleanTransformer,50});51torrentListPropMap.set('priority', {52  methodCall: 'd.priority=',53  transformValue: defaultTransformer,54});55torrentListPropMap.set('upRate', {56  methodCall: 'd.up.rate=',57  transformValue: Number,58});59torrentListPropMap.set('upTotal', {60  methodCall: 'd.up.total=',61  transformValue: Number,62});63torrentListPropMap.set('downRate', {64  methodCall: 'd.down.rate=',65  transformValue: Number,66});67torrentListPropMap.set('downTotal', {68  methodCall: 'd.down.total=',69  transformValue: Number,70});71torrentListPropMap.set('ratio', {72  methodCall: 'd.ratio=',73  transformValue: Number,74});75torrentListPropMap.set('bytesDone', {76  methodCall: 'd.bytes_done=',77  transformValue: Number,78});79torrentListPropMap.set('sizeBytes', {80  methodCall: 'd.size_bytes=',81  transformValue: Number,82});83torrentListPropMap.set('peersConnected', {84  methodCall: 'd.peers_connected=',85  transformValue: Number,86});87torrentListPropMap.set('directory', {88  methodCall: 'd.directory=',89  transformValue: defaultTransformer,90});91torrentListPropMap.set('basePath', {92  methodCall: 'd.base_path=',93  transformValue: defaultTransformer,94});95torrentListPropMap.set('baseFilename', {96  methodCall: 'd.base_filename=',97  transformValue: defaultTransformer,98});99torrentListPropMap.set('baseDirectory', {100  methodCall: 'd.directory_base=',101  transformValue: defaultTransformer,102});103torrentListPropMap.set('seedingTime', {104  methodCall: 'd.custom=seedingtime',105  transformValue: defaultTransformer,106});107torrentListPropMap.set('dateAdded', {108  methodCall: 'd.custom=addtime',109  transformValue: dateTransformer,110});111torrentListPropMap.set('dateCreated', {112  methodCall: 'd.creation_date=',113  transformValue: dateTransformer,114});115torrentListPropMap.set('throttleName', {116  methodCall: 'd.throttle_name=',117  transformValue: defaultTransformer,118});119torrentListPropMap.set('isMultiFile', {120  methodCall: 'd.is_multi_file=',121  transformValue: booleanTransformer,122});123torrentListPropMap.set('isPrivate', {124  methodCall: 'd.is_private=',125  transformValue: booleanTransformer,126});127torrentListPropMap.set('tags', {128  methodCall: 'd.custom1=',129  transformValue: value => {130    if (value === '') {131      return [];132    }133    return value134      .split(',')135      .sort()136      .map(tag => decodeURIComponent(tag));137  },138});139torrentListPropMap.set('comment', {140  methodCall: 'd.custom2=',141  transformValue: value => {142    let comment = decodeURIComponent(value);143    if (comment.match(/^VRS24mrker/)) {144      comment = comment.substr(10);145    }146    return comment;147  },148});149torrentListPropMap.set('ignoreScheduler', {150  methodCall: 'd.custom=sch_ignore',151  transformValue: booleanTransformer,152});153torrentListPropMap.set('trackerURIs', {154  methodCall: 'cat="$t.multicall=d.hash=,t.url=,cat={|||}"',155  transformValue: value => {156    const trackers = value.split('|||');157    const trackerDomains = [];158    trackers.forEach(tracker => {159      let domain = regEx.domainName.exec(tracker);160      if (domain && domain[1]) {161        domain = domain[1];162        const minSubsetLength = 3;163        const domainSubsets = domain.split('.');164        let desiredSubsets = 2;165        if (domainSubsets.length > desiredSubsets) {166          const lastDesiredSubset = domainSubsets[domainSubsets.length - desiredSubsets];167          if (lastDesiredSubset.length <= minSubsetLength) {168            desiredSubsets++;169          }170        }171        domain = domainSubsets.slice(desiredSubsets * -1).join('.');172        trackerDomains.push(domain);173      }174    });175    return trackerDomains;176  },177});178torrentListPropMap.set('seedsConnected', {179  methodCall: 'd.peers_complete=',180  transformValue: Number,181});182torrentListPropMap.set('seedsTotal', {183  methodCall: 'cat="$t.multicall=d.hash=,t.scrape_complete=,cat={|||}"',184  transformValue: value => Number(value.substr(0, value.indexOf('|||'))),185});186torrentListPropMap.set('peersConnected', {187  methodCall: 'd.peers_accounted=',188  transformValue: Number,189});190torrentListPropMap.set('peersTotal', {191  methodCall: 'cat="$t.multicall=d.hash=,t.scrape_incomplete=,cat={|||}"',192  transformValue: value => Number(value.substr(0, value.indexOf('|||'))),193});...

transform-value.js

Source:transform-value.js

1(function() {2  var TransformValue, Value,3    extend = function(child, parent) { for (var key in parent) { if (hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },4    hasProp = {}.hasOwnProperty;5  Value = require('../value');6  TransformValue = (function(superClass) {7    extend(TransformValue, superClass);8    function TransformValue() {9      return TransformValue.__super__.constructor.apply(this, arguments);10    }11    TransformValue.names = ['transform'];12    TransformValue.prototype.replace = function(value, prefix) {13      if (prefix === '-ms-') {14        return value;15      } else {16        return TransformValue.__super__.replace.apply(this, arguments);17      }18    };19    return TransformValue;20  })(Value);21  module.exports = TransformValue;...

Using AI Code Generation

1const { transformValue } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const page = await browser.newPage();6  const search = await page.$('input[name="q"]');7  await search.evaluate((element, value) => {8    element.value = transformValue(value, element);9  }, 'abc');10  await browser.close();11})();12### `transformValue(value: string, element: ElementHandle): string`

Using AI Code Generation

1const { transformValue } = require('playwright/lib/server/dom.js');2const { chromium } = require('playwright');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  const handle = await page.$('text=Get started');8  const result = await handle.evaluate((element) => {9    return transformValue(element, 'textContent');10  });11  console.log(result);12  await browser.close();13})();14[Apache-2.0](

Using AI Code Generation

1const { transformValue } = require('playwright/lib/server/frames');2const { Frame } = require('playwright/lib/server/frame');3const { transformValue } = require('playwright/lib/server/frames');4const { Frame } = require('playwright/lib/server/frame');5Frame.prototype.transformValue = function (value) {6  return transformValue(value);7};8const { transformValue } = require('playwright/lib/server/frames');9const { Frame } = require('playwright/lib/server/frame');10Frame.prototype.transformValue = function (value) {11  return transformValue(value);12};13const { transformValue } = require('playwright/lib/server/frames');14const { Frame } = require('playwright/lib/server/frame');15Frame.prototype.transformValue = function (value) {16  return transformValue(value);17};18const { transformValue } = require('playwright/lib/server/frames');19const { Frame } = require('playwright/lib/server/frame');20Frame.prototype.transformValue = function (value) {21  return transformValue(value);22};

Using AI Code Generation

1const { chromium } = require('playwright');2const { transformValue } = require('playwright/lib/server/frames');3(async () => {4  const browser = await chromium.launch();5  const context = await browser.newContext();6  const page = await context.newPage();7  await page.waitForTimeout(2000);8  const frame = page.frames()[1];9  const element = await frame.$('#male');10  const value = await transformValue(element, 'checked', true);11  await frame.evaluate(element => element.checked = true, element);12  console.log(value);13  await browser.close();14})();

Using AI Code Generation

1const { transformValue } = require('playwright-core/lib/server/frames');2const { serializeResult } = require('playwright-core/lib/server/serializers');3const result = await page.evaluate(() => {4  return someValue;5});6const transformedResult = await transformValue(page, serializeResult(result));7[MIT](LICENSE)

Using AI Code Generation

1const { transformValue } = require('playwright/lib/utils/serializers');2const value = await page.evaluate(() => {3  const myElement = document.querySelector('div');4  return myElement;5});6const transformedValue = transformValue(value);7console.log(transformedValue);

Using AI Code Generation

1const { transformValue } = require('playwright/lib/server/frames');2let value = transformValue({foo: 'bar'})3console.log(value);4const { transformValue } = require('playwright-core/lib/server/frames');5let value = transformValue({foo: 'bar'})6console.log(value);7const { transformValue } = require('playwright/lib/server/frames');8let value = transformValue({foo: 'bar'})9console.log(value);10[MIT](LICENSE)

Using AI Code Generation

1const { transformValue } = require('playwright/lib/server/frames');2const value = transformValue('Hello World');3console.log(value);4const { getAttribute } = require('playwright/lib/server/frames');5const attribute = getAttribute(element, 'href');6console.log(attribute);7const { boundingBox } = require('playwright/lib/server/frames');8const box = boundingBox(element);9console.log(box);10const { contentFrame } = require('playwright/lib/server/frames');11const frame = contentFrame(element);12console.log(frame);13const { contentDocument } = require('playwright/lib/server/frames');14const document = contentDocument(element);15console.log(document);16const { contentWindow } = require('playwright/lib/server/frames');17const window = contentWindow(element);18console.log(window);19const { ownerFrame } = require('playwright/lib/server/frames');20const frame = ownerFrame(element);21console.log(frame);22const { ownerDocument } = require('playwright/lib/server/frames');

Playwright tutorial

LambdaTest’s Playwright tutorial will give you a broader idea about the Playwright automation framework, its unique features, and use cases with examples to exceed your understanding of Playwright testing. This tutorial will give A to Z guidance, from installing the Playwright framework to some best practices and advanced concepts.

Chapters:

What is Playwright : Playwright is comparatively new but has gained good popularity. Get to know some history of the Playwright with some interesting facts connected with it.
How To Install Playwright : Learn in detail about what basic configuration and dependencies are required for installing Playwright and run a test. Get a step-by-step direction for installing the Playwright automation framework.
Playwright Futuristic Features: Launched in 2020, Playwright gained huge popularity quickly because of some obliging features such as Playwright Test Generator and Inspector, Playwright Reporter, Playwright auto-waiting mechanism and etc. Read up on those features to master Playwright testing.
What is Component Testing: Component testing in Playwright is a unique feature that allows a tester to test a single component of a web application without integrating them with other elements. Learn how to perform Component testing on the Playwright automation framework.
Inputs And Buttons In Playwright: Every website has Input boxes and buttons; learn about testing inputs and buttons with different scenarios and examples.
Functions and Selectors in Playwright: Learn how to launch the Chromium browser with Playwright. Also, gain a better understanding of some important functions like “BrowserContext,” which allows you to run multiple browser sessions, and “newPage” which interacts with a page.
Handling Alerts and Dropdowns in Playwright : Playwright interact with different types of alerts and pop-ups, such as simple, confirmation, and prompt, and different types of dropdowns, such as single selector and multi-selector get your hands-on with handling alerts and dropdown in Playright testing.
Playwright vs Puppeteer: Get to know about the difference between two testing frameworks and how they are different than one another, which browsers they support, and what features they provide.
Run Playwright Tests on LambdaTest: Playwright testing with LambdaTest leverages test performance to the utmost. You can run multiple Playwright tests in Parallel with the LammbdaTest test cloud. Get a step-by-step guide to run your Playwright test on the LambdaTest platform.
Playwright Python Tutorial: Playwright automation framework support all major languages such as Python, JavaScript, TypeScript, .NET and etc. However, there are various advantages to Python end-to-end testing with Playwright because of its versatile utility. Get the hang of Playwright python testing with this chapter.
Playwright End To End Testing Tutorial: Get your hands on with Playwright end-to-end testing and learn to use some exciting features such as TraceViewer, Debugging, Networking, Component testing, Visual testing, and many more.
Playwright Video Tutorial: Watch the video tutorials on Playwright testing from experts and get a consecutive in-depth explanation of Playwright automation testing.