Skip to content

Commit 0150042

Browse files
committed
feat(tabs): initial set up
1 parent b90289e commit 0150042

40 files changed

+1238
-602
lines changed

.babelrc

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

README.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,3 +73,16 @@ When using Webpack, you can include the provided styles into a JavaScript file.
7373
```javascript
7474
import 'zeppelin-element-library/bundle/zeppelin-element-library.css';
7575
```
76+
77+
### Initialize Script
78+
79+
To get the JavaScript running, initialize ZEL after the DOM has loaded.
80+
Place the following script at the bottom of your body element.
81+
82+
```javascript
83+
<script>
84+
document.addEventListener("DOMContentLoaded", function(event) {
85+
ZEL.init();
86+
});
87+
</script>
88+
```

package.json

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "zeppelin-element-library",
3-
"version": "0.9.3",
3+
"version": "0.10.1",
44
"description": "Zeppelin Elements Library is an element library for digital Zeppelin products.",
55
"main": "bundle/zeppelin-element-library.cjs.js",
66
"module": "bundle/zeppelin-element-library.esm.js",
@@ -76,17 +76,21 @@
7676
"src/**/*.{js,jsx}",
7777
"!src/index.js",
7878
"!src/serviceWorker.js",
79-
"!src/guidelines/*"
79+
"!src/guidelines/*",
80+
"!src/*.min.js/"
8081
]
8182
},
8283
"devDependencies": {
84+
"@babel/core": "^7.4.4",
85+
"@babel/plugin-transform-classes": "^7.4.4",
86+
"@babel/preset-env": "^7.4.4",
8387
"@commitlint/cli": "^7.5.2",
8488
"@commitlint/config-conventional": "^7.5.0",
8589
"@semantic-release/changelog": "^3.0.2",
8690
"@semantic-release/git": "^7.0.8",
87-
"babel-preset-es2015-rollup": "^3.0.0",
8891
"commitizen": "^3.0.7",
8992
"cz-conventional-changelog": "^2.1.0",
93+
"dom-testing-library": "^4.1.0",
9094
"husky": "^2.2.0",
9195
"lint-staged": "^8.1.6",
9296
"mdx": "^0.3.1",

public/index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,5 +39,6 @@
3939
To begin the development, run `npm start` or `yarn start`.
4040
To create a production bundle, use `npm run build` or `yarn build`.
4141
-->
42+
<script src="zeppelin-element-library.js"></script>
4243
</body>
4344
</html>

public/zeppelin-element-library.js

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
/* zeppelin-element-library version 0.8.4 */
2+
var ZEL = (function () {
3+
'use strict';
4+
5+
function _inheritsLoose(subClass, superClass) {
6+
subClass.prototype = Object.create(superClass.prototype);
7+
subClass.prototype.constructor = subClass;
8+
subClass.__proto__ = superClass;
9+
}
10+
11+
function _toConsumableArray(arr) {
12+
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
13+
}
14+
15+
function _arrayWithoutHoles(arr) {
16+
if (Array.isArray(arr)) {
17+
for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];
18+
19+
return arr2;
20+
}
21+
}
22+
23+
function _iterableToArray(iter) {
24+
if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
25+
}
26+
27+
function _nonIterableSpread() {
28+
throw new TypeError("Invalid attempt to spread non-iterable instance");
29+
}
30+
31+
var classPrefix = "zep-";
32+
var htmlDataVarType = "data-".concat(classPrefix, "type");
33+
var formatZepType = function formatZepType(type) {
34+
return type.toLowerCase().trim().split(/ |-/gi).map(function (word) {
35+
return word[0].toUpperCase() + word.slice(1);
36+
}).join('');
37+
};
38+
39+
var Element =
40+
/*#__PURE__*/
41+
function () {
42+
function Element(htmlElem) {
43+
var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
44+
this.options = options;
45+
this.htmlElem = htmlElem;
46+
this.init();
47+
}
48+
49+
var _proto = Element.prototype;
50+
51+
_proto.init = function init() {
52+
this.addListeners();
53+
return true;
54+
};
55+
56+
_proto.addListeners = function addListeners() {
57+
throw new Error('should not be called from parent!');
58+
};
59+
60+
return Element;
61+
}();
62+
63+
var NumberInput =
64+
/*#__PURE__*/
65+
function (_Element) {
66+
_inheritsLoose(NumberInput, _Element);
67+
68+
function NumberInput(htmlElem, options) {
69+
var _this;
70+
71+
_this = _Element.call(this, htmlElem, options) || this;
72+
_this.name = 'NumberInputInstance';
73+
return _this;
74+
} //TODO: fix inheritance problem this.htmlElem
75+
76+
77+
var _proto = NumberInput.prototype;
78+
79+
_proto.init = function init() {
80+
this.buttonMinus = this.htmlElem.querySelector('button[data-zep-option="minus"]');
81+
82+
if (!this.buttonMinus) {
83+
this.buttonMinus = this.htmlElem.querySelectorAll('button')[0];
84+
}
85+
86+
this.buttonPlus = this.htmlElem.querySelector('button[data-zep-option="plus"]');
87+
88+
if (!this.buttonPlus) {
89+
this.buttonPlus = this.htmlElem.querySelectorAll('button')[1];
90+
}
91+
92+
this.inputHtml = this.htmlElem.querySelector('input');
93+
this.steps = this.htmlElem.hasAttribute('data-zep-step') ? parseInt(this.htmlElem.getAttribute('data-zep-step'), 10) : 1;
94+
this.minimum = this.htmlElem.hasAttribute('data-zep-min') ? parseInt(this.htmlElem.getAttribute('data-zep-min'), 10) : 0;
95+
this.maximum = this.htmlElem.hasAttribute('data-zep-max') ? parseInt(this.htmlElem.getAttribute('data-zep-max'), 10) : null;
96+
this.currentNumber = this.inputHtml.value ? parseInt(this.inputHtml.value, 10) : 1;
97+
98+
_Element.prototype.init.call(this);
99+
};
100+
101+
_proto.addListeners = function addListeners() {
102+
this.buttonMinusListener = this.clickHandler.bind(this);
103+
this.buttonMinus.addEventListener('click', this.buttonMinusListener, false);
104+
this.buttonPlusListener = this.clickHandler.bind(this);
105+
this.buttonPlus.addEventListener('click', this.buttonPlusListener, false);
106+
this.inputListener = this.changeInputHandler.bind(this);
107+
this.inputHtml.addEventListener('change', this.inputListener, false);
108+
};
109+
110+
_proto.removeListeners = function removeListeners() {
111+
this.buttonMinus.removeEventListener('click', this.buttonMinusListener, false);
112+
this.buttonPlus.removeEventListener('click', this.buttonPlusListener, false);
113+
this.inputHtml.removeEventListener('change', this.inputListener, false);
114+
};
115+
116+
_proto.clickHandler = function clickHandler(e) {
117+
var btn = e.currentTarget;
118+
119+
if (btn === this.buttonMinus) {
120+
this.currentNumber = this.checkRange(this.currentNumber - this.steps, this.minimum);
121+
}
122+
123+
if (btn === this.buttonPlus) {
124+
this.currentNumber = this.checkRange(this.currentNumber + this.steps, this.maximum);
125+
}
126+
127+
this.inputHtml.value = this.currentNumber;
128+
};
129+
130+
_proto.changeInputHandler = function changeInputHandler() {
131+
var newNumber = parseInt(this.inputHtml.value, 10);
132+
133+
if (!isNaN(newNumber)) {
134+
this.currentNumber = this.checkRange(newNumber, this.currentNumber);
135+
this.inputHtml.value = this.currentNumber;
136+
} else {
137+
console.warn('Only integers allowed');
138+
}
139+
};
140+
141+
_proto.checkRange = function checkRange(newValue, fallback) {
142+
if (newValue < this.minimum) {
143+
return fallback;
144+
}
145+
146+
if (newValue > this.maximum) {
147+
return fallback;
148+
}
149+
150+
return newValue;
151+
};
152+
153+
return NumberInput;
154+
}(Element);
155+
156+
var classes = {
157+
NumberInput: NumberInput
158+
};
159+
160+
var DynamicClass = function DynamicClass(className, opts) {
161+
return new classes[className](opts);
162+
};
163+
164+
var EventBus =
165+
/*#__PURE__*/
166+
function () {
167+
// create a fake element
168+
function EventBus() {
169+
this.bus = document.createElement('eventbus');
170+
}
171+
172+
var _proto = EventBus.prototype;
173+
174+
_proto.addEventListener = function addEventListener(event, callback) {
175+
this.bus.addEventListener(event, callback, false);
176+
};
177+
178+
_proto.removeEventListener = function removeEventListener(event, callback) {
179+
this.bus.removeEventListener(event, callback, false);
180+
};
181+
182+
_proto.dispatchEvent = function dispatchEvent(event) {
183+
var detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
184+
this.bus.dispatchEvent(new CustomEvent(event, {
185+
detail: detail
186+
}));
187+
};
188+
189+
return EventBus;
190+
}();
191+
192+
var ZEL =
193+
/*#__PURE__*/
194+
function () {
195+
function ZEL() {
196+
// eslint-disable-next-line no-console
197+
console.log("ZEL - built with \u2665"); // create global event bus instance
198+
199+
window.eventBus = new EventBus(); // array with the elements and html nodes
200+
201+
this.elements = [];
202+
}
203+
204+
var _proto = ZEL.prototype;
205+
206+
_proto.init = function init() {
207+
this.setElements();
208+
209+
if (this.getElements().length > 0) {
210+
this.createInstances();
211+
}
212+
213+
return true;
214+
} // update jsElementList and elementsObject
215+
;
216+
217+
_proto.refresh = function refresh() {
218+
this.elements = [];
219+
this.init();
220+
};
221+
222+
_proto.getElements = function getElements() {
223+
return this.elements;
224+
} //parse element list and return an object with arrays of elements split by type
225+
;
226+
227+
_proto.setElements = function setElements() {
228+
var jsElementList = document.querySelectorAll("[".concat(htmlDataVarType, "]"));
229+
var tempTypeList = [];
230+
var tempElements = [];
231+
232+
_toConsumableArray(jsElementList).forEach(function (elem) {
233+
var type = formatZepType(elem.getAttribute('data-zep-type'));
234+
235+
if (tempTypeList.indexOf(type) === -1) {
236+
tempElements[type] = [];
237+
}
238+
239+
var newElement = {
240+
type: type,
241+
htmlNode: elem,
242+
innerHTML: elem.innerHTML,
243+
jsInstance: null,
244+
initialized: false
245+
};
246+
tempElements.push(newElement);
247+
});
248+
249+
this.elements = tempElements;
250+
} // create js class instances of available elements
251+
;
252+
253+
_proto.createInstances = function createInstances() {
254+
var elements = this.getElements();
255+
var _iteratorNormalCompletion = true;
256+
var _didIteratorError = false;
257+
var _iteratorError = undefined;
258+
259+
try {
260+
for (var _iterator = elements[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
261+
var element = _step.value;
262+
var initAttribute = element.htmlNode.hasAttribute('data-zep-init') ? element.htmlNode.getAttribute('data-zep-init') : null;
263+
264+
if (initAttribute === 'false') {
265+
continue;
266+
}
267+
268+
try {
269+
var newObject = new DynamicClass(element.type, element.htmlNode);
270+
element.jsInstance = newObject;
271+
element.initialized = true;
272+
} catch (err) {
273+
console.warn("Element ".concat(element.type, " could not be instantiated \n").concat(err));
274+
}
275+
}
276+
} catch (err) {
277+
_didIteratorError = true;
278+
_iteratorError = err;
279+
} finally {
280+
try {
281+
if (!_iteratorNormalCompletion && _iterator.return != null) {
282+
_iterator.return();
283+
}
284+
} finally {
285+
if (_didIteratorError) {
286+
throw _iteratorError;
287+
}
288+
}
289+
}
290+
};
291+
292+
return ZEL;
293+
}();
294+
295+
var zel = new ZEL();
296+
297+
return zel;
298+
299+
}());

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: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"presets": [
3+
[
4+
"@babel/preset-env",
5+
{
6+
"modules": false
7+
}
8+
]
9+
],
10+
11+
"plugins": [
12+
[
13+
"@babel/plugin-transform-classes",
14+
{
15+
"loose": true
16+
}
17+
]
18+
]
19+
}

0 commit comments

Comments
 (0)