Skip to content

Instantly share code, notes, and snippets.

@iegik

iegik/README.md

Last active December 4, 2016 13:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iegik/f974891bffc79a75b11a to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iegik/f974891bffc79a75b11a to your computer and use it in GitHub Desktop.
Download ZIP
Custom Elements
Raw
README.md

Custom Elements

$.define('$.ui.container');
$.ui.container = function () {
	var self = $.ui.component.call(this);
	return self;
};
Raw
bling.js
// bling.js
// https://gist.github.com/paulirish/12fb951a8b893a454b32
window.$ = document.querySelectorAll.bind(document)
Node.prototype.on = window.on = function (name, fn) {
this.addEventListener(name, fn);
}
NodeList.prototype.__proto__ = Array.prototype
NodeList.prototype.on = NodeList.prototype.addEventListener = function (name, fn) {
this.forEach(function (elem, i) {
elem.on(name, fn)
})
}
Raw
core.js
// Mix properties of two or more objects together into the first object.
$.extend = function (obj) {
for (var x in arguments) {
if (+x) {
for (var y in arguments[x]) {
obj[y] = arguments[x][y];
}
}
}
return obj;
}
$.mixin = function (obj) {
for (var x in arguments) {
if (+x) {
for (var y in arguments[x]) {
if(typeof obj[y] === 'undefined')obj[y] = arguments[x][y];
}
}
}
return obj;
}
$.define = function (namespace) {
var self = this;
if (!namespace.indexOf('.')) {
return new Error('Invalid namespace');
}
namespace.split('.').splice(1).forEach(function (n) {
self = self[n] = self[n] || function () {}
});
}
$.inherit = function (Parent, Child, propertiesObject) {
return Child.inherits(Parent, propertiesObject);
}
Raw
eventListenerList.js
// https://gist.github.com/stringparser/a3b0555fd915138a0ed3
;[Element].forEach(function(self){
self.prototype.eventListenerList = {};
self.prototype._addEventListener = self.prototype.addEventListener;
self.prototype.addEventListener = function(type, handle, useCapture) {
useCapture = useCapture === void 0 ? false : useCapture;
var node = this;
node._addEventListener(type, handle, useCapture);
if(!node.eventListenerList[type]){
node.eventListenerList[type] = [];
}
node.eventListenerList[type].push({
type : type,
handle : handle,
useCapture : useCapture,
remove : function(){
node.removeEventListener(
this.type, this.handle, this.useCapture
);
return node.eventListenerList[type];
}
});
};
self.prototype._removeEventListener = self.prototype.removeEventListener;
self.prototype.removeEventListener = function(type, handle, useCapture){
var node = this;
if(!node.eventListenerList[type])
return ;
node._removeEventListener(type, handle, useCapture);
node.eventListenerList[type] = node.eventListenerList[type].filter(
function(listener){
return listener.handle.toString() !== handle.toString();
}
)
if(node.eventListenerList[type].length === 0){
delete node.eventListenerList[type];
}
}
});
Raw
extends.js
// PHP style: Foo inherits Bar
//Function.prototype.extends =
Function.prototype.inherits = function (Parent, propertiesObject) {
this.prototype = $.extend(Object.create(Parent.prototype, propertiesObject), this.prototype);
this.prototype.constructor = this;
};
Raw
index.html
<!DOCTYPE html>
<html lang="ru">
<head>
<link type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<script src="eventListenerList.js"></script>
<script src="bling.js"></script>
<script src="extends.js"></script>
<script src="core.js"></script>
<script src="ui-component.js"></script>
<script src="ui-button.js"></script>
<script src="ui-modalHeader.js"></script>
<script src="ui-modalContent.js"></script>
<script src="ui-modalDialog.js"></script>
<script src="ui-modal.js"></script>
<script src="ui-container.js"></script>
<script>
var container = new $.ui.container();
var modal = new $.ui.modal();
container.appendChild(modal);
document.body.appendChild(container);
</script>
</body>
</html>
Raw
ui-button.js
$.define('$.ui.button');
//$.inherit($.ui.component, $.ui.button);
$.ui.button = function () {
var self = $.ui.component.call(this);
//self.setAttribute('class', this.classList.join(' '));
return self;
};
$.ui.button.prototype = {
tagName: 'x-button',
extends: 'BUTTON',
classList: ['btn', 'btn-default'],
createdCallback: function () {
console.log({'button.prototype.createdCallback arguments':arguments, 'this': this, 'self': self});
if(this.setAttribute && this.classList && this.classList.length){
this.setAttribute('class', this.classList.join(' '));
}
},
test: function(){console.log('ok');}
};
//$.extend($.ui.component, $.ui.button);
//$.mixin($.ui.button, $.ui.component);
Raw
ui-component.js
// UI
$.define('$.ui.component');
$.ui.component = function () {
try { document.registerElement(this.tagName, this.constructor)} catch (e) {};
var self = document.createElement(this.extends, this.tagName);
if(self.setAttribute && this.classList && this.classList.length){
self.setAttribute('class', this.classList.join(' '));
}
return self;
};
$.ui.component.prototype = {
tagName: 'x-div',
extends: 'DIV'
}
Raw
ui-container.js
$.define('$.ui.container');
$.ui.container = function () {
var self = $.ui.component.call(this);
return self;
};
$.ui.container.prototype = {
tagName: 'x-container',
extends: 'DIV',
classList: ['container','modal-open']
};
Raw
ui-modal.js
$.define('$.ui.modal');
$.ui.modal = function () {
var self = $.ui.component.call(this);
// modal-dialog
var modalDialog = new $.ui.modalDialog();
self.appendChild(modalDialog);
self.style.display = 'block';
return self;
};
$.ui.modal.prototype = {
tagName: 'x-modal',
extends: 'DIV',
classList: ['modal', 'fade', 'in','bs-example-modal-sm']
};
Raw
ui-modalContent.js
$.define('$.ui.modalContent');
$.ui.modalContent = function () {
var self = $.ui.component.call(this);
// modal-header
self.modalHeader = new $.ui.modalHeader();
self.appendChild(self.modalHeader);
return self;
};
$.ui.modalContent.prototype = {
tagName: 'x-modal-content',
extends: 'DIV',
classList: ['modal-content']
};
Raw
ui-modalDialog.js
$.define('$.ui.modalDialog');
$.ui.modalDialog = function () {
var self = $.ui.component.call(this);
// modal-content
self.modalContent = new $.ui.modalContent();
self.appendChild(self.modalContent);
return self;
};
$.ui.modalDialog.prototype = {
tagName: 'x-modal-dialog',
extends: 'DIV',
classList: ['modal-dialog']
};
Raw
ui-modalHeader.js
// UI Modal window
$.define('$.ui.modalHeader');
$.ui.modalHeader = function () {
var self = $.ui.component.call(this);
// button close
self.buttonClose = new $.ui.button();
self.buttonClose.innerText = 'Close';
self.appendChild(self.buttonClose);
return self;
};
$.ui.modalHeader.prototype = {
tagName: 'x-modal-header',
extends: 'DIV',
classList: ['modal-header']
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment