editor improved. url support added

anistark · Nov 2, 2019 · dd38068 · dd38068
1 parent 1802896
commit dd38068
Show file tree

Hide file tree

Showing 4 changed files with 160 additions and 25 deletions.
diff --git a/css/editor.css b/css/editor.css
@@ -51,12 +51,12 @@ section .main {
 }
 
 img {
-    width: 70%;
-    height: 70%;
+    width: 100%;
+    height: 100%;
     background-cover: contain;
     background-repeat: no-repeat;
     background-size: 100% 100%;
-    filter: brightness(var(--brightness)) contrast(var(--contrast)) blur(var(--blur)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)) invert(var(--invert));
+    /*filter: brightness(var(--brightness)) contrast(var(--contrast)) blur(var(--blur)) grayscale(var(--grayscale)) opacity(var(--opacity)) saturate(var(--saturate)) sepia(var(--sepia)) invert(var(--invert));*/
 }
 
 section .filters {
@@ -77,6 +77,7 @@ section .filters {
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-top: 50px;
 }
 
 .search__box input {
@@ -86,6 +87,7 @@ section .filters {
     font-size: 1rem;
     color: #e4e4e4;
     outline: none;
+    box-shadow: none !important;
 }
 
 .go {
@@ -158,7 +160,99 @@ a:hover{
 }
 
 #qrcode {
-    width: 500px;
-    height: 500px;
-    margin-top: 50px;
+    max-width: 500px;
+    max-height: 500px;
+    margin: 10px 50px 10px 50px;
+}
+
+.vertical-row {
+    display: grid;
+}
+
+.download-btn {
+    margin: 1rem .5rem;
+    border: 2px solid black;
+    background-color: white;
+    padding: 14px 28px;
+    font-size: 16px;
+    cursor: pointer;
+    border-color: #2196F3;
+    color: dodgerblue;
+}
+
+.download-btn:hover {
+    background: #2196F3;
+    color: white;
+}
+
+/* DropDown */
+.dropbtn {
+    background-color: #4CAF50;
+    color: white;
+    padding: 16px;
+    font-size: 16px;
+    border: none;
+    cursor: pointer;
+    min-width: 250px;
+}
+
+/* The container <div> - needed to position the dropdown content */
+
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+/* Dropdown Content (Hidden by Default) */
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 100%;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+}
+
+/* Links inside the dropdown */
+
+.dropdown-content span {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+}
+
+/* Change color of dropdown links on hover */
+
+.dropdown-content span:hover {
+    background-color: #f1f1f1;
+    cursor: pointer;
+}
+
+/* Show the dropdown menu on hover */
+
+.dropdown:hover .dropdown-content {
+    display: block;
+}
+
+/* Change the background color of the dropdown button when the dropdown content is shown */
+
+.dropdown:hover .dropbtn {
+    background-color: #3e8e41;
+}
+
+/* Hide all filter content */
+#message, #url {
+    display: none;
+}
+
+.editor-h2 {
+    margin-left: 50px;
+    color: #707070;
+    font-size: 25px;
+}
+
+.error {
+    border-color: #ff0000 !important;
 }
diff --git a/editor.html b/editor.html
@@ -16,12 +16,11 @@
     <link rel="stylesheet" href="css/slick.css">
     <link rel="stylesheet" href="css/style.css">
 
-
     <link rel="stylesheet" href="./css/editor.css">
 </head>
 
 <body>
-    <header class="main_menu home_menu bg-dark">
+    <header class="main_menu home_menu">
         <div class="container ">
             <div class="row align-items-center">
                 <div class="col-lg-12">
@@ -87,25 +86,37 @@
         </div> -->
     </header>
 
-    <section class="editor bg-dark section_padding">
+    <section class="editor section_padding">
         <div class="wrapper">
             <header>
-                <h1 class="text-light">Generate QR Code</h1>
+                <h1 class="text-dark">Generate QR Code</h1>
             </header>
             <section>
                 <div class="main">
+                    <h2 class="editor-h2">Generate and print QR code of your choice:</h2>
                     <div class="display-board">
                         <div id="qrcode"></div>
