How to use the metal-dom.hasClass function in metal-dom

To help you get started, we’ve selected a few metal-dom examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github metal / metal.js / test / Soy.js View on Github external
it('should render html sanitized object attributes correctly', function() {
			comp = new HtmlContentComponent({
				content: {
					content: '<span class="custom">HTML Content</span>',
					contentKind: 'HTML'
				}
			});

			assert.strictEqual(1, comp.element.childNodes.length);
			assert.strictEqual('SPAN', comp.element.childNodes[0].tagName);
			assert.ok(dom.hasClass(comp.element.childNodes[0], 'custom'));
			assert.strictEqual('HTML Content', comp.element.childNodes[0].textContent);
		});
	});
github metal / metal.js / test / JSX.js View on Github external
it('should render contents from component\'s jsx function', function() {
		class TestComponent extends Component {
			render() {
				return <div class="test">Hello World</div>;
			}
		}
		TestComponent.RENDERER = JSX;

		component = new TestComponent();
		assert.strictEqual('DIV', component.element.tagName);
		assert.ok(dom.hasClass(component.element, 'test'));
		assert.strictEqual('Hello World', component.element.textContent);
	});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
IncDom.elementOpen('div');
						IncDom.elementOpen(TestChildComponent, null, null, 'ref', 'child');
						IncDom.elementVoid('span', null, ['class', 'first']);
						IncDom.elementVoid('span', null, ['class', 'second']);
						IncDom.elementVoid('span', null, ['class', 'third']);
						IncDom.elementClose(TestChildComponent);
						IncDom.elementClose('div');
					}
				}
				TestComponent.RENDERER = IncrementalDomRenderer;
				component = new TestComponent();

				var child = component.components.child;
				assert.strictEqual(1, child.element.childNodes.length);
				assert.strictEqual('SPAN', child.element.childNodes[0].tagName);
				assert.ok(dom.hasClass(child.element.childNodes[0], 'second'));
			});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
component.once('stateSynced', function() {
				assert.ok(!dom.hasClass(component.element, 'foo'));
				assert.ok(dom.hasClass(component.element, 'bar'));
				assert.ok(dom.hasClass(component.element, 'test'));
				done();
			});
		});
github metal / metal.js / test / IncrementalDomRenderer.js View on Github external
IncDom.elementClose('div');
				}
			}
			TestComponent.RENDERER = IncrementalDomRenderer;

			var element = document.createElement('div');
			dom.append(element, '<div class="inner2">foo</div>');
			var innerElement = element.querySelector('.inner2');
			component = new TestComponent({
				element: element
			});

			assert.strictEqual(element, component.element);
			assert.strictEqual(innerElement, component.element.querySelector('.inner'));
			assert.strictEqual('foo', component.element.textContent);
			assert.ok(dom.hasClass(innerElement, 'inner'));
			assert.ok(!dom.hasClass(innerElement, 'inner2'));
		});
	});
github LiferayCloud / marble / packages / marble-slider / src / Slider.js View on Github external
onRailClick_(event) {
    if (
      dom.hasClass(event.target, 'rail') ||
      dom.hasClass(event.target, 'rail-active')
    ) {
      const prevValue = this.value;
      this.updateValue_(event.offsetX, 0, true);
      if (prevValue === this.value) {
        const handleRegion = Position.getRegion(this.refs.handle);
        if (event.offsetX &lt; handleRegion.left) {
          this.value -= 1;
        } else {
          this.value += 1;
        }
      }
    }
  }
github diegonvs / gatsby-boilerplate / src / components / CodeTabs / CodeTabs.js View on Github external
elements.forEach(element => {
			tabGroupsData.push({
				label: this._getTabLabelFromElement(element),
				element: element,
			});

			if (!element.nextElementSibling || !dom.hasClass(element.nextElementSibling, className)) {
				if (tabGroupsData.length > 1) {
					this._renderTabs(tabGroupsData);
				}
				tabGroupsData = [];
			}
		});
	}
github LiferayCloud / marble / packages / marble-select / src / Select.js View on Github external
break;
      case 40:
        this.focusedIndex_ = core.isDefAndNotNull(this.focusedIndex_)
          ? this.focusedIndex_
          : -1;
        this.focusIndex_(
          this.focusedIndex_ === this.items.length - 1
            ? 0
            : this.focusedIndex_ + 1
        );
        event.preventDefault();
        break;
      }
    } else if (
      (keyCode === 13 || keyCode === 32) &&
      dom.hasClass(event.target, 'dropdown-select')
    ) {
      this.openedWithKeyboard_ = true;
      this.expanded_ = true;
      event.preventDefault();
      return;
    }
  }
github LiferayCloud / marble / packages / marble-slider / src / Slider.js View on Github external
onRailClick_(event) {
    if (
      dom.hasClass(event.target, 'rail') ||
      dom.hasClass(event.target, 'rail-active')
    ) {
      const prevValue = this.value;
      this.updateValue_(event.offsetX, 0, true);
      if (prevValue === this.value) {
        const handleRegion = Position.getRegion(this.refs.handle);
        if (event.offsetX &lt; handleRegion.left) {
          this.value -= 1;
        } else {
          this.value += 1;
        }
      }
    }
  }
github electricjs / electric / packages / electric-base-components / src / ElectricCodeTabs.js View on Github external
elements.forEach(element => {
      tabGroupsData.push({
        label: this.getTabLabelFromElement_(element),
        element: element
      });
      if (!element.nextElementSibling || !dom.hasClass(element.nextElementSibling, this.className)) {
        if(tabGroupsData.length > 1) {
          this.renderTabs_(tabGroupsData);
        }
        tabGroupsData = [];
      }
    });
  }