add_thirdparty_and_apply_animation

steemhappyberrysboy · Jul 19, 2018 · 5431cdf · 5431cdf
1 parent 75368e9
commit 5431cdf
Show file tree

Hide file tree

Showing 8 changed files with 107 additions and 33 deletions.
diff --git a/background.js b/background.js
@@ -1,10 +1,6 @@
 // Respond to the click on extension Icon
 chrome.browserAction.onClicked.addListener(function (tab) {
-    alert('asdf');
     chrome.tabs.executeScript({
-        file: 'thirdParty/jquery3.3.1.min.js'
+        code: ''
     });
-    chrome.tabs.executeScript({
-        file: 'thirdParty/semantic.min.js'
-    });
-});
+});
diff --git a/common.js b/common.js
@@ -31,27 +31,34 @@ if(lastPage){
     document.getElementById(lastPage).classList.add('active');
 }
 
-// Accordion Design Controller
 let accordionBtns = document.getElementsByClassName('accordionTitle');
 
 // Accordion Button Event
 for(let i=0; i<accordionBtns.length; i+=1){
     accordionBtns[i].addEventListener('click', () => {
         if(accordionBtns[i].classList.contains('active')){
-            accordionBtns[i].classList.remove('active');
-            document.getElementById(accordionBtns[i].getAttribute('val')).classList.remove('active');
             localStorage.setItem(CURR_ACTIVE_PAGE, '');
         }else{
-            document.querySelectorAll('.ui.accordion .title').forEach((e) => e.classList.remove('active'));
-            document.querySelectorAll('.ui.accordion .content').forEach((e) => e.classList.remove('active'));
-
-            accordionBtns[i].classList.add('active');
-            document.getElementById(accordionBtns[i].getAttribute('val')).classList.add('active');
             localStorage.setItem(CURR_ACTIVE_PAGE, accordionBtns[i].getAttribute('val'));
         }
     });
 }
 
+// Add Shortcut pages in Header
+document.getElementById('showShortcutPage').addEventListener('click', (e) => {
+    let divFormat = '<div class="topShortCutDiv" style="width:100%;"></div>'
+    document.querySelector('.Header').insertAdjacentHTML('beforeend', '<div style="width:100%;border:2px solid #00f;">test</div>');
+    document.querySelector('.App__content').style.marginTop = '100px';
+
+    if(e.target.checked){
+        chrome.tabs.executeScript({
+            code: ''
+        });
+    }else{
+
+    }
+});
+
 // Set Default Current Site
 // Set Default Site Textarea Selector
 let siteSelector = "document.getElementsByClassName('upload-enabled')[0]";
@@ -68,4 +75,35 @@ chrome.tabs.getSelected(null, (tab) => {
       siteSelector = v.textareaSelector;
     }
   });
