Customers Review updated

assets/css/global.css

@@ -545,7 +545,8 @@ p{
     border: 1px solid transparent;
     border-image-source: linear-gradient(to right, transparent, var(--cor-destaque) 45px, transparent);
     border-image-slice: 1;
-    transition: .3s ease;
+    transition: .3s ease, height 1.5s ease;
+    overflow: hidden;
 }
 
 #content .customers-reviews .reviews .review:hover .message {
@@ -607,15 +608,58 @@ p{
     fill: var(--cor-destaque);
 }
 
-#content .customers-reviews .reviews .review .message .text{
+#content .customers-reviews .reviews .review .message .text {
     --placeholder-width: 200px;
+    --mask-image: linear-gradient(to top, transparent, black);
     font-family: Roboto, Arial, Helvetica, sans-serif;
     line-height: 28pt;
     font-size: 18pt;
     font-weight: 300;
+    overflow: hidden;
+}
+
+#content .customers-reviews .reviews .review .message:has(button.see-more) .text:not(:empty) {
+    -webkit-mask-image: var(--mask-image);
+    -moz-mask-image: var(--mask-image);
+    mask-image: var(--mask-image);
+}
+
+#content .customers-reviews .reviews .review .message button.see-more {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 60px;
+    height: 20px;
+    border: none;
+    background-color: var(--cor-destaque);
+    border-radius: var(--radius-cylinder);
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    cursor: pointer;
+}
+
+#content .customers-reviews .reviews .review .message button.see-more .icon {
+    width: 20px;
+    height: 20px;
+    fill: #ffffff;
+    transition: .3s ease;
+}
+
+#content .customers-reviews .reviews .review .message.see-more {
+    height: 100%!important;
+}
+
+#content .customers-reviews .reviews .review .message.see-more .text {
+    --mask-image: none;
+}
+
+#content .customers-reviews .reviews .review .message.see-more button.see-more .icon {
+    transform: rotate(180deg);
 }
 
-#content .customers-reviews .reviews .review .customer{
+#content .customers-reviews .reviews .review .customer {
     display: flex;
     gap: 20px;
     align-items: center;

assets/js/index.js

@@ -1,112 +1,120 @@
-import View from './view.js'
+import Config from './config.js'
 import Utils from './utils.js'
+import View from './view.js'
 
 const elementsTypingEffects = document.querySelectorAll('.typing-effect')
 const menusHamburgueres = document.querySelectorAll('.menu-hamburguer')
 const customersReviewsContainer = document.querySelector('.customers-reviews .reviews')
