Calculator: Mobile CSS, Corrected Trig Functionality (#4087)
* Enable history panel on mobile * Namespace CSS rules, remove trailing spaces * namespace all css rules * cleanup indentation * remove pete's css hacks * Namespace additional css rules * left align calculator with search box * Implement full width mobile UI * remove unused css * remove unused ids * Beter handling of history col for small screens * Switch back to using on methd * Fix trig regex and evaluation, remove precision * Ensure subtitle overflows on left, prevent history item overflow * Prevent subtitle text from being clipped * Remove evalmath obj * Updated conditional * Add support for numpad period * Fixed on start clear. * Add postfix detection. Fixed infinity ledger. * Removed Factorial BigNum hacks. * Removed unnessesary code introduced. * Fixed shift / clear issue. * Remove undefined key strokes. * Fix pi in exponents. * Make return consistent. * Fix broken history * Apply user-select rules to desktop and mobile * cleanup trailing spaces, commented out css * Fix backspacing issue with operands. * Remove console logsmaster
parent
5f7defa0df
commit
3c784f2582
|
@ -1,49 +1,70 @@
|
||||||
/* Typography */
|
/* Typography */
|
||||||
|
|
||||||
.zci--calculator,
|
.zci--calculator,
|
||||||
.zci--calculator .tile__ctrl__btn,
|
.zci--calculator .tile__ctrl__btn,
|
||||||
.zci--calculator .tile__ctrl__toggle,
|
.zci--calculator .tile__ctrl__toggle,
|
||||||
.zci--calculator .tile__skip-calc {
|
.zci--calculator .tile__skip-calc {
|
||||||
font-family: "DDG_ProximaNova","DDG_ProximaNova_UI_0","DDG_ProximaNova_UI_1","DDG_ProximaNova_UI_2","DDG_ProximaNova_UI_3","DDG_ProximaNova_UI_4","DDG_ProximaNova_UI_5","DDG_ProximaNova_UI_6","Proxima Nova","Helvetica Neue","Helvetica","Segoe UI","Nimbus Sans L","Liberation Sans","Open Sans",FreeSans,Arial,sans-serif;
|
font-family: "DDG_ProximaNova", "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Show UI when CSS is loaded */
|
/* Show UI when CSS is loaded */
|
||||||
.tile--calculator {
|
|
||||||
|
.zci--calculator .tile--calculator {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Layout */
|
/* Layout */
|
||||||
.tile__calc {
|
|
||||||
|
.zci--calculator .zci__body {
|
||||||
|
padding-left: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__calc {
|
||||||
height: 352px;
|
height: 352px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc__col {
|
.zci--calculator .tile__calc__col {
|
||||||
height: 251px;
|
height: 251px;
|
||||||
width: 35%;
|
width: 35%;
|
||||||
|
max-width: 295px; /* half width of search box */
|
||||||
float: left;
|
float: left;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-right: 1px solid #c8c8c8;
|
|
||||||
border-bottom: 1px solid #c8c8c8;
|
border-bottom: 1px solid #c8c8c8;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tabs */
|
/* Tabs */
|
||||||
.tile__calc .tile__tabs {
|
|
||||||
|
.zci--calculator .tile__calc .tile__tabs {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Controllers */
|
/* Controllers */
|
||||||
.tile__calc .tile__ctrl__btn,
|
|
||||||
.tile__calc .tile__ctrl__toggle {
|
.zci--calculator .tile__calc .tile__ctrl__btn,
|
||||||
|
.zci--calculator .tile__calc .tile__ctrl__toggle {
|
||||||
float: left;
|
float: left;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Toggle */
|
/* Toggle */
|
||||||
.tile__calc .tile__ctrl__toggle {
|
|
||||||
|
.zci--calculator .tile__calc .tile__ctrl__toggle {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
padding: 15px 0;;
|
padding: 15px 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: #ebebeb;
|
background: #ebebeb;
|
||||||
border: 1px solid #c8c8c8;
|
border: 1px solid #c8c8c8;
|
||||||
|
@ -54,69 +75,68 @@
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* The switch - the box around the slider */
|
/* The switch - the box around the slider */
|
||||||
.tile__ctrl__toggle-indicator {
|
|
||||||
position: relative;
|
.zci--calculator .tile__ctrl__toggle-indicator {
|
||||||
display: inline-block;
|
position: relative;
|
||||||
width: 38px;
|
display: inline-block;
|
||||||
height: 14px;
|
width: 38px;
|
||||||
|
height: 14px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__ctrl__toggle-indicator input {display:none;}
|
.zci--calculator .tile__ctrl__toggle-indicator input {
|
||||||
|
display: none;
|
||||||
.tile__ctrl__toggle-slider {
|
|
||||||
position: absolute;
|
|
||||||
cursor: pointer;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #ccc;
|
|
||||||
-webkit-transition: .4s;
|
|
||||||
transition: .4s;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__ctrl__toggle-slider:before {
|
.zci--calculator .tile__ctrl__toggle-slider {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
cursor: pointer;
|
||||||
height: 15px;
|
top: 0;
|
||||||
width: 15px;
|
left: 0;
|
||||||
left: 1px;
|
right: 0;
|
||||||
bottom: 0px;
|
bottom: 0;
|
||||||
background-color: white;
|
background-color: #ccc;
|
||||||
-webkit-transition: .4s;
|
-webkit-transition: .4s;
|
||||||
transition: .4s;
|
transition: .4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
.zci--calculator .tile__ctrl__toggle-slider:before {
|
||||||
input:checked + .tile__ctrl__toggle-slider {
|
position: absolute;
|
||||||
background-color: #2196F3;
|
content: "";
|
||||||
}
|
height: 15px;
|
||||||
*/
|
width: 15px;
|
||||||
|
left: 1px;
|
||||||
input:focus + .tile__ctrl__toggle-slider {
|
bottom: 0px;
|
||||||
box-shadow: 0 0 1px #2196F3;
|
background-color: white;
|
||||||
|
-webkit-transition: .4s;
|
||||||
|
transition: .4s;
|
||||||
}
|
}
|
||||||
|
|
||||||
input:checked + .tile__ctrl__toggle-slider:before {
|
input:focus+.tile__ctrl__toggle-slider {
|
||||||
-webkit-transform: translateX(23px);
|
box-shadow: 0 0 1px #2196F3;
|
||||||
-ms-transform: translateX(23px);
|
|
||||||
transform: translateX(23px);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__ctrl__toggle-slider.tile__ctrl__round-icon {
|
input:checked+.tile__ctrl__toggle-slider:before {
|
||||||
border-radius: 34px;
|
-webkit-transform: translateX(23px);
|
||||||
margin: 3px 0;
|
-ms-transform: translateX(23px);
|
||||||
padding: 7px 0;
|
transform: translateX(23px);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__ctrl__toggle-slider.tile__ctrl__round-icon:before {
|
.zci--calculator .tile__ctrl__toggle-slider.tile__ctrl__round-icon {
|
||||||
border-radius: 50%;
|
border-radius: 34px;
|
||||||
|
margin: 3px 0;
|
||||||
|
padding: 7px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__ctrl__toggle-slider.tile__ctrl__round-icon:before {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Buttons */
|
/* Buttons */
|
||||||
.tile__calc .tile__ctrl__btn {
|
|
||||||
|
.zci--calculator .tile__calc .tile__ctrl__btn {
|
||||||
width: 25%;
|
width: 25%;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
@ -129,49 +149,46 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
font-size: 1.6em;
|
font-size: 1.6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl--double {
|
.zci--calculator .tile__calc .tile__ctrl--double {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl--ops,
|
.zci--calculator .tile__calc .tile__ctrl--ops,
|
||||||
.tile__calc .tile__tab__sci .tile__ctrl__btn {
|
.zci--calculator .tile__calc .tile__tab__sci .tile__ctrl__btn {
|
||||||
background: #ebebeb;
|
background: #ebebeb;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl--important {
|
.zci--calculator .tile__calc .tile__ctrl--important {
|
||||||
background: #ffd90b;
|
background: #ffd90b;
|
||||||
font-family: "DDG_ProximaNova_UI_0","DDG_ProximaNova_UI_1","DDG_ProximaNova_UI_2","DDG_ProximaNova_UI_3","DDG_ProximaNova_UI_4","DDG_ProximaNova_UI_5","DDG_ProximaNova_UI_6","Proxima Nova","Helvetica Neue","Helvetica","Segoe UI","Nimbus Sans L","Liberation Sans","Open Sans",FreeSans,Arial,sans-serif;
|
font-family: "DDG_ProximaNova_UI_0", "DDG_ProximaNova_UI_1", "DDG_ProximaNova_UI_2", "DDG_ProximaNova_UI_3", "DDG_ProximaNova_UI_4", "DDG_ProximaNova_UI_5", "DDG_ProximaNova_UI_6", "Proxima Nova", "Helvetica Neue", "Helvetica", "Segoe UI", "Nimbus Sans L", "Liberation Sans", "Open Sans", FreeSans, Arial, sans-serif;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
padding-bottom: 0.1em;
|
padding-bottom: 0.1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Ctrl (Button, Toggle) */
|
/* Ctrl (Button, Toggle) */
|
||||||
.tile__calc .tile__ctrl__btn,
|
|
||||||
.tile__calc .tile__ctrl__toggle {
|
.zci--calculator .tile__calc .tile__ctrl__btn,
|
||||||
|
.zci--calculator .tile__calc .tile__ctrl__toggle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl__btn:focus,
|
.zci--calculator .tile__calc .tile__ctrl__btn:focus,
|
||||||
.tile__calc .tile__ctrl__toggle:focus,
|
.zci--calculator .tile__calc .tile__ctrl__toggle:focus,
|
||||||
.tile__calc .tile__ctrl__btn:active,
|
.zci--calculator .tile__calc .tile__ctrl__btn:active,
|
||||||
.tile__calc .tile__ctrl__toggle:active {
|
.zci--calculator .tile__calc .tile__ctrl__toggle:active {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl__btn:focus,
|
|
||||||
.tile__calc .tile__ctrl__toggle:focus {
|
|
||||||
/*box-shadow: inset 0px 0px 5px #a5bdcb; /* TOREVISIT */*/
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-touch .tile__calc .tile__ctrl__btn:hover,
|
.no-touch .tile__calc .tile__ctrl__btn:hover,
|
||||||
.no-touch .tile__calc .tile__ctrl__toggle:hover {
|
.no-touch .tile__calc .tile__ctrl__toggle:hover {
|
||||||
background-color: #dadada;
|
background-color: #dadada;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl__btn:active,
|
.zci--calculator .tile__calc .tile__ctrl__btn:active,
|
||||||
.tile__calc .tile__ctrl__toggle:active {
|
.zci--calculator .tile__calc .tile__ctrl__toggle:active {
|
||||||
background-color: #cacaca;
|
background-color: #cacaca;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -179,12 +196,14 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
background-color: #ddc750;
|
background-color: #ddc750;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__ctrl--important:active {
|
.zci--calculator .tile__calc .tile__ctrl--important:active {
|
||||||
background-color: #c8a900;
|
background-color: #c8a900;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Accessibility skip handle */
|
/* Accessibility skip handle */
|
||||||
.tile__calc .tile__skip-calc {
|
|
||||||
|
.zci--calculator .tile__calc .tile__skip-calc {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -195,14 +214,17 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
margin: 1px;
|
margin: 1px;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__skip-calc:focus {
|
|
||||||
|
.zci--calculator .tile__calc .tile__skip-calc:focus {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Input trap */
|
/* Input trap */
|
||||||
.tile__calc .tile__input-trap {
|
|
||||||
|
.zci--calculator .tile__calc .tile__input-trap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
@ -211,42 +233,54 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
z-index: -9999;
|
z-index: -9999;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Display */
|
/* Display */
|
||||||
.tile__calc .tile__display {
|
|
||||||
|
.zci--calculator .tile__calc .tile__display {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border: 1px solid #c8c8c8;
|
border: 1px solid #c8c8c8;
|
||||||
border-bottom: 0;
|
border-bottom: 0;
|
||||||
padding: 0.8em;
|
padding: 0.8em;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
max-width: 590px; /* Match width of search box */
|
||||||
border-right: 0;
|
border-right: 0;
|
||||||
height: 100px;
|
height: 100px;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: inset -1px -1px 0px #fff, inset 1px 1px 0px #fff;
|
box-shadow: inset -1px -1px 0px #fff, inset 1px 1px 0px #fff;
|
||||||
transition: box-shadow 0.3s;
|
transition: box-shadow 0.3s;
|
||||||
|
/* Text overflow */
|
||||||
|
text-align: right;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__input-trap:focus + .tile__display,
|
.zci--calculator .tile__calc .tile__input-trap:focus+.tile__display,
|
||||||
.tile__calc .tile__display:focus {
|
.zci--calculator .tile__calc .tile__display:focus {
|
||||||
box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7;
|
box-shadow: inset -1px -1px 0px #61a0c7, inset 1px 1px 0px #61a0c7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__display__main,
|
.zci--calculator .tile__calc .tile__display__aside--wrap {
|
||||||
.tile__calc .tile__display__aside {
|
position: relative;
|
||||||
text-align: right;
|
overflow: hidden;
|
||||||
|
height: 1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__calc .tile__display__main,
|
||||||
|
.zci--calculator .tile__calc .tile__display__aside {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__display__aside {
|
.zci--calculator .tile__calc .tile__display__aside {
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
letter-spacing: 0.025em;
|
letter-spacing: 0.025em;
|
||||||
color: #909090;
|
color: #909090;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
margin-top: -0.2em;
|
position: absolute;
|
||||||
height: 1em;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__display__main {
|
.zci--calculator .tile__calc .tile__display__main {
|
||||||
color: #101010;
|
color: #101010;
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
font-size: 2.5em;
|
font-size: 2.5em;
|
||||||
|
@ -257,53 +291,36 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
outline: 0;
|
outline: 0;
|
||||||
|
float: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Display EG */
|
.zci--calculator .tile__calc .tile__display__main .pseudoBrace {
|
||||||
.tile__calc .tile__display__main .tile__calc__eg {
|
color: #d3d3d3;
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 50%;
|
|
||||||
display: block;
|
|
||||||
height: 2px;
|
|
||||||
width: 2px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
background: #ffe1e1;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 0.3em;
|
|
||||||
letter-spacing: initial;
|
|
||||||
transition: 0.5s all 0.2s;
|
|
||||||
}
|
|
||||||
.tile__calc .tile__display__main:hover .tile__calc__eg {
|
|
||||||
transition-delay: 3.14s;
|
|
||||||
height: 1.6em;
|
|
||||||
width: 7em;
|
|
||||||
top: 0;
|
|
||||||
padding: 0.2em 0.3em;
|
|
||||||
background: #f07e7e;
|
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Formula presentation: Big */
|
/* Formula presentation: Big */
|
||||||
.tile__calc .tile__display__main sup {
|
|
||||||
|
.zci--calculator .tile__calc .tile__display__main sup {
|
||||||
top: -0.8em;
|
top: -0.8em;
|
||||||
left: 0.1em;
|
left: 0.1em;
|
||||||
padding-right: 0.2em;
|
padding-right: 0.2em;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__display__main .formula__placeholder {
|
|
||||||
|
.zci--calculator .tile__calc .tile__display__main .formula__placeholder {
|
||||||
color: #909090;
|
color: #909090;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Formula presentation: Small */
|
/* Formula presentation: Small */
|
||||||
.tile__calc .tile__display__aside sup {
|
|
||||||
|
.zci--calculator .tile__calc .tile__display__aside sup {
|
||||||
top: -0.8em;
|
top: -0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Calc display options */
|
/* Calc display options */
|
||||||
.tile__calc .tile__options {
|
|
||||||
|
.zci--calculator .tile__calc .tile__options {
|
||||||
bottom: 0.4em;
|
bottom: 0.4em;
|
||||||
padding: 0 0.8em;
|
padding: 0 0.8em;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -312,8 +329,15 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
display: table;
|
display: table;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
-webkit-touch-callout: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__option {
|
|
||||||
|
.zci--calculator .tile__calc .tile__option {
|
||||||
transition: width 0.5s;
|
transition: width 0.5s;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
width: auto;
|
width: auto;
|
||||||
|
@ -324,35 +348,43 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
letter-spacing: 0.03em;
|
letter-spacing: 0.03em;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__option span {
|
|
||||||
cursor: pointer;
|
.tile__calc .tile__option span {
|
||||||
padding: 0.2em 0.5em;
|
cursor: pointer;
|
||||||
margin: -0.5em;
|
padding: 0.2em 0.5em;
|
||||||
}
|
margin: -0.5em;
|
||||||
.tile__calc .tile__option--active {
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__calc .tile__option--active {
|
||||||
color: #54a3bb;
|
color: #54a3bb;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__option--active span {
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tile__calc .tile__option__sci {
|
.tile__calc .tile__option--active span {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__calc .tile__option__sci {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__option__basic {
|
|
||||||
|
.zci--calculator .tile__calc .tile__option__basic {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__option__history {
|
|
||||||
|
.zci--calculator .tile__calc .tile__option__history {
|
||||||
display: none;
|
display: none;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__option:hover {
|
|
||||||
|
.zci--calculator .tile__calc .tile__option:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* History tab */
|
/* History tab */
|
||||||
.tile__calc .tile__history {
|
|
||||||
|
.zci--calculator .tile__calc .tile__history {
|
||||||
width: 30%;
|
width: 30%;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -366,12 +398,15 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__history--hidden {
|
|
||||||
|
.zci--calculator .tile__calc .tile__history--hidden {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* History item */
|
/* History item */
|
||||||
.tile__calc .tile__past-calc {
|
|
||||||
|
.zci--calculator .tile__calc .tile__past-calc {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 0.4em 0.6em 0.4em;
|
padding: 0.4em 0.6em 0.4em;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
@ -383,210 +418,213 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
transition: 0.5s all;
|
transition: 0.5s all;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__past-calc.tile__past-calc--hidden {
|
|
||||||
|
.zci--calculator .tile__calc .tile__past-calc.tile__past-calc--hidden {
|
||||||
height: 0px;
|
height: 0px;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/******************/
|
/******************/
|
||||||
/* TEXT SIZE ADJS */
|
/* TEXT SIZE ADJS */
|
||||||
/******************/
|
/******************/
|
||||||
|
|
||||||
|
|
||||||
/* Largest */
|
/* Largest */
|
||||||
|
|
||||||
.set-text--largest .tile__calc .tile__display__main {
|
.set-text--largest .tile__calc .tile__display__main {
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
|
|
||||||
.set-text--largest .tile__calc .tile__past-calc {
|
.set-text--largest .tile__calc .tile__past-calc {
|
||||||
padding: 0.2em 0.4em;
|
padding: 0.2em 0.4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.set-text--largest .tile__calc .zci--calculator .zci__main--detail {
|
.set-text--largest .tile__calc .zci--calculator .zci__main--detail {
|
||||||
max-width: 61.9em;
|
max-width: 61.9em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.set-text--largest .tile__calc .tile__past-result {
|
.set-text--largest .tile__calc .tile__past-result {
|
||||||
margin-top: -0.2em;
|
margin-top: -0.2em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tile__calc .tile__past-calc:hover {
|
.zci--calculator .tile__calc .tile__past-calc:hover {
|
||||||
background: #eee;
|
background: #eee;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__past-formula {
|
|
||||||
|
.zci--calculator .tile__calc .tile__past-formula {
|
||||||
display: block;
|
display: block;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
font-weight: 100;
|
font-weight: 100;
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__past-result {
|
|
||||||
|
.zci--calculator .tile__calc .tile__past-result {
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #191919;
|
color: #191919;
|
||||||
font-size: 1.2em;
|
font-size: 1.2em;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Big Widescreens >= 1200px (Default) */
|
/* Big Widescreens >= 1200px (Default) */
|
||||||
|
|
||||||
.zci--calculator .zci__main {
|
.zci--calculator .zci__main {
|
||||||
max-width: 60em;
|
max-width: 60em;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/*****************/
|
/*****************/
|
||||||
/* MEDIA QUERIES */
|
/* MEDIA QUERIES */
|
||||||
/*****************/
|
/*****************/
|
||||||
|
|
||||||
/* Monitors <= 1200 */
|
|
||||||
@media only screen and (min-width: 75em) {
|
|
||||||
.zci--calculator .zci__main {
|
|
||||||
padding-left: 90px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Monitors with MQs >= 960 */
|
/* Monitors with MQs >= 960 */
|
||||||
|
|
||||||
@media only screen and (min-width: 60em) {
|
@media only screen and (min-width: 60em) {
|
||||||
.tile__calc .tile__options {
|
.zci--calculator .tile__calc .tile__options {
|
||||||
bottom: -1em;
|
bottom: -1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Tablets <= 960 */
|
/* Tablets <= 960 */
|
||||||
|
|
||||||
@media only screen and (max-width: 60em) {
|
@media only screen and (max-width: 60em) {
|
||||||
/* show only one calc tab */
|
/* show only one calc tab */
|
||||||
.tile__calc .tile__tabs {
|
.zci--calculator .tile__calc .tile__tabs {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__calc__col {
|
.zci--calculator .tile__calc .tile__calc__col {
|
||||||
width: 310px;
|
width: 295px;
|
||||||
}
|
}
|
||||||
/* default: basic tab */
|
/* default: basic tab */
|
||||||
.tile__calc .tile__tabs .tile__tab__sci /*:first-child*/ {
|
.zci--calculator .tile__calc .tile__tabs .tile__tab__sci {
|
||||||
margin-left: -310px;
|
margin-left: -295px;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__display {
|
.zci--calculator .tile__calc .tile__display {
|
||||||
/*max-width: 21.6em;*/
|
max-width: 295px;
|
||||||
max-width: 310px;
|
|
||||||
}
|
}
|
||||||
.zci--calculator .zci__main--detail {
|
.zci--calculator .zci__main--detail {
|
||||||
max-width: 43.8em;
|
max-width: 43.8em;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__history {
|
.zci--calculator .tile__calc .tile__history {
|
||||||
|
max-width: 295px;
|
||||||
transition: width 0.6s;
|
transition: width 0.6s;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
/* show 3 tab options */
|
||||||
/* show 3 tab options
|
.zci--calculator .tile__calc .tile__display__main {
|
||||||
.tile__calc .tile__display__main {
|
|
||||||
margin-top: -0.2em;
|
margin-top: -0.2em;
|
||||||
} */
|
|
||||||
.tile__calc .tile__display .tile__options {
|
|
||||||
/*margin-top: 0em;*/
|
|
||||||
}
|
}
|
||||||
.tile__calc .tile__display .tile__option {
|
.zci--calculator .tile__calc .tile__display .tile__options {
|
||||||
|
margin-top: 0em;
|
||||||
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__display .tile__option {
|
||||||
float: left;
|
float: left;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__display .tile__option__sci {
|
.zci--calculator .tile__calc .tile__display .tile__option__sci {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__display .tile__option__basic {
|
.zci--calculator .tile__calc .tile__display .tile__option__basic {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Mobiles <= 740 */
|
/* Mobiles <= 740 */
|
||||||
@media only screen and (max-width: 46.25em) {
|
|
||||||
.tile__calc .tile__history {
|
@media only screen and (max-width: 43.8em) {
|
||||||
width: 260px;
|
|
||||||
|
.zci--calculator .tile__calc .tile__display {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__calc .tile__calc__col {
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.zci--calculator .tile__calc .tile__history {
|
||||||
|
max-width: 260px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Custom <= 660 */
|
/* Custom <= 660 */
|
||||||
/*@media only screen and (max-width: 42.8em) {*/
|
|
||||||
@media only screen and (max-width: 37.4em) {
|
@media only screen and (max-width: 37.4em) {
|
||||||
.tile--calculator {
|
.tile--calculator {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc {
|
||||||
.tile__calc {
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
width: 310px;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__display {
|
||||||
.tile__calc .tile__display {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: none;
|
max-width: none;
|
||||||
border-right: 1px solid #d8d8d8;
|
border-right: 1px solid #d8d8d8;
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__tabs {
|
||||||
.tile__calc .tile__tabs {
|
width: 300%;
|
||||||
width: 930px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
left: -310px; /* default: basic tab */
|
left: -100%;
|
||||||
|
/* default: basic tab */
|
||||||
transition: left 0.7s;
|
transition: left 0.7s;
|
||||||
-webkit-touch-callout: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
-khtml-user-select: none;
|
|
||||||
-moz-user-select: none;
|
|
||||||
-ms-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__tabs.tile__tabs--single-basic {
|
||||||
.tile__calc .tile__tabs.tile__tabs--single-basic {
|
left: -100%;
|
||||||
left: -310px;
|
|
||||||
}
|
}
|
||||||
.tile__calc .tile__tabs.tile__tabs--single-sci {
|
.zci--calculator .tile__calc .tile__tabs.tile__tabs--single-sci {
|
||||||
left: 0;
|
left: 0;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__tabs.tile__tabs--single-history {
|
.zci--calculator .tile__calc .tile__tabs.tile__tabs--single-history {
|
||||||
left: -620px;
|
left: -200%;
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__calc__col {
|
||||||
.tile__calc .tile__calc__col {
|
width: 33.33%;
|
||||||
|
max-width: 33.33%;
|
||||||
border-right: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__tabs .tile__tab__sci:first-child {
|
||||||
.tile__calc .tile__tabs .tile__tab__sci:first-child {
|
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
|
.zci--calculator .tile__calc .tile__history {
|
||||||
.tile__calc .tile__history {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
width: 310px;
|
width: 100%;
|
||||||
height: 251px;
|
height: 251px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 3 tab options */
|
/* 3 tab options */
|
||||||
/*
|
.zci--calculator .tile__calc .tile__display .tile__option {
|
||||||
.tile__calc .tile__display .tile__option {
|
|
||||||
width: 33%;
|
width: 33%;
|
||||||
}
|
}
|
||||||
.tile__calc .tile__display .tile__option__basic {
|
.zci--calculator .tile__calc .tile__display .tile__option__basic {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
*/
|
.zci--calculator .tile__calc .tile__display .tile__option__history {
|
||||||
.tile__calc .tile__display .tile__option__history {
|
|
||||||
display: table-cell;
|
display: table-cell;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-mobile .zci--calculator .zci__body {
|
.is-mobile .zci--calculator .zci__body {
|
||||||
padding-right: 0px;
|
padding-left: 2px;
|
||||||
margin-left: -4px;
|
padding-right: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Custom >= 660 & Tablets <= 960 */
|
/* Custom >= 660 & Tablets <= 960 */
|
||||||
|
|
||||||
@media only screen and (min-width: 37.4em) and (max-width: 60em) {
|
@media only screen and (min-width: 37.4em) and (max-width: 60em) {
|
||||||
.tile__tabs.tile__tabs--single-sci .tile__tab__basic {
|
.zci--calculator .tile__tabs.tile__tabs--single-sci .tile__tab__basic {
|
||||||
width: 0;
|
width: 0;
|
||||||
}
|
}
|
||||||
.tile__tabs.tile__tabs--single-sci .tile__tab__sci {
|
.zci--calculator .tile__tabs.tile__tabs--single-sci .tile__tab__sci {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
.tile__tabs.tile__tabs--single-basic .tile__tab__basic {
|
.zci--calculator .tile__tabs.tile__tabs--single-basic .tile__tab__basic {}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media only screen and (max-width: 21em) {
|
@media only screen and (max-width: 21em) {
|
||||||
|
@ -597,27 +635,12 @@ input:checked + .tile__ctrl__toggle-slider:before {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* Small mobiles <= 310 */
|
/* Small mobiles <= 310 */
|
||||||
|
|
||||||
@media only screen and (max-width: 19.375em) {
|
@media only screen and (max-width: 19.375em) {
|
||||||
.tile__calc .tile__history {
|
.zci--calculator .tile__calc .tile__history {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* pete's hacks */
|
|
||||||
|
|
||||||
/* allows the overflow */
|
|
||||||
#calculatorscreen {
|
|
||||||
text-align:right;
|
|
||||||
overflow:hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#display {
|
|
||||||
float:right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pseudoBrace {
|
|
||||||
color: #d3d3d3;
|
|
||||||
}
|
|
||||||
|
|
|
@ -8,7 +8,8 @@ DDH.calculator = DDH.calculator || {};
|
||||||
var FUNCTIONS = ["log(", "ln(", "tan(", "cos(", "sin("];
|
var FUNCTIONS = ["log(", "ln(", "tan(", "cos(", "sin("];
|
||||||
var MISC_FUNCTIONS = ["EE"];
|
var MISC_FUNCTIONS = ["EE"];
|
||||||
var OPERANDS = ["+", "-", "×", "÷"];
|
var OPERANDS = ["+", "-", "×", "÷"];
|
||||||
|
var POSTFIX = ["+", "-", "×", "÷", "%", "EE", "!", "<sup>2</sup>", "<sup>3</sup>", "<sup>□</sup>"]
|
||||||
|
|
||||||
// global exponent constants
|
// global exponent constants
|
||||||
var OPEN_SUP = "<sup>";
|
var OPEN_SUP = "<sup>";
|
||||||
var CLOSE_SUP = "</sup>";
|
var CLOSE_SUP = "</sup>";
|
||||||
|
@ -17,7 +18,6 @@ DDH.calculator = DDH.calculator || {};
|
||||||
// global variables
|
// global variables
|
||||||
var buttons, cButton;
|
var buttons, cButton;
|
||||||
var evaluatedExpression;
|
var evaluatedExpression;
|
||||||
var evalmath;
|
|
||||||
var usingState, evaluated;
|
var usingState, evaluated;
|
||||||
var isExponential;
|
var isExponential;
|
||||||
var yRootState = false;
|
var yRootState = false;
|
||||||
|
@ -50,6 +50,7 @@ DDH.calculator = DDH.calculator || {};
|
||||||
106: "×",
|
106: "×",
|
||||||
107: "+",
|
107: "+",
|
||||||
109: "-",
|
109: "-",
|
||||||
|
110: ".",
|
||||||
111: "÷",
|
111: "÷",
|
||||||
187: "=",
|
187: "=",
|
||||||
191: "÷",
|
191: "÷",
|
||||||
|
@ -94,11 +95,11 @@ DDH.calculator = DDH.calculator || {};
|
||||||
* 7. tries to recover from user inputted faults (that make sense)
|
* 7. tries to recover from user inputted faults (that make sense)
|
||||||
*/
|
*/
|
||||||
function normalizeExpression( expression ) {
|
function normalizeExpression( expression ) {
|
||||||
|
var expression = expression
|
||||||
|
|
||||||
return expression
|
|
||||||
// 1. handles +/- percentages
|
// 1. handles +/- percentages
|
||||||
.replace(/(\+) (\d+(\.\d{1,2})?)%/g, PercentageNormalizer.addPercentage)
|
.replace(/(\+) (\d+(\.\d{1,2})?)%/g, PercentageNormalizer.addPercentage)
|
||||||
.replace(/(\d+(\.\d{1,2})?) \- (\d+(\.\d{1,2})?)%/g, PercentageNormalizer.subtractPercentage)
|
.replace(/(\d+(\.\d{1,2})?) - (\d+(\.\d{1,2})?)%/g, PercentageNormalizer.subtractPercentage)
|
||||||
.replace(/(\d+(\.\d{1,2})?)%/g, PercentageNormalizer.soloPercentage)
|
.replace(/(\d+(\.\d{1,2})?)%/g, PercentageNormalizer.soloPercentage)
|
||||||
|
|
||||||
// 2. handles basic arithmetic
|
// 2. handles basic arithmetic
|
||||||
|
@ -117,16 +118,16 @@ DDH.calculator = DDH.calculator || {};
|
||||||
.replace(/(EE) (\d+(\.\d{1,})?)/g, RewriteExpression.ee)
|
.replace(/(EE) (\d+(\.\d{1,})?)/g, RewriteExpression.ee)
|
||||||
|
|
||||||
// 5. handles scientific calculation functions
|
// 5. handles scientific calculation functions
|
||||||
.replace(/\(?(\d+(\.\d{1,})?)\)?!/, RewriteExpression.factorial)
|
|
||||||
.replace(/log\((\d+(\.\d{1,})?)\)/, RewriteExpression.log10)
|
.replace(/log\((\d+(\.\d{1,})?)\)/, RewriteExpression.log10)
|
||||||
.replace(/ln\(/g, 'log(')
|
.replace(/ln\(/g, 'log(')
|
||||||
.replace(/(sin|cos|tan)\((\d+(\.\d+)?|πe)\)/g, RewriteExpression.trig)
|
.replace(/(sin|cos|tan)\((.+)\)/g, RewriteExpression.trig)
|
||||||
|
|
||||||
// 6. handles constants
|
// 6. handles constants
|
||||||
.replace(/π/g, ' pi ')
|
.replace(/π/g, '(pi)')
|
||||||
|
|
||||||
// 7. last chance recovers
|
// 7. last chance recovers
|
||||||
.replace(/<sup>□<\/sup>/g, '')
|
.replace(/<sup>□<\/sup>/g, '')
|
||||||
|
return expression;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -191,6 +192,12 @@ DDH.calculator = DDH.calculator || {};
|
||||||
// isNan("23") --> false, isNan("NaN") --> true
|
// isNan("23") --> false, isNan("NaN") --> true
|
||||||
isNan: function( total ) {
|
isNan: function( total ) {
|
||||||
return total === NaN || total === "NaN";
|
return total === NaN || total === "NaN";
|
||||||
|
},
|
||||||
|
|
||||||
|
// checks if an input element is in the POSTFIX constant array
|
||||||
|
// isPostfix("!") --> true, isPostfix("dax") --> false
|
||||||
|
isPostfix: function( element ) {
|
||||||
|
return $.inArray(element, POSTFIX) >= 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -210,13 +217,7 @@ DDH.calculator = DDH.calculator || {};
|
||||||
|
|
||||||
// exponent: rewrites the exponent(s) in given expression
|
// exponent: rewrites the exponent(s) in given expression
|
||||||
exponent: function( _expression, number ) {
|
exponent: function( _expression, number ) {
|
||||||
return "^" + number;
|
return "^(" + number + ")";
|
||||||
},
|
|
||||||
|
|
||||||
// factorial: rewrites a factorial expression to take a number (not BigNum)
|
|
||||||
// factorial("10.5!") --> `number("10.5")!`
|
|
||||||
factorial: function( _expression, number ) {
|
|
||||||
return "number(" + number + ")!";
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// log10: rewrites log (base 10) function(s) in the expression
|
// log10: rewrites log (base 10) function(s) in the expression
|
||||||
|
@ -231,11 +232,12 @@ DDH.calculator = DDH.calculator || {};
|
||||||
|
|
||||||
// trig: rewrites trig functions to handle the different outputs (RAD | DEG)
|
// trig: rewrites trig functions to handle the different outputs (RAD | DEG)
|
||||||
trig: function( _expression, func, number ) {
|
trig: function( _expression, func, number ) {
|
||||||
|
var unit = ''
|
||||||
if($('input#tile__ctrl__toggle-checkbox').is(':checked')) {
|
if($('input#tile__ctrl__toggle-checkbox').is(':checked')) {
|
||||||
return "round(" + func + "(" + number + " deg), 11)";
|
unit = ' deg';
|
||||||
} else {
|
|
||||||
return "round(" + func + "(" + number + "), 11)";
|
|
||||||
}
|
}
|
||||||
|
var wrappedNum = "(" + number + ")";
|
||||||
|
return "round(" + func + "(" + wrappedNum + unit + "), 11)";
|
||||||
},
|
},
|
||||||
|
|
||||||
// yRoot: rewrites yth root of x expressions
|
// yRoot: rewrites yth root of x expressions
|
||||||
|
@ -340,7 +342,7 @@ DDH.calculator = DDH.calculator || {};
|
||||||
* bracket is instanciated, a pseudo closing place is put into the display.
|
* bracket is instanciated, a pseudo closing place is put into the display.
|
||||||
* There are cases where the user doesn't bother to close the bracket themselves.
|
* There are cases where the user doesn't bother to close the bracket themselves.
|
||||||
* This object also provides expression parsing to recover from such instances.
|
* This object also provides expression parsing to recover from such instances.
|
||||||
*
|
*
|
||||||
* TODO: Support parens in an exponential state
|
* TODO: Support parens in an exponential state
|
||||||
*/
|
*/
|
||||||
var ParenManager = {
|
var ParenManager = {
|
||||||
|
@ -449,42 +451,36 @@ DDH.calculator = DDH.calculator || {};
|
||||||
ParenManager.reset();
|
ParenManager.reset();
|
||||||
}
|
}
|
||||||
|
|
||||||
// a hack for the BigNumber factorial issue
|
|
||||||
// If the expression contains a number bigger than 1,000,000! then bail
|
|
||||||
if(/([1-9]\d{6,}).?!/.test(display.value)) {
|
|
||||||
display.value = "Infinity";
|
|
||||||
}
|
|
||||||
|
|
||||||
isExponential = false;
|
isExponential = false;
|
||||||
|
|
||||||
try {
|
try {
|
||||||
var total = evalmath.eval(
|
var total = math.eval(
|
||||||
normalizeExpression(display.value)
|
normalizeExpression(display.value)
|
||||||
).toString()
|
).toString()
|
||||||
|
|
||||||
} catch(err) {
|
} catch(err) {
|
||||||
// console.log(err);
|
|
||||||
display.value = "Error";
|
display.value = "Error";
|
||||||
ExpressionParser.setExpression();
|
ExpressionParser.setExpression();
|
||||||
setCButtonState("C");
|
setCButtonState("C");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(Utils.isInfinite(total)) {
|
if(Utils.isNan(total)) {
|
||||||
display.innerHTML = "Infinity";
|
|
||||||
display.value = "";
|
|
||||||
setCButtonState("C");
|
|
||||||
return false;
|
|
||||||
} else if(Utils.isNan(total)) {
|
|
||||||
display.value = "Error";
|
display.value = "Error";
|
||||||
setCButtonState("C");
|
setCButtonState("C");
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
ExpressionParser.setExpression(display.value);
|
if(Utils.isInfinite(total)) {
|
||||||
Ledger.addToHistory(display.value, DDG.commifyNumber(total));
|
ExpressionParser.setExpression(display.value);
|
||||||
|
Ledger.addToHistory(display.value, DDG.commifyNumber(total));
|
||||||
|
display.value = "Infinity";
|
||||||
|
} else {
|
||||||
|
ExpressionParser.setExpression(display.value);
|
||||||
|
Ledger.addToHistory(display.value, DDG.commifyNumber(total));
|
||||||
|
display.value = total;
|
||||||
|
}
|
||||||
|
|
||||||
display.value = total;
|
|
||||||
evaluated = true;
|
evaluated = true;
|
||||||
setCButtonState("C");
|
setCButtonState("C");
|
||||||
yRootState = false;
|
yRootState = false;
|
||||||
|
@ -492,16 +488,16 @@ DDH.calculator = DDH.calculator || {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Clear
|
* Clear
|
||||||
*
|
*
|
||||||
* This fat function handles backspacing through the `display.value`. `display.value`
|
* This fat function handles backspacing through the `display.value`. `display.value`
|
||||||
* is the *string* representation of the expression that is used throughout the calculator.
|
* is the *string* representation of the expression that is used throughout the calculator.
|
||||||
* It needs to take into consideration the key / button pressed and the state of the
|
* It needs to take into consideration the key / button pressed and the state of the
|
||||||
* calculator.
|
* calculator.
|
||||||
*
|
*
|
||||||
* A calculator has a lot of edge cases, many of which are hard to account for in
|
* A calculator has a lot of edge cases, many of which are hard to account for in
|
||||||
* advance. Many of these hueristics were developed through trail and error and
|
* advance. Many of these hueristics were developed through trail and error and
|
||||||
* logical deduction.
|
* logical deduction.
|
||||||
*
|
*
|
||||||
* TODO: Refactor nested ifs. What is the best way to do this and handle edge cases?
|
* TODO: Refactor nested ifs. What is the best way to do this and handle edge cases?
|
||||||
*/
|
*/
|
||||||
function clear( element ) {
|
function clear( element ) {
|
||||||
|
@ -519,7 +515,7 @@ DDH.calculator = DDH.calculator || {};
|
||||||
ExpressionParser.setExpression();
|
ExpressionParser.setExpression();
|
||||||
setCButtonState("C");
|
setCButtonState("C");
|
||||||
ParenManager.reset();
|
ParenManager.reset();
|
||||||
|
|
||||||
// CE clears one step at a time base on the state and the length of expression
|
// CE clears one step at a time base on the state and the length of expression
|
||||||
} else if(element === "CE" ) {
|
} else if(element === "CE" ) {
|
||||||
ExpressionParser.setExpression();
|
ExpressionParser.setExpression();
|
||||||
|
@ -528,32 +524,40 @@ DDH.calculator = DDH.calculator || {};
|
||||||
if (ExpressionParser.getExpressionLength() > 1 && ( Utils.isMathFunction(display.value.substr(-4, 4)) || Utils.isMathFunction(display.value.substr(-3, 3)))) {
|
if (ExpressionParser.getExpressionLength() > 1 && ( Utils.isMathFunction(display.value.substr(-4, 4)) || Utils.isMathFunction(display.value.substr(-3, 3)))) {
|
||||||
ExpressionParser.backspace(4);
|
ExpressionParser.backspace(4);
|
||||||
ParenManager.decrementTotal();
|
ParenManager.decrementTotal();
|
||||||
|
|
||||||
// if last element is an open paren, backspace 1
|
// if last element is an open paren, backspace 1
|
||||||
} else if(display.value.substr(-1, 1) === "(") {
|
} else if(display.value.substr(-1, 1) === "(") {
|
||||||
ExpressionParser.backspace(1);
|
ExpressionParser.backspace(1);
|
||||||
ParenManager.decrementTotal();
|
ParenManager.decrementTotal();
|
||||||
|
|
||||||
|
// if there is an operand in the second last character in expression, backspace 3
|
||||||
|
} else if (ExpressionParser.getExpressionLength() > 1 && Utils.isOperand(display.value.substr(-2, 2)) ) {
|
||||||
|
ExpressionParser.backspace(3);
|
||||||
|
|
||||||
|
// if there is an operand in the last character in expression, backspace 2
|
||||||
|
} else if (ExpressionParser.getExpressionLength() > 1 && Utils.isOperand(display.value.substr(-1, 1)) ) {
|
||||||
|
ExpressionParser.backspace(2);
|
||||||
|
|
||||||
// if last element is a closed paren, backspace 1
|
// if last element is a closed paren, backspace 1
|
||||||
} else if(display.value.substr(-1, 1) === ")") {
|
} else if(display.value.substr(-1, 1) === ")") {
|
||||||
ExpressionParser.backspace(1);
|
ExpressionParser.backspace(1);
|
||||||
ParenManager.incrementTotal();
|
ParenManager.incrementTotal();
|
||||||
|
|
||||||
// Backspace 2 if the last 2 characters are a constant (pi, e)
|
// Backspace 2 if the last 2 characters are a constant (pi, e)
|
||||||
} else if(ExpressionParser.getExpressionLength() > 1 && Utils.isConstant(display.value.substr(-2, 2).trim()) ) {
|
} else if(ExpressionParser.getExpressionLength() > 1 && Utils.isConstant(display.value.substr(-2, 2).trim()) ) {
|
||||||
ExpressionParser.backspace(2);
|
ExpressionParser.backspace(2);
|
||||||
|
|
||||||
// Backspace 3 if last characters are `EE `
|
// Backspace 3 if last characters are `EE `
|
||||||
} else if(ExpressionParser.getExpressionLength() > 1 && display.value.substr(-3, 3) === "EE ") {
|
} else if(ExpressionParser.getExpressionLength() > 1 && display.value.substr(-3, 3) === "EE ") {
|
||||||
ExpressionParser.backspace(3);
|
ExpressionParser.backspace(3);
|
||||||
|
|
||||||
// If last 12 characters are `<sup>□</sup>`, backspace 12
|
// If last 12 characters are `<sup>□</sup>`, backspace 12
|
||||||
} else if(ExpressionParser.getExpressionLength() > 1 && display.value.substr(-12, 12) === OPEN_CLOSE_SUP) {
|
} else if(ExpressionParser.getExpressionLength() > 1 && display.value.substr(-12, 12) === OPEN_CLOSE_SUP) {
|
||||||
ExpressionParser.backspace(12);
|
ExpressionParser.backspace(12);
|
||||||
isExponential = false;
|
isExponential = false;
|
||||||
|
|
||||||
// ~~ nth square root ~~
|
// ~~ nth square root ~~
|
||||||
// if nth square root with no digits, pop last element, replace with nothin and re-append popped element
|
// if nth square root with no digits, pop last element, replace with nothin and re-append popped element
|
||||||
} else if(/<sup>□<\/sup>√\d+$/.test(display.value)) {
|
} else if(/<sup>□<\/sup>√\d+$/.test(display.value)) {
|
||||||
var expression = display.value.split(" ");
|
var expression = display.value.split(" ");
|
||||||
var last_element = expression.pop();
|
var last_element = expression.pop();
|
||||||
|
@ -561,7 +565,7 @@ DDH.calculator = DDH.calculator || {};
|
||||||
expression.push(last_element);
|
expression.push(last_element);
|
||||||
display.value = expression.join(" ");
|
display.value = expression.join(" ");
|
||||||
yRootState = false;
|
yRootState = false;
|
||||||
|
|
||||||
// if nth square root with 1 digit, pop last element, replace with `<sup>□</sup>`, reappend popped element
|
// if nth square root with 1 digit, pop last element, replace with `<sup>□</sup>`, reappend popped element
|
||||||
} else if(/<sup>\d{1}<\/sup>√\d+$/.test(display.value)) {
|
} else if(/<sup>\d{1}<\/sup>√\d+$/.test(display.value)) {
|
||||||
var expression = display.value.split(" ");
|
var expression = display.value.split(" ");
|
||||||
|
@ -569,33 +573,33 @@ DDH.calculator = DDH.calculator || {};
|
||||||
last_element = last_element.replace(/<sup>\d{1}<\/sup>/g, OPEN_CLOSE_SUP);
|
last_element = last_element.replace(/<sup>\d{1}<\/sup>/g, OPEN_CLOSE_SUP);
|
||||||
expression.push(last_element);
|
expression.push(last_element);
|
||||||
display.value = expression.join(" ");
|
display.value = expression.join(" ");
|
||||||
|
|
||||||
// if ends with `<sup>□</sup>`, backspace 12
|
// if ends with `<sup>□</sup>`, backspace 12
|
||||||
} else if(/<sup>\d{1}<\/sup>$/.test(display.value)) {
|
} else if(/<sup>\d{1}<\/sup>$/.test(display.value)) {
|
||||||
ExpressionParser.backspace(12);
|
ExpressionParser.backspace(12);
|
||||||
display.value = display.value + OPEN_CLOSE_SUP;
|
display.value = display.value + OPEN_CLOSE_SUP;
|
||||||
|
|
||||||
// if `<sup></sup>` has numbers, backspace through the last number and reappend `</sup>`
|
// if `<sup></sup>` has numbers, backspace through the last number and reappend `</sup>`
|
||||||
} else if(/<sup>\d+<\/sup>$/.test(display.value)) {
|
} else if(/<sup>\d+<\/sup>$/.test(display.value)) {
|
||||||
ExpressionParser.backspace(7);
|
ExpressionParser.backspace(7);
|
||||||
display.value = display.value + CLOSE_SUP;
|
display.value = display.value + CLOSE_SUP;
|
||||||
|
|
||||||
// backspace 2 if last char is ` ` and 2nd last char is numeric
|
// backspace 2 if last char is ` ` and 2nd last char is numeric
|
||||||
} else if(ExpressionParser.getExpressionLength() > 1 && (display.value[display.value.length-1] === " " && Utils.isNumber(display.value[display.value.length-2]))) {
|
} else if(ExpressionParser.getExpressionLength() > 1 && (display.value[display.value.length-1] === " " && Utils.isNumber(display.value[display.value.length-2]))) {
|
||||||
ExpressionParser.backspace(2);
|
ExpressionParser.backspace(2);
|
||||||
|
|
||||||
// backspace 1 if 2nd last char is not equal to ` `
|
// backspace 1 if 2nd last char is not equal to ` `
|
||||||
} else if (ExpressionParser.getExpressionLength() > 1 && display.value[display.value.length-2] !== " ") {
|
} else if (ExpressionParser.getExpressionLength() > 1 && display.value[display.value.length-2] !== " ") {
|
||||||
ExpressionParser.backspace(1);
|
ExpressionParser.backspace(1);
|
||||||
|
|
||||||
// backspace 2 if 2nd last char is ` ` and 3rd last is an operand (+, -, x, etc)
|
// backspace 2 if 2nd last char is ` ` and 3rd last is an operand (+, -, x, etc)
|
||||||
} else if(ExpressionParser.getExpressionLength() > 1 && (display.value[display.value.length-2] === " " && Utils.isOperand(display.value[display.value.length-3]))) {
|
} else if(ExpressionParser.getExpressionLength() > 1 && (display.value[display.value.length-2] === " " && Utils.isOperand(display.value[display.value.length-3]))) {
|
||||||
ExpressionParser.backspace(2);
|
ExpressionParser.backspace(2);
|
||||||
|
|
||||||
// if 2nd last char is ` `
|
// if 2nd last char is ` `
|
||||||
} else if(ExpressionParser.getExpressionLength() > 1 && display.value[display.value.length-2] === " ") {
|
} else if(ExpressionParser.getExpressionLength() > 1 && display.value[display.value.length-2] === " ") {
|
||||||
ExpressionParser.backspace(1);
|
ExpressionParser.backspace(1);
|
||||||
|
|
||||||
// if expression length is 1, then reset the display value and expression, and set cButton to state `C`
|
// if expression length is 1, then reset the display value and expression, and set cButton to state `C`
|
||||||
} else if (ExpressionParser.getExpressionLength() === 1) {
|
} else if (ExpressionParser.getExpressionLength() === 1) {
|
||||||
display.value = "";
|
display.value = "";
|
||||||
|
@ -611,7 +615,8 @@ DDH.calculator = DDH.calculator || {};
|
||||||
// if all else fails, back space 1
|
// if all else fails, back space 1
|
||||||
ExpressionParser.backspace(1);
|
ExpressionParser.backspace(1);
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* ~~ THE MAIN ENTRY POINT ~~
|
* ~~ THE MAIN ENTRY POINT ~~
|
||||||
|
@ -630,12 +635,14 @@ DDH.calculator = DDH.calculator || {};
|
||||||
}
|
}
|
||||||
|
|
||||||
// handles the display like a normal calculator
|
// handles the display like a normal calculator
|
||||||
if(evaluated === true && Utils.isNumber(element) ) {
|
// If a new number / function / clear, bail and start new calculation
|
||||||
|
if(evaluated === true && (Utils.isNumber(element) || Utils.isMathFunction(element) || Utils.isConstant(element) || Utils.isClear(element)) ) {
|
||||||
ExpressionParser.setExpression("Ans: " + display.value);
|
ExpressionParser.setExpression("Ans: " + display.value);
|
||||||
display.value = "";
|
display.value = "";
|
||||||
usingState = false;
|
usingState = false;
|
||||||
evaluated = false;
|
evaluated = false;
|
||||||
} else if(evaluated === true && (!Utils.isOperand(element) && !Utils.isClear(element) && !Utils.isMiscMathFunction(element) && element !== "<sup>□</sup>" && element !== "!")) {
|
// if evaluated and new input is a postfix operand, continue on.
|
||||||
|
} else if(evaluated === true && !Utils.isPostfix(element)) {
|
||||||
return false;
|
return false;
|
||||||
} else {
|
} else {
|
||||||
evaluated = false;
|
evaluated = false;
|
||||||
|
@ -806,20 +813,6 @@ DDH.calculator = DDH.calculator || {};
|
||||||
usingState = false;
|
usingState = false;
|
||||||
display.value = displayValue;
|
display.value = displayValue;
|
||||||
|
|
||||||
/**
|
|
||||||
* The math.js object
|
|
||||||
*
|
|
||||||
* evalmath is the global math.js object that is used throughout this codebase
|
|
||||||
* to evaluate the infix expression that the user provides via the calculators
|
|
||||||
* interface.
|
|
||||||
*/
|
|
||||||
evalmath = math.create({
|
|
||||||
// helps with rounding issues. The exception is trig functions
|
|
||||||
// where it is rewritten as a number. See: `RewriteExpression.trig`
|
|
||||||
number: 'BigNumber',
|
|
||||||
precision: 11
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Bind the buttons
|
* Bind the buttons
|
||||||
*
|
*
|
||||||
|
@ -860,12 +853,23 @@ DDH.calculator = DDH.calculator || {};
|
||||||
* The calculator has a collapsed view when the user is viewing the device
|
* The calculator has a collapsed view when the user is viewing the device
|
||||||
* on a mobile device. The following two functions handle the touch events.
|
* on a mobile device. The following two functions handle the touch events.
|
||||||
*/
|
*/
|
||||||
$("#sci-tab").bind('touchstart', function() {
|
$('.tile__options .tile__option span').click(function(e) {
|
||||||
$(".tile__calc .tile__tabs").css("left", "0");
|
var $tabHandle = $(this).parent();
|
||||||
});
|
if ($tabHandle.hasClass('tile__option--active')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
$("#basic-tab").bind('touchstart',function() {
|
$('.tile__options .tile__option').removeClass('tile__option--active');
|
||||||
$(".tile__calc .tile__tabs").css("left", "-310px");
|
|
||||||
|
$tabHandle.toggleClass('tile__option--active');
|
||||||
|
|
||||||
|
var activeTab = $('.tile__options .tile__option.tile__option--active').data('tab');
|
||||||
|
|
||||||
|
$('.tile__tabs')
|
||||||
|
.removeClass(function (index, css) {
|
||||||
|
return (css.match(/(^|\s)tile__tabs--single-[a-z]+/g) || []).join(' ');
|
||||||
|
})
|
||||||
|
.addClass('tile__tabs--single-'+activeTab);
|
||||||
});
|
});
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -886,6 +890,10 @@ DDH.calculator = DDH.calculator || {};
|
||||||
evt = SHIFT_KEYCODES[key];
|
evt = SHIFT_KEYCODES[key];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(evt === undefined) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
calculator(evt);
|
calculator(evt);
|
||||||
setFocus();
|
setFocus();
|
||||||
e.stopImmediatePropagation();
|
e.stopImmediatePropagation();
|
||||||
|
@ -893,7 +901,7 @@ DDH.calculator = DDH.calculator || {};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Handles clicking on history items
|
* Handles clicking on history items
|
||||||
*
|
*
|
||||||
* If an item is clicked in the ledger section, the expression and result are loaded
|
* If an item is clicked in the ledger section, the expression and result are loaded
|
||||||
* and passed to the Ledger object where it resets the calculators state and result
|
* and passed to the Ledger object where it resets the calculators state and result
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -3,18 +3,21 @@
|
||||||
<div class="tile__calc clearfix">
|
<div class="tile__calc clearfix">
|
||||||
<button class="tile__skip-calc">Skip calculator</button>
|
<button class="tile__skip-calc">Skip calculator</button>
|
||||||
<button class="tile__input-trap"></button>
|
<button class="tile__input-trap"></button>
|
||||||
<div class="tile__display" id="calculatorscreen">
|
<div class="tile__display">
|
||||||
<span class="tile__display__aside" id="expression">{{{subtitle}}}</span>
|
<div class="tile__display__aside--wrap">
|
||||||
|
<span class="tile__display__aside" id="expression">{{{subtitle}}}</span>
|
||||||
|
</div>
|
||||||
<span class="tile__display__main" id="display" tabindex="0">{{{title_html}}}</span>
|
<span class="tile__display__main" id="display" tabindex="0">{{{title_html}}}</span>
|
||||||
|
|
||||||
<ul class="tile__options">
|
<ul class="tile__options">
|
||||||
<li class="tile__option tile__option__sci" id="sci-tab" data-tab="sci"><span>Scientific</span></li>
|
<li class="tile__option tile__option__sci" data-tab="sci"><span>Scientific</span></li>
|
||||||
<li class="tile__option tile__option__basic tile__option--active" id="basic-tab" data-tab="basic"><span>Basic</span></li>
|
<li class="tile__option tile__option__basic tile__option--active" data-tab="basic"><span>Basic</span></li>
|
||||||
<!-- <li class="tile__option tile__option__history" data-tab="history"><span>History</span></li> // introducing in phase 3 // -->
|
<li class="tile__option tile__option__history" data-tab="history" ><span>History</span></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="tile__tabs">
|
<div class="tile__tabs">
|
||||||
|
|
||||||
<div class="tile__calc__col tile__tab__sci">
|
<div class="tile__calc__col tile__tab__sci">
|
||||||
<span class="tile__ctrl__toggle">
|
<span class="tile__ctrl__toggle">
|
||||||
<span>RAD</span>
|
<span>RAD</span>
|
||||||
|
@ -47,7 +50,7 @@
|
||||||
<button class="tile__ctrl__btn" data-cmd="FN_POW_E" value="e<sup>□</sup>">e<sup>x</sup></button>
|
<button class="tile__ctrl__btn" data-cmd="FN_POW_E" value="e<sup>□</sup>">e<sup>x</sup></button>
|
||||||
<button class="tile__ctrl__btn" data-cmd="CONST_E" value="e">e</button>
|
<button class="tile__ctrl__btn" data-cmd="CONST_E" value="e">e</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- basic calculations -->
|
<!-- basic calculations -->
|
||||||
<div class="tile__calc__col tile__tab__basic">
|
<div class="tile__calc__col tile__tab__basic">
|
||||||
<button class="tile__ctrl__btn tile__ctrl--double" id="clear_button" data-cmd="META_CLEAR" value="C">C</button>
|
<button class="tile__ctrl__btn tile__ctrl--double" id="clear_button" data-cmd="META_CLEAR" value="C">C</button>
|
||||||
|
@ -73,10 +76,10 @@
|
||||||
<button class="tile__ctrl__btn" value=".">.</button>
|
<button class="tile__ctrl__btn" value=".">.</button>
|
||||||
<button class="tile__ctrl__btn tile__ctrl--important" data-cmd="META_PROCEED" value="=">=</button>
|
<button class="tile__ctrl__btn tile__ctrl--important" data-cmd="META_PROCEED" value="=">=</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- the ledger (history) section of the calculators UI -->
|
<!-- the ledger (history) section of the calculators UI -->
|
||||||
<ul class="tile__calc__col tile__history"></ul>
|
<ul class="tile__calc__col tile__history"></ul>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
<li class="tile__past-calc tile__past-calc__tpl">
|
<li class="tile__past-calc tile__past-calc__tpl">
|
||||||
<span class="tile__past-formula">{{{ expression }}}</span>
|
<span class="tile__past-formula one-line">{{{ expression }}}</span>
|
||||||
<span class="tile__past-result">{{ result }}</span>
|
<span class="tile__past-result one-line">{{ result }}</span>
|
||||||
</li>
|
</li>
|
||||||
|
|
Loading…
Reference in New Issue