oda-framework
Version:
186 lines (164 loc) • 10.3 kB
Markdown
Компонент **«oda-calculator»** позволяет создать настраиваемый калькулятор, с помощью которого можно производить сложные вычисления и настраивать точность получаемых результатов.
Точность вычислений задается с помощью свойства **accuracy**, а высота кнопок калькулятора настраивается с помощью свойства **buttonHeight**.
Для использования этого компонента необходимо подключить к Вашему файлу JS-модуль **calculator.js**, добавить в HTML-код пользовательский тэг **oda-calculator**, а также задать необходимую модель клавиатуры калькулятора с помощью свойства **data**.
Свойство **data** представляет собой объект, который позволяет задать необходимые кнопки на клавиатуре калькулятора.
Все эти кнопки группируются на три функциональные области в свойстве **cols**:
1. Научная (science).
1. Цифровая (numpad).
1. Знаковая (sign).
Каждая из этих областей задается внутри объекта **cols** с помощью трех соответствующих объектов с именами: **science**, **numpad** и **sign**.
Эти объекты обязательно должны содержать в себе объект с именем **rows**, в котором задаются ряды кнопок калькулятора.
При необходимости в них можно добавить специальный объект **props** для задания общего стиля отображения кнопок данной области.
Объект с именем **rows** должен содержать в себе нумерацию рядов кнопок калькулятора. Эта нумерация должна начинается с 1 и идти последовательно друг за другом.
Каждый из этих рядов в свою очередь является объектом, в котором можно задать два вложенных объекта:
1. Объект **buttons** — для описания всех кнопок данного ряда.
2. Объект **props** — для задания общего стиля отображения кнопок в данном ряду.
Объект **buttons** содержит весь перечень кнопок данного ряда. Каждая кнопка в этом перечне задается отдельным свойством этого объекта. Ключ этого свойства определяет надпись, которая будет отображаться на кнопке, а значение этого ключа определяет объект с функциональными характеристиками этой кнопки. Эти характеристики определяются следующими свойствами:
1. **name** — значение, которое будет отображаться первым в поле ввода.
1. **expression** — выражение, которое будет будет выполняться при нахождении результата.
1. **hint** — подсказка, которая используется для вставки обязательного символа.
1. **key** — html-код, для отображения каких-то специальных конструкций.
1. **command** — действие, которое будет выполняться при нажатии на кнопку.
Всего есть 5 различных действий **command**:
1. **clear** – удаление всего содержимого строки ввода.
1. **back** – удаление последнего введенного символа.
1. **calc** – подсчет результата выражения.
1. **calcFactorial** – подсчет факториала числа.
1. **getAnswer** – получение предыдущего ответа.
Стили отображения каждого ряда кнопок или всех кнопок внутри определенной области можно изменить с помощью специального объекта **props**, у которого можно задать два свойства:
1. **class** — определяет имя CSS-класса отображения кнопок.
1. **style** — задает значение incline CSS-стиля отображения кнопок.
Эти два свойства можно использовать совместно друг с другом.
Например,
```javascript _run_line_edit_loadoda_[my-component.js]_h=260_eh=260_
import '/components/tools/calculator/calculator.js';
ODA({
is: 'my-component',
template: `
<label> Размер кнопки <input type="number" ::value="height"></label>
<label>Точность результата<select ::value="accuracy">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</label>
<oda-calculator :accuracy :button-height="height" :data></oda-calculator>
`,
props: {
height: 50,
accuracy: 2,
data: {
cols: {
science: {
rows: {
1: {
buttons: {
"x!": {command: "calcFactorial"},
"sin": {name: "sin(", expr: "Math.sin(", hint: ')'},
"ln": {name: "ln(", expr: "Math.log(", hint: ')'},
},
},
2: {
buttons: {
"π": {expr: '3.14159265359'},
"cos": {name: "cos(", expr: "Math.cos(", hint: ')'},
"log": {name: "log(", expr: "Math.log10(", hint: ')'},
},
},
3: {
buttons: {
"e": {expr: "2.71828182846"},
"tan": {name: "tan(", expr: "Math.tan(", hint: ')'},
"√": {name: "√(", expr: "Math.sqrt(", hint: ')'},
},
},
4: {
buttons: {
"Ans": {command: 'getAnswer'},
"EXP": {name: "E", expr: "*10**"},
"XY": {key:"<div>X<sup>y</sup></div>", name: "^", expr: "**"},
},
},
},
props: {
class: "layout",
style: 'flex-shrink: 10000000',
},
},
numpad: {
rows: {
1: {
buttons: {
"(": {hint: ')', expr: '('},
")": {},
},
},
2: {
buttons: {
7: {},
8: {},
9: {},
},
},
3: {
buttons: {
4: {},
5: {},
6: {},
},
},
4: {
buttons:{
1: {},
2: {},
3: {},
},
},
5: {
buttons: {
0: {},
"00": {},
".": {},
},
}
},
},
sign:{
rows:{
1: {
buttons:{
"AC": {command: 'clear'},
"⟵": {command: 'back'},
},
},
2: {
buttons: {
"÷": {name: ' ÷ ', expr: '/'},
"%": {expr: "*0.01"},
},
},
3:{
buttons: {
"X": {name: ' × ', expr: '*'},
"-": {name: ' - ', expr: '-'},
},
},
4: {
props:{
style: 'flex-grow: 1000000',
},
buttons:{
"+": {name: ' + ', expr: '+'},
"=": {command: 'calc'},
},
}
},
},
},
},
}
});
```