How to use enhancer method in storybook-root

Best JavaScript code snippet using storybook-root

imageEnhancer.js

Source:imageEnhancer.js

1var imageEnhancer = {2    applyTo: function(selector, opt) {3/*4        jQuery(selector).on('load', function(ev) {5console.log('=============???? %o', ev);6        });7*/8        if (!opt) opt = {};9        opt._count = jQuery(selector).length;10        jQuery(selector).each(function(i, el) {11            if (el.complete) {12console.log('!!!! non-delayed apply on %o', el);13                imageEnhancer.apply(el, opt);14                opt._count--;15                if (opt.callback && (opt._count < 1)) opt.callback();16            } else {17                $(el).on('load', function(ev) {18console.log('?????????????????????????????????????????????? DELAYED IMG LOAD ?????????? %o', ev.target);19                    imageEnhancer.apply(ev.target, opt);20                    opt._count--;21                    if (opt.callback && (opt._count < 1)) opt.callback();22                });23            }24        });25    },26    //el is expected to be completely loaded (e.g. img) right now fwiw27    apply: function(el, opt) {28        var jel = jQuery(el);29        if (jel.data('enc-already-enhanced')) {30            console.info('ALREADY ENHANCED %o; skipping', el);31            return;32        }33        jel.data('enc-already-enhanced', true);34        var mid = imageEnhancer.mediaAssetIdFromElement(jel);  //jel.data('enh-mediaassetid');35        var aid = imageEnhancer.annotationIdFromElement(jel);36        var parEl = jel.parent();  //TODO what if there is none... oops???37        if (parEl.prop('tagName') == 'A') parEl = parEl.parent();38console.info('imageEnhancer.apply to %o [%dx%d] (mid=%o|aid=%o) with opt %o (parEl=%o)', el, jel.width(), jel.height(), mid, aid, opt, parEl);39        if (typeof opt != 'object') opt = {};40        if (parEl.css('position') == 'static') parEl.css('position', 'relative');41        //parEl.append('<div class="image-enhancer-wrapper' + (opt.debug ? ' image-enhancer-debug' : '') + '" />');42        parEl.append('<div id="image-enhancer-wrapper-' + mid + '-' + aid+ '" class="image-enhancer-wrapper-mid-' + mid + ' image-enhancer-wrapper' + (opt.debug ? ' image-enhancer-debug' : '') + '" />');43        imageEnhancer.setEnhancerScale(el);44        imageEnhancer.wrapperSizeSetFromImg(parEl);45        var wrapper = parEl.find('.image-enhancer-wrapper');46        //all we care about is attaching the right events to the wrapper47        if (!opt.events) opt.events = {};48        if (opt.debug && !opt.events.mouseover) opt.events.mouseover = function(ev) { return imageEnhancer.debugEvent(ev); };49        for (var e in opt.events) {50console.info('assigning event %s', e);51            wrapper.bind(e, opt.events[e]);52        }53        //init is a series of functions run on "startup", passed wrapper element and opt hash54        if (!opt.init) opt.init = [];55        if (typeof opt.init == 'function') opt.init = [ opt.init ];  //force singleton to an array56        //.menu is a sort of shortcut57        if ((typeof opt.menu != 'undefined') && Array.isArray(opt.menu)) {58            imageEnhancer.initMenu(wrapper);59        }60        for (var i = 0 ; i < opt.init.length ; i++) {61            opt.init[i](wrapper, opt);62        }63        if (opt.debug) imageEnhancer.debugInitFunction(wrapper, opt);64        //now we store opt on the actual dom element65        wrapper[0].enhancer = { opt: opt, imgEl: jel };66    },67    wrapperSizeSetFromImg: function(el) {68        var img = el.find('img');69        img.on('load', function(ev) {70            var ji = $(ev.target);71console.log(' ><<<<<<<<>>>>>>>>>>>>> %o', ji);72            var id = ji.data('enh-mediaassetid');73            var aid = ji.data('enh-annotationid');74            var w = el.find('#image-enhancer-wrapper-' + id + '-' + aid);75//console.log('img = %o / w = %o', img, w);76//console.log('img.length -----> %o', img.length);77//console.log(' .complete? %o', img.prop('complete'));78//console.warn('img => %o', img);79//console.warn('%d x %d', img.width(), img.height());80            w.css('width', ji.width());81            w.css('height', ji.height());82            //imageEnhancer.setEnhancerScale(this);  //not sure this is right!83        });84    },85    setEnhancerScale: function(img) {86        var ji = $(img);87        var id = ji.data('enh-mediaassetid');88        var asset = assetById(id);89        var aid = ji.data('enh-annotationid');90        var w = $('#image-enhancer-wrapper-' + id + '-' + aid);91        //imgWidth is tricky... lazyloading means the actual image might not be here. but hey we (should?) have metadata width!92        var imgWidth = 1024;  //fallback, sorry. :(93        if (asset && asset.metadata) {94            if (asset.metadata.width) imgWidth = asset.metadata.width;95            if (asset.rotation && asset.metadata.height) imgWidth = asset.metadata.height;96            console.warn('rotate? %o %dx%d => %d', asset.rotation, asset.metadata.width, asset.metadata.height, imgWidth);97        }98        var scale = ji.width() / imgWidth;99        //var scale = ji.width() / img.naturalWidth;100        //var scale = ji.width() / 4000;101        console.warn("########## [%s] scale = %o", id, scale);102        w.data('enhancerScale', scale);103        ji.data('enhancerScale', scale);104    },105    squareElement: function(el) {106      el.css('height', el.css('width'));107      el.css('bottom', el.css('height')+7);108    },109    squareImageEnhancerMenu: function() {110      imageEnhancer.squareElement($('div.image-enhancer-menu'));111    },112    initMenu: function(el) {113console.warn('menu -> %o', el);114        el.append('<div class="image-enhancer-menu" />');115        var m = el.find('.image-enhancer-menu');116        console.log(".width() = "+$(m).width());117        console.log(".css('width') = "+m.css('width'));118        //imageEnhancer.squareElement(m);119        m.on('click', function(ev) {120            imageEnhancer.clickMenu(ev);121            ev.stopPropagation();122        });123    },124    clickMenu: function(ev) {125        console.debug('menu click! %o', ev);126        if (!ev || !ev.target || !ev.target.parentElement) {127            console.warn('could not find parentElement on %o', ev.target);128            return;129        }130        if (ev.target.parentElement.menuOpened) return imageEnhancer.closeMenu(ev.target.parentElement, ev);131        imageEnhancer.openMenu(ev.target.parentElement, ev);132    },133    openMenu: function(el, ev) {134        if (!el.enhancer || !el.enhancer.opt || !el.enhancer.imgEl) return;135        el.menuOpened = true;136        var mh = '<div class="image-enhancer-menu-open">';137        for (var i = 0 ; i < el.enhancer.opt.menu.length ; i++) {138            var menuItem = el.enhancer.opt.menu[i][0];139            if (typeof menuItem == 'function') menuItem = menuItem(el.enhancer, ev);140            if (menuItem === false) continue;  //allows us to skip menu item based on function returns141            mh += '<div class="menu-item" data-i="' + i + '">' + menuItem + '</div>';142        }143        if (el.enhancer.opt.debug) {144            mh += '<div class="menu-item" data-i="-1"><i>test item (debug == true)</i></div>';145        }146        mh += '</div>';147        jQuery(el).append(mh);/*.on('mouseout', function(ev) {148            var e = ev.toElement || ev.relatedTarget;149            if (!e || !e.parentNode) return;150            var k = jQuery(e.parentNode).closest('.image-enhancer-wrapper');151            //var k = jQuery(e.parentNode).closest('.image-enhancer-menu-open');152            if (k.length) return;153            //if (!e || !e.parentNode || jQuery(e.parentNode).hasClass('image-enhancer-menu-open')) return;154            //console.log('OUT!!!!!!!!!!!! parent=%o currentTarget=%o', e.parentNode, ev.currentTarget);155            imageEnhancer.closeMenu(ev.currentTarget);156        });*/157        jQuery(el).find('.menu-item').on('click', function(ev) {158            imageEnhancer.clickMenuItem(ev);159        });160    },161    closeMenu: function(el, ev) {162        el.menuOpened = false;163        jQuery(el).find('.image-enhancer-menu-open').remove();164    },165    clickMenuItem: function(ev) {166        var i = ev.currentTarget.getAttribute('data-i');167        var enh = ev.currentTarget.parentElement.parentElement.enhancer;168console.log('i=%o; ev: %o, enhancer: %o', i, ev, enh);169        ev.stopPropagation();170        imageEnhancer.closeMenu(ev.currentTarget.parentElement.parentElement);171        if (i < 0) return imageEnhancer.debugMenuItem(enh);172        //ev.target.parentElement.parentElement.enhancer.opt.menu[i][1](ev.target.parentElement.parentElement.enhancer);173        enh.opt.menu[i][1](enh, enh.opt.menu[i][2]);174    },175    mediaAssetIdFromElement: function(el) {176        var mid = false;177        if (el instanceof jQuery) {178            mid = el.data('enh-mediaassetid')179            if (!mid && el.prop('id') && el.prop('id').startsWith('image-enhancer-wrapper-')) {  //hack to get mid from our wrapper!180                mid = el.prop('id').split('-')[3];181            }182        } else {183            mid = el.getAttribute('data-enh-mediaassetid');184        }185        if (!mid) {186            let gel = el;187            if (!gel instanceof jQuery) {188                gel = $(gel);189            } 190            let wrapperId = $(el).attr('id');191            mid = wrapperId.replace("asset-id-", ""); 192        }193        if (!mid) {194            console.warn('imageEnhancer.mediaAssetIdFromElement() could not find mid on %o', el);195            mid = -1;196        }197        return mid;198    },199    annotationIdFromElement: function(el) {200        var aid = (el instanceof jQuery) ? el.data('enh-annotationid') : el.getAttribute('data-enh-annotationid');201        if (!aid) {202            console.warn('imageEnhancer.annotationIdFromElement() could not find aid on %o', el);203            aid = false;204        }205        return aid;206    },207    message: function(el, h) {208        var mel = jQuery('<div class="image-enhancer-overlay-message">' + h + '</div>');209        mel.appendTo(el);210        return mel;211    },212    popup: function(h) {213        jQuery('.image-enhancer-popup').remove();214        jQuery('body').append('<div class="image-enhancer-popup"><div class="popup-close">x</div><div class="popup-content"></div></div>');215        jQuery('.image-enhancer-popup .popup-close').on('click', function(ev) {216            ev.stopPropagation();217            jQuery('.image-enhancer-popup').remove();218        });219        var p = jQuery('.image-enhancer-popup .popup-content');220        if (h) p.html(h);221        return p;222    },223    popupClose: function() {224        jQuery('.image-enhancer-popup').remove();225    },226    debugInitFunction: function(wel, opt) {227        console.log('>>>> init on %o with opt=%o', wel, opt);228    },229    debugMenuItem: function(enh) {230        imageEnhancer.popup('<p><b>test item:</b> see js console for details</p>');231        console.debug('DEBUG TEST %o', enh);232    },233    debugEvent: function(ev) {234        console.info('imageEnhancer.debugEvent -> %o', ev);235        console.info('enhancer -> %o', ev.currentTarget.enhancer);236        return true;237    }...

UIEnhancer.js

Source:UIEnhancer.js

1/*2Copyright 2009 University of Toronto3Copyright 2010-2011 OCAD University4Copyright 2011 Lucendo Development Ltd.5Licensed under the Educational Community License (ECL), Version 2.0 or the New6BSD license. You may not use this file except in compliance with one these7Licenses.8You may obtain a copy of the ECL 2.0 License and BSD License at9https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt10*/11var fluid_2_0_0 = fluid_2_0_0 || {};12(function ($, fluid) {13    "use strict";14    /*******************************************************************************15     * Root Model                                                                  *16     *                                                                             *17     * Holds the default values for enactors and panel model values                *18     *******************************************************************************/19    fluid.defaults("fluid.prefs.initialModel", {20        gradeNames: ["fluid.component"],21        members: {22            // TODO: This information is supposed to be generated from the JSON23            // schema describing various preferences. For now it's kept in top24            // level prefsEditor to avoid further duplication.25            initialModel: {26                preferences: {}  // To keep initial preferences27            }28        }29    });30    /***********************************************31     * UI Enhancer                                 *32     *                                             *33     * Transforms the page based on user settings. *34     ***********************************************/35    fluid.defaults("fluid.uiEnhancer", {36        gradeNames: ["fluid.viewComponent"],37        invokers: {38            updateModel: {39                func: "{that}.applier.change",40                args: ["", "{arguments}.0"]41            }42        },43        userGrades: "@expand:fluid.prefs.filterEnhancerGrades({that}.options.gradeNames)"44    });45    // Make this a standalone grade since options merging can't see 2 levels deep into merging46    // trees and will currently trash "gradeNames" for 2nd level nested components!47    fluid.defaults("fluid.uiEnhancer.root", {48        gradeNames: ["fluid.uiEnhancer", "fluid.resolveRootSingle"],49        singleRootType: "fluid.uiEnhancer"50    });51    fluid.uiEnhancer.ignorableGrades = ["fluid.uiEnhancer", "fluid.uiEnhancer.root", "fluid.resolveRoot", "fluid.resolveRootSingle"];52    // These function is necessary so that we can "clone" a UIEnhancer (e.g. one in an iframe) from another.53    // This reflects a long-standing mistake in UIEnhancer design - we should separate the logic in an enhancer54    // from a particular binding onto a container.55    fluid.prefs.filterEnhancerGrades = function (gradeNames) {56        return fluid.remove_if(fluid.makeArray(gradeNames), function (gradeName) {57            return fluid.frameworkGrades.indexOf(gradeName) !== -1 || fluid.uiEnhancer.ignorableGrades.indexOf(gradeName) !== -1;58        });59    };60    // This just the options that we are clear safely represent user options - naturally this all has61    // to go when we refactor UIEnhancer62    fluid.prefs.filterEnhancerOptions = function (options) {63        return fluid.filterKeys(options, ["classnameMap", "fontSizeMap", "tocTemplate", "components"]);64    };65    /********************************************************************************66     * PageEnhancer                                                                 *67     *                                                                              *68     * A UIEnhancer wrapper that concerns itself with the entire page.              *69     *                                                                              *70     * "originalEnhancerOptions" is a grade component to keep track of the original *71     * uiEnhancer user options                                                      *72     ********************************************************************************/73    // TODO: Both the pageEnhancer and the uiEnhancer need to be available separately - some74    // references to "{uiEnhancer}" are present in prefsEditorConnections, whilst other75    // sites refer to "{pageEnhancer}". The fact that uiEnhancer requires "body" prevents it76    // being top-level until we have the options flattening revolution. Also one day we want77    // to make good of advertising an unmerged instance of the "originalEnhancerOptions"78    fluid.defaults("fluid.pageEnhancer", {79        gradeNames: ["fluid.component", "fluid.originalEnhancerOptions",80            "fluid.prefs.initialModel", "fluid.prefs.settingsGetter",81            "fluid.resolveRootSingle"],82        distributeOptions: {83            source: "{that}.options.uiEnhancer",84            target: "{that > uiEnhancer}.options"85        },86        singleRootType: "fluid.pageEnhancer",87        components: {88            uiEnhancer: {89                type: "fluid.uiEnhancer.root",90                container: "body"91            }92        },93        originalUserOptions: "@expand:fluid.prefs.filterEnhancerOptions({uiEnhancer}.options)",94        listeners: {95            "onCreate.initModel": "fluid.pageEnhancer.init"96        }97    });98    fluid.pageEnhancer.init = function (that) {99        that.uiEnhancer.updateModel(fluid.get(that.getSettings(), "preferences"));100    };...

resourceEnhancer.ts

Source:resourceEnhancer.ts

1import {2  ResourceTask,3  MaybeEnhancerResource,4  ResourceTaskReturnType,5  PromiseValue,6} from "./resource.types";7export const Enhancer = {8  RETRIEVE: Symbol("RETRIEVE"),9  APPLY: Symbol("APPLY"),10  REQUEST: Symbol("REQUEST"),11};12export type EnhancerType<U extends ResourceTask, T = undefined> = readonly [13  symbol,14  MaybeEnhancerResource<U>,15  T16];17export const retrieve = <U extends ResourceTask>(18  resource?: MaybeEnhancerResource<U>19): EnhancerType<U> => [Enhancer.RETRIEVE, resource, undefined];20export const request = <U extends ResourceTask>(21  resource?: MaybeEnhancerResource<U>22) => [Enhancer.REQUEST, resource];23interface Apply {24  <V extends ResourceTask, T = PromiseValue<ResourceTaskReturnType<V>>>(25    maybeResource: MaybeEnhancerResource<V>,26    transformer: (prev: T) => T27  ): EnhancerType<V, (cachedResource: T) => T>;28}29interface Apply {30  <T>(transformer: (prev: T) => T): EnhancerType<31    ResourceTask<T>,32    (cachedResource: T) => T33  >;34}35export const apply: Apply = (...args: any) =>36  [37    Enhancer.APPLY,38    args[1] === undefined ? undefined : args[0],39    args[1] ?? args[0],...

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.