How to use ShadowRoot method in storybook-root

Best JavaScript code snippet using storybook-root

custom-elements.js

Source:custom-elements.js Github

copy

Full Screen

...589 }590 };591 proto.createdCallback = function () {592 var t = document.getElementById(name + '-template');593 var shadowRoot = this.createShadowRoot();594 shadowRoot.appendChild(document.importNode(t.content, true));595 if (mungeIds) {596 mungeIds.forEach(function (idToMunge) {597 var mungedId = idToMunge + '-' + uniqueIdSuffix++;598 var target = shadowRoot.querySelector('#' + idToMunge);599 if (target) {600 target.setAttribute('id', mungedId);601 }602 var forElement = shadowRoot.querySelector('[for=' + idToMunge + ']');603 if (forElement) {604 forElement.setAttribute('for', mungedId);605 }606 });607 }...

Full Screen

Full Screen

rerender.js

Source:rerender.js Github

copy

Full Screen

...17 test('No <content> nor <shadow>', function() {18 var host = document.createElement('div');19 host.innerHTML = '<a></a>';20 var a = host.firstChild;21 var shadowRoot = host.createShadowRoot();22 shadowRoot.textContent = 'text';23 var textNode = shadowRoot.firstChild;24 function testRender() {25 assert.strictEqual(getVisualInnerHtml(host), 'text');26 expectStructure(host, {27 firstChild: a,28 lastChild: a29 });30 expectStructure(a, {31 parentNode: host32 });33 expectStructure(shadowRoot, {34 firstChild: textNode,35 lastChild: textNode36 });37 expectStructure(textNode, {38 parentNode: shadowRoot39 });40 }41 testRender();42 testRender();43 });44 test('<content>', function() {45 var host = document.createElement('div');46 host.innerHTML = '<a></a>';47 var a = host.firstChild;48 var shadowRoot = host.createShadowRoot();49 shadowRoot.innerHTML = '<content></content>';50 var content = shadowRoot.firstChild;51 function testRender() {52 assert.strictEqual(getVisualInnerHtml(host), '<a></a>');53 expectStructure(host, {54 firstChild: a,55 lastChild: a56 });57 expectStructure(a, {58 parentNode: host59 });60 expectStructure(shadowRoot, {61 firstChild: content,62 lastChild: content63 });64 expectStructure(content, {65 parentNode: shadowRoot66 });67 }68 testRender();69 testRender();70 });71 test('<content> with fallback', function() {72 var host = document.createElement('div');73 host.innerHTML = '<a></a>';74 var a = host.firstChild;75 var shadowRoot = host.createShadowRoot();76 shadowRoot.innerHTML = '<content select="b">fallback</content>';77 var content = shadowRoot.firstChild;78 var fallback = content.firstChild;79 function testRender() {80 assert.strictEqual(getVisualInnerHtml(host), 'fallback');81 expectStructure(host, {82 firstChild: a,83 lastChild: a84 });85 expectStructure(a, {86 parentNode: host87 });88 expectStructure(shadowRoot, {89 firstChild: content,90 lastChild: content91 });92 expectStructure(content, {93 parentNode: shadowRoot,94 firstChild: fallback,95 lastChild: fallback96 });97 expectStructure(fallback, {98 parentNode: content99 });100 }101 testRender();102 testRender();103 });104 test('<shadow>', function() {105 var host = document.createElement('div');106 host.innerHTML = '<a></a>';107 var a = host.firstChild;108 var shadowRoot = host.createShadowRoot();109 shadowRoot.innerHTML = '<shadow></shadow>';110 var shadow = shadowRoot.firstChild;111 function testRender() {112 assert.strictEqual(getVisualInnerHtml(host), '<a></a>');113 expectStructure(host, {114 firstChild: a,115 lastChild: a116 });117 expectStructure(a, {118 parentNode: host119 });120 expectStructure(shadowRoot, {121 firstChild: shadow,122 lastChild: shadow123 });124 expectStructure(shadow, {125 parentNode: shadowRoot126 });127 }128 testRender();129 testRender();130 });131 test('<shadow> fallback support has been removed', function() {132 var host = document.createElement('div');133 host.innerHTML = '<a></a>';134 var a = host.firstChild;135 var shadowRoot = host.createShadowRoot();136 shadowRoot.innerHTML = '<shadow>fallback</shadow>';137 var shadow = shadowRoot.firstChild;138 var fallback = shadow.firstChild;139 function testRender() {140 assert.strictEqual(getVisualInnerHtml(host), '<a></a>');141 expectStructure(host, {142 firstChild: a,143 lastChild: a144 });145 expectStructure(a, {146 parentNode: host147 });148 expectStructure(shadowRoot, {149 firstChild: shadow,150 lastChild: shadow151 });152 expectStructure(shadow, {153 parentNode: shadowRoot,154 firstChild: fallback,155 lastChild: fallback156 });157 expectStructure(fallback, {158 parentNode: shadow159 });160 }161 testRender();162 testRender();163 });164 test('<shadow> with nested shadow roots', function() {165 var host = document.createElement('div');166 host.innerHTML = '<a></a>';167 var a = host.firstChild;168 var oldestShadowRoot = host.createShadowRoot();169 oldestShadowRoot.textContent = 'text';170 var textNode = oldestShadowRoot.firstChild;171 var youngestShadowRoot = host.createShadowRoot();172 youngestShadowRoot.innerHTML = '<shadow></shadow>';173 var shadow = youngestShadowRoot.firstChild;174 function testRender() {175 assert.strictEqual(getVisualInnerHtml(host), 'text');176 expectStructure(host, {177 firstChild: a,178 lastChild: a179 });180 expectStructure(a, {181 parentNode: host182 });183 expectStructure(oldestShadowRoot, {184 firstChild: textNode,185 lastChild: textNode186 });187 expectStructure(textNode, {188 parentNode: oldestShadowRoot189 });190 expectStructure(youngestShadowRoot, {191 firstChild: shadow,192 lastChild: shadow193 });194 expectStructure(shadow, {195 parentNode: youngestShadowRoot196 });197 }198 testRender();199 testRender();200 });201 suite('Mutate logical DOM', function() {202 test('removeAllChildNodes - mutate host', function() {203 var host = document.createElement('div');204 host.innerHTML = '<a>Hello</a>';205 var shadowRoot = host.createShadowRoot();206 shadowRoot.innerHTML = '<content>fallback</content>';207 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');208 host.firstChild.textContent = '';209 assert.strictEqual(getVisualInnerHtml(host), '<a></a>');210 host.textContent = '';211 assert.strictEqual(getVisualInnerHtml(host), 'fallback');212 });213 test('removeAllChildNodes - mutate shadow', function() {214 var host = document.createElement('div');215 host.innerHTML = '<a>Hello</a>';216 var shadowRoot = host.createShadowRoot();217 shadowRoot.innerHTML = '<content></content><b>after</b>';218 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b>after</b>');219 shadowRoot.lastChild.textContent = '';220 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');221 shadowRoot.textContent = '';222 assert.strictEqual(getVisualInnerHtml(host), '');223 });224 test('removeAllChildNodes - mutate shadow fallback', function() {225 var host = document.createElement('div');226 host.innerHTML = '<a>Hello</a>';227 var shadowRoot = host.createShadowRoot();228 shadowRoot.innerHTML = '<content select="xxx"><b>fallback</b></content>';229 assert.strictEqual(getVisualInnerHtml(host), '<b>fallback</b>');230 shadowRoot.firstChild.firstChild.textContent = '';231 assert.strictEqual(getVisualInnerHtml(host), '<b></b>');232 shadowRoot.firstChild.textContent = '';233 assert.strictEqual(getVisualInnerHtml(host), '');234 shadowRoot.textContent = '';235 assert.strictEqual(getVisualInnerHtml(host), '');236 });237 test('removeChild - mutate host', function() {238 var host = document.createElement('div');239 host.innerHTML = '<a>Hello</a>';240 var shadowRoot = host.createShadowRoot();241 shadowRoot.innerHTML = '<content>fallback</content>';242 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');243 host.firstChild.removeChild(host.firstChild.firstChild);244 assert.strictEqual(getVisualInnerHtml(host), '<a></a>');245 host.removeChild(host.firstChild);246 assert.strictEqual(getVisualInnerHtml(host), 'fallback');247 });248 test('removeChild - mutate host 2', function() {249 var host = document.createElement('div');250 host.innerHTML = '<a></a><b></b>';251 var shadowRoot = host.createShadowRoot();252 shadowRoot.innerHTML = '<content>fallback</content>';253 assert.strictEqual(getVisualInnerHtml(host), '<a></a><b></b>');254 host.removeChild(host.lastChild);255 assert.strictEqual(getVisualInnerHtml(host), '<a></a>');256 host.removeChild(host.firstChild);257 assert.strictEqual(getVisualInnerHtml(host), 'fallback');258 });259 test('removeChild - mutate shadow', function() {260 var host = document.createElement('div');261 host.innerHTML = '<a>Hello</a>';262 var shadowRoot = host.createShadowRoot();263 shadowRoot.innerHTML = '<content></content><b>after</b>';264 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b>after</b>');265 shadowRoot.lastChild.removeChild(266 shadowRoot.lastChild.firstChild);267 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');268 shadowRoot.removeChild(shadowRoot.lastChild);269 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');270 shadowRoot.removeChild(shadowRoot.firstChild);271 assert.strictEqual(getVisualInnerHtml(host), '');272 });273 test('setAttribute select', function() {274 // TODO(arv): DOM bindings for select.275 var host = document.createElement('div');276 host.innerHTML = '<a>Hello</a><b>World</b>';277 var shadowRoot = host.createShadowRoot();278 shadowRoot.innerHTML = '<content select="b">fallback b</content>' +279 '<content select="a">fallback a</content>';280 assert.strictEqual(getVisualInnerHtml(host), '<b>World</b><a>Hello</a>');281 shadowRoot.firstChild.setAttribute('select', 'xxx');282 assert.strictEqual(getVisualInnerHtml(host), 'fallback b<a>Hello</a>');283 shadowRoot.firstChild.setAttribute('select', '');284 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b>World</b>fallback a');285 });286 test('appendChild - mutate host', function() {287 var host = document.createElement('div');288 host.innerHTML = '<a>Hello</a>';289 var shadowRoot = host.createShadowRoot();290 shadowRoot.innerHTML = '<content></content>';291 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');292 var b = document.createElement('b');293 host.appendChild(b);294 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');295 });296 test('appendChild - mutate shadow', function() {297 var host = document.createElement('div');298 host.innerHTML = '<a>Hello</a>';299 var shadowRoot = host.createShadowRoot();300 shadowRoot.innerHTML = '<content></content>';301 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');302 var b = document.createElement('b');303 shadowRoot.appendChild(b);304 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a><b></b>');305 });306 test('insertBefore - mutate host', function() {307 var host = document.createElement('div');308 host.innerHTML = '<a>Hello</a>';309 var a = host.firstChild;310 var shadowRoot = host.createShadowRoot();311 shadowRoot.innerHTML = '<content></content>';312 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');313 var b = document.createElement('b');314 host.insertBefore(b, a);315 assert.strictEqual(getVisualInnerHtml(host), '<b></b><a>Hello</a>');316 });317 test('insertBefore - mutate shadow', function() {318 var host = document.createElement('div');319 host.innerHTML = '<a>Hello</a>';320 var shadowRoot = host.createShadowRoot();321 shadowRoot.innerHTML = '<content></content>';322 var content = shadowRoot.firstChild;323 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');324 var b = document.createElement('b');325 shadowRoot.insertBefore(b, content);326 assert.strictEqual(getVisualInnerHtml(host), '<b></b><a>Hello</a>');327 });328 test('replaceChild - mutate host', function() {329 var host = document.createElement('div');330 host.innerHTML = '<a>Hello</a>';331 var a = host.firstChild;332 var shadowRoot = host.createShadowRoot();333 shadowRoot.innerHTML = '<content></content>';334 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');335 var b = document.createElement('b');336 host.replaceChild(b, a);337 assert.strictEqual(getVisualInnerHtml(host), '<b></b>');338 });339 test('replaceChild - mutate shadow', function() {340 var host = document.createElement('div');341 host.innerHTML = '<a>Hello</a>';342 var shadowRoot = host.createShadowRoot();343 shadowRoot.innerHTML = '<content></content>';344 var content = shadowRoot.firstChild;345 assert.strictEqual(getVisualInnerHtml(host), '<a>Hello</a>');346 var b = document.createElement('b');347 shadowRoot.replaceChild(b, content);348 assert.strictEqual(getVisualInnerHtml(host), '<b></b>');349 });350 });351 test('Invalidation', function() {352 var host = document.createElement('div');353 host.innerHTML = '<a></a>';354 var a = host.firstChild;355 var sr = host.createShadowRoot();356 sr.innerHTML = '<b></b><content></content><c></c>';357 var b = sr.firstChild;358 var content = b.nextSibling;359 var c = sr.lastChild;360 assert.equal(getVisualInnerHtml(host), '<b></b><a></a><c></c>');361 a.textContent = 'x';362 // Don't use getVisualInnerHtml but it does invalidation.363 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a><c></c>');364 host.appendChild(document.createTextNode('y'));365 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a><c></c>y'); //dirty366 host.offsetWidth;367 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>');368 sr.appendChild(document.createTextNode('z'));369 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>'); //dirty370 host.offsetWidth;371 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>z');372 sr.insertBefore(document.createTextNode('w'), content);373 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b><a>x</a>y<c></c>z'); // dirty374 host.offsetWidth;375 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>y<c></c>z');376 // This case does not need invalidation.377 // We could make the check a bit more specific (check for nextSibling being378 // null or a content/shadow).379 sr.insertBefore(document.createTextNode('v'), c);380 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>yv<c></c>z');381 host.offsetWidth;382 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>yv<c></c>z');383 content.select = '*';384 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>yv<c></c>z'); // dirty385 host.offsetWidth;386 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>v<c></c>z');387 content.setAttribute('SelecT', 'no-match');388 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>w<a>x</a>v<c></c>z'); // dirty389 host.offsetWidth;390 assert.equal(unsafeUnwrap(host).innerHTML, '<b></b>wv<c></c>z');391 });392 test('minimal dom changes', function() {393 var div = document.createElement('div');394 // TODO(jmesserly): ideally we would intercept all of the visual DOM395 // operations, but that isn't possible because they are captured in the code396 // as originalInsertBefore/originalRemoveChild, so we only see the calls397 // inside ShadowRenderer.398 var originalInsertBefore = ShadowDOMPolyfill.originalInsertBefore;399 var originalRemoveChild = ShadowDOMPolyfill.originalRemoveChild;400 var insertBeforeCount = 0;401 var removeChildCount = 0;402 ShadowDOMPolyfill.originalInsertBefore = function(newChild, refChild) {403 insertBeforeCount++;404 return originalInsertBefore.call(this, newChild, refChild);405 };406 ShadowDOMPolyfill.originalRemoveChild = function(child) {407 removeChildCount++;408 return originalRemoveChild.call(this, child);409 };410 function reset() {411 insertBeforeCount = 0;412 removeChildCount = 0;413 }414 try {415 var div = document.createElement('div');416 var a = div.appendChild(document.createElement('a'));417 var sr = div.createShadowRoot();418 var content = sr.appendChild(document.createElement('content'));419 var b = sr.appendChild(document.createElement('b'));420 assert.equal(getVisualInnerHtml(div), '<a></a><b></b>');421 assert.equal(insertBeforeCount, 1);422 assert.equal(removeChildCount, 1);423 reset();424 // Invalidates but does not change the rendered tree.425 content.select = '*';426 assert.equal(getVisualInnerHtml(div), '<a></a><b></b>');427 assert.equal(insertBeforeCount, 0);428 assert.equal(removeChildCount, 0);429 // Does not use our overridden appendChild430 var c = div.appendChild(document.createElement('c'));431 assert.equal(insertBeforeCount, 0);...

Full Screen

Full Screen

mrp-calendar-event.js

Source:mrp-calendar-event.js Github

copy

Full Screen

1const MRPCalendarEvent_template = document.createElement('template');2MRPCalendarEvent_template.innerHTML = `3 <style>4 div.alert{5 position:fixed;6 top: 30%;7 left:50%;8 width:400px;9 margin-top:-100px;10 margin-left:-200px;11 background-color:white;12 border:2px solid #111;13 box-shadow:3px 3px 8px rgba(0,0,0,0.3);14 border-radius:3px;15 text-align:center;16 z-index:21;17 }18 19 div.hidden{20 display:none;21 }22 h2{23 padding:0.5em;24 margin:0;25 font-weight:normal;26 border-bottom:1px solid #ddd;27 background-color:#1c84c6;28 color:#FFF;29 }30 div.footer{31 width:100%;32 }33 div.message {34 margin:15px;35 text-align: left;36 }37 </style>38 <div class="hidden">39 <h2 class="titleElement"></h2>40 <div class="message">41 <div>Title:<mrp-text-box id='title'></mrp-text-box></div>42 <div>Description:<mrp-text-area id='description'></mrp-text-area></div>43 <div>All Day:<mrp-check-box id='allDay'></mrp-check-box></div>44 <div id='timeStartDiv'>Start Time:<mrp-text-box id='timeStart'></mrp-text-box></div>45 <div id='timeEndDiv'>End Time:<mrp-text-box id='timeEnd'></mrp-text-box></div>46 <div id='numDaysDiv' class='hidden'>Num Days:<mrp-text-box id='numDays'></mrp-text-box></div>47 <div>Repeat Event Every Week:<mrp-check-box id='repeatEvent'></mrp-check-box></div>48 <div id='numRepeatsDiv' class='hidden'>Number of weeks to repeat event:<mrp-text-box id='numRepeats'></mrp-text-box></div>49 </div>50 <div class="footer">51 <mrp-button success id='mrp-calendar-event-save'>save</mrp-button>52 <mrp-button success id='mrp-calendar-event-delete'>delete</mrp-button>53 <mrp-button success id='mrp-calendar-event-close'>close</mrp-button>54 </div>55 </div>56 <mrp-alert id='mrp-calendar-event-message-box'></mrp-alert>57`58class MRPCalendarEvent extends HTMLElement {59 constructor() {60 super();61 this.addEventListener('click',this.handleClick);62 63 this.attachShadow({mode:'open'});64 this.shadowRoot.appendChild(MRPCalendarEvent_template.content.cloneNode(true));65 this.titleBox = this.shadowRoot.querySelector('#title');66 this.descriptionBox = this.shadowRoot.querySelector('#description');67 this.startTime = this.shadowRoot.querySelector('#timeStart');68 this.endTime = this.shadowRoot.querySelector('#timeEnd');69 this.allDayBox = this.shadowRoot.querySelector('#allDay');70 this.repeatEventBox = this.shadowRoot.querySelector('#repeatEvent');71 this.numRepeatsBox = this.shadowRoot.querySelector('#numRepeats');72 this.numDaysBox = this.shadowRoot.querySelector('#numDays');73 this.closeButton = this.shadowRoot.querySelector('#mrp-calendar-event-close');74 this.messageBox = this.shadowRoot.querySelector('mrp-alert');75 this.messageBox.setYesNo();76 this.isShowing = false;77 Lib.Comp.setupDefualtProperties(this, 'div');78 EventBroker.listen('mrp-calendar-event-save_mrp-button_clicked',this,this.updateEvent);79 EventBroker.listen('allDay_mrp-check-box_changed',this,this.allDayChanged);80 EventBroker.listen('repeatEvent_mrp-check-box_changed',this,this.repeatsChanged);81 EventBroker.listen('mrp-calendar-event-message-box_mrp-alert_clcked',this,this.checkMessageBoxAnswer);82 EventBroker.listen('mrp-calendar-event-delete_mrp-button_clicked',this,this.deleteEvents);83 }84 allDayChanged(event){85 if(event.newValue){86 this.startTime.disable();87 this.endTime.disable();88 this.shadowRoot.querySelector('#timeStartDiv').className = 'hidden';89 this.shadowRoot.querySelector('#timeEndDiv').className = 'hidden';90 this.shadowRoot.querySelector('#numDaysDiv').className = '';91 this.numDaysBox.setValue('1');92 }else{93 this.startTime.enable();94 this.endTime.enable();95 this.shadowRoot.querySelector('#timeStartDiv').className = '';96 this.shadowRoot.querySelector('#timeEndDiv').className = '';97 this.shadowRoot.querySelector('#numDaysDiv').className = 'hidden';98 this.numDaysBox.setValue('');99 }100 }101 repeatsChanged(event){102 if(event.newValue){103 this.shadowRoot.querySelector('#numRepeatsDiv').className = '';104 this.numRepeatsBox.setValue('2');105 }else{106 this.shadowRoot.querySelector('#numRepeatsDiv').className = 'hidden';107 this.numRepeatsBox.setValue('');108 }109 }110 deleteEvents(){111 this.calendarEvent.deleteEvent = true;112 this.finishUpdate();113 }114 updateEvent(){115 this.calendarEvent.title = this.titleBox.getValue();116 this.calendarEvent.description = this.descriptionBox.getValue();117 this.calendarEvent.startTime = this.startTime.getValue();118 this.calendarEvent.endTime = this.endTime.getValue();119 this.calendarEvent.numDays = this.numDaysBox.getValue();120 this.calendarEvent.deleteEvent = false;121 122 if(this.calendarEvent.numDays !=='' && this.calendarEvent.numDays !=='0'){123 this.calendarEvent.startTime = '';124 this.calendarEvent.endTime = '';125 }126 127 this.calendarEvent.numRepeats = this.numRepeatsBox.getValue();128 129 this.finishUpdate();130 131 /*132 allows for a message box to be popped up - feature turned off for now133 if(this.calendarEvent.numRepeats !== ''){134 this.messageBox.changeHeader('Warning');135 this.messageBox.changeMessage('Do you want the changes to affect all the events?');136 this.messageBox.show();137 }else{138 this.finishUpdate();139 }*/140 }141 checkMessageBoxAnswer(messageBoxObj){142 //check to make sure the user clikced the yes or no butttons143 if(Lib.JS.isUndefined(messageBoxObj.answer)){144 return false;145 }146 147 148 if(messageBoxObj.answer ==='yes'){149 this.calendarEvent.changeThisEventOnly = false;150 }else{151 this.calendarEvent.changeThisEventOnly = true;152 }153 this.finishUpdate();154 }155 finishUpdate(){156 EventBroker.trigger('mrp-calendar-event-saved', this.calendarEvent);157 this.close();158 }159 changeHeader(header){160 this.shadowRoot.querySelector(".titleElement").textContent = header;161 }162 changeMessage(message){163 this.shadowRoot.querySelector(".message").textContent = message;164 }165 handleClick(event){166 //check if the close button was pressed167 if(event.path[3] === this.closeButton || event.path[2] === this.closeButton){168 this.close();169 return false;170 }171 172 var triggerObj = {element:this, event:event};173 174 if(this.id !== ""){175 EventBroker.trigger(this.id + '_mrp-alert_clcked',triggerObj);176 }else if(this['class'] !== ""){177 EventBroker.trigger(this['class'] + '_mrp-alert_clcked',triggerObj);178 }else{179 EventBroker.trigger('mrp-alert_clcked',triggerObj);180 }181 }182 show(calendarEvent){183 this.calendarEvent = calendarEvent;184 if(this.shadowRoot.querySelector(".hidden")!= null){185 this.shadowRoot.querySelector(".hidden").className = 'alert';186 }187 188 this.setupField(this.titleBox, calendarEvent.title);189 this.setupField(this.descriptionBox, calendarEvent.description);190 this.setupField(this.startTime, calendarEvent.startTime);191 this.setupField(this.endTime, calendarEvent.endTime);192 193 194 //if an all day event195 if(Lib.JS.isDefined(calendarEvent.numDays) && calendarEvent.numDays !==''){196 this.allDayChanged({newValue:true});197 this.allDayBox.setValue(true);198 }199 200 this.setupField(this.numDaysBox, calendarEvent.numDays);201 202 //if reapeted event203 if(calendarEvent.numEvents>0){204 this.repeatEventBox.setValue(true);205 this.repeatsChanged({newValue:true});206 this.numRepeatsBox.setValue(calendarEvent.numEvents);207 }208 this.isShowing = true;209 }210 setupField(field, property){211 if(Lib.JS.isDefined(property)){212 field.addText(property);213 }else{214 field.addText('');215 }216 }217 close(){218 if(this.shadowRoot.querySelector(".alert")!= null){219 this.shadowRoot.querySelector(".alert").className = 'hidden';220 }221 this.isShowing = false;222 223 //reset the changes from the allday checkbox224 this.allDayBox.setValue(false);225 this.repeatEventBox.setValue(false);226 this.allDayChanged({newValue:false});227 this.repeatsChanged({newValue:false});228 }229}...

Full Screen

Full Screen

vacuna.js

Source:vacuna.js Github

copy

Full Screen

1const puppeteer = require ('puppeteer');2const url = 'https://vacunacovid.catsalut.gencat.cat/inici?qtoken=38e71627-ccd7-4a24-bf9c-97bb24e33dce';3//Posa aqui les teves dades personals4const dni = "123456789A";5const mobil = '736485983';6const nom = 'John';7const cognom1 = 'Doe';8const cognom2 = 'Don';9const email = 'johndoe@gmail.com'10async function configureBrowser() {11 const browser = await puppeteer.launch({headless:false, defaultViewport: null, args: ['--start-maximized'] });12 const [page] = await browser.pages();13 await page.setViewport({ width: 1280, height: 720});14 await page.goto(url);15 return page;16}17async function startFill() {18 const page = await configureBrowser();19 await delay(1000);20 21 var enllac = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-error").shadowRoot.querySelector("div > div.subtitle > a")`)).asElement();22 while(enllac == null){23 enllac = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-error").shadowRoot.querySelector("div > div.subtitle > a")`)).asElement();24 }25 enllac.click();26 console.log("Click Enllaç");27 await delay(1000);28 var demanar = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-onboarding").shadowRoot.querySelector("#dismiss-btn").shadowRoot.querySelector("#button")`)).asElement();29 while(demanar == null){30 demanar = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-onboarding").shadowRoot.querySelector("#dismiss-btn").shadowRoot.querySelector("#button")`)).asElement();31 }32 demanar.click();33 console.log("Click Demanar");34 await delay(1000);35 var dniSelect = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#mdc-tab-2").shadowRoot.querySelector("button")`)).asElement();36 while(dniSelect == null){37 dniSelect = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#mdc-tab-2").shadowRoot.querySelector("button")`)).asElement();38 }39 dniSelect.click();40 console.log("Click DNI Select");41 await delay(1000);42 //DNI43 var dniButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#documentID").shadowRoot.querySelector("label > input")`)).asElement();44 while(dniButton == null){45 dniButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#documentID").shadowRoot.querySelector("label > input")`)).asElement();46 }47 dniButton.click();48 await delay(100);49 await page.keyboard.type(dni);50 51 //Mobil52 const mobilButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#phone").shadowRoot.querySelector("label > input")`)).asElement();53 mobilButton.click();54 await delay(100);55 await page.keyboard.type(mobil);56 //Nom57 const nomButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#name").shadowRoot.querySelector("label > input")`)).asElement();58 nomButton.click();59 await delay(100);60 await page.keyboard.type(nom);61 //Cognom62 const cognomButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#surname").shadowRoot.querySelector("label > input")`)).asElement();63 cognomButton.click();64 await delay(100);65 await page.keyboard.type(cognom1);66 //Cognom267 const cognom2Button = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#surname2").shadowRoot.querySelector("label > input")`)).asElement();68 cognom2Button.click();69 await delay(100);70 await page.keyboard.type(cognom2);71 //Email72 const emailButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#mail").shadowRoot.querySelector("label > input")`)).asElement();73 emailButton.click();74 await delay(100);75 await page.keyboard.type(email);76 await delay(500);77 //Acceptar78 const acceptaButton = await (await page.evaluateHandle(`document.querySelector("body > vaccinapp-app").shadowRoot.querySelector("#pages > vaccinapp-shell").shadowRoot.querySelector("#main-shell-content > appointment-shell").shadowRoot.querySelector("#appointment-shell-content > appointment-user-registration").shadowRoot.querySelector("#accept-btn").shadowRoot.querySelector("#button")`)).asElement();79 acceptaButton.click();80 81 await delay(1000000)82}83function delay(time) {84 return new Promise(function(resolve) { 85 setTimeout(resolve, time)86 });87 }...

Full Screen

Full Screen

dialog.js

Source:dialog.js Github

copy

Full Screen

1'use strict';2(function () {3 class BunnyDialog extends HTMLElement {4 constructor() {5 super();6 }7 get visible() {8 return this.hasAttribute("visible");9 }10 set visible(value) {11 if (value) {12 this.setAttribute("visible", "");13 } else {14 this.removeAttribute("visible");15 }16 }17 get title() {18 return this.getAttribute('title') || '';19 }20 set title(value) {21 this.setAttribute('title', value);22 }23 get ok() {24 return this.getAttribute('ok')25 }26 set ok(value) {27 this.setAttribute('ok', value);28 }29 get cancel() {30 return this.getAttribute('cancel')31 }32 set cancel(value) {33 this.setAttribute('cancel', value);34 }35 connectedCallback() {36 this._render();37 this._attachEventHandlers();38 }39 static get observedAttributes() {40 return ["visible", "title", "ok", "cancel"];41 }42 attributeChangedCallback(name, oldValue, newValue) {43 if (name === "ok" && this.shadowRoot) {44 let $btn = this.shadowRoot.querySelector('.ok');45 if (!$btn) {46 $btn = document.createElement('button');47 $btn.classList.add('ok');48 $btn.addEventListener('click', e => this.close('ok'));49 this.shadowRoot.querySelector('.button-container').prepend($btn);50 }51 if (newValue === "") {52 $btn.style.display = 'none';53 } else {54 $btn.innerText = newValue;55 $btn.style.display = '';56 }57 }58 if (name === "cancel" && this.shadowRoot) {59 let $btn = this.shadowRoot.querySelector('.cancel');60 if (!$btn) {61 $btn = document.createElement('button');62 $btn.classList.add('cancel');63 $btn.addEventListener('click', e => this.close('cancel'));64 this.shadowRoot.querySelector('.button-container').append($btn);65 }66 if (newValue === "") {67 $btn.style.display = 'none';68 } else {69 $btn.innerText = newValue;70 $btn.style.display = '';71 }72 }73 if (name === "title" && newValue && this.shadowRoot) {74 this.shadowRoot.querySelector(".title").textContent = newValue;75 }76 if (name === "visible" && this.shadowRoot) {77 if (newValue === null) {78 this.shadowRoot.querySelector(".wrapper").classList.remove("visible");79 this.dispatchEvent(new CustomEvent("close"));80 } else {81 this.shadowRoot.querySelector(".wrapper").classList.add("visible");82 this.dispatchEvent(new CustomEvent("open"))83 }84 }85 }86 _render() {87 const wrapperClass = this.visible ? "wrapper visible" : "wrapper";88 const container = document.createElement("div");89 const yesBtn = this.ok ? `<button class='ok'>${this.ok}</button>` : '';90 const cancelBtn = this.cancel ? `<button class='cancel'>${this.cancel}</button>` : '';91 container.innerHTML = `92<style>93.wrapper {94 position: fixed;95 left: 0;96 top: 0;97 width: 100%;98 height: 100%;99 background-color: rgba(120,120,120,0.5);100 opacity: 0;101 visibility: hidden;102 transform: scale(1.1);103 transition: visibility 0s linear .25s,opacity .25s 0s,transform .25s;104 z-index: 1;105}106.visible {107 opacity: 1;108 visibility: visible;109 transform: scale(1);110 transition: visibility 0s linear 0s,opacity .25s 0s,transform .25s;111}112.modal {113 font-size: 14px;114 padding: 16px;115 background-color: white;116 position: absolute;117 top: 50%;118 left: 50%;119 transform: translate(-50%,-50%);120 border-radius: 8px;121 min-width: 300px;122 box-shadow: rgb(85, 85, 85) 0 0 5px;123}124.title {125 font-size: 18px;126}127.button-container {128 text-align: right;129}130button {131 padding: 6px 4px;132 border-radius: 5px;133 border: lightgray 1px solid;134 background: lightgrey;135 color: white;136 font-size: 12px;137 width: 55px;138 margin: 6px 4px;139 outline: none;140}141button:hover {142 border: gray 1px solid;143 background: gray;144}145button:active {146 border: gray 1px solid;147 background: gray;148}149button.ok{150 border: deepskyblue 1px solid;151 background: deepskyblue;152}153button:hover.ok {154 border: dodgerblue 1px solid;155 background: dodgerblue;156 outline: none;157}158button:active.ok {159 border: lightblue 1px solid;160 background: lightblue;161}162</style>163<div class='${wrapperClass}'>164 <div class='modal'>165 <span class='title'>${this.title}</span>166 <div class='content'>167 <slot></slot>168 </div>169 <div class='button-container'>${yesBtn}${cancelBtn}</div>170 </div>171</div>172`;173 const shadowRoot = this.attachShadow({mode: 'open'});174 shadowRoot.appendChild(container);175 }176 show(okEvent, cancelEvent) {177 this.visible = true;178 this.okEvent = okEvent;179 this.cancelEvent = cancelEvent;180 }181 close(event) {182 this.removeAttribute("visible");183 if (event === "ok" && this.okEvent && typeof this.okEvent === "function") {184 this.okEvent();185 }186 if (event === "cancel" && this.cancelEvent && typeof this.cancelEvent === "function") {187 this.cancelEvent();188 }189 this.dispatchEvent(new CustomEvent(event));190 }191 _attachEventHandlers() {192 const wrapper = this.shadowRoot.querySelector('.wrapper');193 const cancelButton = this.shadowRoot.querySelector(".cancel");194 const okButton = this.shadowRoot.querySelector(".ok");195 this.shadowRoot.addEventListener('click', ev => {196 if (ev.target === wrapper) this.close('cancel');197 });198 if (cancelButton) cancelButton.addEventListener('click', e => this.close('cancel'));199 if (okButton) okButton.addEventListener('click', e => this.close('ok'));200 }201 }202 window.customElements.define('bunny-dialog', BunnyDialog);...

Full Screen

Full Screen

Node.contains.spec.js

Source:Node.contains.spec.js Github

copy

Full Screen

1import { createElement } from 'lwc';2import Slotted from 'x/slotted';3import Test from 'x/test';4describe('Node.contains', () => {5 it('should return the right value for node outside the shadow tree', () => {6 const div = document.createElement('div');7 document.body.appendChild(div);8 const elm = createElement('x-slotted', { is: Slotted });9 document.body.appendChild(elm);10 expect(elm.shadowRoot.contains(div)).toBe(false);11 });12 it('should return the right value for standard html elements inside the shadow tree', () => {13 const elm = createElement('x-foo', { is: Test });14 document.body.appendChild(elm);15 const root = elm.shadowRoot;16 const div = root.querySelector('div');17 const p = root.querySelector('p');18 expect(div.contains(p)).toBe(false);19 const span = root.querySelector('span');20 expect(div.contains(span)).toBe(true);21 });22 it('should return the right value for nodes in the same shadow tree', () => {23 const elm = createElement('x-slotted', { is: Slotted });24 document.body.appendChild(elm);25 const { shadowRoot } = elm;26 const container = shadowRoot.querySelector('x-container');27 expect(shadowRoot.contains(shadowRoot)).toBe(true);28 expect(shadowRoot.contains(shadowRoot.querySelector('.outer'))).toBe(true);29 expect(shadowRoot.contains(container)).toBe(true);30 expect(shadowRoot.contains(shadowRoot.querySelector('.slotted'))).toBe(true);31 expect(shadowRoot.contains(shadowRoot.querySelector('.slotted').firstChild)).toBe(true);32 expect(shadowRoot.querySelector('.outer').contains(shadowRoot)).toBe(false);33 expect(shadowRoot.querySelector('.outer').contains(container)).toBe(true);34 expect(35 shadowRoot.querySelector('.outer').contains(shadowRoot.querySelector('.slotted'))36 ).toBe(true);37 });38 it('should return the right value for slotted node', () => {39 const elm = createElement('x-slotted', { is: Slotted });40 document.body.appendChild(elm);41 const { shadowRoot } = elm;42 const container = shadowRoot.querySelector('x-container');43 expect(container.contains(container.shadowRoot)).toBe(false);44 expect(container.contains(container.shadowRoot.firstChild)).toBe(false);45 expect(46 container.shadowRoot47 .querySelector('.container')48 .contains(shadowRoot.querySelector('.slotted'))49 ).toBe(false);50 expect(51 container.shadowRoot52 .querySelector('slot')53 .contains(shadowRoot.querySelector('.slotted'))54 ).toBe(false);55 });56 it('should return false when argument is null or undefined', () => {57 const div = document.createElement('div');58 document.body.appendChild(div);59 expect(div.contains(undefined)).toBe(false);60 expect(div.contains(null)).toBe(false);61 });62 describe('connected nodes', () => {63 it('should return true for self, when self is a simple dom node', () => {64 const div = document.createElement('div');65 document.body.appendChild(div);66 expect(div.contains(div)).toBe(true);67 });68 it('should return true for self, when self is a shadowed node', () => {69 const elm = createElement('x-foo', { is: Test });70 document.body.appendChild(elm);71 const div = elm.shadowRoot.querySelector('div');72 expect(div.contains(div)).toBe(true);73 });74 it('should return true for self, when self is a custom element', () => {75 const elm = createElement('x-foo', { is: Test });76 document.body.appendChild(elm);77 expect(elm.contains(elm)).toBe(true);78 });79 it('should return true for self, when self is a shadowRoot', () => {80 const elm = createElement('x-foo', { is: Test });81 document.body.appendChild(elm);82 const shadowRoot = elm.shadowRoot;83 expect(shadowRoot.contains(shadowRoot)).toBe(true);84 });85 });86 describe('disconnected nodes', () => {87 it('should return true for self, when self is a simple dom node', () => {88 const div = document.createElement('div');89 expect(div.contains(div)).toBe(true);90 });91 it('should return true for self, when self is a custom element', () => {92 const elm = createElement('x-foo', { is: Test });93 expect(elm.contains(elm)).toBe(true);94 });95 it('should return true for self, when self is a shadowRoot', () => {96 const elm = createElement('x-foo', { is: Test });97 const shadowRoot = elm.shadowRoot;98 expect(shadowRoot.contains(shadowRoot)).toBe(true);99 });100 });...

Full Screen

Full Screen

script.js

Source:script.js Github

copy

Full Screen

1// Sample JS path2const sample = () => {3 let sample = 'document.querySelector("body > home-assistant").shadowRoot.querySelector("home-assistant-main").shadowRoot.querySelector("app-drawer-layout > partial-panel-resolver > ha-panel-lovelace").shadowRoot.querySelector("hui-root").shadowRoot.querySelector("#view > hui-view > hui-masonry-view").shadowRoot.querySelector("#columns > div > hui-entities-card").shadowRoot.querySelector("ha-card")';4 document.getElementById("forminput").value = sample;5};6// Process7const process = () => {8 let forminput = document.getElementById("forminput").value;9 // Identify type10 let card_mod_type = document.getElementById("card-mod-type");11 card_mod_type.innerHTML = "";12 if (forminput.includes("#layout > app-header")) {13 card_mod_type.innerHTML += "card-mod-root-yaml: |";14 } else if (forminput.includes("#view > hui-view")) {15 card_mod_type.innerHTML += "card-mod-view-yaml: |";16 } else if (forminput.includes("card-tools-popup")) {17 card_mod_type.innerHTML += "card-mod-more-info-yaml: |";18 } else {19 card_mod_type.innerHTML += "card-mod-???";20 }21 let input = forminput.includes("card-tools-popup") ? 22 forminput.replaceAll("document.querySelector(\"body > home-assistant\").shadowRoot.querySelector(\"card-tools-popup\").shadowRoot.", "") : 23 forminput.replaceAll("document.querySelector(\"body > home-assistant\").shadowRoot.querySelector(\"home-assistant-main\").shadowRoot.querySelector(\"app-drawer-layout > partial-panel-resolver > ha-panel-lovelace\").shadowRoot.querySelector(\"hui-root\").shadowRoot.", "");24 // Replace JS path25 let js_path = input26 .replaceAll("document.", "")27 .replaceAll('querySelector("', "")28 .replaceAll(" ", "")29 .replaceAll('")', "")30 .replaceAll(">", "&gt;")31 .replaceAll(".shadowRoot.", "&#36;");32 // Root33 let root = js_path34 .replaceAll("body>home-assistant&#36;home-assistant-main&#36;app-drawer-layout>partial-panel-resolver>ha-panel-lovelace&#36;hui-root&#36;")35 .replaceAll("&#36;", "<span class=\"shadowroot\">&#36;</span>")36 .replaceAll("&gt;", "<span class=\"combinator\">&gt;</span>");37 // Output38 let outputroot = document.getElementById("outputroot");39 outputroot.innerHTML = "";40 if (forminput.includes("document.querySelector(\"body > home-assistant\").shadowRoot.")) {41 outputroot.innerHTML += "\"" + root + "\"";42 } else {43 outputroot.innerHTML += "<span id=\"error\">Invalid JS path</span>";44 }45};46// Copy output47const copy = () => {48 if (outputroot.innerHTML == "&nbsp;" || outputroot.innerHTML == "<span id=\"error\">Invalid JS path</span>") {} else {49 const elm = document.getElementById("outputroot");50 if (window.getSelection) {51 const selection = window.getSelection();52 const range = document.createRange();53 range.selectNodeContents(elm);54 selection.removeAllRanges();55 selection.addRange(range);56 document.execCommand("Copy");57 window.getSelection().removeAllRanges();58 // Button animation59 document.getElementById("copy").classList.add("flash");60 window.setTimeout(() => {61 document.getElementById("copy").classList.remove("flash");62 }, 800);63 }64 }65};66// Paste output67const paste = () => {68navigator.clipboard.readText()69 .then(text => {70 document.getElementById("forminput").value = text;71 process();72 copy();73 })74 .catch(() => {75 document.getElementById("forminput").value = "";76 });...

Full Screen

Full Screen

calculator.js

Source:calculator.js Github

copy

Full Screen

1const template = document.createElement('template');2template.innerHTML = `3 <style>4 @import "main.css"5 </style>6 <div class="calculatorForm"><h1>Calculator</h1></div>7 <div class="main">8 <form>9 <div id="amount">10 <h2 class="heading">Amount: </h2>11 <input class="totalAmount" id="total-amount" type="text" name="total_amount" placeholder="How much do you have?"/>12 <label id="errorText" hidden>Incorrect Format</label>13 </div>14 <button type="button" id="calculate">Calculate</button>15 16 <div id="resultsAmount" hidden>17 <h2 class="resultsHeading">Results: </h2>18 <input class="totalAmountResults" id="total-amount-results" type="text" name="total_amount" readonly/>19 <label id="errorText" hidden>Incorrect Format</label>20 </div>2122 <div id="hideMe">2324 </div>25 </form>26 </div>27`;28class SharesCalculator extends HTMLElement {29 constructor(){30 super();3132 this.attachShadow({mode:'open'});33 this.shadowRoot.appendChild(template.content.cloneNode(true));34 this.shadowRoot.querySelector('h1').innerText = this.getAttribute('name');35 }36 Calculate(totalAmount){37 38 var reg = new RegExp(/^[1-9]\d*(((,\d{3}){1})?(\.\d{0,2})?)$/);39 if(totalAmount == ""){40 this.shadowRoot.querySelector('#total-amount').classList.add('error');41 }42 else if(!reg.test(totalAmount)){43 this.shadowRoot.querySelector('#errorText').classList.add('showMe');44 }45 else{4647 var currentSharePrice = 167241;48 var results = parseFloat((totalAmount/currentSharePrice) * 100);49 this.shadowRoot.querySelector('#total-amount-results').value = Math.round(results);50 this.shadowRoot.querySelector('#errorText').classList.remove('showMe');51 this.shadowRoot.querySelector('#total-amount').classList.remove('error');52 this.shadowRoot.querySelector('#resultsAmount').classList.add('showMe');53 }54 }5556 RemoveRedBorder(totalAmount){5758 if(totalAmount != ""){59 this.shadowRoot.querySelector('#total-amount').classList.remove('error');60 }61 else{62 this.shadowRoot.querySelector('#errorText').classList.remove('showMe');63 this.shadowRoot.querySelector('#total-amount').classList.add('error');64 }65 66 }6768 connectedCallback(){69 this.shadowRoot.querySelector('#calculate').addEventListener('click', () => this.Calculate(this.shadowRoot.querySelector('#total-amount').value));70 this.shadowRoot.querySelector('#total-amount').addEventListener('change', () => this.RemoveRedBorder(this.shadowRoot.querySelector('#total-amount').value));71 }72 disconnectedCallback(){73 this.shadowRoot.querySelector('#calculate').removeEventListener();74 }75}76 ...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { withShadowRoot } from '@open-wc/demoing-storybook';2import { html, render } from 'lit-html';3const withLitHtml = (storyFn) => {4 const story = storyFn();5 const wrapper = document.createElement('div');6 const shadowRoot = wrapper.attachShadow({ mode: 'open' });7 render(html`${story}`, shadowRoot);8 return wrapper;9};10export const withBoth = (storyFn) => {11 const story = storyFn();12 return withShadowRoot(withLitHtml(() => story));13};14import { withBoth } from '../test.js';15export default {16};17export const withText = () => '<button>Hello Button</button>';18export const withEmoji = () => '<button>😀 😎 👍 💯</button>';19import { withPreact } from '@open-wc/demoing-storybook';20import { h } from 'preact';21export const withPreact = (storyFn) => {22 const story = storyFn();23 const wrapper = document.createElement('div');24 const shadowRoot = wrapper.attachShadow({ mode: 'open' });25 render(h('div', {}, story), shadowRoot);26 return wrapper;27};28import { withPreact } from '../test.js';29export default {30};31export const withText = () => '<button>Hello Button</button>';32export const withEmoji = () => '<button>😀 😎 👍 💯</button>';33import { withStencil } from '@open-wc/demoing-storybook';34import { h } from 'stencil';35export const withStencil = (storyFn) => {36 const story = storyFn();37 const wrapper = document.createElement('div');38 const shadowRoot = wrapper.attachShadow({ mode: 'open' });39 render(h('div', {}, story), shadowRoot);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const storybookIframe = document.querySelector('iframe');2const shadowRoot3 = storybookIframe.contentDocument;3const storybookPreview = shadowRoot3.querySelector('storybook-preview');4const shadowRoot = storybookPreview.shadowRoot;5const storybookPreview2 = shadowRoot.querySelector('storybook-preview');6const shadowRoot2 = storybookPreview2.shadowRoot;7const storybookPreview3 = shadowRoot2.querySelector('storybook-preview');8const shadowRoot4 = storybookPreview3.shadowRoot;9const storybookPreview4 = shadowRoot4.querySelector('storybook-preview');10const shadowRoot5 = storybookPreview4.shadowRoot;11const storybookPreview5 = shadowRoot5.querySelector('storybook-preview');12const shadowRoot6 = storybookPreview5.shadowRoot;13const storybookPreview6 = shadowRoot6.querySelector('storybook-preview');14const shadowRoot7 = storybookPreview6.shadowRoot;15const storybookPreview7 = shadowRoot7.querySelector('storybook-preview');16const shadowRoot8 = storybookPreview7.shadowRoot;17const storybookPreview8 = shadowRoot8.querySelector('storybook-preview');18const shadowRoot9 = storybookPreview8.shadowRoot;19const storybookPreview9 = shadowRoot9.querySelector('storybook-preview');20const shadowRoot10 = storybookPreview9.shadowRoot;21const storybookPreview10 = shadowRoot10.querySelector('storybook-preview');22const shadowRoot11 = storybookPreview10.shadowRoot;23const storybookPreview11 = shadowRoot11.querySelector('storybook-preview');

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { withShadowRoot } from 'storybook-addon-shadowroot';2import { withA11y } from '@storybook/addon-a11y';3import '../src/components/button/button.js';4export default {5};6export const Button = () => `7`;8import { LitElement, html, css } from 'lit-element';9class ButtonComponent extends LitElement {10 static get styles() {11 button {12 background: #333;13 color: #fff;14 font-size: 1rem;15 padding: 10px;16 border: 0;17 }18 `;19 }20 render() {21 `;22 }23}24customElements.define('button-component', ButtonComponent);25import { addDecorator } from '@storybook/html';26import { withA11y } from '@storybook/addon-a11y';27addDecorator(withA11y);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const storybookRoot = document.querySelector('storybook-root');2const shadowRoot = storybookRoot.shadowRoot;3const storyRoot = shadowRoot.querySelector('div');4const story = storyRoot.querySelector('div');5const storyContent = story.querySelector('div');6const storyContentChildren = storyContent.children;7const storyContentChild = storyContentChildren[0];8const storyContentChildChildren = storyContentChild.children;9const storyContentChildChild = storyContentChildChildren[0];10const storyContentChildChildChildren = storyContentChildChild.children;11const storyContentChildChildChild = storyContentChildChildChildren[0];12const storyContentChildChildChildChildren = storyContentChildChildChild.children;13const storyContentChildChildChildChild = storyContentChildChildChildChildren[0];14const storyContentChildChildChildChildChildren = storyContentChildChildChildChild.children;15const storyContentChildChildChildChildChild = storyContentChildChildChildChildChildren[0];16const storyContentChildChildChildChildChildChildren = storyContentChildChildChildChildChild.children;17const storyContentChildChildChildChildChildChild = storyContentChildChildChildChildChildChildren[0];18const storyContentChildChildChildChildChildChildChildren = storyContentChildChildChildChildChildChild.children;19const storyContentChildChildChildChildChildChildChild = storyContentChildChildChildChildChildChildChildren[0];20const storyContentChildChildChildChildChildChildChildChildren = storyContentChildChildChildChildChildChildChild.children;21const storyContentChildChildChildChildChildChildChildChild = storyContentChildChildChildChildChildChildChildChildren[0];22const storyContentChildChildChildChildChildChildChildChildChildren = storyContentChildChildChildChildChildChildChildChild.children;23const storyContentChildChildChildChildChildChildChildChildChild = storyContentChildChildChildChildChildChildChildChildChildren[0];24const storyContentChildChildChildChildChildChildChildChildChildChildren = storyContentChildChildChildChildChildChildChildChildChild.children;

Full Screen

Full Screen

Automation Testing Tutorials

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

LambdaTest Learning Hubs:

YouTube

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

Run storybook-root automation tests on LambdaTest cloud grid

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

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

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

Was this article helpful?

Helpful

NotHelpful