index.twig

{{ set(this, 'title', _Blog.getBlogTitle()) }}


{% set planSettings = _Network.getPlanSettings() %}

{% if planSettings.is_directory_allowed is defined and planSettings.is_directory_allowed == 1 %}



    {% set networkData  = _Network.getNetworkData() %}
    {% set blogData     = _Blog.getBlog(null, {'excludeMenus' : true}) %}
    {% set config       = _Network.getThemeConfig() %}
    {% set currentPage  = _Blog.getBlogTitle() %}
    {% set mainClassifiedsPage  = currentPage %}

    {% set sideMenu = _Menu.get({'menuType': 'header', "menuGroupName": currentPage, 'include_article_count': true }) %}
    {% set panels = _Menu.get({'menuType': 'header', "menuGroupName":  currentPage ~ " panels"}) %}
    {% set url = _AppHelper.getParsedUrl() %}
    {% set articleCount = 0 %}

    {% set contentType = "article" %}
    {% if blogData['additionalInfo']['contenttype'] is defined %}
        {% set contentType = blogData['additionalInfo']['contenttype'] %}
    {% endif %}

    {# {% set log = _AppHelper.log(contentType) %} #}

    {# *******************************************************
                    Fetch all needed feeds
    ******************************************************* #}
    {% set blogFeeds = {} %}

    {# This page can either render panels or entire section work of articles #}
    {% set fullPage = false %}
    {% set limit = 3 %}
    {% if config['classifieds']['new-card-style'] is defined and config['classifieds']['new-card-style'] == true %}
        {% set limit = 2 %}
    {% endif %}

    {% if url.query | length > 0 %}


        {# SECTION VIEW #}
        {% if url.query.section is defined and url.query.section != "" %}
            {% set section = url.query.section | replace({'%20': " "}) %}
            {% set panels = [{'blogTitle': section}] %}
            {% set currentPage = section %}

            {% set blogTitle = "" %}
            {% set blogLink = "" %}
            {% set fullPage = true %}
            {% set limit = 12 %}
        {% endif %}

        {# CATEGORY VIEW #}
        {% if url.query.category is defined and url.query.category != "" %}

            {% set currentPage = url.query.category | replace({'%20': " "}) | replace({"%26":"&"}) %}
            
            {# if category view, we need to get the sections within this category to display
            as panels.  We get them from the sidemenu #}
            {% set break = false %}
            {% for panel in sideMenu if not break  %}
                {% if panel.blogTitle | lower == currentPage | lower %}
                    {% set panels = panel.children %}
                    {% set break = true %}
                {% endif %}
            {% endfor %}
        {% endif %}
    {% endif %}
    {% set featurePanel = false %}
    {% if config['classifieds']['feature-panel'] is defined and config['classifieds']['feature-panel'] == true %}
        {% set featurePanel = true %}
    {% endif %}

    {% set cardClasses = 'acme-card-1-mobile acme-card-1-tablet acme-card-1-desktop' %}
    {% set cardClassesLoading = 'acme-card-1-mobile acme-card-1-tablet acme-card-1-desktop acme-col-lg-4 acme-col-12 acme-col-md-12' %}
    {% set cardClassesContainer = 'acme-col-12 acme-col-md-12 acme-col-lg-4' %}

    {% if config['classifieds']['new-card-style'] is defined and config['classifieds']['new-card-style'] == true %}
        {% set cardClasses = 'acme-card-2-mobile acme-card-2-tablet acme-card-2-desktop' %}
        {% set cardClassesLoading = 'acme-card-2-mobile acme-card-2-tablet acme-card-2-desktop acme-col-lg-2 acme-col-12 acme-col-md-12' %}
        {% set cardClassesContainer = 'acme-col-12 acme-col-md-12 acme-col-lg-6' %}
    {% endif %}


    {# Get the blog feed for the section(s)  #}
    {% for panel in panels %}

        {% set break = false %}
        {% set panelNo = loop.index %}
        
        {% for blog in networkData.networkBlogs if not break %}
            {% set blogTitle = blog.title %}
            {% set blogLink = blog.link %}

            {# FOR DEV  #}
            {# {% if dev %}
                {% set blogFeeds = blogFeeds | merge({
                    (key) : { 
                        'feed' : _Blog.getBlogFeed({'limit': 1, 'offset': 0}), 
                        'link' : blog.link 
                        } 
                    }) %}
            {% endif %} #}


            {# FOR PRODUCTION #}
            {% set panelLimit = limit %}
            {% if featurePanel == true and panelNo == 1 %}
                {% set panelLimit = 12 %}
            {% endif %}


            {% if blogTitle | lower == panel.blogTitle | lower %}
                
                {% set feed = _Blog.getBlogFeed({
                    'offset' : 0, 
                    'blogid' : blog.guid,
                    'limit'  : panelLimit
                    })
                %}

                {% set blogFeeds = blogFeeds | merge({
                    (blog.title) : {
                        'feed'      : feed,
                        'link'      : blog.link,
                        'guid'      : blog.guid,
                        'count'     : _Blog.getBlogFeedArticleCount({ "blog_id": blog.id})

                        }
                    }) %}
                {% set break = true %}
            {% endif %}

        {% endfor %}
    {% endfor %}


    {% set allowPosting = true %}
    {% set allowSearch = true %}
    {% if config['classifieds']['allow-posting'] is defined and config['classifieds']['allow-posting'] == false %}
        {% set allowPosting = false %}
    {% endif %}
    {% if config['classifieds']['allow-search'] is defined and config['classifieds']['allow-search'] == false %}
        {% set allowSearch = false %}
    {% endif %}


    <main id="main" class="site-main u-margin-top-60 u-margin-bottom-60" role="main" data-article-limit="{{limit}}" data-article-count="{{articles | length}}">
        <div class="acme-container">
            <div class="acme-row">
                <div class="acme-col-12">

                    <div class="c-section-head">
                        <a class="what" href="{{blogData.url}}">
                            <h1 class="c-section-head__title">{{this.title}}</h1>
                        </a>
                    
                    {% if allowPosting %}
                        <a href="{{networkData.defaultBlogUrl}}/classified-create" class="c-section-head__button c-button c-button--blue">Submit a listing</a>
                    {% endif %}
                    
                        <div class="c-section-head__rule"></div>

                    </div>

                
            {# *********************************************
                            Filter and search
                ********************************************* #}
                {% if allowSearch %}
                    <div class="c-filter--search c-filter--search-xs form-group">
                        <div class="c-filter--search--field c-filter--search--field-xs">
                            {# <span id="search-button-2" class="fa fa-search c-search-icon"></span> #}
                            <input type="text" class="form-control" name="search" id="search" placeholder="Search listings">
                            <div id="searchSpinner" class="spinner" style="position:relative;top:-22px;right:42px;float:right;display:none;"></div>
                        </div>
                        <div class="c-filter--search--select c-filter--search--select-xs">
                            <div id="classySearchDropdown" class="" style="width:100%"></div>
                        </div>
                        <div class="c-filter--search--button">
                            <button id="search-button" type="submit" class="c-button c-button--blue">Search</button>
                        </div>
                    </div>
                {% endif %}
                </div>
            </div>
            




            <div class="acme-row">


            {# *********************************************
                            Classifieds Side Menu
                ********************************************* #}
                <aside class="acme-col-12 acme-col-lg-3 acme-col-md-4 acme-col-sm-4 test-layout">
                    <div id="classified-menu" class="c-classified-menu c-classified-menu-xs">
                        {{ this.render('/partials/_menu-classifieds.twig', {
                            'menu': sideMenu,
                            'current': currentPage
                        }) | raw }}
                    </div>
                </aside>







            {# *********************************************
                                Main content
                ********************************************* #}
                <div class="acme-col-12 acme-col-lg-9 acme-col-md-8 acme-col-sm-12 acme-com-xs-12">





                    {# *********************************************
                                    Full section page
                        ********************************************* #}
                    {% if fullPage == true %}


                        {% set articles = blogFeeds[blogTitle].feed.articles %}
                        <div id="results" class="">

                            <div class="acme-row c-section-head" data-bguid="{{blogFeeds[blogTitle]['guid']}}">
                                <div class="acme-col-12">
                                    <a href="#">
                                        <div class="c-section-head__title">{{blogTitle}}</div>
                                    </a> 
                                    <div class="c-section-head__rule"></div>
                                </div>
                            </div>

                            <div class="acme-row">
                            {% for i in 0..11 if articles[i] %}
                                <div class="{{cardClassesContainer}}">
                                    {{this.render('/partials/_single-article.twig', {
                                        article: articles[articleCount], 
                                        position: (articleCount+1),
                                        imageSize: {width: 285, height: 192},
                                        cardType: "acme-",
                                        contentType: contentType,
                                        containerClass: cardClasses
                                    }) | raw}}
                                    {% set articleCount = (dev) ? articleCount : articleCount + 1 %}
                                </div>
                            {% endfor %}

                            </div>


                            <div id="classified_more" class="acme-row"> </div>

                            <div class="acme-row"> 
                                <div class="acme-col-12">
                                    <a href="#" id="section-load" class=""></a>
                                </div>
                            </div>
                        </div>







                    {# *********************************************
                                        Category panel page
                        ********************************************* #}
                    {% else %}
                        <div id="results" class="">

                            {% set bannerNo = 1 %}
                            {% set pageSectionId = 1 %}

                            {% for pagesection in blogFeeds | keys %}
                                

                                {% set params = {
                                    'networkData' : networkData,
                                    'blogFeeds'   : blogFeeds,
                                    'blogData'    : blogFeeds[pagesection],
                                    'dev'         : dev,
                                    'config'      : {
                                        blogs: [pagesection],
                                        template: "partials/panels/section-classified-panel",
                                        title: pagesection,
                                        nomargin: true,
                                        wrapper: false,
                                        link: blogData.url ~"?section=" ~ pagesection | lower,
                                        template_params: {
                                            loadmore: true,
                                            loadmore_id: pageSectionId ~ "",
                                            contentType: contentType,
                                            blog_guid: blogFeeds[pagesection]['guid']
                                        },
                                        featurelisting : featurePanel and loop.index == 1 ? 12 : 0
                                    },
                                } %}

                                {{this.render('render.twig', params) | raw}} 
                                
                                {% set pageSectionId = pageSectionId + 1 %}

                                {% if loop.index in bannerSpots %}
                                    {% if config['inventory']['adSpace']['banner'][bannerNo] is defined %}
                                        <div class="j-adslot" id="{{config['inventory']['adSpace']['banner'][bannerNo]}}" data-adshape="banner"></div>
                                    {% endif %}
                                    {% set bannerNo = bannerNo + 1 %}
                                {% endif %}

                            {% endfor %}

                        </div>
                    {% endif %}



                </div>
            </div>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>


    </main>




    <div id="overlay" class="c-classified-menu__overlay"></div>
    <div id="classified-menu-mobile" class="c-classified-menu c-classified-menu-xs c-classified-menu--mobile">
        <div id="classified-menu-mobile-open" class="c-classified-menu__open">Categories</div>
        {{ this.render('/partials/_menu-classifieds.twig', {'menu': sideMenu}) | raw }}
    </div>


    <script>
        // main script is defered so event listener makes sure
        // defered script is loaded before this runs
        document.addEventListener("DOMContentLoaded", function() {

            var classifiedSections = [];
            menu = null;

            // override the lightbox handler from the one set in card.js
            Card.prototype.bindLightbox = function() {
                $('article.{{contentType}}').unbind().on('click', function (e) {
                    e.preventDefault();
                    var csrfToken = $('meta[name="csrf-token"]').attr("content");
                    
                    var blogTitle = $(this).parent().data('blog-title');


                    Acme.LightBox = new Acme.lightBox('modal', 'lightbox-modal');
                    Acme.LightBox.render(null, blogTitle, '<div class="spinner {{title}}" style="position:relative;height:70px;margin-top:30px;margin-bottom:30px"></div>');

                    var isSocial = $(this).parent().data('social');
                    var action = 'POST';

                    if (isSocial) {
                        var url = '/api/social/get-social-post';
                        var blogGuid = $(this).parent().data('blog-guid');
                        var postGuid = $(this).parent().data('guid');
                        var payload = {blog_guid: blogGuid, guid: postGuid, _csrf: csrfToken}
                    } else {
                        var url = '/api/article/get-article';
                        var articleId = $(this).parent().data('id');
                        var payload = {articleId: articleId, _csrf: csrfToken}
                        action = 'GET';
                    }

                    if (!isRequestSent) {

                        $.ajax({
                            type: action,
                            url: _appJsConfig.appHostName + url,
                            dataType: 'json',
                            data: payload,
                            success: function (data, textStatus, jqXHR) {
                                data.hasMediaVideo = false;
                                if (data.media['type'] === 'video') {
                                    data.hasMediaVideo = true;
                                }
                                
                                if (data.source == 'youtube') {
                                    var watch = data.media.videoUrl.split("=");
                                    data.media.videoUrl = "https://www.youtube.com/embed/" + watch[1];
                                }
                                
                                data.templatePath = _appJsConfig.templatePath;
                                
                                var cardRenderer = new Card(data);

                                var article = cardRenderer.render({
                                    cardClass : "acme-card-10-mobile acme-card-10-tablet acme-card-10-desktop",
                                    type : "acme-",
                                    content: "full",
                                    imageWidth: 540,
                                    imageHeight: 420,
                                });

                                Acme.LightBox.renderPreLayout(article);
                            },
                            error: function (jqXHR, textStatus, errorThrown) {
                                console.log(errorThrown, textStatus, jqXHR);
                                isRequestSent = false;
                            },
                            beforeSend: function (jqXHR, settings) {
                                isRequestSent = true;
                            },
                            complete: function (jqXHR, textStatus) {
                                isRequestSent = false;
                            }
                        });
                    }
                });
            }






            var offset = 0;

            Acme.search = new Acme.ArticleFeed({
                model           : Acme.Card,
                container       : 'results',
                limit           : 30,
                offset          : offset,
                label           : "Show more results",
                loadtype        : 'api/search',
                name            : 'search-load', //name of the loadmore button
                type            : "{{contentType}}",
                before          : '<div class="acme-row">',
                failText        : '<h2 style="font-size:24px;margin-top:25px;color:#0e215d;font-weight:400;">Sorry, we couldn\'t find what you\'re looking for.</h2>',
                after           : '</div>',
                cardType        : "acme-",
                card_class      : "{{cardClassesLoading}}",
                lightbox        : "{{contentType}}"
            }); 


            // garage sales b92b5dfa-5844-4be8-ad6a-1664ab7e2c5e
            //              519a9fbd-f778-4d4e-b7c6-c85c43eb01c9
            var CategoryMenu = function() {
                this.form = "classifieds-form";
                this.menu = new Acme.listMenu({
                    'parent'        : $('#classySearchDropdown'),
                    'list'          : [],
                    'defaultSelect' : {"label": "Select a category"},
                    'name'          : 'category',
                    'key'           : 'category',
                    'class'         : 'Acme-pulldown Acme-pulldown--border'
                }).init().render();
                this.subscriptions = Acme.PubSub.subscribe({
                    'Acme.CategoryMenu.listener' : ['state_changed', 'update_state']
                });
            }
            CategoryMenu.prototype = new Acme.Form();
            CategoryMenu.constructor = CategoryMenu;
            CategoryMenu.prototype.listeners = {
                "category": function(data, topic) {
                    if (data.category === "") data.category = null;
                    Acme.search.options.blogid = data.category;
                },
            }
            Acme.CategoryMenu = new CategoryMenu();

            var menuMapper = function(data) {
                if (data.children !== 'undefined' && data.children.length > 0 ) {
                    var children = data.children.map(menuMapper);
                    //children.unshift({
                        //label: data.blogTitle,
                        //value: data.blogGuid
                    //});
                    return children;
                }
                return {
                    label: data.blogTitle,
                    value: data.blogGuid
                }
            };

            Acme.server.fetch(_appJsConfig.appHostName + '/api/menu/get-menu?name={{mainClassifiedsPage}}' ).done(function(data) {
                classifiedSections = data.map(menuMapper);
                classifiedSections = [].concat.apply([], classifiedSections).sort(function(a,b) {
                    if (a.label.toLowerCase()<b.label.toLowerCase()) {
                        return -1;
                    }
                    if (a.label.toLowerCase()>b.label.toLowerCase()) {
                        return 1;
                    }
                    return 0

                });
                classifiedSections.unshift({label: 'All', value: null});
                Acme.CategoryMenu.menu.update(classifiedSections);
            });

            Acme.lightBox = function(template, parent, layouts) {
                this.template = template;
                this.parentCont = parent;
                this.layouts = layouts;
                this.parent = Acme.modal.prototype;
            };
            Acme.lightBox.prototype = new Acme.modal();
            Acme.lightBox.constructor = Acme.lightBox;
            Acme.lightBox.prototype.handle = function(e) {
                var self = this;
                var $elem = this.parent.handle.call(this, e);
            };



            $('#classified-menu-mobile-open').on('click', function() {
                $('#classified-menu-mobile').toggleClass('active');
                $('body, html').toggleClass('u-noscroll');
                $('#overlay').toggle();
                $('#j-menu-fixed').toggleClass('d-none');
            });


            $('#classified-menu, #classified-menu-mobile').on('click', '.c-classified-menu__arrow-container', function (event) {
                event.preventDefault();
                
                var parent = $(this).closest('ul');

                var arrowContainer = $(this).children('.c-classified-menu__arrow');

                parent.children('li.open').children('.c-classified-menu__submenu').slideUp(200);
                parent.children('li.open').removeClass('open');

                var list = $(this).closest('li');
                var childList = list.find('ul');
                var slideOffeset = -200;
                var slideSpeed = 200;

                if (childList.is(":visible")) {
                    list.removeClass("open");
                    arrowContainer.removeClass('open');
                    childList.slideUp(slideSpeed, function () {});
                } else {
                    list.addClass("open");
                    arrowContainer.addClass('open');
                    childList.slideDown(slideSpeed, function () {});
                }
            });



            // *******************************************
            //                    SEARCH
            // *******************************************
            var performSearch = function() {
                var searchTerm = $('#search').val();

                if (!searchTerm) return;
                var results = $('#results');

                var triggerHTML = 
                    '<div class="acme-row"> \
                        <div class="acme-col-12"> \
                            <a href="#" id="search-load" class=""></a> \
                        </div> \
                    </div>';
                results.after(triggerHTML);
                results.empty();
                Acme.search.elem = $('#search-load');
                Acme.search.events();

                var spinner = $('#searchSpinner');
                spinner.show();
                Acme.search.options.search = searchTerm;
                Acme.search.options.offset = 0;
                Acme.search.fetch().done(function(r) {
                    spinner.hide();
                });
            };



            $('#search-button, #search-button-2').on('click', function(e) {
                e.preventDefault();
                performSearch();
            });

            $('#search').keyup(function (e) {
                if(e.which == 13) {
                    e.preventDefault();
                    performSearch();
                }
            }); 




            var isRequestSent = false;
            var self = this;
            
        
            {% if fullPage == true %}

                //section page load more
                var params = {
                    model           : cardController,
                    container       : 'classified_more',
                    infinite        : true,
                    label           : "",
                    limit           : {{limit}},
                    offset          : {{limit}},
                    blogid          : "{{blogFeeds[blogTitle]['guid']}}",
                    cardType        : "acme-",
                    lightbox        : "{{contentType}}",
                    name            : 'section-load', //name of the search button
                    card_class      : "{{cardClassesLoading}}",
                    non_pinned      : {{articleCount}}
                };

                Acme.loadMore = new Acme.ArticleFeed(params);

            {% endif %}



        });







    </script>
{% endif %}