Skip to content

Commit dd61ef8

Browse files
committed
feat(core): add js core classes
changed rollup babel config, added js core classes with basic init
1 parent d6cf486 commit dd61ef8

File tree

13 files changed

+384
-543
lines changed

13 files changed

+384
-543
lines changed

.babelrc

Lines changed: 0 additions & 3 deletions
This file was deleted.

package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,12 @@
8080
]
8181
},
8282
"devDependencies": {
83+
"@babel/core": "^7.4.4",
84+
"@babel/preset-env": "^7.4.4",
8385
"@commitlint/cli": "^7.5.2",
8486
"@commitlint/config-conventional": "^7.5.0",
8587
"@semantic-release/changelog": "^3.0.2",
8688
"@semantic-release/git": "^7.0.8",
87-
"babel-preset-es2015-rollup": "^3.0.0",
8889
"commitizen": "^3.0.7",
8990
"cz-conventional-changelog": "^2.1.0",
9091
"husky": "^2.2.0",

public/zeppelin-element-library.js

Lines changed: 232 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,73 @@ var ZEL = (function () {
2424
return Constructor;
2525
}
2626

27+
function _inherits(subClass, superClass) {
28+
if (typeof superClass !== "function" && superClass !== null) {
29+
throw new TypeError("Super expression must either be null or a function");
30+
}
31+
32+
subClass.prototype = Object.create(superClass && superClass.prototype, {
33+
constructor: {
34+
value: subClass,
35+
writable: true,
36+
configurable: true
37+
}
38+
});
39+
if (superClass) _setPrototypeOf(subClass, superClass);
40+
}
41+
42+
function _getPrototypeOf(o) {
43+
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
44+
return o.__proto__ || Object.getPrototypeOf(o);
45+
};
46+
return _getPrototypeOf(o);
47+
}
48+
49+
function _setPrototypeOf(o, p) {
50+
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
51+
o.__proto__ = p;
52+
return o;
53+
};
54+
55+
return _setPrototypeOf(o, p);
56+
}
57+
58+
function _assertThisInitialized(self) {
59+
if (self === void 0) {
60+
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
61+
}
62+
63+
return self;
64+
}
65+
66+
function _possibleConstructorReturn(self, call) {
67+
if (call && (typeof call === "object" || typeof call === "function")) {
68+
return call;
69+
}
70+
71+
return _assertThisInitialized(self);
72+
}
73+
74+
function _toConsumableArray(arr) {
75+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
76+
}
77+
78+
function _arrayWithoutHoles(arr) {
79+
if (Array.isArray(arr)) {
80+
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
81+
82+
return arr2;
83+
}
84+
}
85+
86+
function _iterableToArray(iter) {
87+
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
88+
}
89+
90+
function _nonIterableSpread() {
91+
throw new TypeError("Invalid attempt to spread non-iterable instance");
92+
}
93+
2794
var classPrefix = "zep-";
2895
var htmlDataVarType = "data-".concat(classPrefix, "type");
2996
var formatZepType = function formatZepType(type) {
@@ -32,48 +99,190 @@ var ZEL = (function () {
3299
}).join('');
33100
};
34101

