<!doctype html>
<html>
<head>
</head>
<body>
<h2>Standard HTML</h2>
<div class="carousel">
<ol class="carousel__indicators">
<li class="carousel__indicator carousel__indicators--active"></li>
<li class="carousel__indicator"></li>
<li class="carousel__indicator"></li>
</ol>
<div class="carousel__inner" role="listbox">
<div class="carousel__item carousel__item--active">
<img class="carousel__image" src="http://placehold.it/100x50" alt="First slide">
</div>
<div class="carousel__item">
<img class="carousel__image" src="http://placehold.it/100x50" alt="Second slide">
</div>
<div class="carousel__item">
<img class="carousel__image" src="http://placehold.it/100x50" alt="Third slide">
</div>
</div>
<a class="carousel__control carousel__control--prev" href="#" role="button">
<span class="carousel__control-icon carousel__control-icon--prev" aria-hidden="true"></span>
<span class="carousel__control-sr">Previous</span>
</a>
<a class="carousel__control carousel__control--next" href="#" role="button">
<span class="carousel__control-icon carousel__control-icon--next" aria-hidden="true"></span>
<span class="carousel__control-sr">Next</span>
</a>
</div>
<script src="./lib.js"></script>
</body>
</html>
Starting project for Your first Polymer element tutorial. Instructions at:
https://www.polymer-project.org/1.0/docs/start/first-element/intro.html
<!-- import latest release version of all components from polygit -->
<link rel="import" href="https://polygit2.appspot.com/components/polymer/polymer.html">
<dom-module id="p-carousel">
<template>
<ol class="carousel__indicators">
<li class="carousel__indicator carousel__indicators--active"></li>
<li class="carousel__indicator"></li>
<li class="carousel__indicator"></li>
</ol>
<div class="carousel__inner" role="listbox">
<content></content>
</div>
<a class="carousel__control carousel__control--prev" href="#" role="button">
<span class="carousel__control-icon carousel__control-icon--prev" aria-hidden="true"></span>
<span class="carousel__control-sr">Previous</span>
</a>
<a class="carousel__control carousel__control--next" href="#" role="button">
<span class="carousel__control-icon carousel__control-icon--next" aria-hidden="true"></span>
<span class="carousel__control-sr">Next</span>
</a>
</template>
<script>
Polymer({
is: 'p-carousel'
});
</script>
</dom-module>
;
(function(window, document) {
function Cobble() {
var that = this;
var addModifier = function(modifName) {
if(!this.hasModifier(modifName)) {
this.htmlElement.className += ' ' + this.className + '--' + modifName;
}
return this;
};
var removeModifier = function(modifName) {
var modifClassRegex = new RegExp('(\\s|^)' + this.className + '--' + modifName + '(\\s|$)');
this.htmlElement.className = this.htmlElement.className.replace(modifClassRegex, ' ');
return this;
};
var hasModifier = function(modifName) {
var modifClassName = ' ' + this.className + '--' + modifName + ' ';
return ((" " + this.htmlElement.className + " ").replace(/[\t\r\n\f]/g, " ").indexOf(modifClassName) > -1)
};
function Block(blockName, htmlElem) {
this.name = this.className = blockName;
this.htmlElement = htmlElem;
this.elements = function(elemName) {
var elemClass = '[class^="' + blockName + '__"],[class*=" ' + blockName + '__"]';
if(elemName) {
elemClass = '.' + blockName + '__' + elemName;
}
var htmlElems = document.querySelectorAll(elemClass);
var htmlElemsLength = htmlElems.length;
var elems = [];
for (var htmlElemIndex = 0; htmlElemIndex < htmlElemsLength; htmlElemIndex++) {
elems.push(new Element(this, elemName, htmlElems[htmlElemIndex]))
}
return elems;
};
}
Block.prototype.addModifier = addModifier;
Block.prototype.hasModifier = hasModifier;
Block.prototype.removeModifier = removeModifier;
function Element(block, elemName, htmlElem) {
this.block = block;
this.name = elemName;
this.htmlElement = htmlElem;
this.className = block.name + '__' + this.name;
}
Element.prototype.addModifier = addModifier;
Element.prototype.hasModifier = hasModifier;
Element.prototype.removeModifier = removeModifier;
this.create = function(name, config) {
config = config || {};
var elements = document.getElementsByClassName(name);
var elementsLength = elements.length;
for (var elementIndex = 0; elementIndex < elementsLength; elementIndex++) {
if(typeof config.created === 'function') {
config.created(new Block(name, elements[elementIndex]));
}
}
}
return this.create;
};
window.Cobble = new Cobble();
}(window, document));
Cobble('carousel', {
created: function(block) {
console.log(block.elements());
}
});