cpytip

README.md

@@ -1,8 +1,18 @@
 ![](res/logo/banner.png)
 
-## Get Started
+## PGFPlotsEdt - Faster to PGFPlot in LaTeX
+### A PGFPlots Statistic Graph Interactive Editor.
+<br>
+<a href="https://logcreative.github.io/PGFPlotsEdt/index.html?lang=en"><img src="https://img.shields.io/badge/lang-EN-9CF"></a>
+<a href="https://logcreative.github.io/PGFPlotsEdt/index.html?lang=cn"><img src="https://img.shields.io/badge/语言-中文-9CF"></a>
+<a href="https://github.com/LogCreative/PGFPlotsEdt/releases"><img src="https://img.shields.io/github/v/release/LogCreative/PGFPlotsEdt"></a>
+<a href="https://github.com/LogCreative/PGFPlotsEdt/blob/master/LICENSE"><img src="https://img.shields.io/github/license/LogCreative/PGFPlotsEdt"></a>
+<a href="https://github.com/LogCreative/PGFPlotsEdt/commits/master"><img src="https://img.shields.io/github/last-commit/LogCreative/PGFPlotsEdt"></a>
+<a href="https://logcreative.github.io/LaTeXSparkle/"><img src="https://img.shields.io/badge/Under-LaTeX%20Sparkle%20Project-yellowgreen"></a>
+
+English <a href="https://logcreative.github.io/PGFPlotsEdt/"><img src="res/logo/logo.svg" width="16px">https://logcreative.github.io/PGFPlotsEdt/</a>
 
-<a href="https://logcreative.github.io/PGFPlotsEdt/"><img src="res/logo/logo.svg" width="16px">https://logcreative.github.io/PGFPlotsEdt/</a>
+中文 <a href="https://logcreative.github.io/PGFPlotsEdt/index.html?lang=cn"><img src="res/logo/logo.svg" width="16px">https://logcreative.github.io/PGFPlotsEdt/index.html?lang=cn</a>
 
 PGFPlots is a remarkable package in LaTeX, to create precise, vectorized, and highly personalized statistic graphs. You could get more information about PGFPlots package on https://github.com/pgf-tikz/pgfplots, thank all those contributors for creating a useful package to plot in LaTeX natively.
 
@@ -16,6 +26,4 @@ TikzEdt is the inspiration of this project, to create LaTeX TikZ graph in WYSIWY
 
 <a href="https://www.mathjax.org/" target="_blank"><img class="icon" src="res/poweredby/mathjax.ico" height="16px">MathJax</a> is the TeX typeset rendering machine for previewing the formula input.
 
-<a href="https://github.com/LogCreative/PGFPlotsEdt/blob/master/LICENSE"><img src="https://img.shields.io/github/license/LogCreative/PGFPlotsEdt"></a>
-
 >Copyright (c) 2020-2021 Log Creative & LaTeX Sparkle Project

index.html

@@ -172,9 +172,10 @@
             <div id="auto">
             <details id="codedetail">
                 <summary>
-                    {{$t('Code')}} <button v-clipboard:copy="content" id="btnDrawCode" @mouseover="hintDrawCode" @mouseleave="blurDrawCode" :title="$t('code.cpydraw')">▪</button>
-                    <button v-clipboard:copy="file" id="btnAllCode"  @mouseover="hintAllCode" @mouseleave="blurAllCode" :title="$t('code.cpyall')">◼</button>
+                    {{$t('Code')}} <button v-clipboard:copy="content" id="btnDrawCode" @mouseover="hintDrawCode" @mouseleave="blurDrawCode" :title="$t('code.cpydraw')" @click="copytip">▪</button>
+                    <button v-clipboard:copy="file" id="btnAllCode"  @mouseover="hintAllCode" @mouseleave="blurAllCode" :title="$t('code.cpyall')" @click="copytip">◼</button>
                     <button onclick="gomanual()" id="btnEdtCode" @mouseover="warnAllCode" @mouseleave="blurAllCode" :title="$t('code.manedt')">⚠</button>
+                    <div id="cpytip">{{$t('cpytip')}}</div>
                 </summary>
                 <div id="texAllCode">
                     <div class="texCode">
