How to use shadowRoot method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

custom-elements.js

Source:custom-elements.js Github

copy

Full Screen

1/​/​ Copyright (c) Microsoft Corporation. All rights reserved.2var dialog = require('dialog'),3 utils = require('utils');4var uniqueIdSuffix = 0;5var interactiveElementSelector = '* /​deep/​ input, * /​deep/​ select, * /​deep/​ button, * /​deep/​ textarea';6function initialize(changePanelVisibilityCallback) {7 registerCustomElement('cordova-panel', {8 proto: {9 cordovaCollapsed: {10 set: function (value) {11 var icon = this.shadowRoot.querySelector('.cordova-collapse-icon');12 var content = this.shadowRoot.querySelector('.cordova-content');13 var isCurrentlyCollapsed = icon.classList.contains('cordova-collapsed');14 if (value && !isCurrentlyCollapsed) {15 collapsePanel(icon, content);16 } else if (!value && isCurrentlyCollapsed) {17 expandPanel(icon, content);18 }19 }20 },21 enabled: {22 set: function (value) {23 if (value) {24 if (this.elementEnabledState) {25 this.elementEnabledState.forEach(function (enabledState) {26 enabledState.element.disabled = enabledState.disabled;27 });28 delete this.elementEnabledState;29 this.shadowRoot.querySelector('.cordova-panel-inner').setAttribute('tabIndex', '0');30 }31 } else {32 this.elementEnabledState = [];33 Array.prototype.forEach.call(this.querySelectorAll(interactiveElementSelector), function (element) {34 this.elementEnabledState.push({element: element, disabled: element.disabled});35 element.disabled = true;36 }, this);37 this.shadowRoot.querySelector('.cordova-panel-inner').setAttribute('tabIndex', '');38 }39 }40 },41 focus: {42 value: function () {43 this.shadowRoot.querySelector('.cordova-panel-inner').focus();44 }45 }46 },47 initialize: function () {48 var content = this.shadowRoot.querySelector('.cordova-content');49 var panelId = this.getAttribute('id');50 var collapseIcon = this.shadowRoot.querySelector('.cordova-collapse-icon');51 this.shadowRoot.querySelector('.cordova-header .spoken-text span').textContent = this.getAttribute('caption');52 this.shadowRoot.querySelector('.cordova-header .spoken-text span').setAttribute('title', this.getAttribute('caption'));53 this.shadowRoot.querySelector('.cordova-header .spoken-text').setAttribute('aria-label', this.getAttribute('spoken-text') || this.getAttribute('caption'));54 function expandCollapse() {55 var collapsed = collapseIcon.classList.contains('cordova-collapsed');56 if (collapsed) {57 expandPanel(collapseIcon, content);58 } else {59 collapsePanel(collapseIcon, content);60 }61 if (changePanelVisibilityCallback && typeof changePanelVisibilityCallback === 'function') {62 changePanelVisibilityCallback(panelId, !collapsed);63 }64 }65 this.shadowRoot.querySelector('.cordova-header').addEventListener('click', expandCollapse);66 this.shadowRoot.querySelector('.cordova-panel-inner').addEventListener('keydown', function (e) {67 if (e.target === this && e.keyCode === 32 && !isModifyKeyPressed(e)) {68 expandCollapse();69 }70 });71 }72 });73 registerCustomElement('cordova-dialog', {74 proto: {75 show: {76 value: function () {77 document.getElementById('popup-window').style.display = '';78 this.style.display = '';79 this.querySelector('.cordova-panel-inner').focus();80 }81 },82 hide: {83 value: function () {84 document.getElementById('popup-window').style.display = 'none';85 this.style.display = 'none';86 }87 }88 },89 initialize: function () {90 this.shadowRoot.querySelector('.cordova-header .spoken-text span').textContent = this.getAttribute('caption');91 this.shadowRoot.querySelector('.cordova-header .spoken-text span').setAttribute('title', this.getAttribute('caption'));92 this.shadowRoot.querySelector('.cordova-header .spoken-text').setAttribute('aria-label', this.getAttribute('spoken-text') || this.getAttribute('caption'));93 this.shadowRoot.querySelector('.cordova-close-icon').addEventListener('click', function () {94 dialog.hideDialog();95 });96 this.addEventListener('keydown', function (e) {97 if (e.keyCode === 27 && !isModifyKeyPressed(e)) {98 /​/​ Escape key pressed99 dialog.hideDialog();100 }101 });102 }103 });104 registerCustomElement('cordova-item-list', {105 proto: {106 addItem: {107 value: function (item) {108 this.appendChild(item);109 setClassWrapper(this.children);110 }111 },112 removeItem: {113 value: function (item) {114 this.removeChild(this.children[item]);115 setClassWrapper(this.children);116 }117 }118 },119 initialize: function () {120 this.classList.add('cordova-group');121 }122 });123 registerCustomElement('cordova-item', {124 proto: {125 focus: {126 value: function () {127 this.shadowRoot.querySelector('.cordova-item-wrapper').focus();128 }129 }130 },131 initialize: function () {132 this.classList.add('cordova-group');133 this.addEventListener('mousedown', function () {134 var that = this;135 window.setTimeout(function () {136 if (document.activeElement !== that) {137 that.focus();138 }139 }, 0);140 });141 var that = this;142 this.shadowRoot.querySelector('.close-button').addEventListener('click', function () {143 removeItem(that);144 });145 this.addEventListener('keydown', function (e) {146 if (isModifyKeyPressed(e)) {147 return;148 }149 var list, childIndex;150 switch (e.keyCode) {151 case 46:152 /​/​ Delete key153 removeItem(this, true);154 break;155 case 38:156 /​/​ Up arrow157 e.preventDefault();158 list = this.parentNode;159 childIndex = getItemIndex(this, list);160 if (childIndex > 0) {161 list.children[childIndex - 1].focus();162 }163 break;164 case 40:165 /​/​ Down arrow166 e.preventDefault();167 list = this.parentNode;168 childIndex = getItemIndex(this, list);169 if (childIndex < list.children.length - 1) {170 list.children[childIndex + 1].focus();171 }172 break;173 }174 });175 function getItemIndex(item, list) {176 return list && list.tagName === 'CORDOVA-ITEM-LIST' ? Array.prototype.indexOf.call(list.children, item) : -1;177 }178 function removeItem(item, setFocus) {179 var list = item.parentNode;180 /​/​ If we're within a list, calculate index in the list181 var childIndex = getItemIndex(item, list);182 if (childIndex > -1) {183 /​/​ Raise an event on ourselves184 var itemRemovedEvent = new CustomEvent('itemremoved', { detail: { itemIndex: childIndex }, bubbles: true });185 item.dispatchEvent(itemRemovedEvent);186 list.removeChild(item);187 setClassWrapper(list.children);188 if (setFocus) {189 var itemCount = list.children.length;190 if (itemCount > 0) {191 if (childIndex >= itemCount) {192 childIndex = itemCount - 1;193 }194 list.children[childIndex].focus();195 } else {196 /​/​ If no items left, set focus to containing panel if there is one197 var panel = findParent(list, 'cordova-panel');198 panel && panel.focus();199 }200 }201 }202 }203 }204 });205 registerCustomElement('cordova-panel-row', {206 initialize: function () {207 this.classList.add('cordova-panel-row');208 this.classList.add('cordova-group');209 }210 });211 registerCustomElement('cordova-group', {212 initialize: function () {213 this.classList.add('cordova-group');214 }215 });216 registerCustomElement('cordova-checkbox', {217 proto: {218 checked: {219 get: function () {220 return this.shadowRoot.querySelector('input').checked;221 },222 set: function (value) {223 setValueSafely(this.shadowRoot.querySelector('input'), 'checked', value);224 }225 },226 focus: {227 value: function () {228 this.shadowRoot.querySelector('input').focus();229 }230 }231 },232 initialize: function () {233 if (this.parentNode.tagName === 'CORDOVA-PANEL') {234 this.classList.add('cordova-panel-row');235 this.classList.add('cordova-group');236 } else {237 /​/​ Reverse the order of the checkbox and caption238 this.shadowRoot.appendChild(this.shadowRoot.querySelector('label'));239 }240 if (this.hasAttribute('spoken')) {241 this.shadowRoot.querySelector('label').setAttribute('aria-hidden', false);242 }243 },244 mungeIds: 'cordova-checkbox-template-input'245 });246 registerCustomElement('cordova-radio', {247 proto: {248 checked: {249 get: function () {250 return this.shadowRoot.querySelector('input').checked;251 },252 set: function (value) {253 setValueSafely(this.shadowRoot.querySelector('input'), 'checked', value);254 }255 },256 focus: {257 value: function () {258 this.shadowRoot.querySelector('input').focus();259 }260 }261 },262 initialize: function () {263 var isChecked = this.getAttribute('checked');264 if (isChecked && isChecked.toLowerCase() === 'true') {265 this.shadowRoot.querySelector('input').checked = true;266 }267 var parentGroup = findParent(this, 'cordova-group');268 if (parentGroup) {269 var radioButton = this.shadowRoot.querySelector('input');270 radioButton.setAttribute('name', parentGroup.id);271 }272 },273 mungeIds: 'cordova-radio-template-input'274 });275 registerCustomElement('cordova-label', {276 proto: {277 value: {278 set: function (value) {279 setValueSafely(this.shadowRoot.querySelector('label'), 'textContent', value);280 },281 get: function () {282 return this.shadowRoot.querySelector('label').textContent;283 }284 }285 },286 initialize: function () {287 var label = this.shadowRoot.querySelector('label');288 label.textContent = this.getAttribute('label');289 label.setAttribute('for', this.getAttribute('for'));290 this.setAttribute('for', '');291 if (this.hasAttribute('spoken')) {292 label.setAttribute('aria-hidden', 'false');293 }294 }295 });296 registerCustomElement('cordova-text-entry', {297 proto: {298 value: {299 set: function (value) {300 setValueSafely(this.shadowRoot.querySelector('input'), 'value', value);301 },302 get: function () {303 return this.shadowRoot.querySelector('input').value;304 }305 },306 disabled: {307 set: function (value) {308 setValueSafely(this.shadowRoot.querySelector('input'), 'disabled', value);309 }310 },311 focus: {312 value: function () {313 this.shadowRoot.querySelector('input').focus();314 }315 }316 },317 initialize: function () {318 this.shadowRoot.querySelector('label').textContent = this.getAttribute('label');319 this.classList.add('cordova-panel-row');320 this.classList.add('cordova-group');321 },322 eventTarget: 'input',323 mungeIds: 'cordova-text-entry-template-input'324 });325 registerCustomElement('cordova-number-entry', {326 proto: {327 value: {328 set: function (value) {329 if (utils.isNumber(value)) {330 this._internalValue = value;331 } else {332 value = this._internalValue;333 }334 setValueSafely(this.shadowRoot.querySelector('input'), 'value', value);335 },336 get: function () {337 return this.shadowRoot.querySelector('input').value;338 }339 },340 disabled: {341 set: function (value) {342 setValueSafely(this.shadowRoot.querySelector('input'), 'disabled', value);343 }344 },345 focus: {346 value: function () {347 this.shadowRoot.querySelector('input').focus();348 }349 }350 },351 initialize: function () {352 var displayLabel = this.getAttribute('label');353 this.shadowRoot.querySelector('label').textContent = displayLabel;354 this.classList.add('cordova-panel-row');355 this.classList.add('cordova-group');356 this._internalValue = 0;357 var input = this.shadowRoot.querySelector('input');358 input.setAttribute('aria-label', this.getAttribute('spoken-text') || displayLabel);359 var maxValue = this.getAttribute('max'),360 minValue = this.getAttribute('min'),361 value = this.getAttribute('value'),362 step = this.getAttribute('step');363 /​/​ initialize _internalValue with one of the available values,364 /​/​ otherwise it remains 0365 if (value !== null && utils.isNumber(value)) {366 this._internalValue = value;367 } else if (minValue !== null && utils.isNumber(minValue)) {368 this._internalValue = minValue;369 } else if (maxValue !== null && utils.isNumber(maxValue) && this._internalValue > parseFloat(maxValue)) {370 this._internalValue = maxValue;371 }372 if (maxValue !== null) input.setAttribute('max', maxValue);373 if (minValue !== null) input.setAttribute('min', minValue);374 if (step !== null) input.setAttribute('step', step);375 if (value !== null) input.setAttribute('value', value);376 /​/​ verify and force the input value to be a valid number377 input.addEventListener('input', function (event) {378 var value = event.target.value;379 if (utils.isNumber(value)) {380 this._internalValue = value;381 } else {382 /​/​ the new value is not a number, set the value to the383 /​/​ latest number value384 input.value = this._internalValue;385 return false;386 }387 }.bind(this));388 },389 eventTarget: 'input',390 mungeIds: 'cordova-number-entry-template-input'391 });392 registerCustomElement('cordova-labeled-value', {393 proto: {394 label: {395 set: function (value) {396 setValueSafely(this.shadowRoot.querySelector('label'), 'textContent', value);397 },398 get: function () {399 return this.shadowRoot.querySelector('label').textContent;400 }401 },402 value: {403 set: function (value) {404 setValueSafely(this.shadowRoot.querySelector('span'), 'textContent', value);405 setValueSafely(this.shadowRoot.querySelector('span'), 'title', value);406 },407 get: function () {408 return this.shadowRoot.querySelector('span').textContent;409 }410 }411 },412 initialize: function () {413 this.shadowRoot.querySelector('label').textContent = this.getAttribute('label');414 this.shadowRoot.querySelector('span').textContent = this.getAttribute('value');415 this.shadowRoot.querySelector('span').setAttribute('title', this.getAttribute('value'));416 this.classList.add('cordova-panel-row');417 this.classList.add('cordova-group');418 }419 });420 registerCustomElement('cordova-button', {421 proto: {422 focus: {423 value: function () {424 this.shadowRoot.querySelector('button').focus();425 }426 }427 },428 initialize: function () {429 var readLabel = this.getAttribute('spoken-text');430 if (readLabel) {431 this.shadowRoot.querySelector('button').setAttribute('aria-label', readLabel);432 }433 },434 eventTarget: 'button'435 });436 registerCustomElement('cordova-file', {437 proto: {438 input: {439 get: function () {440 return this.shadowRoot.querySelector('input');441 }442 },443 files: {444 get: function () {445 return this.shadowRoot.querySelector('input').files;446 }447 },448 accept: {449 set: function (value) {450 setValueSafely(this.shadowRoot.querySelector('input'), 'accept', value);451 }452 }453 },454 eventTarget: 'input'455 });456 registerCustomElement('cordova-combo', {457 proto: {458 options: {459 get: function () {460 return this.shadowRoot.querySelector('select').options;461 }462 },463 selectedIndex: {464 get: function () {465 return this.shadowRoot.querySelector('select').selectedIndex;466 }467 },468 value: {469 get: function () {470 return this.shadowRoot.querySelector('select').value;471 },472 set: function (value) {473 setValueSafely(this.shadowRoot.querySelector('select'), 'value', value);474 }475 },476 appendChild: {477 value: function (node) {478 this.shadowRoot.querySelector('select').appendChild(node);479 }480 },481 focus: {482 value: function () {483 this.shadowRoot.querySelector('select').focus();484 }485 }486 },487 initialize: function () {488 this.classList.add('cordova-panel-row');489 this.classList.add('cordova-group');490 var select = this.shadowRoot.querySelector('select');491 var name = this.getAttribute('name');492 if (name) {493 select.setAttribute('name', name);494 }495 var label = this.getAttribute('label');496 if (label) {497 this.shadowRoot.querySelector('label').textContent = label;498 } else {499 select.style.width = this.style.width || '100%';500 select.style.minWidth = this.style.minWidth;501 }502 503 var readLabel = this.getAttribute('spoken-text');504 if (readLabel) {505 select.setAttribute('aria-label', readLabel);506 }507 /​/​ Move option elements to be children of select element508 var options = this.querySelectorAll('option');509 Array.prototype.forEach.call(options, function (option) {510 select.appendChild(option);511 });512 },513 eventTarget: 'select',514 mungeIds: 'cordova-combo-template-select'515 });516}517/​**518 * @param name The name of the custom element (corresponds to tag in html files).519 * @param opts - options for the creation of the element.520 * @param opts.proto Properties to set on the prototype.521 * @param opts.initialize Function to call when the custom element is initialized.522 * @param opts.eventTarget Selector for object to redirect events to.523 * @param opts.mungeIds An id or array of ids to 'munge' by pre-pending with custom element id or random value (to524 * ensure unique in document)525 */​526function registerCustomElement(name, opts) {527 var protoProperties = opts.proto;528 var initializeCallback = opts.initialize;529 var eventTargetSelector = opts.eventTarget;530 var mungeIds = opts.mungeIds;531 if (mungeIds && !Array.isArray(mungeIds)) {532 mungeIds = [mungeIds];533 }534 var constructorName = name.split('-').map(function (bit) {535 return bit.charAt(0).toUpperCase() + bit.substr(1);536 }).join('');537 var proto = Object.create(HTMLElement.prototype);538 if (protoProperties) {539 Object.defineProperties(proto, protoProperties);540 }541 function initialize() {542 this.initialized = true;543 var eventTarget = eventTargetSelector && this.shadowRoot.querySelector(eventTargetSelector);544 if (eventTarget) {545 /​/​ Make sure added events are redirected. Add more on<event> handlers here as we find they're needed546 Object.defineProperties(this, {547 addEventListener: {548 value: function (a, b, c) {549 eventTarget.addEventListener(a, b, c);550 }551 },552 click: {553 value: eventTarget.click554 },555 onclick: {556 get: function () {557 return eventTarget.onclick;558 },559 set: function (value) {560 eventTarget.onclick = value;561 }562 },563 onchange: {564 get: function () {565 return eventTarget.onchange;566 },567 set: function (value) {568 eventTarget.onchange = value;569 }570 }571 });572 }573 /​/​ We don't allow inline event handlers. Detect them and strip.574 var atts = this.attributes;575 Array.prototype.forEach.call(atts, function (att) {576 if (att.name.indexOf('on') === 0) {577 console.error('Unsupported inline event handlers detected: ' + name + '.' + att.name + '="' + att.value + '"');578 this.removeAttribute(att.name);579 }580 }, this);581 /​/​ Initialize if it is required582 initializeCallback && initializeCallback.call(this);583 /​/​ Apply attributes584 }585 proto.attachedCallback = function () {586 if (!this.initialized) {587 /​/​ If it hasn't already been initialized, do so now.588 initialize.call(this);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 }608 if (initializeCallback && this.ownerDocument === document) {609 /​/​ If it is being created in the main document, initialize immediately.610 initialize.call(this);611 }612 };613 window[constructorName] = document.registerElement(name, {614 prototype: proto615 });616}617function isModifyKeyPressed(e) {618 return e.altKey || e.ctrlKey || e.shiftKey || e.metaKey;619}620function collapsePanel(iconElem, content) {621 iconElem.classList.add('cordova-collapsed');622 content.style.display = 'none';623 content.style.height = '0';624}625function expandPanel(iconElem, content) {626 iconElem.classList.remove('cordova-collapsed');627 content.style.display = '';628 content.style.height = '';629}630function findParent(element, tag) {631 if (!Array.isArray(tag)) {632 tag = [tag];633 }634 var parent = element.parentNode;635 return parent && parent.tagName ? tag.indexOf(parent.tagName.toLowerCase()) > -1 ? parent : findParent(parent, tag) : null;636}637function setValueSafely(el, prop, value) {638 /​/​ In IE, setting the property when the element hasn't yet been added to the document can fail (like an issue with639 /​/​ the webcomponents polyfill), so do it after a setTimeout().640 if (el.ownerDocument.contains(el)) {641 el[prop] = value;642 } else {643 window.setTimeout(function () {644 el[prop] = value;645 }, 0);646 }647}648function setClassWrapper(list) {649 var length = list.length;650 if (length == 1) {651 list[0].shadowRoot.querySelector('.cordova-item-wrapper').className = 'cordova-item-wrapper cordova-item-first-child cordova-item-last-child';652 } else if (length > 0) {653 list[0].shadowRoot.querySelector('.cordova-item-wrapper').className = 'cordova-item-wrapper cordova-item-first-child';654 for (var i = 1; i < length - 1; i++) {655 list[i].shadowRoot.querySelector('.cordova-item-wrapper').className = 'cordova-item-wrapper';656 } 657 list[length - 1].shadowRoot.querySelector('.cordova-item-wrapper').className = 'cordova-item-wrapper cordova-item-last-child'; 658 }659}660module.exports = {661 initialize: initialize662};663if (!Array.prototype.find) {664 Array.prototype.find = function (predicate) {665 if (this == null) {666 throw new TypeError('Array.prototype.find called on null or undefined');667 }668 if (typeof predicate !== 'function') {669 throw new TypeError('predicate must be a function');670 }671 var list = Object(this);672 var length = list.length >>> 0;673 var thisArg = arguments[1];674 var value;675 for (var i = 0; i < length; i++) {676 value = list[i];677 if (predicate.call(thisArg, value, i, list)) {678 return value;679 }680 }681 return undefined;682 };...

Full Screen

Full Screen

rerender.js

Source:rerender.js Github

copy

Full Screen

1/​**2 * @license3 * Copyright (c) 2014 The Polymer Project Authors. All rights reserved.4 * This code may only be used under the BSD style license found at http:/​/​polymer.github.io/​LICENSE.txt5 * The complete set of authors may be found at http:/​/​polymer.github.io/​AUTHORS.txt6 * The complete set of contributors may be found at http:/​/​polymer.github.io/​CONTRIBUTORS.txt7 * Code distributed by Google as part of the polymer project is also8 * subject to an additional IP rights grant found at http:/​/​polymer.github.io/​PATENTS.txt9 */​10suite('Shadow DOM rerender', function() {11 var unsafeUnwrap = ShadowDOMPolyfill.unsafeUnwrap;12 var unwrap = ShadowDOMPolyfill.unwrap;13 function getVisualInnerHtml(el) {14 el.offsetWidth;15 return unwrap(el).innerHTML;16 }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);432 assert.equal(removeChildCount, 0);433 assert.equal(getVisualInnerHtml(div), '<a></​a><c></​c><b></​b>');434 assert.equal(insertBeforeCount, 1);435 assert.equal(removeChildCount, 1);436 content.select = 'c';437 reset();438 assert.equal(getVisualInnerHtml(div), '<c></​c><b></​b>');439 assert.equal(insertBeforeCount, 0);440 assert.equal(removeChildCount, 1);441 content.select = '*';442 reset();443 assert.equal(getVisualInnerHtml(div), '<a></​a><c></​c><b></​b>');444 assert.equal(insertBeforeCount, 1);445 assert.equal(removeChildCount, 0);446 content.select = 'x';447 reset();448 assert.equal(getVisualInnerHtml(div), '<b></​b>');449 assert.equal(insertBeforeCount, 0);450 assert.equal(removeChildCount, 2);451 content.appendChild(document.createTextNode('fallback'));452 reset();453 assert.equal(getVisualInnerHtml(div), 'fallback<b></​b>');454 assert.equal(insertBeforeCount, 1);455 assert.equal(removeChildCount, 1); /​/​ moved from content456 content.insertBefore(document.createTextNode('more '),457 content.firstChild);458 reset();459 assert.equal(getVisualInnerHtml(div), 'more fallback<b></​b>');460 assert.equal(insertBeforeCount, 0); /​/​ already inserted before "fallback"461 assert.equal(removeChildCount, 0);462 content.select = '*';463 reset();464 assert.equal(getVisualInnerHtml(div), '<a></​a><c></​c><b></​b>');465 assert.equal(insertBeforeCount, 2);466 assert.equal(removeChildCount, 2);467 } finally {468 ShadowDOMPolyfill.originalInsertBefore = originalInsertBefore;469 ShadowDOMPolyfill.originalRemoveChild = originalRemoveChild;470 }471 });...

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

