From 459e08978973f5f2b5fd4687e86350c3d10f93fc Mon Sep 17 00:00:00 2001 From: minimo-io <nicolas@minimo.io> Date: Thu, 22 Sep 2022 12:45:42 -0300 Subject: [PATCH 1/6] minimo homepage vue app --- mo-home.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 mo-home.js diff --git a/mo-home.js b/mo-home.js new file mode 100644 index 0000000..e7d945a --- /dev/null +++ b/mo-home.js @@ -0,0 +1,7 @@ +const App = new Vue({ + el: "#button-vue", + data: { + buttonTextInactive: "Leer más", + buttonTextActive: "Leer menos" + } +}); \ No newline at end of file From de0bec251b59928c135aeb94f210cb9da12cbcf3 Mon Sep 17 00:00:00 2001 From: minimo-io <nicolas@minimo.io> Date: Thu, 22 Sep 2022 14:17:35 -0300 Subject: [PATCH 2/6] test page added --- mo-home.js | 18 ++++++++++++------ test.html | 31 +++++++++++++++++++++++++++++++ 2 files changed, 43 insertions(+), 6 deletions(-) create mode 100644 test.html diff --git a/mo-home.js b/mo-home.js index e7d945a..87fcaf7 100644 --- a/mo-home.js +++ b/mo-home.js @@ -1,7 +1,13 @@ -const App = new Vue({ - el: "#button-vue", - data: { - buttonTextInactive: "Leer más", - buttonTextActive: "Leer menos" +{/* <a href="#"><i class="" aria-hidden="true"></i> Leer más</a> */} + + +const app = createApp({ + data() { + return { + readMoreText: "Leer más", + readMoreIcon: "fa fa-arrow-right", + } } -}); \ No newline at end of file + }) + +app.mount('#mo-home-vue-app') diff --git a/test.html b/test.html new file mode 100644 index 0000000..5920477 --- /dev/null +++ b/test.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta http-equiv="X-UA-Compatible" content="IE=edge"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Document</title> + <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> +</head> +<body> + <div id="mo-home-vue-app"> + <a @click.prevent="readMore()"><i :class="readMoreIcon" aria-hidden="true"></i> {{ readMoreText }}</a> + </div> + + <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script> + <script> + + const app = Vue.createApp({ + data() { + return { + readMoreText: "Leer más", + readMoreIcon: "fa fa-arrow-right", + } + } + }) + + app.mount('#mo-home-vue-app') + + </script> +</body> +</html> \ No newline at end of file From 39ee59df12a3102d2814c7e0820c797a7b3b1ee7 Mon Sep 17 00:00:00 2001 From: minimo-io <nicolas@minimo.io> Date: Thu, 22 Sep 2022 15:14:23 -0300 Subject: [PATCH 3/6] mo home ready! --- mo-home.js | 51 ++++++++++++++++++++++++++++++++++++----------- test.html | 58 ++++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 87 insertions(+), 22 deletions(-) diff --git a/mo-home.js b/mo-home.js index 87fcaf7..c0616bf 100644 --- a/mo-home.js +++ b/mo-home.js @@ -1,13 +1,40 @@ -{/* <a href="#"><i class="" aria-hidden="true"></i> Leer más</a> */} - - -const app = createApp({ - data() { - return { - readMoreText: "Leer más", - readMoreIcon: "fa fa-arrow-right", - } - } - }) +jQuery(document).ready(function(){ -app.mount('#mo-home-vue-app') + var READMORELANG, READLESSLANG; + const app = Vue.createApp({ + data() { + return { + readMoreActive: false, + readMoreText: "Leer más", + readMoreIcon: "fa fa-arrow-right", + } + }, + mounted(){ + READMORELANG = jQuery(".readMoreBtn").data("readmorelang"); + READLESSLANG = jQuery(".readMoreBtn").data("readlesslang"); + + + }, + methods:{ + readMore(){ + if (this.readMoreActive){ + this.readMoreText = READMORELANG; + this.readMoreIcon = "fa fa-arrow-right"; + + }else{ + this.readMoreText = READLESSLANG; + this.readMoreIcon = "fa fa-minus"; + } + this.readMoreActive = ! this.readMoreActive; + + jQuery(".d-none").toggle("fast", function(){ + + }); + + + } + } + }) + app.mount('#mo-home-vue-app') + +}); \ No newline at end of file diff --git a/test.html b/test.html index 5920477..9c4e54a 100644 --- a/test.html +++ b/test.html @@ -4,28 +4,66 @@ <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Document</title> + <title>Vue Tests</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> + <style> + .d-none{ + display:none; + } + </style> </head> <body> - <div id="mo-home-vue-app"> - <a @click.prevent="readMore()"><i :class="readMoreIcon" aria-hidden="true"></i> {{ readMoreText }}</a> + <div class="d-none"> + This is a hidden text. Named for some obscure action to be active on the web. + <br> + Now it's time to rock & roll! </div> - +<div id="mo-home-vue-app"> + <a class="readMoreBtn" data-readlesslang = "Leer menos" data-readmorelang = "Leer más" @click.prevent="readMore()"><i :class="readMoreIcon" aria-hidden="true"></i> {{ readMoreText }}</a> +</div> + <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script> <script> - + jQuery(document).ready(function(){ + var READMORELANG, READLESSLANG; const app = Vue.createApp({ data() { - return { - readMoreText: "Leer más", - readMoreIcon: "fa fa-arrow-right", - } + return { + readMoreActive: false, + readMoreText: "Leer más", + readMoreIcon: "fa fa-arrow-right", + } + }, + mounted(){ + READMORELANG = jQuery(".readMoreBtn").data("readmorelang"); + READLESSLANG = jQuery(".readMoreBtn").data("readlesslang"); + + + }, + methods:{ + readMore(){ + if (this.readMoreActive){ + this.readMoreText = READMORELANG; + this.readMoreIcon = "fa fa-arrow-right"; + + }else{ + this.readMoreText = READLESSLANG; + this.readMoreIcon = "fa fa-minus"; + } + this.readMoreActive = ! this.readMoreActive; + + jQuery(".d-none").toggle("fast", function(){ + + }); + + + } } }) - app.mount('#mo-home-vue-app') + }); + </script> </body> </html> \ No newline at end of file From eeaa58504a9704a029ab2498e4e4e1ad29c32d46 Mon Sep 17 00:00:00 2001 From: minimo-io <nicolas@minimo.io> Date: Thu, 22 Sep 2022 15:16:57 -0300 Subject: [PATCH 4/6] comment --- mo-home.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/mo-home.js b/mo-home.js index c0616bf..a77d0ad 100644 --- a/mo-home.js +++ b/mo-home.js @@ -1,5 +1,7 @@ +// Runs at minimo.io homepage, loaded via jsdelivr (fetched from Github) +// @minimo-io jQuery(document).ready(function(){ - + var READMORELANG, READLESSLANG; const app = Vue.createApp({ data() { From 9b94059ede5098b73253dba27c251aa0ab478b80 Mon Sep 17 00:00:00 2001 From: minimo-io <nicolas@minimo.io> Date: Thu, 22 Sep 2022 15:23:03 -0300 Subject: [PATCH 5/6] more speed to toggle --- mo-home.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/mo-home.js b/mo-home.js index a77d0ad..f984999 100644 --- a/mo-home.js +++ b/mo-home.js @@ -29,7 +29,7 @@ jQuery(document).ready(function(){ } this.readMoreActive = ! this.readMoreActive; - jQuery(".d-none").toggle("fast", function(){ + jQuery(".d-none").toggle("200", function(){ }); From b4a87af6852b0bedcccc04c3e86a68e3448894a2 Mon Sep 17 00:00:00 2001 From: minimo-io <nicolas@minimo.io> Date: Thu, 22 Sep 2022 17:53:27 -0300 Subject: [PATCH 6/6] fix multi-lang --- mo-home.js | 9 +++++---- test.html | 12 ++++++------ 2 files changed, 11 insertions(+), 10 deletions(-) diff --git a/mo-home.js b/mo-home.js index f984999..4399e6f 100644 --- a/mo-home.js +++ b/mo-home.js @@ -1,20 +1,21 @@ // Runs at minimo.io homepage, loaded via jsdelivr (fetched from Github) // @minimo-io -jQuery(document).ready(function(){ +// v0.1 +jQuery(document).ready(function(){ var READMORELANG, READLESSLANG; const app = Vue.createApp({ data() { return { readMoreActive: false, - readMoreText: "Leer más", + readMoreText: "-", readMoreIcon: "fa fa-arrow-right", } }, mounted(){ READMORELANG = jQuery(".readMoreBtn").data("readmorelang"); READLESSLANG = jQuery(".readMoreBtn").data("readlesslang"); - + this.readMoreText = READMORELANG; }, methods:{ @@ -29,7 +30,7 @@ jQuery(document).ready(function(){ } this.readMoreActive = ! this.readMoreActive; - jQuery(".d-none").toggle("200", function(){ + jQuery(".profile-more").toggle("200", function(){ }); diff --git a/test.html b/test.html index 9c4e54a..c4f9487 100644 --- a/test.html +++ b/test.html @@ -7,19 +7,19 @@ <title>Vue Tests</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <style> - .d-none{ + .profile-more{ display:none; } </style> </head> <body> - <div class="d-none"> + <div class="profile-more"> This is a hidden text. Named for some obscure action to be active on the web. <br> Now it's time to rock & roll! </div> <div id="mo-home-vue-app"> - <a class="readMoreBtn" data-readlesslang = "Leer menos" data-readmorelang = "Leer más" @click.prevent="readMore()"><i :class="readMoreIcon" aria-hidden="true"></i> {{ readMoreText }}</a> + <a class="readMoreBtn" data-readlesslang = "Leia menos" data-readmorelang = "Leia mais" @click.prevent="readMore()"><i :class="readMoreIcon" aria-hidden="true"></i> {{ readMoreText }}</a> </div> <script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script> <script src='https://unpkg.com/vue@3/dist/vue.global.js'></script> @@ -30,14 +30,14 @@ data() { return { readMoreActive: false, - readMoreText: "Leer más", + readMoreText: "-", readMoreIcon: "fa fa-arrow-right", } }, mounted(){ READMORELANG = jQuery(".readMoreBtn").data("readmorelang"); READLESSLANG = jQuery(".readMoreBtn").data("readlesslang"); - + this.readMoreText = READMORELANG; }, methods:{ @@ -52,7 +52,7 @@ } this.readMoreActive = ! this.readMoreActive; - jQuery(".d-none").toggle("fast", function(){ + jQuery(".profile-more").toggle("200", function(){ });