15 |
19 |
20 |
21 |
Multiple with groups
22 |
23 |
24 |
34 |
35 |
36 |
37 |
Multiple without groups
38 |
39 |
40 |
41 |
58 |
59 |
60 |
61 |
Multiple from data
62 |
63 |
64 |
65 |
66 |
67 |
68 |
Single
69 |
70 |
71 |
77 |
78 |
79 |
80 |
Single with groups
81 |
82 |
83 |
93 |
94 |
95 |
96 |
Single from data
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
149 |
150 |
151 |
--------------------------------------------------------------------------------
/extensions/table/src/paginator.js:
--------------------------------------------------------------------------------
1 | import select from '../../_utils/select';
2 | import toArray from '../../_utils/toArray';
3 |
4 | export default class Paginator {
5 | constructor(el, settings = {}) {
6 | this.el = select(el);
7 | this.settings = settings;
8 | this.init();
9 | }
10 |
11 | /**
12 | * init paginator
13 | */
14 | init() {
15 | this.currentPage = 1;
16 | this.items = this._normalizeTableData();;
17 | this.allItems = [];
18 | this._chunk(this.settings.perPage);
19 | }
20 |
21 | /**
22 | * return number of pages in table
23 | */
24 | get totalPageCount() {
25 | return this.allItems.length;
26 | }
27 |
28 | /**
29 | * Renders the in-memory changes done to a table.
30 | */
31 | render() {
32 | const fragment = document.createDocumentFragment();
33 | this.items.forEach((item) => {
34 | const row = document.createElement('tr');
35 | this.columns.forEach((key) => {
36 | const cell = document.createElement('td');
37 | cell.innerText = item[key];
38 | row.appendChild(cell);
39 | if (this.settings.editable) {
40 | cell.addEventListener('click', () => this.edit(item.id, key));
41 | }
42 | });
43 | row.addEventListener('getId', () => {
44 | return item;
45 | }, false);
46 | fragment.appendChild(row);
47 | });
48 |
49 | this.el.tBodies[0].innerHTML = '';
50 | this.el.tBodies[0].appendChild(fragment);
51 | }
52 |
53 | /**
54 | * update table with next items
55 | */
56 | nextPage() {
57 | this.paginateTo(this.currentPage + 1);
58 | this.render();
59 | }
60 |
61 | /**
62 | * update table with previous items
63 | */
64 | previousPage() {
65 | this.paginateTo(this.currentPage - 1);
66 | this.render();
67 | }
68 |
69 | /**
70 | * go to specific page
71 | */
72 | jumpToPage(page) {
73 | this.paginateTo(page);
74 | this.render();
75 | }
76 |
77 | updateEvents() {
78 | this.afterEdit = new CustomEvent('afterEdit', {
79 | detail: {
80 | column: this.cell.column,
81 | row: this.cell.row,
82 | value: this.cell.value
83 | }
84 | });
85 | this.beforeEdit = new CustomEvent('beforeEdit', {
86 | detail: {
87 | column: this.cell.column,
88 | row: this.cell.row
89 | }
90 | })
91 | }
92 |
93 | /**
94 | * Jumps to a specific page.
95 | */
96 | paginateTo(page) {
97 | if (this.totalPageCount < page || page <= 0) {
98 | return;
99 | }
100 | this.currentPage = page;
101 | this.items = this.allItems[page - 1];
102 |
103 | return this.items;
104 | }
105 |
106 |
107 | /**
108 | * add input in table cell with it's value
109 | * @param {Event} event
110 | */
111 | edit(row, column) {
112 | this.cell = {}
113 | this.cell.row = row;
114 | this.cell.column = column;
115 | this.updateEvents();
116 | this.el.dispatchEvent(this.beforeEdit);
117 |
118 | const cell = event.target;
119 | const input = document.createElement('input');
120 | const data = cell.innerText;
121 | input.classList.add('input', 'is-tiny', 'no-marginBottom');
122 | input.value = data;
123 | cell.innerText = '';
124 | cell.appendChild(input);
125 | input.focus();
126 | input.addEventListener('blur', this.removeInput.bind(this, input, row, column));
127 | }
128 |
129 | /**
130 | * remove the input and update the cell with value
131 | * @param {Element} input
132 | * @param {Node} cell
133 | */
134 | removeInput(input, row, column) {
135 | this.cell.value = input.value;
136 | const flatItems = this.allItems.reduce((a, b) => a.concat(b), []);
137 | const findRow = (item) => item.id === row;
138 | const currentRaw = flatItems.find(findRow);
139 | currentRaw[column] = this.cell.value;
140 | this.render();
141 | this.updateEvents();
142 | this.el.dispatchEvent(this.afterEdit);
143 | }
144 |
145 | /**
146 | * Chunks the items into groups containing a specific number of items.
147 | */
148 | _chunk(count) {
149 | // No Pagination required.
150 | if (count <= 0) {
151 | this.allItems = this.items;
152 | return;
153 | }
154 |
155 | const length = this.items.length;
156 | for (let i = 0; i < length; i += count) {
157 | this.allItems.push(this.items.slice(i, i + count));
158 | }
159 |
160 | this.items = this.allItems[0];
161 | }
162 |
163 | /**
164 | * Converts table columns and rows into objects.
165 | */
166 | _normalizeTableData() {
167 | const rows = toArray(this.el.tBodies[0].rows);
168 | if (this.el.tHead) {
169 | this.columns = toArray(this.el.tHead.rows[0].cells);
170 | } else {
171 | this.columns = toArray(rows[0].cells);
172 | }
173 | this.columns = this.columns.map((cell) => cell.innerText.toLowerCase());
174 | return rows.map((row, index) => {
175 | const rowData = { id: index };
176 | toArray(row.cells).forEach((cell, index) => {
177 | rowData[this.columns[index]] = cell.innerText;
178 | });
179 | return rowData;
180 | });
181 | }
182 | }
--------------------------------------------------------------------------------
/extensions/navbar/src/navbar.js:
--------------------------------------------------------------------------------
1 | import select from '../../_utils/select';
2 | import debounce from '../../_utils/debounce';
3 | import Dropdown from '../../dropdown/src/dropdown';
4 |
5 | class Navbar {
6 | static defaults = {
7 | breakpoint: 500,
8 | hideMenuTolerance: 10
9 | };
10 |
11 | constructor (el, settings) {
12 | this.el = select(el);
13 | this.settings = {
14 | ...Navbar.defaults,
15 | ...settings
16 | };
17 | this.init();
18 | }
19 |
20 | init () {
21 | this.wrapper = this.el.querySelector('[data-nav-items]');
22 | this.menu = this.el.querySelector('[data-nav-menu]');
23 | this.dropdownEl = this.el.querySelector('[data-nav-dropdown]');
24 | this.items = Array.from(this.wrapper.children);
25 | this.menuItems = [];
26 | this.navbarItems = this.getPriorityOrder();
27 | this.lastWindowSize = window.innerWidth;
28 | this.lastWindowScroll = window.scrollY;
29 | this.initEvents();
30 | this.initDropdowns();
31 | this.updateMenu();
32 | }
33 |
34 | initDropdowns () {
35 | this.dropdown = new Dropdown(
36 | this.dropdownEl,
37 | this.dropdownEl.querySelector('.dropdown-menu'),
38 | { hideWhenClickOut: true }
39 | );
40 | this.dropdowns = Array.from(this.wrapper.querySelectorAll('.dropdown'));
41 | this.dropdowns = this.dropdowns.map((dropdown) => {
42 | return new Dropdown(
43 | dropdown,
44 | dropdown.querySelector('.dropdown-menu'),
45 | { hideWhenClickOut: true }
46 | ); // eslint-disable-line
47 | });
48 | }
49 |
50 | initEvents () {
51 | document.addEventListener('DOMContentLoaded', () => {
52 | setTimeout(this.updateMenu.bind(this), 100);
53 | });
54 | window.addEventListener('resize', debounce((event) => {
55 | this.updateMenu();
56 | }), {
57 | passive: true
58 | });
59 | window.addEventListener('scroll', debounce((event) => {
60 | this.updateFixed();
61 | }), {
62 | passive: true
63 | });
64 | }
65 |
66 | updateFixed () {
67 | const currentScroll = window.scrollY;
68 | const mode = this.lastWindowScroll < currentScroll ? 'down' : 'up';
69 | const tolerance = currentScroll - this.lastWindowScroll > this.settings.hideMenuTolerance;
70 |
71 | if (mode === 'down' && tolerance) {
72 | this.el.classList.add('is-hidden');
73 | this.dropdowns.forEach(dropdown => dropdown.hide());
74 | this.dropdown.hide();
75 | }
76 |
77 | if (mode === 'up') {
78 | this.el.classList.remove('is-hidden');
79 | }
80 | this.lastWindowScroll = currentScroll;
81 | }
82 |
83 | getPriorityOrder () {
84 | let lowPriority = [];
85 | let mediumPriority = [];
86 | let highPriority = [];
87 |
88 | this.items.forEach((item) => {
89 | let priority = item.dataset.navPriority;
90 | if (!priority) lowPriority.push(item);
91 | if (priority === 'low') lowPriority.push(item);
92 | if (priority === 'medium') mediumPriority.push(item);
93 | if (priority === 'high') highPriority.push(item);
94 | });
95 |
96 | return lowPriority.concat(mediumPriority, highPriority);
97 | }
98 |
99 | isContained () {
100 | let itemsWidth = 0;
101 | let wrapperWidth = this.wrapper.clientWidth;
102 |
103 | this.navbarItems.forEach((item) => {
104 | itemsWidth += item.clientWidth;
105 | });
106 |
107 | return wrapperWidth >= itemsWidth;
108 | }
109 |
110 | isMinimizing () {
111 | return this.lastWindowSize >= window.innerWidth;
112 | }
113 |
114 | getBeforeElementIndex (item) {
115 | const itemIndex = this.items.indexOf(item);
116 | const maxElements = this.items.length - 1;
117 | let outputIndex = itemIndex + 1;
118 | while (outputIndex <= maxElements) {
119 | if (this.items[outputIndex].parentNode === this.wrapper) {
120 | return outputIndex;
121 | }
122 | outputIndex++;
123 | }
124 | return false;
125 | }
126 |
127 | moveToMenu () {
128 | const item = this.navbarItems.shift();
129 | item.classList.remove('navbar-item');
130 | item.classList.add('dropdown-item');
131 | this.menuItems.push(item);
132 | this.menu.appendChild(item);
133 | }
134 |
135 | moveToNavbar () {
136 | const item = this.menuItems.pop();
137 | item.classList.remove('dropdown-item');
138 | item.classList.add('navbar-item');
139 | this.navbarItems.unshift(item);
140 |
141 | const beforeIndex = this.getBeforeElementIndex(item);
142 | if (beforeIndex) {
143 | this.wrapper.insertBefore(item, this.items[beforeIndex]);
144 | return;
145 | }
146 | this.wrapper.appendChild(item);
147 | }
148 |
149 | updateMenu () {
150 | if (window.matchMedia(`(max-width: ${this.settings.breakpoint}px)`).matches) {
151 | const length = this.navbarItems.length;
152 | for (let index = 0; index < length; index++) {
153 | this.moveToMenu();
154 | }
155 | return;
156 | }
157 |
158 | const minimizing = this.isMinimizing();
159 |
160 | if (!this.isContained() && minimizing) {
161 | this.moveToMenu();
162 | }
163 |
164 | if (!minimizing && !!this.menuItems.length) {
165 | this.moveToNavbar();
166 | }
167 |
168 | this.lastWindowSize = window.innerWidth;
169 |
170 | if (!this.isContained()) {
171 | this.updateMenu();
172 | }
173 |
174 | if (!this.menuItems.length) {
175 | this.dropdown.el.style.display = 'none';
176 | this.dropdown.hide();
177 | }
178 |
179 | if (this.menuItems.length) {
180 | this.dropdown.el.style.display = '';
181 | }
182 | }
183 | }
184 |
185 | export default Navbar;
186 |
--------------------------------------------------------------------------------
/extensions/datepicker/src/datepicker.js:
--------------------------------------------------------------------------------
1 | import select from '../../_utils/select'
2 | import Dropdown from '../../dropdown/src/dropdown';
3 | import {
4 | endOfMonth,
5 | startOfMonth,
6 | getYear,
7 | getMonth,
8 | format,
9 | parse,
10 | addMonths
11 | } from 'date-fns/esm';
12 |
13 | class Datepicker {
14 | static defaults = {
15 | dateFormat: 'dd/MM/yyyy',
16 | days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
17 | months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
18 | };
19 |
20 | constructor (el, settings) {
21 | this.el = select(el);
22 | this.settings = {
23 | ...Datepicker.defaults,
24 | ...settings
25 | };
26 | this.init();
27 | }
28 |
29 | init () {
30 | this.currentDate = new Date();
31 |
32 | // create datepicker wrapper
33 | this.wrapper = document.createElement('div');
34 | this.dropdownMenu = document.createElement('div');
35 | this.datepickerControl = document.createElement('div');
36 | this.table = document.createElement('table');
37 | this.yearSelector = document.createElement('input');
38 | this.monthSelector = document.createElement('select');
39 |
40 | this.wrapper.classList.add('dropdown');
41 | this.dropdownMenu.classList.add('dropdown-menu');
42 | this.datepickerControl.classList.add('datepicker-control')
43 | this.table.classList.add('calendar');
44 |
45 | // build the calendar nodes structure
46 | this.settings.months.forEach((month, index) => {
47 | let option = document.createElement('option');
48 | option.value = index;
49 | option.innerHTML = month;
50 | this.monthSelector.appendChild(option);
51 | })
52 |
53 | // append the calendar to DOM
54 | this.datepickerControl.appendChild(this.monthSelector);
55 | this.datepickerControl.appendChild(this.yearSelector);
56 | this.dropdownMenu.appendChild(this.datepickerControl);
57 | this.dropdownMenu.appendChild(this.table);
58 | this.wrapper.appendChild(this.dropdownMenu);
59 | this.el.parentNode.insertBefore(this.wrapper, this.el);
60 | this.wrapper.appendChild(this.el);
61 |
62 | // start
63 | this.dropdown = new Dropdown(this.el, this.dropdownMenu);
64 | this.update();
65 | this.initEvents();
66 | }
67 |
68 | initEvents () {
69 | this.monthSelector.addEventListener('change', (e) => {
70 | this.setMonth(e.target.value);
71 | this.update();
72 | });
73 | this.yearSelector.addEventListener('change', (e) => {
74 | this.setYear(e.target.value);
75 | this.update();
76 | });
77 | this.el.addEventListener('change', (e) => {
78 | this.setDate(e.target.value);
79 | this.update();
80 | });
81 | }
82 |
83 | setDay (day) {
84 | this.currentDate.setDate(day);
85 | }
86 |
87 | setYear (year) {
88 | this.currentDate.setYear(year);
89 | }
90 |
91 | setMonth (month) {
92 | this.currentDate.setMonth(month);
93 | }
94 |
95 | setDate (date) {
96 | this.currentDate = parse(date, this.settings.dateFormat, new Date());
97 | }
98 |
99 | update () {
100 | this.el.value = this.getFormatedDate(this.currentDate);
101 | this.updateTableDate();
102 | }
103 |
104 | updateTableDate () {
105 | this.monthSelector.value = getMonth(this.currentDate);
106 | this.yearSelector.value = getYear(this.currentDate);
107 | const dayOfWeek = startOfMonth(this.currentDate).getDay();
108 | const lastDayOfTheCurrentMonth = endOfMonth(this.currentDate).getDate();
109 | const lastDayOfThePreviousMonth = endOfMonth(addMonths(this.currentDate, -1)).getDate();
110 | const currentDay = this.currentDate.getDate();
111 |
112 | // clean calender
113 | this.table.innerHTML = '';
114 |
115 | let header = document.createElement('tr');
116 | for (let i = 0; i < 7; i++) {
117 | this._createCell(header, this.settings.days[i], 'th');
118 | this.table.appendChild(header);
119 | }
120 |
121 | let day = lastDayOfThePreviousMonth - dayOfWeek + 1;
122 | let limit = 0;
123 | let mode = 'is-previous';
124 | let active = [];
125 | for (let rowNumber = 0; rowNumber < 6; rowNumber++) {
126 | limit = rowNumber > 0 ? lastDayOfTheCurrentMonth : lastDayOfThePreviousMonth;
127 | let row = document.createElement('tr');
128 | for (let i = 0; i < this.settings.days.length; i++) {
129 | if (day > limit) {
130 | day = 1;
131 | mode = mode === 'is-previous' ? 'is-current' : 'is-following';
132 | }
133 | if (mode === 'is-current' && currentDay === day) {
134 | active = ['is-active']
135 | } else {
136 | active = []
137 | }
138 | this._createCell(row, day, 'td', [mode].concat(active));
139 | this.table.appendChild(row);
140 | day++;
141 | }
142 | }
143 | }
144 |
145 | handleCellClick (e) {
146 | const cell = event.target;
147 | const currentMonth = this.currentDate.getMonth();
148 |
149 | if (cell.classList.contains('is-previous')) {
150 | this.setMonth(currentMonth - 1);
151 | }
152 | if (cell.classList.contains('is-following')) {
153 | this.setMonth(currentMonth + 1);
154 | }
155 | this.setDay(cell.innerHTML);
156 | this.update();
157 | }
158 |
159 | getFormatedDate (date) {
160 | return format(date, this.settings.dateFormat);
161 | }
162 |
163 | _createCell (row, data, type, extraClass = null) {
164 | let cell = document.createElement(type);
165 | if (extraClass) {
166 | cell.classList.add(...extraClass);
167 | }
168 | if (type === 'td') {
169 | cell.addEventListener('click', this.handleCellClick.bind(this));
170 | }
171 | cell.innerHTML = data;
172 | row.appendChild(cell);
173 | }
174 | }
175 |
176 | export default Datepicker;
177 |
--------------------------------------------------------------------------------
/src/core/normalize.styl:
--------------------------------------------------------------------------------
1 | /**
2 | * Using normalize.css v8.0.0
3 | */
4 |
5 |
6 | /* Document
7 | ========================================================================== */
8 |
9 | /**
10 | * Prevent adjustments of font size after orientation changes in iOS.
11 | */
12 |
13 | html
14 | -webkit-text-size-adjust: 100%
15 |
16 | /* Sections
17 | ========================================================================== */
18 |
19 | /**
20 | * Remove the margin in all browsers.
21 | */
22 |
23 | body
24 | margin: 0
25 |
26 |
27 | /* Grouping content
28 | ========================================================================== */
29 |
30 | /**
31 | * 1. Add the correct box sizing in Firefox.
32 | * 2. Show the overflow in Edge and IE.
33 | */
34 |
35 | hr
36 | box-sizing: content-box /* 1 */
37 | height: 0 /* 1 */
38 | overflow: visible /* 2 */
39 |
40 | /**
41 | * 1. Correct the inheritance and scaling of font size in all browsers.
42 | * 2. Correct the odd `em` font sizing in all browsers.
43 | */
44 |
45 | pre
46 | font-family: monospace, monospace /* 1 */
47 | font-size: 1em /* 2 */
48 |
49 | /* Text-level semantics
50 | ========================================================================== */
51 |
52 | /**
53 | * Remove the gray background on active links in IE 10.
54 | */
55 |
56 | a
57 | background-color: transparent
58 |
59 | /**
60 | * 1. Remove the bottom border in Chrome 57-
61 | * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
62 | */
63 |
64 | abbr[title]
65 | border-bottom: none /* 1 */
66 | text-decoration: underline /* 2 */
67 | text-decoration: underline dotted /* 2 */
68 |
69 | /**
70 | * Add the correct font weight in Chrome, Edge, and Safari.
71 | */
72 |
73 | b,
74 | strong
75 | font-weight: bolder
76 |
77 | /**
78 | * 1. Correct the inheritance and scaling of font size in all browsers.
79 | * 2. Correct the odd `em` font sizing in all browsers.
80 | */
81 |
82 | code,
83 | kbd,
84 | samp
85 | font-family: monospace, monospace /* 1 */
86 | font-size: 1em /* 2 */
87 |
88 | /**
89 | * Add the correct font size in all browsers.
90 | */
91 |
92 | small
93 | font-size: 80%
94 |
95 | /**
96 | * Prevent `sub` and `sup` elements from affecting the line height in
97 | * all browsers.
98 | */
99 |
100 | sub,
101 | sup
102 | font-size: 75%
103 | line-height: 0
104 | position: relative
105 | vertical-align: baseline
106 |
107 | sub
108 | bottom: -0.25em
109 |
110 | sup
111 | top: -0.5em
112 |
113 | /* Embedded content
114 | ========================================================================== */
115 |
116 | /**
117 | * Remove the border on images inside links in IE 10.
118 | */
119 |
120 | img
121 | border-style: none
122 |
123 | /* Forms
124 | ========================================================================== */
125 |
126 | /**
127 | * 1. Change the font styles in all browsers.
128 | * 2. Remove the margin in Firefox and Safari.
129 | */
130 |
131 | button,
132 | input,
133 | optgroup,
134 | select,
135 | textarea
136 | font-family: inherit /* 1 */
137 | font-size: 100% /* 1 */
138 | line-height: 1.15 /* 1 */
139 | margin: 0 /* 2 */
140 |
141 | /**
142 | * Show the overflow in IE.
143 | * 1. Show the overflow in Edge.
144 | */
145 |
146 | button,
147 | input /* 1 */
148 | overflow: visible
149 |
150 | /**
151 | * Remove the inheritance of text transform in Edge, Firefox, and IE.
152 | * 1. Remove the inheritance of text transform in Firefox.
153 | */
154 |
155 | button,
156 | select /* 1 */
157 | text-transform: none
158 |
159 | /**
160 | * Correct the inability to style clickable types in iOS and Safari.
161 | */
162 |
163 | button,
164 | [type="button"],
165 | [type="reset"],
166 | [type="submit"]
167 | -webkit-appearance: button
168 |
169 | /**
170 | * Remove the inner border and padding in Firefox.
171 | */
172 |
173 | button::-moz-focus-inner,
174 | [type="button"]::-moz-focus-inner,
175 | [type="reset"]::-moz-focus-inner,
176 | [type="submit"]::-moz-focus-inner
177 | border-style: none
178 | padding: 0
179 |
180 | /**
181 | * Restore the focus styles unset by the previous rule.
182 | */
183 |
184 | button:-moz-focusring,
185 | [type="button"]:-moz-focusring,
186 | [type="reset"]:-moz-focusring,
187 | [type="submit"]:-moz-focusring
188 | outline: 1px dotted ButtonText
189 |
190 | /**
191 | * Correct the padding in Firefox.
192 | */
193 |
194 | fieldset
195 | padding: 0.35em 0.75em 0.625em
196 |
197 | /**
198 | * 1. Correct the text wrapping in Edge and IE.
199 | * 2. Correct the color inheritance from `fieldset` elements in IE.
200 | * 3. Remove the padding so developers are not caught out when they zero out
201 | * `fieldset` elements in all browsers.
202 | */
203 |
204 | legend
205 | box-sizing: border-box /* 1 */
206 | color: inherit /* 2 */
207 | display: table /* 1 */
208 | max-width: 100% /* 1 */
209 | padding: 0 /* 3 */
210 | white-space: normal /* 1 */
211 |
212 | /**
213 | * Add the correct vertical alignment in Chrome, Firefox, and Opera.
214 | */
215 |
216 | progress
217 | vertical-align: baseline
218 |
219 | /**
220 | * Remove the default vertical scrollbar in IE 10+.
221 | */
222 |
223 | textarea
224 | overflow: auto
225 |
226 | /**
227 | * 1. Add the correct box sizing in IE 10.
228 | * 2. Remove the padding in IE 10.
229 | */
230 |
231 | [type="checkbox"],
232 | [type="radio"]
233 | box-sizing: border-box /* 1 */
234 | padding: 0 /* 2 */
235 |
236 | /**
237 | * Correct the cursor style of increment and decrement buttons in Chrome.
238 | */
239 |
240 | [type="number"]::-webkit-inner-spin-button,
241 | [type="number"]::-webkit-outer-spin-button
242 | height: auto
243 |
244 | /**
245 | * 1. Correct the odd appearance in Chrome and Safari.
246 | * 2. Correct the outline style in Safari.
247 | */
248 |
249 | [type="search"]
250 | -webkit-appearance: textfield /* 1 */
251 | outline-offset: -2px /* 2 */
252 |
253 | /**
254 | * Remove the inner padding in Chrome and Safari on macOS.
255 | */
256 |
257 | [type="search"]::-webkit-search-decoration
258 | -webkit-appearance: none
259 |
260 | /**
261 | * 1. Correct the inability to style clickable types in iOS and Safari.
262 | * 2. Change font properties to `inherit` in Safari.
263 | */
264 |
265 | ::-webkit-file-upload-button
266 | -webkit-appearance: button /* 1 */
267 | font: inherit /* 2 */
268 |
269 | /* Interactive
270 | ========================================================================== */
271 |
272 | /*
273 | * Add the correct display in Edge, IE 10+, and Firefox.
274 | */
275 |
276 | details
277 | display: block
278 |
279 | /*
280 | * Add the correct display in all browsers.
281 | */
282 |
283 | summary
284 | display: list-item
285 |
286 | /* Misc
287 | ========================================================================== */
288 |
289 | /**
290 | * Add the correct display in IE 10+.
291 | */
292 |
293 | template
294 | display: none
295 |
296 | /**
297 | * Add the correct display in IE 10.
298 | */
299 |
300 | [hidden]
301 | display: none
--------------------------------------------------------------------------------
/extensions/accordion/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
Blexar Accordion
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
Default
19 |
20 |
21 |
22 | -
23 |
24 |
25 | Title 1
26 |
27 |
28 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae et, labore non soluta quaerat blanditiis architecto nesciunt? Ut magni accusantium nesciunt molestiae accusamus inventore eligendi dolorem quaerat quisquam! Voluptatum, provident?
29 |
30 |
click
31 |
33 |
34 | -
35 |
36 |
37 | Title 2
38 |
39 |
40 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae et, labore non soluta quaerat blanditiis architecto nesciunt? Ut magni accusantium nesciunt molestiae accusamus inventore eligendi dolorem quaerat quisquam! Voluptatum, provident?
41 |
43 |
44 | -
45 |
46 |
47 | Title 3
48 |
49 |
50 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae et, labore non soluta quaerat blanditiis architecto nesciunt? Ut magni accusantium nesciunt molestiae accusamus inventore eligendi dolorem quaerat quisquam! Voluptatum, provident?
51 |
53 |
54 |
55 |
56 |
Clear
57 |
58 |
59 |
60 | - item 1
61 |
62 |
63 |
64 |
65 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae et, labore non soluta quaerat blanditiis architecto nesciunt? Ut magni accusantium nesciunt molestiae accusamus inventore eligendi dolorem quaerat quisquam! Voluptatum, provident?
66 |
67 |
68 |
70 | - item 2
71 |
72 |
73 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, voluptatibus sequi nulla nostrum quae animi molestias dolor praesentium itaque a dolore dolorem aliquam placeat earum adipisci quos totam molestiae. Commodi.
74 |
75 |
77 | - item 3
78 |
79 |
80 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo et officiis rerum explicabo, veniam vel voluptatum. Commodi enim ullam voluptates error id, eligendi, culpa laborum aut neque dolores quasi! Aliquam.
81 |
82 |
83 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa nobis minus magnam sed sint quas, enim officia aspernatur qui, voluptatem adipisci! Modi eum quam veniam iusto vitae obcaecati? Ratione, sapiente?
84 |
85 |
86 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cupiditate eaque praesentium aperiam fuga adipisci laborum est, dignissimos sit fugit consectetur alias vero quaerat eligendi libero numquam? Qui veritatis nihil ducimus?
87 |
88 |
90 |
91 |
92 |
93 |
Nested accordions
94 |
95 |
96 |
97 | -
98 |
99 | item 1
100 |
101 |
102 |
103 | -
104 |
105 | inner item 1
106 |
107 |
108 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae et, labore non soluta quaerat blanditiis architecto nesciunt? Ut magni accusantium nesciunt molestiae accusamus inventore eligendi dolorem quaerat quisquam! Voluptatum, provident?
109 |
111 | -
112 |
113 | inner item 2
114 |
115 |
116 |
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repudiandae et, labore non soluta quaerat blanditiis architecto nesciunt? Ut magni accusantium nesciunt molestiae accusamus inventore eligendi dolorem quaerat quisquam! Voluptatum, provident?
117 |
119 |
120 |
122 | -
123 | item 2
124 |
125 |
Awesome content!
126 |
128 | -
129 | item 3
130 |
131 |
Awesome content!
132 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
146 |
147 |
--------------------------------------------------------------------------------
/extensions/table/src/table.js:
--------------------------------------------------------------------------------
1 | import select from '../../_utils/select';
2 | import wrap from '../../_utils/wrap';
3 | import toArray from '../../_utils/toArray';
4 | import debounce from '../../_utils/debounce';
5 |
6 | import Sortable from './sortable';
7 | import Paginator from './paginator';
8 |
9 | class Table {
10 | static defaults = {
11 | fixedHeader: false,
12 | pagination: true,
13 | sortable: true,
14 | editable: false,
15 | density: false,
16 | perPage: 10
17 | }
18 | constructor(el, settings) {
19 | this.el = select(el);
20 | this.settings = {
21 | ...Table.defaults,
22 | ...settings
23 | }
24 | this.init();
25 | }
26 |
27 | /**
28 | * init all table extensions
29 | */
30 | init() {
31 | this.paginator = new Paginator(this.el, {
32 | perPage: this.settings.perPage,
33 | editable: this.settings.editable
34 | });
35 | this.sortable = new Sortable(this.el, this.paginator);
36 | this.scroll = window.scrollY;
37 | this.initWrapper();
38 | if (this.settings.pagination) this.initPagination();
39 | if (this.settings.sortable) this.initSortable();
40 | if (this.settings.density) this.initDensity();
41 | if (this.settings.fixedHeader) this.initFixedHeader();
42 | }
43 |
44 | /**
45 | * add wrapper around the table
46 | */
47 | initWrapper() {
48 | this.wrapper = document.createElement('div');
49 | this.wrapper.classList.add('table-wrapper');
50 | wrap(this.el, this.wrapper);
51 | }
52 |
53 | /**
54 | * init fixed header when scroll
55 | */
56 | initFixedHeader() {
57 | this.header = this.el.querySelector('thead');
58 | this.ticking = false;
59 | this.updateHeaderSize();
60 | window.addEventListener('scroll', () => {
61 | this.scroll = window.scrollY;
62 | if (!this.ticking) {
63 | window.requestAnimationFrame(() => {
64 | this.updateHeaderState();
65 | this.ticking = false;
66 | });
67 | }
68 | this.ticking = true;
69 | }, {
70 | passive: true
71 | });
72 | window.addEventListener('resize',
73 | debounce(this.updateHeaderSize.bind(this)),
74 | { passive: true }
75 | );
76 | }
77 |
78 | /**
79 | * init ability to sort table elements
80 | */
81 | initSortable() {
82 | this.lastSort = '';
83 | this.headers = toArray(this.el.querySelectorAll('thead th'));
84 | this.titles = this.headers.map((header) => header.innerHTML.toLowerCase());
85 | this.sortButtons = [];
86 | this.headers.forEach((header) => {
87 | header.insertAdjacentHTML('beforeend',
88 | `
`
93 | );
94 | this.sortButtons.push(header.querySelector('button'));
95 | });
96 |
97 | this.sortButtons.forEach((button, index) => {
98 | button.addEventListener('click', () => {
99 | let direction = this.lastSort.button === button
100 | ? this.lastSort.dir === 'asc' ? 'desc' : 'asc'
101 | : 'asc';
102 | this.lastSort = {
103 | button: button,
104 | dir: direction
105 | };
106 | this.sortable.sortBy(this.titles[index].toString(), direction);
107 | this.sortButtons.forEach((btn) => {
108 | btn.classList.remove('is-active', 'is-desc');
109 | });
110 | button.classList.add('is-active');
111 | if (direction === 'desc') button.classList.add('is-desc');
112 | });
113 | });
114 | }
115 |
116 | /**
117 | * init table pagination
118 | */
119 | initPagination() {
120 | this.pagination = {};
121 | this.pagination.row = document.createElement('nav');
122 | this.pagination.row.classList.add('pagination');
123 |
124 | for (let pageNumber = 1; pageNumber <= this.paginator.totalPageCount; pageNumber++) {
125 | const callback = () => {
126 | this.paginator.jumpToPage(pageNumber);
127 | this.updateHeaderSize();
128 | }
129 | const button = document.createElement('button');
130 | button.classList.add('pagination-item');
131 | button.innerText = pageNumber;
132 | button.addEventListener('click', callback);
133 | this.pagination.row.appendChild(button);
134 | }
135 |
136 | this.pagination.row.insertAdjacentHTML('afterbegin', `
137 |
142 | `);
143 | this.pagination.row.insertAdjacentHTML('beforeend', `
144 |
149 | `);
150 |
151 | this.wrapper.appendChild(this.pagination.row);
152 |
153 | this.pagination.previous = this.wrapper.querySelector('.pagination-prev');
154 | this.pagination.next = this.wrapper.querySelector('.pagination-next');
155 |
156 | this.pagination.previous.addEventListener('click', () => {
157 | this.paginator.previousPage();
158 | this.updateHeaderSize();
159 | });
160 | this.pagination.next.addEventListener('click', () => {
161 | this.paginator.nextPage();
162 | this.updateHeaderSize();
163 | });
164 | }
165 |
166 | /**
167 | * init display density
168 | */
169 | initDensity() {
170 | this.density = {};
171 | this.wrapper.insertAdjacentHTML('afterbegin', `
172 |
173 |
178 |
183 |
188 |
189 | `);
190 |
191 | this.density.small = this.wrapper.querySelector('.density-small');
192 | this.density.medium = this.wrapper.querySelector('.density-medium');
193 | this.density.large = this.wrapper.querySelector('.density-large');
194 | this.density.small.addEventListener('click', () => this.applyDensity('small'));
195 | this.density.medium.addEventListener('click', () => this.applyDensity('medium'));
196 | this.density.large.addEventListener('click', () => this.applyDensity('large'));
197 | }
198 |
199 | applyDensity(density) {
200 | Object.keys(this.density).forEach((key) => {
201 | this.density[key].classList.remove('is-active');
202 | });
203 | this.density[density].classList.add('is-active');
204 | this.el.classList.remove('is-large', 'is-medium', 'is-small');
205 | this.el.classList.add(`is-${density}`);
206 | if (this.settings.fixedHeader) {
207 | this.updateHeaderSize();
208 | this.updateHeaderState();
209 | }
210 | }
211 | /**
212 | * update header position
213 | */
214 | updateHeaderState() {
215 | this.header.style.willChange = 'transform';
216 | const headerPosition = this.scroll - this.tableTop;
217 | if (this.scroll >= this.tableBottom - this.headerHeight) {
218 | return;
219 | }
220 | if (this.scroll >= this.tableTop) {
221 | this.header.style.transform = `translate3d(0, ${headerPosition}px, 0)`;
222 | return;
223 | }
224 | this.header.style.willChange = '';
225 | this.header.style.transform = `translate3d(0, 0, 0)`;
226 | }
227 |
228 | /**
229 | * update header size
230 | */
231 | updateHeaderSize() {
232 | this.tableTop = this.el.getBoundingClientRect().top + window.scrollY;
233 | this.tableBottom = this.el.getBoundingClientRect().bottom + window.scrollY;
234 | this.headerHeight = this.header.getBoundingClientRect().height;
235 | }
236 | }
237 |
238 | export default Table;
239 |
--------------------------------------------------------------------------------
/extensions/select/src/select.js:
--------------------------------------------------------------------------------
1 | import Dropdown from '../../dropdown/src/dropdown';
2 | import select from '../../_utils/select';
3 | import debounce from '../../_utils/debounce';
4 |
5 | class Select {
6 | static defaults = {
7 | data: null,
8 | multiple: false
9 | }
10 | constructor (selector, settings) {
11 | this.el = select(selector);
12 | this.settings = {
13 | ...Select.defaults,
14 | ...settings
15 | }
16 | this.init();
17 | }
18 |
19 | get value () {
20 | if (this.settings.multiple) {
21 | return this.results.map((opt) => opt.value);
22 | }
23 | return this.el.value;
24 | }
25 |
26 | init () {
27 | this._initSelect();
28 | this._initData();
29 | this._initMenu();
30 | this._initEvents();
31 | }
32 |
33 | _initSelect () {
34 | this.select = document.createElement('div');
35 | this.input = document.createElement('input');
36 |
37 | const currentClasses = this.el.classList ? Array.from(this.el.classList) : [''];
38 | this.select.classList.add('select', ...currentClasses);
39 | this.input.classList.add('select-input');
40 | this.el.classList.add('is-hidden');
41 |
42 | this.el.parentNode.insertBefore(this.select, this.el);
43 | this.select.appendChild(this.el);
44 | this.select.appendChild(this.input);
45 | if (this.settings.multiple || this.el.multiple) {
46 | this.settings.multiple = true;
47 | this.results = [];
48 | this.labels = document.createElement('div');
49 | this.labels.classList.add('select-labels');
50 | this.select.appendChild(this.labels);
51 | this.el.multiple = true;
52 | }
53 | if (this.settings.data !== null) {
54 | this._generateSelectFromData();
55 | }
56 | }
57 |
58 | _initData () {
59 | if (this.settings.data !== null) {
60 | this.data = this.settings.data;
61 | return;
62 | }
63 | const optionsGroup = Array.from(this.el.querySelectorAll('optgroup'));
64 | const options = Array.from(this.el.querySelectorAll(':scope >option'));
65 | this.data = optionsGroup.map(group => {
66 | const groupData = { text: group.label };
67 | const options = Array.from(group.querySelectorAll(':scope >option'));
68 | groupData.children = options.map(option => {
69 | return {
70 | text: option.innerHTML,
71 | value: option.value
72 | }
73 | });
74 | return groupData;
75 | });
76 | this.data = this.data.concat(options.map(option => {
77 | return {
78 | text: option.innerHTML,
79 | value: option.value
80 | }
81 | }));
82 | }
83 |
84 | _initMenu () {
85 | this.isMenuVisible = false;
86 | this.options = [];
87 | this.menu = document.createElement('div');
88 | this.list = document.createElement('ul');
89 |
90 | this.menu.classList.add('select-menu');
91 | this.list.classList.add('select-list');
92 |
93 | // generate options based on data object
94 | let id = 0;
95 | this.data.forEach(el => {
96 | const item = document.createElement('li');
97 | item.classList.add('select-item');
98 | this.list.appendChild(item);
99 | if (el.children) {
100 | const childTitle = document.createElement('label');
101 | const childMenu = document.createElement('ul');
102 | childTitle.classList.add('select-childTitle');
103 | childMenu.classList.add('select-childMenu');
104 | item.classList.add('is-group');
105 | item.appendChild(childTitle);
106 | item.appendChild(childMenu);
107 |
108 | childTitle.innerText = el.text;
109 | el.children.forEach((child) => {
110 | const childItem = document.createElement('li');
111 | childItem.classList.add('select-childItem');
112 | childMenu.appendChild(childItem);
113 | childItem.innerText = child.text;
114 | this.options.push({
115 | element: childItem,
116 | id: id++,
117 | text: child.text,
118 | value: child.value
119 | });
120 | });
121 | return;
122 | }
123 | item.innerText = el.text;
124 | this.options.push({
125 | element: item,
126 | id: id++,
127 | text: el.text,
128 | value: el.value
129 | });
130 | });
131 | this.menu.appendChild(this.list);
132 | this.select.appendChild(this.menu);
133 | if (~this.el.selectedIndex) {
134 | this.selectOption(this.options.find(opt => opt.id === this.el.selectedIndex));
135 | }
136 | this.dropdown = new Dropdown(this.select, this.menu, {
137 | hideWhenClickOut: true
138 | });
139 | }
140 |
141 | _initEvents () {
142 | this.options.forEach(option => {
143 | option.element.addEventListener('click', () => {
144 | this.selectOption(option);
145 | })
146 | });
147 | this.input.addEventListener('input', () => {
148 | const filter = this.input.value.toUpperCase();
149 | this.options.forEach(option => {
150 | if (option.text.toUpperCase().indexOf(filter) === -1) {
151 | option.element.style.display = 'none';
152 | return;
153 | }
154 | option.element.style.display = '';
155 | });
156 | });
157 | if (this.settings.multiple) {
158 | window.addEventListener('resize', debounce(this.updateSelectSize.bind(this)));
159 | }
160 | }
161 |
162 | _generateSelectFromData () {
163 | const frag = document.createDocumentFragment();
164 | this.settings.data.forEach(option => {
165 | if (option.children) {
166 | const group = document.createElement('optgroup');
167 | group.label = option.text;
168 | option.children.forEach(child => {
169 | const option = document.createElement('option');
170 | option.innerText = child.text;
171 | option.value = child.value;
172 | group.appendChild(option);
173 | });
174 | this.option.appendChild(group);
175 | return;
176 | }
177 | const optionElement = document.createElement('option');
178 | optionElement.innerText = option.text;
179 | optionElement.value = option.value;
180 | frag.appendChild(optionElement);
181 | });
182 | this.el.appendChild(frag);
183 | }
184 |
185 | selectOption (option) {
186 | // if (!option || this.el.selectedIndex === option.id) return;
187 | if (this.settings.multiple) {
188 | this.updateResults(option, this.el.item(option.id).selected);
189 | this.updateLabels();
190 | this.el.dispatchEvent(new Event('change')); // eslint-disable-line
191 | return;
192 | }
193 | this.options.forEach((opt) => {
194 | opt.element.classList.remove('is-selected');
195 | })
196 | option.element.classList.add('is-selected');
197 | this.el.selectedIndex = option.id;
198 | this.input.value = this.el[this.el.selectedIndex].innerText;
199 | this.el.dispatchEvent(new Event('change')); // eslint-disable-line
200 | }
201 |
202 | updateLabels () {
203 | this.labels.innerHTML = '';
204 | this.results.forEach((result) => {
205 | const label = `
206 |
`
214 | this.labels.insertAdjacentHTML('beforeEnd', label);
215 | this.updateSelectSize();
216 | const close = this.labels.querySelector(`#close-${result.id}`);
217 | close.addEventListener('click', (event) => {
218 | event.preventDefault();
219 | event.stopPropagation();
220 | this.updateResults(result, true);
221 | this.updateLabels();
222 | });
223 | });
224 | }
225 |
226 | updateSelectSize () {
227 | let labels = this.labels.offsetHeight;
228 | if (labels === 0) return;
229 | let border = window.getComputedStyle(this.select, null).getPropertyValue('border-width');
230 | let borders = Number(border.slice(0, -2)) * 2;
231 | this.select.style.height = `${labels + borders}px`;
232 | }
233 | updateResults (result, remove) {
234 | if (remove) {
235 | this.el.item(result.id).selected = false;
236 | this.results.splice(this.results.indexOf(result), 1);
237 | result.element.classList.remove('is-selected');
238 | return;
239 | }
240 | this.el.item(result.id).selected = true;
241 | this.results.push(result);
242 | result.element.classList.add('is-selected');
243 | }
244 | }
245 |
246 | export default Select;
247 |
--------------------------------------------------------------------------------
/extensions/slider/src/slider.js:
--------------------------------------------------------------------------------
1 | import { mixColors } from 'color-fns';
2 |
3 | import select from '../../_utils/select';
4 | import wrap from '../../_utils/wrap';
5 | import call from '../../_utils/call';
6 | import getClosestValue from '../../_utils/getClosestValue';
7 | import stringToDOM from '../../_utils/stringToDOM';
8 |
9 |
10 | /**
11 | * Slider class
12 | */
13 | export default class Slider {
14 | constructor (selector, settings) {
15 | this.el = select(selector);
16 | this.settings = {
17 | ...Slider.defaults,
18 | ...settings
19 | };
20 | this._init();
21 | }
22 |
23 | /**
24 | * create new rang slider element
25 | * @param {String|HTMLElement} selector
26 | * @param {Object} settings
27 | */
28 | static create (selector, settings) {
29 | Slider(selector, settings);
30 | }
31 |
32 | _init () {
33 | this.values = [];
34 | this.percentages = [];
35 | this.multiple = this.settings.handles.length > 1;
36 | this.min = Number(this.el.min) || Number(this.settings.min);
37 | this.max = Number(this.el.max) || Number(this.settings.max);
38 | this.step = Number(this.el.step) || Number(this.settings.step);
39 | if (this.settings.handles.length === 1) {
40 | this.settings.handles[0] = Number(this.el.value) || Number(this.settings.value);
41 | }
42 | this.settings.handles.sort();
43 | if (this.settings.colorCode) {
44 | this.el.type = 'text';
45 | }
46 |
47 | this._initElements();
48 | if (this.settings.gradient) {
49 | this._initGradient();
50 | }
51 | this._initEvents();
52 | this.settings.handles.forEach((handle, index) => {
53 | this.activeHandle = index;
54 | this.update(handle);
55 | })
56 | this.update();
57 | }
58 |
59 | _initElements () {
60 | this.handles = [];
61 | this.labels = [];
62 | this.wrapper = document.createElement('div');
63 | this.track = document.createElement('div');
64 |
65 | this.wrapper.classList.add('slider');
66 | this.wrapper.classList.toggle('is-editable', this.settings.editable);
67 | this.wrapper.classList.toggle('is-reverse', this.settings.reverse);
68 | if (this.settings.classes) {
69 | this.wrapper.classList.add(...this.settings.classes);
70 | }
71 | this.track.classList.add('slider-track');
72 | this.el.classList.add('slider-input');
73 |
74 | if (this.settings.handles.length === 1) {
75 | this.fill = document.createElement('div');
76 | this.fill.classList.add('slider-fill');
77 | this.track.appendChild(this.fill);
78 | }
79 |
80 | this.settings.handles.forEach((position, index) => {
81 | this.handles[index] = stringToDOM(`
`);
82 | if (this.settings.label) {
83 | this.labels[index] = stringToDOM(`
`)
84 | this.handles[index].appendChild(this.labels[index]);
85 | }
86 | this.handles[index].addEventListener('mousedown', this.select.bind(this), false);
87 | this.handles[index].addEventListener('touchstart', this.select.bind(this), false);
88 | this.track.appendChild(this.handles[index]);
89 | });
90 |
91 | wrap(this.el, this.wrapper);
92 | this.wrapper.appendChild(this.track);
93 | call(this.settings.created, this);
94 | }
95 |
96 | _initGradient () {
97 | if (this.settings.gradient.length > 1) {
98 | this.track.style.backgroundImage = `linear-gradient(90deg, ${this.settings.gradient})`;
99 | this.gradient = this.settings.gradient;
100 | return;
101 | }
102 | this.track.style.backgroundImage = '';
103 | this.track.style.backgroundColor = this.settings.gradient[0];
104 | this.handles.forEach(handle => {
105 | handle.style.color = this.settings.gradient[0];
106 | });
107 | this.gradient = null;
108 | }
109 |
110 | _initEvents () {
111 | window.addEventListener('resize', () => {
112 | this.updateWidth();
113 | this.update(undefined, true);
114 | });
115 | if (this.settings.trackSlide) {
116 | this.track.addEventListener('mousedown', this.select.bind(this), false);
117 | this.track.addEventListener('touchstart', this.select.bind(this), false);
118 | }
119 | if (this.settings.editable && !this.settings.colorCode) {
120 | this.el.addEventListener('change', (evt) => {
121 | this.update(this.el.value);
122 | }, false);
123 | }
124 | }
125 |
126 | /**
127 | * fire select events
128 | */
129 | select (event) {
130 | event.preventDefault();
131 | event.stopPropagation();
132 | // check if left mouse is clicked
133 | if (event.buttons !== 1) return;
134 | this.track.classList.add('is-dragging');
135 | this.ticking = false;
136 |
137 | const stepValue = this.getStepValue(event);
138 |
139 | if (this.multiple) {
140 | let closest = getClosestValue(this.values, stepValue);
141 | this.activeHandle = this.values.indexOf(closest);
142 | }
143 | this.update(stepValue);
144 |
145 | this.tempDrag = this.dragging.bind(this);
146 | this.tempRelease = this.release.bind(this);
147 | document.addEventListener('mousemove', this.tempDrag);
148 | document.addEventListener('touchmove', this.tempDrag);
149 | document.addEventListener('touchend', this.tempRelease);
150 | document.addEventListener('mouseup', this.tempRelease);
151 | }
152 |
153 | /**
154 | * dragging motion
155 | */
156 | dragging (event) {
157 | event.preventDefault();
158 | const stepValue = this.getStepValue(event);
159 | if (!this.ticking) {
160 | window.requestAnimationFrame(() => {
161 | this.update(stepValue);
162 | this.ticking = false;
163 | });
164 |
165 | this.ticking = true;
166 | }
167 | }
168 |
169 | /**
170 | * release handler
171 | */
172 | release () {
173 | this.track.classList.remove('is-dragging');
174 | document.removeEventListener('mousemove', this.tempDrag);
175 | document.removeEventListener('touchmove', this.tempDrag);
176 | document.removeEventListener('mouseup', this.tempRelease);
177 | document.removeEventListener('touchend', this.tempRelease);
178 | }
179 |
180 | getStepValue (event) {
181 | const eventX = event.type.includes('mouse')
182 | ? event.clientX : event.type.includes('touch')
183 | ? event.touches[0].clientX : event;
184 |
185 | const mouseValue = (eventX - this.currentX);
186 | const stepCount = parseInt((mouseValue / this.stepWidth) + 0.5, 10);
187 | const stepValue = parseInt((stepCount + this.min) / this.step, 10) * this.step;
188 | return stepValue;
189 | }
190 |
191 | updateWidth () {
192 | const trackRect = this.track.getBoundingClientRect();
193 | this.currentX = trackRect.left;
194 | this.width = trackRect.width;
195 | this.stepWidth = (this.width / (this.max - this.min));
196 | }
197 |
198 | /**
199 | * get the filled area percentage
200 | * @param {Object} slider
201 | * @param {Number} value
202 | * @return {Number}
203 | */
204 | getPositionPercentage (value) {
205 | return (value - this.min) / (this.max - this.min);
206 | }
207 |
208 | normalizeValue (value) {
209 | if (isNaN(Number(value))) {
210 | return this.value;
211 | }
212 | if (this.multiple) {
213 | const prevValue = this.values[this.activeHandle - 1] || this.min;
214 | const nextValue = this.values[this.activeHandle + 1] || this.max;
215 | value = Math.min(Math.max(Number(value), prevValue), nextValue);
216 | }
217 | return Math.min(Math.max(Number(value), this.min), this.max);
218 | }
219 |
220 | newGradient (newGradient) {
221 | this.settings.gradient = newGradient;
222 | this._initGradient();
223 | this.update(undefined, true);
224 | }
225 |
226 | addHandle (value) {
227 | const closest = getClosestValue(this.values, value);
228 | const closestIndex = this.values.indexOf(closest);
229 | const closestValue = this.values[closestIndex];
230 | const newIndex = closestValue <= value ? closestIndex + 1 : closestIndex;
231 | this.values.splice(newIndex, 0, value);
232 | this.percentages.splice(newIndex, 0, this.getPositionPercentage(value));
233 | this.handles.splice(newIndex, 0, stringToDOM(`
`));
234 | if (this.settings.label) {
235 | this.labels.splice(newIndex, 0, stringToDOM(`
`));
236 | this.handles[newIndex].appendChild(this.labels[newIndex]);
237 | }
238 | this.handles[newIndex].addEventListener('mousedown', this.select.bind(this), false);
239 | this.handles[newIndex].addEventListener('touchstart', this.select.bind(this), false);
240 | this.track.appendChild(this.handles[newIndex]);
241 | this.activeHandle = newIndex;
242 | this.value = null;
243 | this.update(value);
244 | return this.handles[newIndex];
245 | }
246 |
247 | removeHandle (index) {
248 | this.handles[index].remove();
249 | this.handles.splice(index, 1);
250 | this.values.splice(index, 1);
251 | this.percentages.splice(index, 1);
252 | if (this.settings.label) {
253 | this.labels.splice(index, 1);
254 | }
255 | this.activeHandle = index === 0 ? index + 1 : index - 1;
256 | }
257 |
258 | /**
259 | * get the handle color
260 | * @param {Number} positionPercentage
261 | * @return {Number} handle hex color code
262 | */
263 | getHandleColor (positionPercentage) {
264 | const colorCount = this.gradient.length - 1;
265 | const region = positionPercentage;
266 | for (let i = 1; i <= colorCount; i++) {
267 | // check the current zone
268 | if (region >= ((i - 1) / colorCount) && region <= (i / colorCount)) {
269 | // get the active color percentage
270 | const colorPercentage = (region - ((i - 1) / colorCount)) / (1 / colorCount);
271 | // return the mixed color based on the zone boundary colors
272 | return mixColors(this.gradient[i - 1], this.gradient[i], colorPercentage);
273 | }
274 | }
275 | return 'rgb(0, 0, 0)';
276 | }
277 |
278 | /**
279 | * update the slider fill, value and color
280 | * @param {Number} value
281 | */
282 | update (value, mute = false) {
283 | if (Number(value) === this.value) return;
284 |
285 | if (!this.width) {
286 | this.updateWidth();
287 | }
288 | const normalized = this.normalizeValue(value);
289 | const positionPercentage = this.getPositionPercentage(normalized);
290 |
291 | if (this.fill) {
292 | this.fill.style.transform = `translate(${positionPercentage * this.width}px, 0) scale(${1 - positionPercentage}, 1)`;
293 | }
294 | this.handles[this.activeHandle].style.transform = `translate(${positionPercentage * this.width}px, 0)`;
295 | this.value = normalized;
296 | this.values[this.activeHandle] = normalized;
297 | this.percentages[this.activeHandle] = positionPercentage;
298 | this.el.value = this.value;
299 | if (this.settings.label) {
300 | this.labels[this.activeHandle].innerHTML = this.value;
301 | }
302 | if (this.gradient) {
303 | const color = this.getHandleColor(positionPercentage);
304 | this.handles[this.activeHandle].style.color = color;
305 | if (this.settings.colorCode) {
306 | this.el.value = color;
307 | this.labels[this.activeHandle].innerHTML = color;
308 | }
309 | }
310 | if (mute) return;
311 | this.el.dispatchEvent(new Event('change')); // eslint-disable-line
312 | this.el.dispatchEvent(new Event('input')); // eslint-disable-line
313 | call(this.settings.updated);
314 | }
315 |
316 | // eslint-disable-next-line
317 | static defaults = {
318 | created: {},
319 | updated: {},
320 | gradient: null,
321 | classes: null,
322 | colorCode: false,
323 | editable: false,
324 | reverse: false,
325 | label: true,
326 | min: 0,
327 | max: 10,
328 | step: 1,
329 | value: 0,
330 | handles: [0],
331 | trackSlide: true
332 | }
333 | }
334 |
--------------------------------------------------------------------------------
/extensions/modal/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
blexar modal
8 |
9 |
10 |
11 |
12 |
16 |
17 |
18 |
Default
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
Outline
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
X
59 |
62 |
63 |
64 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
65 | quia inventore soluta ullam cumque fuga.
66 |
67 |
68 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
X
80 |
83 |
84 |
85 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
86 | quia inventore soluta ullam cumque fuga.
87 |
88 |
89 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
X
101 |
104 |
105 |
106 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
107 | quia inventore soluta ullam cumque fuga.
108 |
109 |
110 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
X
122 |
125 |
126 |
127 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
128 | quia inventore soluta ullam cumque fuga.
129 |
130 |
131 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
X
143 |
146 |
147 |
148 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
149 | quia inventore soluta ullam cumque fuga.
150 |
151 |
152 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
X
164 |
167 |
168 |
169 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
170 | quia inventore soluta ullam cumque fuga.
171 |
172 |
173 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
X
185 |
188 |
189 |
190 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
191 | quia inventore soluta ullam cumque fuga.
192 |
193 |
194 |
198 |
199 |
200 |
201 |
202 |
203 |
204 |
205 |
X
206 |
209 |
210 |
211 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
212 | quia inventore soluta ullam cumque fuga.
213 |
214 |
215 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
X
227 |
230 |
231 |
232 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
233 | quia inventore soluta ullam cumque fuga.
234 |
235 |
236 |
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
X
248 |
251 |
252 |
253 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
254 | quia inventore soluta ullam cumque fuga.
255 |
256 |
257 |
261 |
262 |
263 |
264 |
265 |
266 |
267 |
268 |
X
269 |
272 |
273 |
274 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam deleniti, voluptatum suscipit molestiae dolorum
275 | quia inventore soluta ullam cumque fuga.
276 |
277 |
278 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
297 |
298 |
--------------------------------------------------------------------------------