1var webdriverio = require('webdriverio');2var options = {3 desiredCapabilities: {4 }5};6var client = webdriverio.remote(options);7 .init()8 .shadow$('input')9 .setValue('WebdriverIO')10 .shadow$('button')11 .click()12 .end();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const shadowRoot = (el) => el.shadowRoot;2const shadowEl = (el) => browser.execute(shadowRoot, el);3const shadowElId = (el, id) => shadowEl(el).value.$(`#${id}`);4const shadowElClass = (el, className) => shadowEl(el).value.$(`.${className}`);5const shadowDom = (el) => el.shadow$;6const shadowDomEl = (el) => browser.execute(shadowDom, el);7const shadowDomElId = (el, id) => shadowDomEl(el).value.$(`#${id}`);8const shadowDomElClass = (el, className) => shadowDomEl(el).value.$(`.${className}`);9const getHTML = (el) => el.getHTML(false);10const getHTMLEl = (el) => browser.execute(getHTML, el);11const getHTMLElId = (el, id) => getHTMLEl(el).value.$(`#${id}`);12const getHTMLElClass = (el, className) => getHTMLEl(el).value.$(`.${className}`);13const getAttribute = (el, attribute) => el.getAttribute(attribute);14const getAttributeEl = (el, attribute) => browser.execute(getAttribute, el, attribute);15const getAttributeElId = (el, attribute, id) => getAttributeEl(el, attribute).value.$(`#${id}`);16const getAttributeElClass = (el, attribute, className) => getAttributeEl(el, attribute).value.$(`.${className}`);17const getCssProperty = (el, property) => el.getCssProperty(property);18const getCssPropertyEl = (el, property) => browser.execute(getCssProperty, el, property);19const getCssPropertyElId = (el, property, id) => getCssPropertyEl(el, property).value.$(`#${id}`);20const getCssPropertyElClass = (el, property, className) => getCssPropertyEl(el, property).value.$(`.${className}`);21const getValue = (el) => el.getValue();22const getValueEl = (el) => browser.execute(getValue,

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('WebdriverIO Shadow DOM Test', () => {2 it('should find shadow DOM element', () => {3 var shadowRoot = browser.shadow$('paper-button');4 console.log(shadowRoot.getText());5 });6});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const myElement = $('my-element');2const shadowRoot = myElement.shadow$'my-shadow-element');3shadowRoot.click();4### browser.shadow$(selector)5### browser.shadow$$(selector)6### element.shadow$(selector)7### element.shadow$$(selector)8### element.shadowRoot()

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const shadow = require('shadow-element');2const element = shadow('#shadow-root-selector');3element.$('#shadow-element-selector').click();4const element = $('#shadow-root-selector');5const shadow = element.shadow$('#shadow-element-selector');6shadow.click();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const myElement = $('my-element');2const shadowRoot = myElement.shadow$('my-shadow-element');3shadowRoot.click();4### browser.shadow$(selector)5### browser.shadow$$(selector)6### element.shadow$(selector)7### element.shadow$$(selector)8### element.shadowRoot()

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const shadow = require('shadow-element');2const element = shadow('#shadow-root-selector');3element.$('#shadow-element-selector').click();4const element = $('#shadow-root-selector');5const shadow = element.shadow$('#shadow-element-selector');6shadow.click();7 });8});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const shadowRoot = browser.execute(function () {2 return document.querySelector('my-element').shadowRoot;3});4const shadowSelector = shadowRoot.value;5browser.elementIdElement(shadowSelector.ELEMENT, 'input').setValue('Hello');6This is a very basic example of how to use shadowRoot method. You can also use it to find elements inside shadowRoot. You can find more examples [here](

Full Screen

Full Screen

WebdriverIO Tutorial

Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.

Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.

Chapters

  1. Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.

  2. Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.

  3. Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?

  4. Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.

  5. How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.

  6. Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.

  7. Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.

  8. Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.

  9. JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.

  10. Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.

Run Webdriverio 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