102+
var Element =
103+
/*#__PURE__*/
104+
function () {
105+
function Element(htmlElem) {
106+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
107+
108+
_classCallCheck(this, Element);
109+
110+
this.options = options;
111+
this.htmlElem = htmlElem;
112+
113+
if (this.htmlElem.dataset.zepInit === 'false') {
114+
return;
115+
}
116+
117+
this.init();
118+
}
119+
120+
_createClass(Element, [{
121+
key: "init",
122+
value: function init() {
123+
console.log("construct() ".concat(this.htmlElem));
124+
}
125+
}]);
126+
127+
return Element;
128+
}();
129+
130+
var NumberInput =
131+
/*#__PURE__*/
132+
function (_Element) {
133+
_inherits(NumberInput, _Element);
134+
135+
function NumberInput(htmlElem, options) {
136+
var _this;
137+
138+
_classCallCheck(this, NumberInput);
139+
140+
_this = _possibleConstructorReturn(this, _getPrototypeOf(NumberInput).call(this, htmlElem, options));
141+
_this.name = 'test';
142+
return _this;
143+
}
144+
145+
_createClass(NumberInput, [{
146+
key: "init",
147+
value: function init() {
148+
console.log("NumberInput.construct() ".concat(this.htmlElem));
149+
}
150+
}]);
151+
152+
return NumberInput;
153+
}(Element);
154+
155+
var classes = {
156+
NumberInput: NumberInput
157+
};
158+
159+
var DynamicClass = function DynamicClass(className, opts) {
160+
_classCallCheck(this, DynamicClass);
161+
162+
return new classes[className](opts);
163+
};
164+
165+
var EventBus =
166+
/*#__PURE__*/
167+
function () {
168+
// create a fake element
169+
function EventBus() {
170+
_classCallCheck(this, EventBus);
171+
172+
this.bus = document.createElement('eventbus');
173+
}
174+
175+
_createClass(EventBus, [{
176+
key: "addEventListener",
177+
value: function addEventListener(event, callback) {
178+
this.bus.addEventListener(event, callback);
179+
}
180+
}, {
181+
key: "removeEventListener",
182+
value: function removeEventListener(event, callback) {
183+
this.bus.removeEventListener(event, callback);
184+
}
185+
}, {
186+
key: "dispatchEvent",
187+
value: function dispatchEvent(event) {
188+
var detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
189+
this.bus.dispatchEvent(new CustomEvent(event, {
190+
detail: detail
191+
}));
192+
}
193+
}]);
194+
195+
return EventBus;
196+
}();
197+
35198
var ZEL =
36199
/*#__PURE__*/
37200
function () {
38201
function ZEL() {
39202
_classCallCheck(this, ZEL);
40203

41204
// eslint-disable-next-line no-console
42-
console.log("ZEL - built with \u2665");
43-
this._jsElementList = [];
205+
console.log("ZEL - built with \u2665"); // create global event bus instance
206+
207+
window.eventBus = new EventBus(); // array for unparsed elements from DOM
208+
209+
this.jsElementList = []; // object for parsed elements split by zep-type
210+
211+
this.elementsObject = {};
44212
}
45213

46214
_createClass(ZEL, [{
47215
key: "init",
48216
value: function init() {
49-
this._getJsElementsFromDOM();
50-
}
217+
this.refresh();
218+
this.createInstances(this.elementsObject);
219+
} // update jsElementList and elementsObject
220+
51221
}, {
52222
key: "refresh",
53223
value: function refresh() {
54-
this._getJsElementsFromDOM();
55-
} //dummy for testing
224+
this.jsElementList = document.querySelectorAll("[".concat(htmlDataVarType, "]"));
225+
this.elementsObject = this.getParsedElementsObject(this.jsElementList);
226+
} //parse element list and return an object with arrays of elements split by type
56227

57228
}, {
58-
key: "_getJsElementsFromDOM",
59-
value: function _getJsElementsFromDOM() {
60-
this._jsElementList = document.querySelectorAll("[".concat(htmlDataVarType, "]"));
61-
}
62-
}, {
63-
key: "getElements",
64-
value: function getElements(type) {
65-
if (type) {
66-
console.log("type pre ".concat(type));
67-
type = formatZepType(type);
68-
console.log("type post ".concat(type));
69-
}
229+
key: "getParsedElementsObject",
230+
value: function getParsedElementsObject(elementList) {
231+
var tempTypeList = [];
232+
var tempElements = {};
233+
console.log("getParsedElementsObject() typeof elementList: ".concat(elementList, " "));
234+
235+
_toConsumableArray(elementList).forEach(function (elem) {
236+
console.log("elem: ".concat(elem, " / elem.dataset ").concat(elem.dataset));
237+
var type = formatZepType(elem.getAttribute('data-zep-type'));
238+
console.log("type: ".concat(type));
239+
240+
if (tempTypeList.indexOf(type) === -1) {
241+
tempElements[type] = [];
242+
}
243+
244+
tempElements[type].push(elem);
245+
});
246+
247+
return tempElements;
248+
} // create js class instances of available elements
70249

71-
this._jsElementList.length === 0 && this.refresh(); //this._jsElementList.map();
72-
}
73250
}, {
74-
key: "jsElementList",
75-
get: function get() {
76-
return this._jsElementList;
251+
key: "createInstances",
252+
value: function createInstances(elementsObject) {
253+
console.log('createInstances');
254+
255+
for (var type in elementsObject) {
256+
var elements = elementsObject[type];
257+
var _iteratorNormalCompletion = true;
258+
var _didIteratorError = false;
259+
var _iteratorError = undefined;
260+
261+
try {
262+
for (var _iterator = elements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
263+
var element = _step.value;
264+
265+
try {
266+
new DynamicClass(type, element);
267+
} catch (err) {
268+
console.warn("Element ".concat(type, " could not be instantiated \n").concat(err));
269+
}
270+
}
271+
} catch (err) {
272+
_didIteratorError = true;
273+
_iteratorError = err;
274+
} finally {
275+
try {
276+
if (!_iteratorNormalCompletion && _iterator.return != null) {
277+
_iterator.return();
278+
}
279+
} finally {
280+
if (_didIteratorError) {
281+
throw _iteratorError;
282+
}
283+
}
284+
}
285+
}
77286
}
78287
}]);
79288

rollup.build.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const defaultPlugins = [
1111
}),
1212
babel({
1313
exclude: 'node_modules/**'
14+
// externalHelpers: true
1415
}),
1516
json({
1617
// All JSON files will be parsed by default,
@@ -24,7 +25,7 @@ const defaultPlugins = [
2425
];
2526

2627
const inputOptions = {
27-
input: './src/zel.js',
28+
input: './src/core/zel.js',
2829
plugins: defaultPlugins
2930
};
3031
const outputOptions = {

src/.babelrc

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": [["@babel/env", { "modules": false }]]
3+
}

src/core/zel.dynamicClass.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import NumberInput from '../elements/numberinput/numberinput';
2+
3+
// Proxy Class for dynamic element instantiation
4+
const classes = {
5+
NumberInput
6+
};
7+
export default class DynamicClass {
8+
constructor(className, opts) {
9+
return new classes[className](opts);
10+
}
11+
}

src/core/zel.element.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
export default class Element {
2+
constructor(htmlElem, options = {}) {
3+
this.options = options;
4+
this.htmlElem = htmlElem;
5+
6+
if (this.htmlElem.dataset.zepInit === 'false') {
7+
return;
8+
}
9+
10+
this.init();
11+
}
12+
13+
init() {
14+
console.log(`construct() ${this.htmlElem}`);
15+
}
16+
}

src/core/zel.eventbus.js

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export default class EventBus {
2+
// create a fake element
3+
constructor() {
4+
this.bus = document.createElement('eventbus');
5+
}
6+
7+
addEventListener(event, callback) {
8+
this.bus.addEventListener(event, callback);
9+
}
10+
11+
removeEventListener(event, callback) {
12+
this.bus.removeEventListener(event, callback);
13+
}
14+
15+
dispatchEvent(event, detail = {}) {
16+
this.bus.dispatchEvent(new CustomEvent(event, { detail }));
17+
}
18+
}
File renamed without changes.

0 commit comments

Comments
 (0)