KaneAI - World’s First E2E Software Testing Agent.Signup for Private Beta 
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.
LambdaTest Learning Hubs:
- JUnit Tutorial
- TestNG Tutorial
- Webdriver Tutorial
- WebDriverIO Tutorial
- Protractor Tutorial
- Selenium 4 Tutorial
- Jenkins Tutorial
- NUnit Tutorial
- Jest Tutorial
- Playwright Tutorial
- Cypress Tutorial
- PyTest Tutorial
YouTube
You could also refer to video tutorials over LambdaTest YouTube channel to get step by step demonstration from industry experts.
Run storybook-root automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