-const customersReviews = Utils.shuffle([
-    {
-        avatar: 'https://cdn.discordapp.com/avatars/687372534030663759/7aef0f501331a0ccbfa2a09e7bc8848c.png?size=2048',
-        name: 'Gabriel Eduardo',
-        service: 'Calculadora Tributaria',
-        stars: 5,
-        message: 'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et',
-    },
-    {
-        avatar: 'https://cdn.discordapp.com/avatars/638886080363626507/6dd85646b0032fda9d72ea8c2bc9614e.png?size=2048',
-        name: 'Jhonzzera',
-        service: 'Carousel',
-        stars: 5,
-        message: 'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et',
-    },
-    {
-        avatar: 'https://cdn.discordapp.com/avatars/319099107396288515/84ece945116676ee36949e70f3e1cde4.png?size=2048',
-        name: 'Samuel Barbera',
-        service: 'Site para bot',
-        stars: 5,
-        message: 'lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempor incididunt ut labore et',
-    },
-])
-
-if(customersReviewsContainer){
-
-    const viewLocale = 'components/reviews/review'
-    const customersReviewsView = await Promise.all(customersReviews.slice(0, 2).map(async (customerReview) => {
-
-        return Utils.toHTML(await View.render(`${viewLocale}`, {
-            stars: (await View.render(`${viewLocale}/stars/star`)).repeat(customerReview.stars),
-            starsCount: customerReview.stars,
-            message: customerReview.message,
-            avatar: customerReview.avatar,
-            name: customerReview.name,
-            service: customerReview.service,
-        }))
-
-    }))
-
-    customersReviewsContainer.innerHTML = null
 
-    customersReviewsView.forEach((customerReview) => {
+let customersReviews
 
-        customersReviewsContainer.appendChild(customerReview)
+window.addEventListener('load', async () => {
 
-    })
-
-}
+    if(customersReviewsContainer){
 
-if(menusHamburgueres.length > 0){
+        customersReviews = Utils.shuffle(await (await fetch(`${Config.urlBase}/assets/json/customers_reviews.json`)).json()).filter(customerReview => customerReview.status)
 
-    menusHamburgueres.forEach((menu) => {
+        const viewLocale = 'components/reviews/review'
+        const customersReviewsView = await Promise.all(customersReviews.slice(0, 2).map(async (customerReview) => {
+
+            return Utils.toHTML(await View.render(`${viewLocale}`, {
+                stars: (await View.render(`${viewLocale}/stars/star`)).repeat(customerReview.stars),
+                starsCount: customerReview.stars,
+                message: customerReview.message,
+                avatar: customerReview.avatar,
+                name: customerReview.name,
+                service: customerReview.service,
+            }))
+
+        }))
+
+        customersReviewsContainer.innerHTML = null
+
+        customersReviewsView.forEach((customerReview) => {
 
-        const sidebar = document.querySelector(`#${menu.dataset.for}`)
-        const ResObserver = new ResizeObserver(() => {
+            customersReviewsContainer.appendChild(customerReview)
+
+            const message = customerReview.querySelector('.message')
+            const seeMore = message.querySelector('.see-more')
 
-            if(document.body.clientWidth < 1095) {
+            const styles = getComputedStyle(message)
+            const minHeight = styles.getPropertyValue('min-height').replace(/\D/g, '')
+
+            if(message.clientHeight <= minHeight){
 
-                sidebar.classList.remove('show')
+                seeMore.remove()
+                return
 
             }
 
-            const nav = sidebar.querySelector('nav')
-            const styles = getComputedStyle(nav)
-            const sidebarPadding = styles.getPropertyValue('--padding')
-
-            nav.style.paddingRight = nav.scrollHeight > nav.clientHeight ? sidebarPadding : 0
-
-        })
-
-        ResObserver.observe(sidebar)
+            message.style.maxHeight = `${message.clientHeight}px`
+            message.style.height = `0%`
 
-        menu.addEventListener('click', () => {
+            seeMore.addEventListener('click', () => {
 
-            sidebar.classList.toggle('show')
+                message.classList.toggle('see-more')
 
+            })
+
         })
-
-    })
-
-}
-
-if(elementsTypingEffects.length > 0){
-
-    const backupElementsValues = []
-
-    for(let [index, element] of elementsTypingEffects.entries()){
-
-        backupElementsValues[index] = element.textContent
-        element.style.height = `${element.clientHeight}px`
-
-        element.innerHTML = null
-
+
     }
-
-    for(let [index, text] of backupElementsValues.entries()){
-
-        await typingEffect(elementsTypingEffects[index], text)
-
+
+    if(menusHamburgueres.length > 0){
+
+        menusHamburgueres.forEach((menu) => {
+
+            const sidebar = document.querySelector(`#${menu.dataset.for}`)
+            const ResObserver = new ResizeObserver(() => {
+
+                if(document.body.clientWidth < 1095) {
+
+                    sidebar.classList.remove('show')
+
+                }
+
+                const nav = sidebar.querySelector('nav')
+                const styles = getComputedStyle(nav)
+                const sidebarPadding = styles.getPropertyValue('--padding')
+
+                nav.style.paddingRight = nav.scrollHeight > nav.clientHeight ? sidebarPadding : 0
+
+            })
+
+            ResObserver.observe(sidebar)
+
+            menu.addEventListener('click', () => {
+
+                sidebar.classList.toggle('show')
+
+            })
+
+        })
+
+    }
+
+    if(elementsTypingEffects.length > 0){
+
+        const backupElementsValues = []
+
+        for(let [index, element] of elementsTypingEffects.entries()){
+
+            backupElementsValues[index] = element.textContent
+            element.style.height = `${element.clientHeight}px`
+
+            element.innerHTML = null
+
+        }
+
+        for(let [index, text] of backupElementsValues.entries()){
+
+            await typingEffect(elementsTypingEffects[index], text)
+
+        }
+
     }
 
-}
+})
 
 async function typingEffect(element, text) {
 

assets/js/utils.js

@@ -70,7 +70,7 @@ const toCamelCase = function (string, separator = ' ') {
  * Converte uma string para um elemento HTML ChildNode ou NodeList, dependendo da estrutura.
  * 
  * @param {string} string String contendo uma estrutura HTML
- * @return {ChildNode | NodeList} Retorna um ChildNode ou NodeList
+ * @return {ChildNode | NodeList | Element} Retorna um ChildNode ou NodeList
  * 
 */
 
@@ -206,6 +206,20 @@ const shuffle = (array) => {
 
 }
 
+/**
+ * 
+ * @param {Number} time Tempo em milisegundos
+ * 
+ * Faz com que o fluxo do escopo em que a função foi executada parar por um periodo e depois continuar
+ * 
+*/
+
+const sleep = async (time) => {
+
+    return new Promise((resolve) => setTimeout(() => resolve(), time))
+
+}
+
 /**
  * 
  * Algumas funções uteis para o desenvolvimento
@@ -218,5 +232,6 @@ export default {
     toCamelCase,
     toHTML,
     objIndexOf,
-    shuffle
+    shuffle,
+    sleep
 }

assets/json/customers_reviews.json

@@ -0,0 +1,26 @@
+[
+    {
+        "avatar": "https://cdn.discordapp.com/avatars/687372534030663759/7aef0f501331a0ccbfa2a09e7bc8848c.png?size=2048",
+        "name": "Gabriel Eduardo",
+        "service": "Calculadora Tributaria",
+        "stars": 5,
+        "message": "Estou muito satisfeito com o sistema de calculadora tributária desenvolvido por Ádrian e sua equipe <i><strong>AxSpear</strong></i>. Funciona perfeitamente e foram super atenciosos durante todo o processo. Parabéns pelo excelente trabalho!",
+        "status": true
+    },
+    {
+        "avatar": "https://cdn.discordapp.com/avatars/638886080363626507/6dd85646b0032fda9d72ea8c2bc9614e.png?size=2048",
+        "name": "Jhonzzera",
+        "service": "Features para portfólio",
+        "stars": 5,
+        "message": "Ao contratar os serviços do <i><strong>Ádrian</strong></i> e sua equipe <i><strong>AxSpear</strong></i>, contei tudo o que precisava ser personalizado na minha página do <i><strong>WordPress</strong></i> e rapidamente fui respondido, marcamos uma reunião onde foi entendido tudo o que seria feito e o trabalho foi concluído em 3 dias, muito mais rápido do que eu imaginava, parabéns a equipe! Super recomendo.",
+        "status": true
+    },
+    {
+        "avatar": "https://cdn.discordapp.com/avatars/319099107396288515/84ece945116676ee36949e70f3e1cde4.png?size=2048",
+        "name": "Samuel Barbera",
+        "service": "Site para bot Discord",
+        "stars": 5,
+        "message": "O site do bot ficou foda, tá funcionando tudo certinho! 🤙",
+        "status": true
+    }
+]

assets/view/components/reviews/review/index.html

@@ -7,8 +7,11 @@
             {{starsCount}} Estrelas
         </div>
         <p class="text">{{message}}</p>
+        <button class="see-more">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="icon"><path d="M16.939 7.939 12 12.879l-4.939-4.94-2.122 2.122L12 17.121l7.061-7.06z"></path></svg>
+        </button>
     </div>
-    <div data-message-id="1" class="customer">
+    <div class="customer">
         <img class="avatar" src="{{avatar}}">
         <div class="infos">
             <span class="name">{{name}}</span>

index.html

@@ -172,7 +172,7 @@ <h1 class="title">Clientes<span class="mini-title">O que eles dizem sobre mim e
                         <div class="rating"></div>
                         <p class="text"></p>
                     </div>
-                    <div data-message-id="1" class="customer">
+                    <div class="customer">
                         <img class="avatar" src="./assets/img/avatar.jpg">
                         <div class="infos">
                             <span class="name"></span>