Merge pull request #112 from LasaleFamine/refactor/blaze2

Refactor upgrading to Blaze 2 #105

dist/rg-alerts/rg-alerts.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-alerts', '<div class="alerts"> <div each="{opts.alerts}" class="alerts__alert {\'alerts__alert--\' + type}" if="{isvisible}" onclick="{select}"> <button class="button button--close" if="{dismissable != false}" onclick="{parent.dismiss}"> &times; </button> {text} </div> </div>', '', '', function(opts) {
+riot.tag2('rg-alerts', '<div class="alerts"> <div each="{opts.alerts}" class="c-alerts__alert {\'c-alerts__alert--\' + type}" if="{isvisible}" onclick="{select}"> <button class="c-button c-button--close" if="{dismissable != false}" onclick="{parent.dismiss}"> &times; </button> {text} </div> </div>', '', '', function(opts) {
 var _this = this;
 
 this.on('update', function () {

dist/rg-bubble/rg-bubble.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-bubble', '<div class="context"> <div class="bubble bubble--top" if="{isvisible}"> {opts.bubble.text} </div> <div class="content" onmouseover="{showBubble}" onmouseout="{hideBubble}" onclick="{toggleBubble}"> <yield></yield> </div> </div>', 'rg-bubble .context,[riot-tag="rg-bubble"] .context,[data-is="rg-bubble"] .context,rg-bubble .content,[riot-tag="rg-bubble"] .content,[data-is="rg-bubble"] .content{ display: inline-block; position: relative; } rg-bubble .bubble,[riot-tag="rg-bubble"] .bubble,[data-is="rg-bubble"] .bubble{ position: absolute; top: -70px; left: 50%; transform: translate3d(-50%, 0, 0); }', '', function(opts) {
+riot.tag2('rg-bubble', '<div class="context"> <div class="c-bubble c-bubble--top" if="{isvisible}"> {opts.bubble.text} </div> <div class="content" onmouseover="{showBubble}" onmouseout="{hideBubble}" onclick="{toggleBubble}"> <yield></yield> </div> </div>', 'rg-bubble .context,[riot-tag="rg-bubble"] .context,[data-is="rg-bubble"] .context,rg-bubble .content,[riot-tag="rg-bubble"] .content,[data-is="rg-bubble"] .content{ display: inline-block; position: relative; } rg-bubble .c-bubble,[riot-tag="rg-bubble"] .c-bubble,[data-is="rg-bubble"] .c-bubble{ position: absolute; top: -70px; left: 50%; transform: translate3d(-50%, 0, 0); }', '', function(opts) {
 var _this = this;
 
 this.showBubble = function () {

dist/rg-credit-card/rg-credit-card-number.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-credit-card-number', '<input type="text" name="cardnumber" class="field card-no {icon} {\'field--success\': opts.card.valid}" oninput="{validate}" placeholder="{opts.card.placeholder}">', 'rg-credit-card-number .card-no,[riot-tag="rg-credit-card-number"] .card-no,[data-is="rg-credit-card-number"] .card-no{ padding-right: 60px; background-repeat: no-repeat; background-position: right center; background-size: 60px; } rg-credit-card-number .amex,[riot-tag="rg-credit-card-number"] .amex,[data-is="rg-credit-card-number"] .amex{ background-image: url(img/amex.png); } rg-credit-card-number .diners_club,[riot-tag="rg-credit-card-number"] .diners_club,[data-is="rg-credit-card-number"] .diners_club{ background-image: url(img/diners_club.png); } rg-credit-card-number .discover,[riot-tag="rg-credit-card-number"] .discover,[data-is="rg-credit-card-number"] .discover{ background-image: url(img/discover.png); } rg-credit-card-number .jcb,[riot-tag="rg-credit-card-number"] .jcb,[data-is="rg-credit-card-number"] .jcb{ background-image: url(img/jcb.png); } rg-credit-card-number .mastercard,[riot-tag="rg-credit-card-number"] .mastercard,[data-is="rg-credit-card-number"] .mastercard{ background-image: url(img/mastercard.png); } rg-credit-card-number .visa,[riot-tag="rg-credit-card-number"] .visa,[data-is="rg-credit-card-number"] .visa{ background-image: url(img/visa.png); }', '', function(opts) {
+riot.tag2('rg-credit-card-number', '<input type="text" name="cardnumber" class="c-field card-no {icon} {\'c-field--success\': opts.card.valid}" oninput="{validate}" placeholder="{opts.card.placeholder}">', 'rg-credit-card-number .card-no,[riot-tag="rg-credit-card-number"] .card-no,[data-is="rg-credit-card-number"] .card-no{ padding-right: 60px; background-repeat: no-repeat; background-position: right center; background-size: 60px; } rg-credit-card-number .amex,[riot-tag="rg-credit-card-number"] .amex,[data-is="rg-credit-card-number"] .amex{ background-image: url(img/amex.png); } rg-credit-card-number .diners_club,[riot-tag="rg-credit-card-number"] .diners_club,[data-is="rg-credit-card-number"] .diners_club{ background-image: url(img/diners_club.png); } rg-credit-card-number .discover,[riot-tag="rg-credit-card-number"] .discover,[data-is="rg-credit-card-number"] .discover{ background-image: url(img/discover.png); } rg-credit-card-number .jcb,[riot-tag="rg-credit-card-number"] .jcb,[data-is="rg-credit-card-number"] .jcb{ background-image: url(img/jcb.png); } rg-credit-card-number .mastercard,[riot-tag="rg-credit-card-number"] .mastercard,[data-is="rg-credit-card-number"] .mastercard{ background-image: url(img/mastercard.png); } rg-credit-card-number .visa,[riot-tag="rg-credit-card-number"] .visa,[data-is="rg-credit-card-number"] .visa{ background-image: url(img/visa.png); }', '', function(opts) {
 var _this2 = this;
 
 if (!opts.card) opts.card = { cardnumber: '' };

dist/rg-date/rg-date.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-date', '<div class="container"> <input type="text" class="field" onclick="{open}" value="{opts.date.date.format(format)}" readonly> <div class="calendar calendar--high" if="{opts.date.isvisible}"> <button class="calendar__control" __disabled="{opts.date.min.isSame(opts.date.date, \'year\')}" onclick="{prevYear}">‹</button> <div class="calendar__header">{opts.date.date.format(yearFormat)}</div> <button class="calendar__control" __disabled="{opts.date.max.isSame(opts.date.date, \'year\')}" onclick="{nextYear}">›</button> <button class="calendar__control" __disabled="{opts.date.min.isSame(opts.date.date, \'month\')}" onclick="{prevMonth}">‹</button> <div class="calendar__header">{opts.date.date.format(monthFormat)}</div> <button class="calendar__control" __disabled="{opts.date.max.isSame(opts.date.date, \'month\')}" onclick="{nextMonth}">›</button> <div class="calendar__day">Mo</div> <div class="calendar__day">Tu</div> <div class="calendar__day">We</div> <div class="calendar__day">Th</div> <div class="calendar__day">Fr</div> <div class="calendar__day">Sa</div> <div class="calendar__day">Su</div> <button class="calendar__date {\'calendar__date--selected\': day.selected, \'calendar__date--today\': day.today}" __disabled="{day.disabled}" each="{day in startBuffer}" onclick="{select}">{day.date.format(dayFormat)}</button> <button class="calendar__date calendar__date--in-month {\'calendar__date--selected\': day.selected, \'calendar__date--today\': day.today}" __disabled="{day.disabled}" each="{day in days}" onclick="{select}">{day.date.format(dayFormat)}</button> <button class="calendar__date {\'calendar__date--selected\': day.selected, \'calendar__date--today\': day.today}" __disabled="{day.disabled}" each="{day in endBuffer}" onclick="{select}">{day.date.format(dayFormat)}</button> <button class="button button--block button--primary" __disabled="{opts.date.min.isAfter(moment(), \'day\') || opts.date.max.isBefore(moment(), \'day\')}" onclick="{setToday}">Today</button> </div> </div>', 'rg-date .container,[riot-tag="rg-date"] .container,[data-is="rg-date"] .container{ position: relative; display: inline-block; cursor: pointer; } rg-date .calendar,[riot-tag="rg-date"] .calendar,[data-is="rg-date"] .calendar{ position: absolute; min-width: 300px; margin-top: .5em; left: 0; }', '', function(opts) {
+riot.tag2('rg-date', '<div class="container"> <input type="text" class="c-field" onclick="{open}" value="{opts.date.date.format(format)}" readonly> <div class="c-calendar c-calendar--high" if="{opts.date.isvisible}"> <button class="c-calendar__control" __disabled="{opts.date.min.isSame(opts.date.date, \'year\')}" onclick="{prevYear}">‹</button> <div class="c-calendar__header">{opts.date.date.format(yearFormat)}</div> <button class="c-calendar__control" __disabled="{opts.date.max.isSame(opts.date.date, \'year\')}" onclick="{nextYear}">›</button> <button class="c-calendar__control" __disabled="{opts.date.min.isSame(opts.date.date, \'month\')}" onclick="{prevMonth}">‹</button> <div class="c-calendar__header">{opts.date.date.format(monthFormat)}</div> <button class="c-calendar__control" __disabled="{opts.date.max.isSame(opts.date.date, \'month\')}" onclick="{nextMonth}">›</button> <div class="c-calendar__day">Mo</div> <div class="c-calendar__day">Tu</div> <div class="c-calendar__day">We</div> <div class="c-calendar__day">Th</div> <div class="c-calendar__day">Fr</div> <div class="c-calendar__day">Sa</div> <div class="c-calendar__day">Su</div> <button class="c-calendar__date {\'c-calendar__date--selected\': day.selected, \'c-calendar__date--today\': day.today}" __disabled="{day.disabled}" each="{day in startBuffer}" onclick="{select}">{day.date.format(dayFormat)}</button> <button class="c-calendar__date c-calendar__date--in-month {\'c-calendar__date--selected\': day.selected, \'c-calendar__date--today\': day.today}" __disabled="{day.disabled}" each="{day in days}" onclick="{select}">{day.date.format(dayFormat)}</button> <button class="c-calendar__date {\'c-calendar__date--selected\': day.selected, \'c-calendar__date--today\': day.today}" __disabled="{day.disabled}" each="{day in endBuffer}" onclick="{select}">{day.date.format(dayFormat)}</button> <button class="c-button c-button--block button--primary" __disabled="{opts.date.min.isAfter(moment(), \'day\') || opts.date.max.isBefore(moment(), \'day\')}" onclick="{setToday}">Today</button> </div> </div>', 'rg-date .container,[riot-tag="rg-date"] .container,[data-is="rg-date"] .container{ position: relative; display: inline-block; cursor: pointer; } rg-date .c-calendar,[riot-tag="rg-date"] .c-calendar,[data-is="rg-date"] .c-calendar{ position: absolute; min-width: 300px; margin-top: .5em; left: 0; }', '', function(opts) {
 var _this = this;
 
 var toMoment = function toMoment(d) {
@@ -137,7 +137,7 @@ function getWindowDimensions() {
 
 var positionDropdown = function positionDropdown() {
 	var w = getWindowDimensions();
-	var m = _this.root.querySelector('.calendar');
+	var m = _this.root.querySelector('.c-calendar');
 	if (!m) return;
 	if (!opts.date.isvisible) {
 		m.style.marginTop = '';

dist/rg-drawer/rg-drawer.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-drawer', '<div class="overlay" if="{opts.drawer.isvisible}" onclick="{close}"></div> <div class="drawer {\'drawer--\' + opts.drawer.position || \'drawer--bottom\'} {\'drawer--visible\': opts.drawer.isvisible}"> <h4 class="heading heading--xsmall">{opts.drawer.header}</h4> <ul class="menu"> <li class="menu__item {\'menu__item--active\': active}" each="{opts.drawer.items}" onclick="{parent.select}"> {text} </li> </ul> <div class="drawer__body"> <yield></yield> </div> </div>', '', '', function(opts) {
+riot.tag2('rg-drawer', '<div class="c-overlay" if="{opts.drawer.isvisible}" onclick="{close}"></div> <div class="c-drawer {\'c-drawer--\' + opts.drawer.position || \'c-drawer--bottom\'} {\'c-drawer--visible\': opts.drawer.isvisible}"> <h4 class="c-heading c-heading--xsmall">{opts.drawer.header}</h4> <ul class="c-menu"> <li class="c-menu__item {\'c-menu__item--active\': active}" each="{opts.drawer.items}" onclick="{parent.select}"> {text} </li> </ul> <div class="c-drawer__body"> <yield></yield> </div> </div>', '', '', function(opts) {
 var _this = this;
 
 this.on('mount', function () {

dist/rg-iframify/rg-iframify.js

@@ -0,0 +1,7 @@
+riot.tag2('rg-iframify', '<div class="iframify"> <div class="frame"> <yield></yield> </div> </div>', 'rg-iframify .iframify,[riot-tag="rg-iframify"] .iframify,[data-is="rg-iframify"] .iframify{ margin: 0; padding: 0; } rg-iframify iframe,[riot-tag="rg-iframify"] iframe,[data-is="rg-iframify"] iframe{ position: relative; width: 100%; border: 0; }', '', function(opts) {
+var _this = this;
+
+this.on('mount', function () {
+	iframify(_this.root.querySelector('.frame'), _this.opts);
+});
+});

dist/rg-modal/rg-modal.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-modal', '<div class="overlay {overlay--dismissable: opts.modal.dismissable}" if="{opts.modal.isvisible}" onclick="{close}"></div> <div class="modal {modal--ghost: opts.modal.ghost}" if="{opts.modal.isvisible}"> <header class="modal__header"> <button if="{opts.modal.dismissable}" type="button" class="button button--close" onclick="{close}"> &times; </button> <h3 class="heading heading--small">{opts.modal.heading}</h3> </header> <div class="modal__body"> <yield></yield> </div> <footer class="modal__footer {\'modal__footer--block\': !opts.modal.ghost}"> <button each="{opts.modal.buttons}" type="button" class="button {\'button--\' + type}" onclick="{action}" riot-style="{style}"> {text} </button> </footer> </div>', 'rg-modal .modal--ghost .modal__footer .button,[riot-tag="rg-modal"] .modal--ghost .modal__footer .button,[data-is="rg-modal"] .modal--ghost .modal__footer .button{ margin: 0 .5em 0 0; }', '', function(opts) {
+riot.tag2('rg-modal', '<div class="c-overlay {c-overlay--dismissable: opts.modal.dismissable}" if="{opts.modal.isvisible}" onclick="{close}"></div> <div class="c-modal {c-modal--ghost: opts.modal.ghost}" if="{opts.modal.isvisible}"> <header class="c-modal__header"> <button if="{opts.modal.dismissable}" type="button" class="c-button c-button--close" onclick="{close}"> &times; </button> <h3 class="c-heading c-heading--small">{opts.modal.heading}</h3> </header> <div class="c-modal__body"> <yield></yield> </div> <footer class="c-modal__footer {\'c-modal__footer--block\': !opts.modal.ghost}"> <button each="{opts.modal.buttons}" type="button" class="c-button {\'c-button--\' + type}" onclick="{action}" riot-style="{style}"> {text} </button> </footer> </div>', 'rg-modal .c-modal--ghost .c-modal__footer .c-button,[riot-tag="rg-modal"] .c-modal--ghost .c-modal__footer .c-button,[data-is="rg-modal"] .c-modal--ghost .c-modal__footer .c-button{ margin: 0 .5em 0 0; }', '', function(opts) {
 var _this = this;
 
 this.on('mount', function () {

dist/rg-pagination/rg-pagination.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-pagination', '<div class="pagination"> <div class="pagination__controls pagination__controls--backward"> <button class="pagination__control" __disabled="{opts.pagination.page <= 1}" onclick="{first}">«</button> <button class="pagination__control" __disabled="{opts.pagination.page <= 1}" onclick="{back}">‹</button> </div> <div class="pagination__controls"> <span class="pagination__ellipsis" if="{opts.pagination.page > 2}">&hellip;</span> <button class="pagination__page" onclick="{back}" if="{opts.pagination.page > 1}">{opts.pagination.page - 1}</button> <button class="pagination__page pagination__page--current">{opts.pagination.page}</button> <button class="pagination__page" onclick="{forward}" if="{opts.pagination.page < opts.pagination.pages}">{opts.pagination.page + 1}</button> <span class="pagination__ellipsis" if="{opts.pagination.page < opts.pagination.pages - 1}">&hellip;</span> </div> <div class="pagination__controls pagination__controls--forward"> <button class="pagination__control" __disabled="{opts.pagination.page >= opts.pagination.pages}" onclick="{forward}">›</button> <button class="pagination__control" __disabled="{opts.pagination.page >= opts.pagination.pages}" onclick="{last}">»</button> </div> </div>', '', '', function(opts) {
+riot.tag2('rg-pagination', '<div class="c-pagination"> <div class="c-pagination__controls c-pagination__controls--backward"> <button class="c-pagination__control" __disabled="{opts.pagination.page <= 1}" onclick="{first}">«</button> <button class="c-pagination__control" __disabled="{opts.pagination.page <= 1}" onclick="{back}">‹</button> </div> <div class="c-pagination__controls"> <span class="c-pagination__ellipsis" if="{opts.pagination.page > 2}">&hellip;</span> <button class="c-pagination__page" onclick="{back}" if="{opts.pagination.page > 1}">{opts.pagination.page - 1}</button> <button class="c-pagination__page c-pagination__page--current">{opts.pagination.page}</button> <button class="c-pagination__page" onclick="{forward}" if="{opts.pagination.page < opts.pagination.pages}">{opts.pagination.page + 1}</button> <span class="c-pagination__ellipsis" if="{opts.pagination.page < opts.pagination.pages - 1}">&hellip;</span> </div> <div class="c-pagination__controls c-pagination__controls--forward"> <button class="c-pagination__control" __disabled="{opts.pagination.page >= opts.pagination.pages}" onclick="{forward}">›</button> <button class="c-pagination__control" __disabled="{opts.pagination.page >= opts.pagination.pages}" onclick="{last}">»</button> </div> </div>', '', '', function(opts) {
 var _this = this;
 
 this.on('update', function () {

dist/rg-select/rg-select.js

@@ -1,4 +1,4 @@
-riot.tag2('rg-select', '<input type="{opts.select.filter ? \'search\' : \'text\'}" name="selectfield" class="field" placeholder="{opts.select.placeholder}" onkeydown="{navigate}" oninput="{filterOptions}" onfocus="{open}" __readonly="{!opts.select.filter}"> <ul class="menu menu--high" if="{opts.select.isvisible}"> <li each="{options}" no-reorder onclick="{parent.select}" class="menu__item {\'menu__item--active\': selected, \'menu__item--disabled\': disabled, \'menu__item--hover\': active}"> {text} </li> </ul>', 'rg-select .menu,[riot-tag="rg-select"] .menu,[data-is="rg-select"] .menu{ position: absolute; }', '', function(opts) {
+riot.tag2('rg-select', '<input type="{opts.select.filter ? \'search\' : \'text\'}" name="selectfield" class="c-field" placeholder="{opts.select.placeholder}" onkeydown="{navigate}" oninput="{filterOptions}" onfocus="{open}" __readonly="{!opts.select.filter}"> <ul class="c-menu c-menu--high" if="{opts.select.isvisible}"> <li each="{options}" no-reorder onclick="{parent.select}" class="c-menu__item {\'c-menu__item--active\': selected, \'c-menu__item--disabled\': disabled, \'c-menu__item--hover\': active}"> {text} </li> </ul>', 'rg-select .menu,[riot-tag="rg-select"] .menu,[data-is="rg-select"] .menu{ position: absolute; }', '', function(opts) {
 var _this = this;
 
 if (!opts.select) opts.select = { options: [] };
@@ -39,7 +39,7 @@ function getWindowDimensions() {
 
 var positionDropdown = function positionDropdown() {
 	var w = getWindowDimensions();
-	var m = _this.root.querySelector('.menu');
+	var m = _this.root.querySelector('.c-menu');
 	if (!m) return;
 	if (!opts.select.isvisible) {
 		m.style.marginTop = '';

dist/rg-tabs/rg-tabs.js

@@ -1,10 +1,10 @@
-riot.tag2('rg-tabs', '<div class="tabs {\'tabs--\' + opts.tabs.type}"> <div class="tabs__headings"> <div each="{opts.tabs.tabs}" class="tab-heading {\'tab-heading--active\': active, \'tab-heading--disabled\': disabled}" onclick="{parent.open}"> {heading} </div> </div> <div each="{opts.tabs.tabs}" class="tabs__tab {\'tabs__tab--active\': active}"> <div if="{text}"> {text} </div> <div if="{include}"> {include.responseText} </div> </div> </div>', '', '', function(opts) {
+riot.tag2('rg-tabs', '<div class="c-tabs {\'c-tabs--\' + opts.tabs.type}"> <div class="c-tabs__headings"> <div each="{opts.tabs.tabs}" class="c-tab-heading {\'c-tab-heading--active\': active, \'c-tab-heading--disabled\': disabled}" onclick="{parent.open}"> {heading} </div> </div> <div each="{opts.tabs.tabs}" class="c-tabs__tab {\'c-tabs__tab--active\': active}"> <div if="{text}"> {text} </div> <div if="{include}"> {include.responseText} </div> </div> </div>', '', '', function(opts) {
 var _this = this;
 
 var fetch = function fetch(tab) {
 	var req = new XMLHttpRequest();
 	req.onload = function (resp) {
-		var activeTab = _this.root.querySelector('.tabs__tab--active');
+		var activeTab = _this.root.querySelector('.c-tabs__tab--active');
 		if (activeTab) activeTab.innerHTML = req.responseText;
 		_this.trigger('loaded', tab);
 	};