-                        <a class="btn btn-link download-btn" style="margin: 1rem .5rem" id="downloadButton">Download as PNG</a>
-                        <button onclick="downloadCodePDF()" style="margin: 1rem .5rem" class="btn btn-link download-btn" id="downloadPDF">Download as PDF</button>
+                        <div class="vertical-row">
+                            <a class="btn btn-link download-btn" id="downloadButton">Download as PNG</a>
+                            <button onclick="downloadCodePDF()" class="btn btn-link download-btn" id="downloadPDF">Download as PDF</button>
+                        </div>
                     </div>
                     <div>
 
                     </div>
                 </div>
                 <div class="filters">
+                    <div class="dropdown">
+                        <button class="dropbtn">What do you want to generate?</button>
+                        <div class="dropdown-content">
+                            <span id="drop-message" class="drop-btn">Text</span>
+                            <span id="drop-url" class="drop-btn">URL</span>
+                            <!-- <span id="drop-coordinate" class="drop-btn">Location Coordinates</span> -->
+                        </div>
+                    </div>
                     <div class="search__box">
-                        <textarea rows="15" cols="50" name="message" onkeypress="update(e)" class="form-control" id="message" placeholder="Message..." tabindex="4" required></textarea>
+                        <textarea name="message" class="form-control filter-box" id="message" placeholder="Message..." tabindex="4" required></textarea>
+                        <input type="text" value="" id="url" class="form-control filter-box" tabindex="4" placeholder="http://qrgen.dev/">
                         <!-- <button class="go">Go</button> -->
                     </div>
                 </div>

diff --git a/js/editor.js b/js/editor.js
@@ -1,5 +1,35 @@
-function update(e) {
-    if (e.keyCode == 0){
-        document.getElementsByClassName('.btn').disabled = true;
-    };
-}
+// function update(e) {
+//     if (e.keyCode == 0){
+//         document.getElementsByClassName('.btn').disabled = true;
+//     };
+// }
+
+$('.drop-btn').click(function () {
+    $('.filter-box').val('');
+    $('.filter-box').hide();
+    let el = $(this).attr('id').replace('drop-', '');
+    $('.dropbtn').html($(this).text());
+    $('#'+el).show();
+});
+
+$('#url').keyup(function() {
+    if (validURL($(this).val())) {
+        $(this).removeClass('error');
+    }
+    else {
+        $(this).addClass('error');
+    }
+    // else {
+    //     $(this).attr('border-color', 'unset');
+    // }
+});
+
+function validURL(str) {
+    var pattern = new RegExp('^(https?:\\/\\/)?' + // protocol
+            '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name
+            '((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+            '(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*' + // port and path
+            '(\\?[;&a-z\\d%_.~+=-]*)?' + // query string
+            '(\\#[-a-z\\d_]*)?$', 'i'); // fragment locator
+    return !!pattern.test(str);
+}
diff --git a/js/main.js b/js/main.js
@@ -1,8 +1,8 @@
 $(document).ready(function() {
-    if($('#message').val().trim() == ""){
+    // if($('#message').val().trim() == ""){
         $('#downloadPDF').hide();
         $('#downloadButton').hide();
-    }
+    // }
     // Test for placeholder support
     $.support.placeholder = (function() {
         var i = document.createElement('input');
@@ -53,15 +53,15 @@ $(document).ready(function() {
 
 var qrcode = new QRCode("qrcode");
 
-function makeCode() {
-    var elText = $('#message').val();
+function makeCode(elText) {
+    // var elText = $('#message').val();
     if (!elText) {
         // console.log("Input a text");
         elText.focus();
         return;
     }
     qrcode.makeCode(elText);
-    
+
 }
 
 function downloadCodePNG(){
@@ -79,12 +79,12 @@ function downloadCodePDF(){
     doc.save();
 }
 
-$('#message').keyup(function() {
+$('.filter-box').keyup(function() {
     const messageValue = $(this).val();
     if(messageValue.trim() != ""){
         $('#downloadPDF').show();
         $('#downloadButton').show();
-        makeCode();
+        makeCode(messageValue);
         downloadCodePNG();
     }else{
         $('#downloadPDF').hide();