@@ -427,6 +428,8 @@
     <script src="https://cdn.bootcdn.net/ajax/libs/split.js/1.6.2/split.min.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/vue-i18n/8.24.3/vue-i18n.min.js"></script>
     <script src="js/style.js"></script>
+    <script src="lang/cn.js"></script>
+    <script src="lang/en.js"></script>
     <script src="lang/dict_en.js"></script>
     <script src="js/tpl.js"></script>
     <script src="main.js"></script>
@@ -444,6 +447,5 @@
         else
             document.getElementById('codedetail').open = false;
     </script>
-    <script src="js/getVersion.js"></script>
 </body>
 </html>

js/style.js

@@ -166,4 +166,7 @@ var animforward = function(){
             clearInterval(waiter);
         },30);
     }    
-};
+};
+
+// Version
+document.getElementById("version").innerHTML = 'v2';

lang/cn.json → lang/cn.js

@@ -1,4 +1,4 @@
-{
+const cn = {
   "PGFPlotsEdt": "PGFPlots 统计绘图编辑器",
   "Faster to PGFPlot in LaTeX": "PGFPlotsEdt",
   "nav": {
@@ -117,5 +117,6 @@
     "tableparam": "表格参数",
     "col": "表列",
     "coord": "坐标数据"
-  }
+  },
+  "cpytip": "复制成功",
 }

lang/en.json → lang/en.js

@@ -1,4 +1,4 @@
-{
+const en = {
   "PGFPlotsEdt": "PGFPlotsEdt",
   "Faster to PGFPlot in LaTeX": "Faster to PGFPlot in LaTeX",
   "nav": {
@@ -117,5 +117,6 @@
     "sort": "Sort",
     "tableparam": "Table Parameter",
     "coord": "Coordinate Data"
-  }
+  },
+  "cpytip": "Copied to Clipboard",
 }

main.css

@@ -612,4 +612,33 @@ input[type=text]{
 .accordion .acccon{
     padding-top: 5px;
     vertical-align: text-top;
+}
+
+#cpytip{
+    display: inline-block;
+    opacity: 0;
+    color: white;
+    background-color: green;
+    padding: 5px;
+    border-radius: 2px;
+    font-size: small;
+}
+.playfadeout{
+    animation-name: fadeout;
+}
+.restartfadeout{
+    animation-name: fadeout1;
+}
+.playfadeout,
+.restartfadeout {
+    animation-duration: 1s;
+    animation-timing-function: cubic-bezier(0.785, 0.135, 0.15, 0.86);
+}
+@keyframes fadeout {
+    from {opacity: 1; margin-left: 0px;}
+    to {opacity: 0; margin-left: 30px;}
+}
+@keyframes fadeout1 {
+    from {opacity: 1; margin-left: 0px;}
+    to {opacity: 0; margin-left: 30px;}
 }

main.js

@@ -2,17 +2,18 @@
 var i18n = new VueI18n({
     locale: in_lang,
     messages:{
-        cn: {},
-        en: {}
+        cn: cn,
+        en: en
     }
 });
 
-i18n.cn = fetch('lang/cn.json').then(res=>res.json()).then(data=>{
-    i18n.setLocaleMessage('cn',Object.assign(data));
-});
-i18n.en = fetch('lang/en.json').then(res=>res.json()).then(data=>{
-    i18n.setLocaleMessage('en',Object.assign(data));
-});
+// Use JSON
+// i18n.cn = fetch('lang/cn.json').then(res=>res.json()).then(data=>{
+//     i18n.setLocaleMessage('cn',Object.assign(data));
+// });
+// i18n.en = fetch('lang/en.json').then(res=>res.json()).then(data=>{
+//     i18n.setLocaleMessage('en',Object.assign(data));
+// });
 
 // 更新库列表
 var updatePkg = function(){
@@ -1326,6 +1327,12 @@ var app = new Vue({
             head.appendChild(newscript);
             if(oldscript) head.removeChild(oldscript);
         },
+        copytip: function() {
+            var cpytip = document.getElementById('cpytip');
+            if(cpytip.classList.contains('playfadeout'))
+                cpytip.className = 'restartfadeout';
+            else cpytip.className = 'playfadeout';
+        },
         compile: function() {
             app.purl="";
             var urlencoder = function(str){