diff --git a/SAC_Custom_Widgets/Simple Calculator/Calculator.json b/SAC_Custom_Widgets/Simple Calculator/Calculator.json new file mode 100644 index 0000000..476909b --- /dev/null +++ b/SAC_Custom_Widgets/Simple Calculator/Calculator.json @@ -0,0 +1,23 @@ +{ + "id": "com.rohitchouhan.sap.simple.calculator", + "version": "1.0.0", + "name": "Simple Calculator", + "description": "A simple calculator widget for SAC applications.", + "newInstancePrefix": "Sample", + "vendor": "rohitchouhan.com", + "eula": "rohitchouhan.com", + "license": "MIT", + "icon": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAMAAAAM7l6QAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAPBQTFRFJuq5hJqlbIeUAAAATmJrTF9lAAAAgZahX3eCSFtjdYiSQlNaZnd/laixPOu/NNWvkKCoLOq75O/tztTYpLS8uvHjN+u+mau0JeW1ucLHPcaoJ+a22NzdUHJzQ6+cd5CcAQQDItOneoiNxc7TU2huY4aPb4qXFHphSuzDH7yUS5aKb+7OIcqgaHl/JN2uYHB2SaOUU66jNua6IiwwHKSCmq22Td25I9irG6aDUmZuToiBNEpOM+m7cYOKDE09GZp6Zn+LCCAah5ynUmVuMj5ElqmyEnJbGZh4DlVDBiYeCDEmaI+XH76WK+i5f5OdYKOghotmHAAAAFB0Uk5T////AP//Bv9FSEVYTE3/////////////+P//6/////8WtP//////HP8i//+j/+L///9/EpERA8xfHf9cQww3H9gB29wtRSZOGigt/1ibDf+q9BZHAAABIElEQVR4nIXT2XKCMBSA4dAQ6E4EWmRREKm2FpXu+77v7/829SQwJBTqf5EZ+eYclhkRPnpaK1sVusIYo+97pUwnatnD2YyXFYlFX6phMofJHI5pElORHRuiOSeWa45FtvuQkzOhpvvf8kAPaDNPx2QaNzOvmdVEZV7HnZFnGIaXdUgdnxstxDIyxosLYqMcoe4f/kFi+8cyfxgS+5cFD0I495DcV8HUhdODa611iD2Df1dwH062e3sD2mXjO4wdKzAtd8BZmM45VGxL0YtpE+LTN9Jyfu9NiN9byzmkcHYrT96T33tLfu/2Z+WrZRKnQ4wObsVxcf3JcPbN8eOK0MWhX2xOn+FPhLEmFr2kkzZCk97pK+ZcSYvert8jjf/4BQNnHmyixm0UAAAAAElFTkSuQmCC", + "webcomponents": [ + { + "kind": "main", + "tag": "com-rohitchouhan-sap-simple-calculator", + "url": "/Main.js", + "integrity": "", + "ignoreIntegrity": true + } + ], + "properties": {}, + "methods": {}, + "events": {} +} diff --git a/SAC_Custom_Widgets/Simple Calculator/Calculator.zip b/SAC_Custom_Widgets/Simple Calculator/Calculator.zip new file mode 100644 index 0000000..ba035f3 Binary files /dev/null and b/SAC_Custom_Widgets/Simple Calculator/Calculator.zip differ diff --git a/SAC_Custom_Widgets/Simple Calculator/Main.js b/SAC_Custom_Widgets/Simple Calculator/Main.js new file mode 100644 index 0000000..de7bda5 --- /dev/null +++ b/SAC_Custom_Widgets/Simple Calculator/Main.js @@ -0,0 +1,294 @@ +(function () { + let template = document.createElement("template"); + template.innerHTML = `
+
+
+
+
+
+
+
-
+
×
+
÷
+
+
+
+
7
+
8
+
9
+
+
+
4
+
5
+
6
+
+
+
1
+
2
+
3
+
+
+
0
+
.
+
C
+
+
+
=
+
+
+
`; + class Calculator extends HTMLElement { + constructor() { + super(); + let shadowRoot = this.attachShadow({ mode: "open" }); + shadowRoot.appendChild(template.content.cloneNode(true)); + this._props = {}; + + var input = shadowRoot.getElementById("input"), // input/output button + number = shadowRoot.querySelectorAll(".numbers div"), // number buttons + operator = shadowRoot.querySelectorAll(".operators div"), // operator buttons + result = shadowRoot.getElementById("result"), // equal button + clear = shadowRoot.getElementById("clear"), // clear button + resultDisplayed = false; // flag to keep an eye on what output is displayed + + // adding click handlers to number buttons + for (var i = 0; i < number.length; i++) { + number[i].addEventListener("click", function (e) { + // storing current input string and its last character in variables - used later + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + // if result is not diplayed, just keep adding + if (resultDisplayed === false) { + input.innerHTML += e.target.innerHTML; + } else if ( + (resultDisplayed === true && lastChar === "+") || + lastChar === "-" || + lastChar === "×" || + lastChar === "÷" + ) { + // if result is currently displayed and user pressed an operator + // we need to keep on adding to the string for next operation + resultDisplayed = false; + input.innerHTML += e.target.innerHTML; + } else { + // if result is currently displayed and user pressed a number + // we need clear the input string and add the new input to start the new opration + resultDisplayed = false; + input.innerHTML = ""; + input.innerHTML += e.target.innerHTML; + } + }); + } + + // adding click handlers to number buttons + for (var i = 0; i < operator.length; i++) { + operator[i].addEventListener("click", function (e) { + // storing current input string and its last character in variables - used later + var currentString = input.innerHTML; + var lastChar = currentString[currentString.length - 1]; + + // if last character entered is an operator, replace it with the currently pressed one + if ( + lastChar === "+" || + lastChar === "-" || + lastChar === "×" || + lastChar === "÷" + ) { + var newString = + currentString.substring(0, currentString.length - 1) + + e.target.innerHTML; + input.innerHTML = newString; + } else if (currentString.length == 0) { + // if first key pressed is an opearator, don't do anything + console.log("enter a number first"); + } else { + // else just add the operator pressed to the input + input.innerHTML += e.target.innerHTML; + } + }); + } + + // on click of 'equal' button + result.addEventListener("click", function () { + // this is the string that we will be processing eg. -10+26+33-56*34/23 + var inputString = input.innerHTML; + + // forming an array of numbers. eg for above string it will be: numbers = ["10", "26", "33", "56", "34", "23"] + var numbers = inputString.split(/\+|\-|\×|\÷/g); + + // forming an array of operators. for above string it will be: operators = ["+", "+", "-", "*", "/"] + // first we replace all the numbers and dot with empty string and then split + var operators = inputString.replace(/[0-9]|\./g, "").split(""); + + var divide = operators.indexOf("÷"); + while (divide != -1) { + numbers.splice(divide, 2, numbers[divide] / numbers[divide + 1]); + operators.splice(divide, 1); + divide = operators.indexOf("÷"); + } + + var multiply = operators.indexOf("×"); + while (multiply != -1) { + numbers.splice( + multiply, + 2, + numbers[multiply] * numbers[multiply + 1] + ); + operators.splice(multiply, 1); + multiply = operators.indexOf("×"); + } + + var subtract = operators.indexOf("-"); + while (subtract != -1) { + numbers.splice( + subtract, + 2, + numbers[subtract] - numbers[subtract + 1] + ); + operators.splice(subtract, 1); + subtract = operators.indexOf("-"); + } + + var add = operators.indexOf("+"); + while (add != -1) { + // using parseFloat is necessary, otherwise it will result in string concatenation :) + numbers.splice( + add, + 2, + parseFloat(numbers[add]) + parseFloat(numbers[add + 1]) + ); + operators.splice(add, 1); + add = operators.indexOf("+"); + } + + input.innerHTML = numbers[0]; // displaying the output + + resultDisplayed = true; // turning flag if result is displayed + }); + + // clearing the input on press of clear + clear.addEventListener("click", function () { + input.innerHTML = ""; + }); + } + + connectedCallback() {} + + onCustomWidgetBeforeUpdate(changedProperties) { + this._props = { ...this._props, ...changedProperties }; + } + + onCustomWidgetAfterUpdate(changedProperties) {} + + //more functions needed + } + customElements.define("com-rohitchouhan-sap-simple-calculator", Calculator); +})();