-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
to converter.js added appendto method, that appends converter by sele…
…ctor. now html code reduced a lot. this method allows to create a lot of different converters on page, without knowing how it works. also modified convert and tohtmllist methods due to big.js library functions. added support of nanometer. precisionrange.js and main.js were filled with function to create converter items and handle their work
- Loading branch information
Showing
4 changed files
with
150 additions
and
130 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,102 @@ | ||
| function getUniqueElements(array){ | ||
| return Array.from(new Set(array)); | ||
| } | ||
| function getSelectedOption(select){ | ||
| return select.options[select.selectedIndex].value; | ||
| } | ||
| function createContainerWithClasses(tagName, ...classes){ | ||
| const getSelectedOption = select => select.options[select.selectedIndex].value; | ||
|
|
||
| const createContainerWithClasses = (tagName, ...classes) => { | ||
| const container = document.createElement(tagName); | ||
| container.classList.add(...classes); | ||
| return container; | ||
| } | ||
| function createConverterTitle(title){ | ||
| }; | ||
|
|
||
| const createConverterTitle = title => { | ||
| const titleContainer = createContainerWithClasses("div", "converter-title"); | ||
| titleContainer.textContent = title; | ||
| return titleContainer; | ||
| } | ||
| function createConverterSelect(props){ | ||
| }; | ||
|
|
||
| const createConverterSelect = props => { | ||
| const select = createContainerWithClasses("select", "converter-select", `converter-${props.role}`, "converter-action-item") | ||
| select.dataset.type = props.type; | ||
| select.innerHTML = `<option value="" selected ${props.disableDefaultOption ? "disabled" : ""}>${props.defaultOptionText}</option>`; | ||
| return select; | ||
| } | ||
| function createConverterValueInput(type){ | ||
| }; | ||
|
|
||
| const createFromConverterSelect = type => createConverterSelect({ | ||
| role: "from", | ||
| type: type, | ||
| defaultOptionText: "Choose unit of measurement...", | ||
| disableDefaultOption: true | ||
| }); | ||
|
|
||
| const createToConverterSelect = type => createConverterSelect({ | ||
| role: "to", | ||
| type: type, | ||
| defaultOptionText: "All measurement units", | ||
| }); | ||
|
|
||
| const createOptgroups = list => { | ||
| const groups = list.map(record => record.group).getUniqueElements(); | ||
| const optgroups = groups.map(group => { | ||
| const groupContent = list.filter(record => record.group === group); | ||
| const optionsList = groupContent.map(record => `<option value="${record.id}">${record.names.full} (${record.names.short})</option>`); | ||
| return `<optgroup label="${group}">${optionsList.join("")}</optgroup>`; | ||
| }); | ||
| return optgroups.join(""); | ||
| }; | ||
|
|
||
| const createConverterMoreToggle = toggleContent => { | ||
| const header = createContainerWithClasses("div", "converter-more-header"); | ||
| header.innerHTML = `<span>Click here for more options...</span>`; | ||
| header.querySelector("span").onclick = event => $(event.target.parentNode.nextElementSibling).slideToggle(); | ||
|
|
||
| const content = createContainerWithClasses("div", "converter-more-content"); | ||
| content.appendChild(toggleContent); | ||
| const wrapper = createContainerWithClasses("div", "converter-more-wrapper"); | ||
| wrapper.appendChild(header); | ||
| wrapper.appendChild(content); | ||
| return wrapper; | ||
| }; | ||
|
|
||
| const createConverterValueInput = type => { | ||
| const input = createContainerWithClasses("input", "converter-value", "converter-action-item"); | ||
| input.dataset.type = type; | ||
| input.type = "number"; | ||
| input.value = 1; | ||
| input.placeholder = `Enter ${type}...`; | ||
| return input; | ||
| } | ||
| }; | ||
|
|
||
| function converterHandler(props){ | ||
| try{ | ||
| const value = parseFloat(props.valueInput.value); | ||
| if(!value){ | ||
| throw new Error(`Invalid input! Type ${this.type} value again!`); | ||
| } | ||
| const from = getSelectedOption(props.fromSelect); | ||
| if(!from){ | ||
| throw new Error("You forgot to choose <span class='primary-text'>from</span> unit of measurement!"); | ||
| } | ||
|
|
||
| const to = getSelectedOption(props.toSelect); | ||
|
|
||
| const precision = parseInt(props.precisionRange.querySelector("input").value); | ||
|
|
||
| //list of objects, that contain converted values | ||
| const converted = this.convert({value, from, to}); | ||
| //get short name of selected "from" value | ||
| const fromShortName = this.getById(from, this.dataByType.list).names.short; | ||
|
|
||
| const resultHeader = `<div class="result-header">${value} ${fromShortName} is:</div>`; | ||
| const resultContent = this.toHtmlList({converted, precision}); | ||
| props.result.innerHTML = resultHeader + resultContent; | ||
| } | ||
| catch(error){ | ||
| props.result.innerHTML = error.message; | ||
| } | ||
| }; | ||
|
|
||
| document.querySelector("#mobile-menu").addEventListener("click", () => { | ||
| const menu = $("#menu"); | ||
| const mobileMenuArrow = $("#mobile-menu > .fas"); | ||
| menu.slideToggle(500); | ||
| $("#mobile-menu > .fas").toggleClass("fa-angle-down"); | ||
| $("#mobile-menu > .fas").toggleClass("fa-angle-up"); | ||
| mobileMenuArrow.toggleClass("fa-angle-down"); | ||
| mobileMenuArrow.toggleClass("fa-angle-up"); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters