THEME-97: listing widget > new widget

tourware-resources/js/tourware.js

@@ -1,12 +1,35 @@
+import TravelListingItemLayout1 from "../vue/travel/listing/TravelListingItemLayout1";
+import Vue from "vue";
+
 Vue.component('travel-gallery', {
     template: '<h1>Pauli Bobby</h1>',
     props: ['config'],
     mounted: function () {
         console.log(JSON.parse(this.$attrs['data-config']))
         console.log(JSON.parse(this.$attrs['data-record']))
     }
+});
+
+Vue.component('travel-listing', {
+    template: '<h1>Pauli Bobby</h1>',
+    props: ['config'],
+    mounted: function () {
+    }
 })
 
+Vue.component('travel-listing-item-layout-1', TravelListingItemLayout1)
+Vue.component('travel-listing-item-layout-2', TravelListingItemLayout2)
+Vue.component('travel-listing-item-layout-3', TravelListingItemLayout3)
+Vue.component("dtag", {
+    props: {
+        tag: String
+    },
+    functional: true,
+    render(h, context) {
+        return h(context.props.tag, context.data, context.children);
+    }
+});
+
 jQuery( function( $ ) {
     if ( window.elementorFrontend ) {
         elementorFrontend.hooks.addAction( 'frontend/element_ready/widget', function( $scope ) {

tourware-resources/js/widget/abstract/listing/script.js

@@ -27,14 +27,16 @@ function add_tyto_items($page_num, trigger) {
         post_ID: post_id
     };
 
+    console.log(data);
+
     ajaxRunning = true;
     jQuery.ajax({
         url: TytoAjaxVars.ajaxurl,
         dataType: 'json',
         method: 'post',
         data: data,
         success: function (data) {
-            $container.find('div.page-numbers').replaceWith(data.pagination);
+            $container.find('ul.page-numbers, div.page-numbers').replaceWith(data.pagination);
             var $tours_content = $container.find('.tours-content');
             $container.removeClass('loading');
             jQuery('.autocompete-result').remove();

tourware-resources/scss/widget/abstract/_listing.scss

@@ -561,5 +561,9 @@
   }
 }
 
+.advanced-tyto-list .page-numbers.current {
+  font-size: 1.4em;
+}
+
 
 /* End Paination */

tourware-resources/vue/travel/listing/TravelListing.vue

@@ -0,0 +1,100 @@
+<template>
+    <div :class="['advanced-tyto-list', config.classes]">
+        <div class="tours-content">
+            <component v-for="post in displayedPosts" v-bind:key="post.key" :is="config.layout_name" :post="post" :config="config"></component>
+        </div>
+        <nav aria-label="Page navigation example" :class="['tyto-pagination']">
+            <ul v-if="config.pagination === 'numbers'" class="page-numbers numbers">
+                <li class="page-item">
+                    <a class="page-numbers" v-if="page !== 1" @click="page--"> Previous </a>
+                </li>
+                <li class="page-item">
+                    <a class="page-numbers" v-for="pageNumber in pages" @click="page = pageNumber" :class="{current: page === pageNumber}"> {{pageNumber}} </a>
+                </li>
+                <li class="page-item">
+                    <a @click="page++" v-if="page < pages.length" class="page-numbers"> Next </a>
+                </li>
+            </ul>
+            <div v-if="config.pagination === 'load_more'" class="page-numbers load-more">
+                <a @click="page++" v-if="page < pages.length" class="elementor-button page-numbers">{{config.load_more_text}}</a>
+            </div>
+        </nav>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    posts: {
+      type: Array
+    },
+    config: {
+      type: Object
+    }
+  },
+    data () {
+        return {
+            page: 1,
+            perPage: this.config.per_page,
+            pages: [],
+        }
+    },
+    methods:{
+        getPosts () {
+
+        },
+        setPages () {
+            let numberOfPages = Math.ceil(this.posts.length / this.perPage);
+            let end_size = 1;
+            let mid_size = 2;
+            let dots = false;
+            if (numberOfPages > 1) {
+                for (let index = 1; index <= numberOfPages; index++) {
+                    this.pages.push(index);
+                    // if (this.page === index) {
+                    //     this.pages.push(index);
+                    //     dots = true;
+                    // } else {
+                    //     if (index <= end_size || (index >= this.page - mid_size && index <= this.page + mid_size) || index > numberOfPages - end_size) {
+                    //         this.pages.push(index);
+                    //         dots = true;
+                    //     } else if (dots) {
+                    //         this.pages.push('...');
+                    //         dots = false;
+                    //     }
+                    // }
+                }
+            }
+
+        },
+        paginate (posts) {
+            console.log(this.config.pagination);
+            let page = this.page;
+            let perPage = this.perPage;
+            let from; let to;
+            if (this.config.pagination === 'numbers') {
+                from = (page * perPage) - perPage;
+                to = (page * perPage);
+            } else if (this.config.pagination === 'load_more') {
+                from = 0;
+                to = (page * perPage);
+            }
+            return  posts.slice(from, to);
+        }
+    },
+    computed: {
+        displayedPosts () {
+            return this.paginate(this.posts);
+        }
+    },
+    watch: {
+
+    },
+    mounted() {
+        this.setPages();
+    },
+    filters: {
+
+    }
+}
+</script>

tourware-resources/vue/travel/listing/TravelListingItemLayout1.vue

@@ -0,0 +1,35 @@
+<template>
+    <div class="ht-grid-item">
+        <div class="tour-item">
+            <div class="tour-head">
+                {{post.price_html}}
+                <a :href="post.link" class="tour-image">
+                    <img :src="post.img_src"
+                    :alt="post.title">
+                </a>
+                {{post.badge_html}}
+            </div>
+            <div class="tour-content">
+                <a :href=post.link >
+                    <component v-bind:is="post.title_tag" :class="['title', 'elementor-post__title']">{{post.title}}</component>
+                </a>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object
+    },
+  },
+
+  mounted() {
+
+  }
+}
+
+
+</script>

tourware-resources/vue/travel/listing/TravelListingItemLayout6.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="ht-grid-item">
+        <div class="tour-item">
+            <div class="tour-head">
+                <span v-if="post.badge" class="badge">{{post.badge}}</span>
+                <a :href="post.link" class="tour-image">
+                    <img :src="post.img_src"
+                    :alt="post.title">
+                </a>
+                <div class="tour-attribute duration" v-if="post.days" v-html="config.icon_days + ' ' + post.days"></div>
+                <div class="tour-attribute persons" v-if="post.persons" v-html="config.icon_persons + ' ' + post.persons"></div>
+            </div>
+            <div class="tour-content">
+                <div v-if="post.destination" v-html="config.icon_destination + ' ' + post.destination" class="destination"></div>
+                <a :href=post.link >
+                    <component v-bind:is="post.title_tag" :class="['title', 'elementor-post__title']">{{post.title}}</component>
+                </a>
+                <div v-if="post.excerpt" v-html="post.excerpt" class="excerpt"></div>
+                <div v-if="post.categories"  class="categories"><span v-for="category in post.categories" class="category">{{category}}</span></div>
+                <div class="push"></div>
+                <div v-if="post.scores"  class="scores">
+                    <div v-for="score in post.scores" class="score" v-html="score"></div>
+                </div>
+                <div class="footer">
+                    <div class="left">
+                        <div v-if="post.price" class='price'>{{post.price}}</div>
+                        <div v-if="post.flight" class='flight'>{{post.flight}}</div>
+                    </div>
+                    <div class="right">
+                        <a v-if="config.read_more" :href="post.link" class="elementor-button read-more">{{config.read_more_text}}</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  props: {
+    post: {
+      type: Object
+    },
+      config: {
+          type: Object
+      }
+  },
+
+  mounted() {
+
+  }
+}
+
+
+</script>

tourware/Elementor/Loader.php

@@ -4,6 +4,7 @@
 
 use Elementor\Plugin;
 use ElementorTyto\Widgets\Widget_Advanced_Tyto_List;
+use Tourware\Elementor\Widget\Listing\AbstractListing;
 use Tourware\Path;
 
 /**

tourware/Elementor/Widget.php

@@ -859,7 +859,7 @@ protected function addControlGroupAttribute($id, $args) {
                 'global' => [
                     'default' => Global_Typography::TYPOGRAPHY_TEXT,
                 ],
-                'selector' => '{{WRAPPER}} '.$args['selector'].', {{WRAPPER}} '.$args['selector'].' * ',
+                'selector' => '{{WRAPPER}} '.$args['selector'].', {{WRAPPER}} '.$args['selector'].' *:not(i) ',
             ]
         );