diff --git a/src/index.css b/src/index.css
index b7486bcb..fdbabeca 100644
--- a/src/index.css
+++ b/src/index.css
@@ -18,9 +18,13 @@
&-settings {
display: flex;
+ align-items: center;
.cdx-settings-button {
width: 50%;
}
+ input {
+ padding: 5px;
+ }
}
}
diff --git a/src/index.js b/src/index.js
index 4ba15a7b..2aab5357 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,6 +6,7 @@ require('./index.css').toString();
/**
* @typedef {object} ListData
* @property {string} style - can be ordered or unordered
+ * @property {number} [start] - optional starting number of ordered list
* @property {Array} items - li elements
*/
@@ -82,6 +83,12 @@ class List {
icon: '',
default: true,
},
+ {
+ name: 'start',
+ title: this.api.i18n.t('Starting number'),
+ icon: '',
+ default: false,
+ },
];
/**
@@ -104,7 +111,7 @@ class List {
* @public
*/
render() {
- this._elements.wrapper = this.makeMainTag(this._data.style);
+ this._elements.wrapper = this.makeMainTag(this._data.style, this._data.start);
// fill with data
if (this._data.items.length) {
@@ -199,23 +206,45 @@ class List {
const wrapper = this._make('div', [ this.CSS.settingsWrapper ], {});
this.settings.forEach((item) => {
- const itemEl = this._make('div', this.CSS.settingsButton, {
- innerHTML: item.icon,
- });
- itemEl.addEventListener('click', () => {
- this.toggleTune(item.name);
-
- // clear other buttons
- const buttons = itemEl.parentNode.querySelectorAll('.' + this.CSS.settingsButton);
-
- Array.from(buttons).forEach((button) =>
- button.classList.remove(this.CSS.settingsButtonActive)
- );
-
- // mark active
- itemEl.classList.toggle(this.CSS.settingsButtonActive);
- });
+ let itemEl
+
+ // check if settings item is button or number input
+ if (item.name === 'start') {
+ itemEl = this._make('input', this.CSS.settingsInput, {
+ type: 'number'
+ });
+ itemEl.addEventListener('input', (e) => {
+ this.setStartNumber(e.target.value);
+ })
+ itemEl.value = this._data.start;
+ } else {
+ // make buttons
+ itemEl = this._make('div', this.CSS.settingsButton, {
+ innerHTML: item.icon,
+ });
+
+ // run click eventlisteners on settings that are buttons
+ itemEl.addEventListener('click', () => {
+
+ this.toggleTune(item.name);
+
+ // clear other buttons
+ const buttons = itemEl.parentNode.querySelectorAll('.' + this.CSS.settingsButton);
+
+ Array.from(buttons).forEach((button) =>
+ button.classList.remove(this.CSS.settingsButtonActive)
+ );
+
+ // clear input value if 'unordered' is selected
+ if (item.name === 'unordered') {
+ itemEl.parentNode.querySelector('.' + this.CSS.settingsInput).value = ''
+ }
+
+ // mark active
+ itemEl.classList.toggle(this.CSS.settingsButtonActive);
+ });
+ }
this.api.tooltip.onHover(itemEl, item.title, {
placement: 'top',
@@ -227,6 +256,7 @@ class List {
}
wrapper.appendChild(itemEl);
+
});
return wrapper;
@@ -258,14 +288,17 @@ class List {
* Creates main or tag depended on style
*
* @param {string} style - 'ordered' or 'unordered'
+ * @param {string} [start] - optional start attribute
* @returns {HTMLOListElement|HTMLUListElement}
*/
- makeMainTag(style){
+ makeMainTag(style, start){
const styleClass = style === 'ordered' ? this.CSS.wrapperOrdered : this.CSS.wrapperUnordered;
const tag = style === 'ordered' ? 'ol' : 'ul';
+
+ if (!start || start === 0) start = 1;
return this._make(tag, [this.CSS.baseBlock, this.CSS.wrapper, styleClass], {
- contentEditable: !this.readOnly,
+ contentEditable: !this.readOnly, start
});
}
@@ -273,9 +306,10 @@ class List {
* Toggles List style
*
* @param {string} style - 'ordered'|'unordered'
+ * @param {number} [number] - starting number of ordered list
*/
- toggleTune(style) {
- const newTag = this.makeMainTag(style);
+ toggleTune(style, number) {
+ const newTag = this.makeMainTag(style, number);
while (this._elements.wrapper.hasChildNodes()) {
newTag.appendChild(this._elements.wrapper.firstChild);
@@ -284,6 +318,18 @@ class List {
this._elements.wrapper.replaceWith(newTag);
this._elements.wrapper = newTag;
this._data.style = style;
+ if (style === 'unordered') this._data.start = null;
+ else if (number) this._data.start = number;
+ }
+
+ /**
+ * Set start number attribute
+ *
+ * @param {string} num
+ */
+ setStartNumber(num) {
+ // setting number must default style to ordered list
+ this.toggleTune('ordered', Number(num));
}
/**
@@ -301,6 +347,7 @@ class List {
settingsWrapper: 'cdx-list-settings',
settingsButton: this.api.styles.settingsButton,
settingsButtonActive: this.api.styles.settingsButtonActive,
+ settingsInput: this.api.styles.input
};
}
@@ -315,6 +362,7 @@ class List {
}
this._data.style = listData.style || this.settings.find((tune) => tune.default === true).name;
+ this._data.start = listData.start;
this._data.items = listData.items || [];
const oldView = this._elements.wrapper;
@@ -463,10 +511,12 @@ class List {
pasteHandler(element) {
const { tagName: tag } = element;
let style;
+ let start;
switch (tag) {
case 'OL':
style = 'ordered';
+ start = 1;
break;
case 'UL':
case 'LI':
@@ -475,6 +525,7 @@ class List {
const data = {
style,
+ start,
items: [],
};