added pop-up animation + generation

jonbarrow · Oct 29, 2017 · dfa440b · dfa440b
1 parent 9613716
commit dfa440b
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 5 deletions.
diff --git a/app/wrapper/css/main.css b/app/wrapper/css/main.css
@@ -469,6 +469,26 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
   background: rgba(0, 0, 0, 0.6);
   position: absolute;
   z-index: 99;
+    opacity: 1;
+    transition: opacity .25s;
+}
+.popup-hidden {
+    opacity: 0;
+}
+.popup-overlay .input-text {
+    width: calc(100% - 20px);
+    padding: 10px;
+    border-radius: 2px;
+    border-style: solid;
+    background-color: #fff;
+    border-width: 2px;
+    border-color: #e2e2e2;
+    color: #6d6d6d;
+    transition: border-color .25s;
+}
+.popup-overlay .input-text:focus {
+    outline: none;
+    border-color: #5669fa;
 }
 .popup-overlay .popup {
   background: #fff;
@@ -477,8 +497,14 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
   margin: 70px auto;
   z-index: 10;
     overflow: hidden;
+    -webkit-transform: translateY(0);
+            transform: translateY(0);
   transition: all 0.6s ease-in-out;
 }
+.popup-overlay .hidden-card {
+    -webkit-transform: translateY(-200%);
+            transform: translateY(-200%);
+}
 .popup-overlay .popup h2, .popup-overlay .popup .content {
     padding: 0 25px 25px 25px;
 }
@@ -878,7 +904,8 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
 }
 .download_options, .download_options .dl-option {
     margin-left: 50%;
-    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
 }
 .update-selector {
     background-color: #FFFFFF;
@@ -1059,5 +1086,6 @@ END OF THINGS RIPPED FROM NINTENDO BOOKMARK SITE
     height: 8px;
     border: solid #ffffff;
     border-width: 0 2px 2px 0;
-    transform: rotate(45deg);
+    -webkit-transform: rotate(45deg);
+            transform: rotate(45deg);
 }
diff --git a/app/wrapper/index.html b/app/wrapper/index.html
@@ -187,9 +187,7 @@ <h1 class="txt-font-smm txt-s-48">Database</h1>
                 </div>
             </div>
         </div>
-
-        <div id="dl">
-            <div id="popup1" class="popup-overlay hidden">
+        <div id="popup1" class="popup-overlay hidden">
                 <div class="popup">
                     <h2 class="title">Missing CDecrypt</h2>
                     <div class="content">
@@ -198,6 +196,8 @@ <h2 class="title">Missing CDecrypt</h2>
                     <div class="button">Select CDecrypt</div>
                 </div>
             </div>
+
+        <div id="dl">
 
             <div class="loading-overlay">
                 <div class="title">
@@ -310,6 +310,17 @@ <h1 class="download txt-button txt-button-large txt-button-white txt-s-24 txt-c-
                 </div>
             </div>
         </template>
+        <template id="TEMPLATE_POPUP">
+            <div id="popup1" class="popup-overlay popup-hidden">
+                <div class="popup hidden-card">
+                    <h2 class="title">title</h2>
+                    <div class="content">
+                        content
+                    </div>
+                    <div class="button">button</div>
+                </div>
+            </div>
+        </template>
 
         <script src="js/main.js"></script>
     </body>

diff --git a/app/wrapper/js/main.js b/app/wrapper/js/main.js
@@ -204,6 +204,40 @@ function closeNav() {
     document.getElementById("mySidenav").style.width = "0";
 } 
 //menu animations
+function createPopup(title,content,inputs,button_text,button_event,id) {
+    let btn = document.getElementById("TEMPLATE_POPUP").content.firstElementChild.cloneNode(true);
+    btn.id = id;
+    btn.querySelector('.title').innerHTML = title;
+    btn.querySelector('.content').innerHTML = content;
+    if (inputs != null) {
+        let content = btn.querySelector('.content');
+        for (let ind = 0; ind < inputs.length;ind++) {
+            content.innerHTML += '<p>' + inputs[ind].caption + '</p>';
+            if (inputs[ind].type == 'text') {
+                content.innerHTML += '<input type="text" id="' + inputs[ind].id + '" class="input-text" />';
+            }
+        }
+    }
+    btn.querySelector('.button').innerHTML = button_text;
+    btn.querySelector('.button').onclick = function () { button_event(this); }
+    document.body.appendChild(btn);
+    setTimeout(function () {
+        btn.classList.remove("popup-hidden");
+        setTimeout(function () {
+            btn.querySelector('.popup').classList.remove("hidden-card");
+        },250);
+    },0);
+}
+
+function closePopup(el) {
+    el.querySelector('.popup').classList.add("hidden-card");
+    setTimeout(function () {
+        el.classList.add("popup-hidden");
+        setTimeout(function () {
+            document.body.removeChild(el);
+        },250);
+    },600);
+}
 
 function openMenu() {
     document.getElementById('menu').style.opacity = '0';