-});
+});
+
+// Apply Semantic-ui accordion design 
+$('.ui.accordion').accordion();
+
+// Animate.css extend in Jquery 
+$.fn.extend({
+  animateCss: function(animationName, callback) {
+    var animationEnd = (function(el) {
+      var animations = {
+        animation: 'animationend',
+        OAnimation: 'oAnimationEnd',
+        MozAnimation: 'mozAnimationEnd',
+        WebkitAnimation: 'webkitAnimationEnd',
+      };
+
+      for (var t in animations) {
+        if (el.style[t] !== undefined) {
+          return animations[t];
+        }
+      }
+    })(document.createElement('div'));
+
+    this.addClass('animated ' + animationName).one(animationEnd, function() {
+      $(this).removeClass('animated ' + animationName);
+
+      if (typeof callback === 'function') callback();
+    });
+
+    return this;
+  },
+});
diff --git a/manifest.json b/manifest.json
@@ -1,17 +1,16 @@
 {
-  "name": "Steem Tool",
-  "description": "Steem Tool",
+  "name": "Steem Tools",
+  "description": "Steem Tools",
   "version": "1.1.11",
   "permissions": [
-    "activeTab",
-    "tabs"
+    "activeTab"
   ],
   "background": {
     "scripts": ["background.js"],
     "persistent": false
   },
   "browser_action": {
-    "default_title": "Steem Tool",
+    "default_title": "Steem Tools",
     "default_icon": "steemit.png",
     "default_popup": "popup.html"
   },

diff --git a/popup.html b/popup.html
@@ -5,11 +5,16 @@
 </head>
 <body>
     <div style="width:500px!important;min-height:700px; " class="ui container">
-        <div class="ui black button" id="copied" style="display:none;position:fixed;top:10px;right:15px;z-index:999;">Copied!!</div>
+        <div id="copied" style="display:none;position:fixed;top:10px;right:15px;z-index:999;font-size:1.5rem;font-weight:bold;color:blueviolet;">Copied!!</div>
 
         <center><h1>Steemit Tools</h1></center>
         <br>
 
+        <div class="ui toggle checkbox" style="display:none;">
+            <input type="checkbox" name="public" id="showShortcutPage">
+            <label>Show Shortcuts in Page</label>
+        </div>
+
         <div class="ui styled accordion">
             <div class="title accordionTitle userShortcut" val="userShortcut">
                 <i class="dropdown icon"></i>
@@ -76,7 +81,11 @@
 </body>
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.3.3/dist/semantic.min.css">
 <link rel="stylesheet" href="style.css">
-<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> 
+<script src="thirdParty/jquery3.3.1.min.js"></script>
+<script src="thirdParty/semantic.min.js"></script>
+<script src="thirdParty/showdown.min.js"></script>
+<script src="thirdParty/steemjs.min.js"></script>
 <script src="classes.js"></script>
 <script src="const.js"></script>
 <script src="common.js"></script>

diff --git a/srcManager.js b/srcManager.js
@@ -7,16 +7,22 @@ let srcList = [];
 let getLocalItems = localStorage.getItem(STORAGE_IMAGE_LIST);
 
 if(getLocalItems){
-  let jsonList = JSON.parse(getLocalItems);
-  jsonList.forEach((v, idx) => {
-    if(v.name){
-        srcList.push(new Source(v.name, v.isImage, v.src));
-    }else{
-        // 1.1.4 previous version conversion
-        srcList.push(new Source('No' + (idx+1), true, v));
-    }
-  });
-  localStorage.setItem(STORAGE_IMAGE_LIST, JSON.stringify(srcList));
+  try{
+    let jsonList = JSON.parse(getLocalItems);
+    jsonList.forEach((v, idx) => {
+      if(v.name){
+          srcList.push(new Source(v.name, v.isImage, v.src));
+      }else{
+          // 1.1.4 previous version conversion
+          srcList.push(new Source('No' + (idx+1), true, v));
+      }
+    });
+    localStorage.setItem(STORAGE_IMAGE_LIST, JSON.stringify(srcList));
+  }catch(e){
+    // Set Default SrcList
+    srcList = defaultSrcList;
+    localStorage.setItem(STORAGE_IMAGE_LIST, JSON.stringify(srcList));
+  }
 }else{
   // Set Default SrcList
   srcList = defaultSrcList;
@@ -97,7 +103,9 @@ addClick = (e) => {
 
   let copied = document.getElementById('copied');
   copied.style.display = 'inline-block';
-  setTimeout((() => copied.style.display = 'none'), 1500);
+
+  // Apply Animation
+  $('#copied').animateCss('flip', (() => (setTimeout(copied.style.display = 'none'), 3000)));
 }
 
 /**

diff --git a/style.css b/style.css
@@ -11,4 +11,8 @@
 
   .ui.table tr td{
       word-break: break-all;
+  }
+
+  .ui.table .trView{
+      margin-top:30px;
   }
diff --git a/thirdParty/showdown.min.js b/thirdParty/showdown.min.js
diff --git a/thirdParty/steemjs.min.js b/thirdParty/steemjs.min.js