Responsive design + history

2018-11-01 18:14:56 +09:00 · 2018-11-01 18:14:56 +09:00 · 796b458a4e
commit 796b458a4e
parent 80bec68a28
3 changed files with 432 additions and 67 deletions
--- a/index.html
+++ b/index.html
@ -18,9 +18,32 @@
 <body>

 <div class="container">
+
+    <div class="main-history">
+
+        <div class="delete-history-container">
+
+            <span>History</span>
+            <div id="delete-history">Delete</div>
+
+        </div>
+
+        <div class="history-container"></div>
+
+    </div>
+
+    <div class="expand-buttons">
+        <svg xmlns="http://www.w3.org/2000/svg" width="35" height="35" viewBox="0 0 24 24"><path fill="white" d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
+    </div>
+
+    <div class="calculator-container">
        <div class="display-container">

-        <div class="display">
+            <div class="display"></div>
+
+            <div class="clears-buttons-container">
+                <div id="sup">SUP</div>
+                <div id="ac">AC</div>
            </div>

        </div>
@ -92,6 +115,7 @@
            </div>

        </div>
+    </div>

 </div>

--- a/ressources/index.css
+++ b/ressources/index.css
@ -2,6 +2,10 @@ body, html {
    height: 100%;
 }

+* {
+    box-sizing: border-box;
+}
+
 .button-input {
    position: relative;
    color: white;
@ -10,6 +14,7 @@ body, html {
    width: 33.333333333333333%;
    text-align: center;
    height: 25%;
+    cursor: pointer;
 }

 .buttons-operators .button-input {
@ -46,6 +51,11 @@ body, html {
    height: 100%;
    background: #1F1F1F;
    width: 100%;
+    z-index: 0;
+    padding: 0;
+    margin: 0;
+    max-width: none;
+    display: block;
 }

 .buttons-container {
@ -56,6 +66,7 @@ body, html {
    width: 100%;
    height: 60%;
    line-height: 0;
+    z-index: 0;
 }

 .buttons-numbers {
@ -73,16 +84,12 @@ body, html {
    background: #232323;
 }

-
-
-/* Affichage */
-
 .display-container {
    height: 40%;
    top: 0;
    position: absolute;
-    padding: 20% 0;
    width: 100%;
+    z-index: 0;
 }

 .display {
@ -94,7 +101,13 @@ body, html {
    left: 50%;
    top: 50%;
    overflow: auto;
+    line-height: initial;
    transform: translate(-50%, -50%);
+    -webkit-transition: font 0.3s ease;
+    -moz-transition: font 0.3s ease;
+    -o-transition: font 0.3s ease;
+    -ms-transition: font 0.3s ease;
+    transition: font 0.3s ease;
 }

 .display.big {
@ -108,3 +121,192 @@ body, html {
 .display.small {
    font-size: 40px;
 }
+
+.clears-buttons-container {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    height: 60px;
+    width: 130px;
+    display: block;
+    font-size: 0;
+    line-height: 0;
+}
+
+.clears-buttons-container div, .expand-buttons div {
+    width: 60px;
+    height: 60px;
+    display: inline-block;
+    border-radius: 50%;
+    vertical-align: top;
+    background: #424242;
+    font-size: 16px;
+    line-height: 60px;
+    text-align: center;
+    color: white;
+    font-weight: 600;
+    opacity: 0;
+    cursor: pointer;
+
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.clears-buttons-container.show div {
+    opacity: 1;
+}
+
+#sup {
+    margin-right: 10px;
+}
+
+.expand-buttons {
+    position: absolute;
+    top: calc( 40% - 40px );
+    left: 50%;
+    transform: translateX( -50% );
+    width: 35px;
+    height: 35px;
+    z-index: 2;
+
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.expand-buttons svg {
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.container.history .expand-buttons {
+    top: calc( 100% - 40px );
+}
+
+.container.history .expand-buttons svg {
+    transform: rotate( 180deg );
+}
+
+.main-history {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background: #1F1F1F;
+    z-index: 1;
+    top: -100%;
+
+    -webkit-transition: all 0.3s ease;
+    -moz-transition: all 0.3s ease;
+    -o-transition: all 0.3s ease;
+    -ms-transition: all 0.3s ease;
+    transition: all 0.3s ease;
+}
+
+.container.history .main-history {
+    top: 0;
+}
+
+.day-container {
+    color: white;
+    border-bottom: 1px solid rgba(97,97,97,0.5);
+    padding: 10px;
+    line-height: initial;
+}
+
+.day-container:last-child {
+    border-bottom: none;
+}
+
+.day-container .title {
+    color: #ffc107;
+    font-weight: 600;
+    font-size: 12px;
+}
+
+.day-container .calcul-container {
+    text-align: right;
+    padding: 3px 0;
+    font-size: 25px;
+    color: white;
+    font-family: sans-serif;
+}
+
+.day-container .calcul-container .operation {
+    overflow: auto;
+}
+
+.day-container .calcul-container .result {
+    color: #9e9e9e;
+}
+
+.delete-history-container {
+    background: black;
+    height: 40px;
+    width: 100%;
+    font-size: 17px;
+    color: white;
+    text-align: center;
+    line-height: 40px;
+}
+
+.delete-history-container span {
+    font-size: 28px;
+}
+
+.delete-history-container #delete-history {
+    position: absolute;
+    right: 10px;
+    top: 0;
+    line-height: 40px;
+    color: #9e9e9e;
+    cursor: pointer;
+}
+
+.history-container {
+    height: calc( 100% - 40px );
+    overflow: auto;
+}
+
+@media screen and ( min-width: 1020px ) {
+
+    .calculator-container {
+        display: inline-block;
+        height: 100%;
+        width: 60%;
+        line-height: 0;
+        position: absolute;
+        font-size: 0;
+    }
+
+    .main-history {
+        display: inline-block;
+        position: relative;
+        width: 40%;
+        top: 0;
+        line-height: 0;
+        height: 100%;
+        vertical-align: top;
+        font-size: 0;
+    }
+
+    .history-container {
+        background-color: #161616;
+    }
+
+    .expand-buttons {
+        display: none;
+    }
+
+    .container {
+        overflow: hidden;
+    }
+
+}
--- a/ressources/index.js
+++ b/ressources/index.js
@ -6,6 +6,12 @@ let operators = [
    '.'
 ];
 let operation = "";
+let operations = [];
+
+if ( localStorage.getItem( "operations" ) ) {
+    operations = JSON.parse( localStorage.getItem( "operations" ) );
+    setTimeout( () => insertHistory(), 10 );
+}

 function calculate() {
    let $display = $( ".display" );
@ -13,13 +19,137 @@ function calculate() {
    try {
        let result = eval( operation );

+        operations.unshift( {
+            calcul: operation,
+            result,
+            date: new Date().getTime()
+        } );
        $display.text( result );
        operation = result.toString();
+        setFontSize( $display );
+        localStorage.setItem( "operations", JSON.stringify( operations ) );
+        insertHistory();
    } catch (e) {

    }
 }

+function setFontSize( $display ) {
+    let length = operation.length;
+    let clearsButtons = $( ".clears-buttons-container" );
+
+    if ( length > 0 ) {
+        clearsButtons.addClass( "show" );
+    } else {
+        clearsButtons.removeClass( "show" );
+    }
+    if ( length <= 10 ) {
+        $display.removeClass( "big" );
+        $display.removeClass( "medium" );
+        $display.removeClass( "small" );
+    } else if ( length <= 12 ) {
+        $display.addClass( "big" );
+        $display.removeClass( "medium" );
+        $display.removeClass( "small" );
+    } else if ( length <= 14 ) {
+        $display.addClass( "medium" );
+        $display.removeClass( "big" );
+        $display.removeClass( "small" );
+    } else if ( length <= 16 ) {
+        $display.addClass( "small" );
+        $display.removeClass( "big" );
+        $display.removeClass( "medium" );
+    }
+}
+
+function roundDate( date ) {
+    date.setHours(0);
+    date.setMinutes(0);
+    date.setSeconds(0);
+    date.setMilliseconds(0);
+    return date;
+}
+
+function diff2Dates( date1, date2 ) {
+    let one_day = 1000 * 60 * 60 * 24;
+
+    let date1_ms = date1.getTime();
+    let date2_ms = date2.getTime();
+
+    let difference_ms = date2_ms - date1_ms;
+
+    return Math.round( difference_ms / one_day );
+}
+
+function insertHistory() {
+    let $html = $( "<div></div>" );
+    let now = roundDate( new Date() );
+    let historyContainer = $( ".history-container" );
+
+    if ( operations.length > 0 ) {
+        for ( let operation of operations ) {
+            let date = roundDate( new Date( operation.date ) );
+
+            if ( $html.find( `.day-container[data-day="${ date.toDateString() }"]` ).length > 0 ) {
+                $html.find( `.day-container[data-day="${ date.toDateString() }"] .title` ).after(`
+                <div class="calcul-container">
+                    <div class="operation">${ operation.calcul }</div>
+                    <div class="result">${ operation.result }</div>
+                </div>` );
+            } else {
+                let daysAgo = "";
+                let diff = diff2Dates( date, now );
+
+                if ( diff === 0 ) {
+                    daysAgo = "Today";
+                } else if ( diff === 1 ) {
+                    daysAgo = "Yesterday";
+                } else {
+                    daysAgo = diff + "days ago";
+                }
+                $html.prepend(`
+                <div class="day-container" data-day="${ date.toDateString() }">
+                    <div class="title">${ daysAgo }</div>
+                    <div class="calcul-container">
+                        <div class="operation">${ operation.calcul }</div>
+                        <div class="result">${ operation.result }</div>
+                    </div>
+                </div>` );
+            }
+        }
+
+        historyContainer.html( $html.html() );
+        historyContainer.animate( { scrollTop: historyContainer[0].scrollHeight }, 300 );
+        // historyContainer.scrollTop( historyContainer[0].scrollHeight );
+    } else {
+        historyContainer.empty();
+    }
+}
+
+$( document ).on( "click", "#ac", function () {
+    if ( operation.length > 0 ) {
+        let $display = $( ".display" );
+
+        operation = "";
+        $display.text( operation );
+        $display.scrollLeft( 1000 );
+
+        setFontSize( $display );
+    }
+} );
+
+$( document ).on( "click", "#sup", function () {
+    if ( operation.length > 0 ) {
+        let $display = $( ".display" );
+
+        operation = operation.slice( 0, -1 );
+        $display.text( operation );
+        $display.scrollLeft( 1000 );
+
+        setFontSize( $display );
+    }
+} );
+
 $( document ).on( "keypress", "#main-input", function ( e ) {
    let char = e.charCode;
    let $this = $( this );
@ -36,7 +166,6 @@ $( document ).on( "keypress", "#main-input", function ( e ) {
    } else {
        e.preventDefault();
    }
-    console.log( char );
 } );

 $( document ).on( "click", ".button-input", function () {
@ -50,5 +179,15 @@ $( document ).on( "click", ".button-input", function () {
        operation += $elem.find( "span" ).html();
        $display.text( operation );
        $display.scrollLeft( 1000 );
+
+        setFontSize( $display );
    }
 } );
+
+$( document ).on( "click", ".expand-buttons", () => $( ".container" ).toggleClass( "history" ) );
+
+$( document ).on( "click", "#delete-history", function () {
+    operations = [];
+    localStorage.setItem( "operations", JSON.stringify( operations ) );
+    insertHistory();
+} );