templates/content/classified-index.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  2. {% block body %}
  3. {% embed "1-col-sidebar.html.twig" %}
  4. {% block column %}
  5.         {% if site_code == constant("App\\Entity\\Content::SITE_RCS") %}
  6.             {% include  "includes/curtain-ads/classified.html.twig" %}
  7.         {% elseif site_code == constant("App\\Entity\\Content::SITE_MCS") %}
  8.             {% include  "includes/curtain-ads/classified-mcs.html.twig" %}
  9.         {% endif %}
  10.     <div class="row">
  11.         <div class="col-12">
  12.             <h1>Classifieds By Region</h1>
  13.         </div>
  14.     </div>
  15.     <div class="row">
  16.         <div class="col-md-12" style="text-align: center; padding-top: 10px;">
  17.             {% include "includes/classified-image-map.html.twig" %}
  18.             {#<img 
  19.                 src="/assets/img/classified-image-map.png"
  20.                 alt="Classified Listings"
  21.                 class="d-block mx-auto"
  22.                 loading='lazy'
  23.             />#}
  24.         </div>
  25.     </div>
  26.     <div class="row">
  27.         <div class="col-sm-12">
  28.             <h2>Classified Listings</h2>
  29.         </div>
  30.         {#
  31.         <div class="col-sm-6">
  32.             <a href="/classified-policy" class="float-right">Read our Classified Policy</a>
  33.         </div>
  34.         #}
  35.     </div>
  36.     
  37.     <form id="classified-sort">
  38.     <input type="hidden" name="page" id="page" /> 
  39.     <input type="hidden" name="group" value="{{ group }}" />          
  40.     
  41.     <div class="row">
  42.         <div class="col-sm-12">
  43.             
  44.             <div class="grey-block mb-3 search-classifieds">
  45.                 <div class="row mb-3">
  46.                     <div class="col-sm-6">
  47.                         <input
  48.                             type="text"
  49.                             class="form-control"
  50.                             placeholder="Keywords &amp; Trade Names"
  51.                             name="keywords"
  52.                             value="{{ keywords }}"
  53.                         />
  54.                     </div>
  55.                     <div class="col-sm-6">
  56.                         <input
  57.                             type="text"
  58.                             class="form-control"
  59.                             placeholder="Location"
  60.                             name="location"
  61.                             value="{{ location }}"
  62.                         />
  63.                     </div>
  64.                 </div>
  65.                 
  66.                 <select name="category" class="form-control">
  67.                     <option value="">-- Choose a Category --</option>
  68.                     {% for cat in listingCategories %}
  69.                         <option 
  70.                             value="{{ cat.getId() }}"
  71.                             {% if cat.getId() == category %}
  72.                                 selected
  73.                             {% endif %}
  74.                         >{{ cat.getTitle() }}</option>
  75.                     {% endfor %}
  76.                 </select>
  77.             </div>
  78.             
  79.             <div class="row classifieds-locale">
  80.                 <div class="col-sm-12 listing-country listing-canada">
  81.                     <b>Canada</b>
  82.                     <ul class="nav">
  83.                         {% for area in listingAreas %}
  84.                         {% if 'Canada' in area.getTitle() %}
  85.                         <li class="mr-3">
  86.                             <label><input 
  87.                                 type="checkbox"
  88.                                 name="area[]"
  89.                                 value="{{ area.getId() }}"
  90.                                 id="{{ area.getTitle()|trim('Canada: ', 'left')|replace({' ': '', ',': ''}) }}"
  91.                                 {% if area.getId() in areas %}
  92.                                     checked
  93.                                 {% endif %}
  94.                             /> {{ area.getTitle()|trim('Canada: ', 'left') }}</label>
  95.                         </li>
  96.                         {% endif %}
  97.                         {% endfor %}
  98.                     </ul>
  99.                 </div>
  100.                 <div class="col-sm-12 listing-country listing-us">
  101.                     <b>United States</b>
  102.                     <ul class="nav">
  103.                         {% for area in listingAreas %}
  104.                         {% if 'Canada' not in area.getTitle() %}
  105.                         <li class="mr-3">
  106.                             <label><input 
  107.                                 type="checkbox"
  108.                                 name="area[]"
  109.                                 value="{{ area.getId() }}"
  110.                                 id="{{ area.getTitle() }}"
  111.                                 {% if area.getId() in areas %}
  112.                                     checked
  113.                                 {% endif %}
  114.                             /> {{ area.getTitle() }}</label>
  115.                         </li>
  116.                         {% endif %}
  117.                         {% endfor %}
  118.                     </ul>
  119.                 </div>
  120.                 {#
  121.                 <div class="col-sm-4">
  122.                     <button
  123.                         class="btn btn-block btn-primary float-right"
  124.                         type="submit"
  125.                     ><i class="fa fa-search"></i> Search Listings</button>
  126.                 </div>
  127.                 #}
  128.             </div>
  129.                 
  130.         </div>
  131.     </div>
  132.     
  133.     <div class="row">
  134.         <div class="col-sm-12 mt-3">
  135.             <hr />
  136.         </div>
  137.     </div>
  138.     
  139.     {% if totalListings %}
  140.     <div class="row">
  141.         <div class="col-sm-12">
  142.             <div class="pagination float-right">
  143.                 {% set paging = (page == "_") ? 0 : page %}
  144.                 <div class="input-group">
  145.                     <div class="input-group-prepend px-3">
  146.                         <span>
  147.                         Showing: 
  148.                         
  149.                         {{ paging * pagingSize + 1 }} - 
  150.                         
  151.                         {% if totalListings < (paging * pagingSize + pagingSize) %}
  152.                             {{ totalListings }}
  153.                         {% else %}
  154.                             {{ paging * pagingSize + pagingSize }}
  155.                         {% endif %}
  156.                         
  157.                         of 
  158.                         
  159.                         {{ totalListings }}
  160.                         </span>
  161.                     </div>
  162.                     <div class="button-group input-group-append paging">
  163.                         {% if 0 < paging %}
  164.                         <button class="btn paging" value="{{ paging - 1 }}">
  165.                             <i class="fa fa-chevron-left"></i>
  166.                         </button>
  167.                         {% endif %}
  168.                         {% if (paging * pagingSize + pagingSize) < totalListings %}
  169.                         <button class="btn paging" value="{{ paging + 1 }}">
  170.                             <i class="fa fa-chevron-right"></i>
  171.                         </button>
  172.                         {% endif %}
  173.                     </div>
  174.                 </div>
  175.             </div>
  176.         </div>
  177.     </div>
  178.     
  179.     {% else %}
  180.     
  181.     <div class="row">
  182.         <div class="col-sm-12 text-center">
  183.             <div class="alert alert-warning mb-0"><i class="fa fa-exclamation-triangle"></i> No Records Found</div>
  184.         </div>
  185.     </div>
  186.     
  187.     {% endif %}
  188.     
  189.     <div class="row">
  190.         <div class="col-sm-12">
  191.             <hr style="margin-bottom: 0;" />
  192.         </div>
  193.     </div>
  194.     
  195.     <div class="row">
  196.         <div class="col-sm-12">
  197.             {% for listing in listings %}
  198.             {#<a href="{{ listing.getURL() }}" class="no-style">#}
  199.                 <div class="row classified-index-row py-1{{ 0 < listing.getFeatured() ? ' featured' : '' }}" style="min-height:200px;"
  200.                     {% if listing.getVideoMedia() %}
  201.                         data-video-row="{{listing.getVideoMedia().getId()}}"
  202.                     {% endif %}
  203.                 >
  204.                     
  205.                     {% if listing.getFeaturedImageTag() or listing.getVideoMediaTag() %}
  206.                         
  207.                         {% if listing.hasVideoMedia() %}
  208.                             <div class="col-sm-2">
  209.                                 <a href="{{ listing.getURL() }}?autoplay=1" class="no-style">
  210.                                     <div class="ytThumbContainer ytThumbContainer-small">
  211.                                         {#{{ listing.getFeaturedImageTag("ytThumbnail","")|raw }}#}
  212.                                         {% set mURL = "" %}
  213.                                         {% if listing.getMedia() %}
  214.                                             {% set mURL = listing.getMedia().getURL() %}
  215.                                         {% endif %}
  216.                                         {{ listing.getVideoMediaTag("","max-height:165px;", false, false, true, mURL)|raw }}
  217.                                     </div>
  218.                                 </a>
  219.                             </div>
  220.                             
  221.                             <script>
  222.                             /*
  223.                                 var video = document.querySelector("[data-video-mid='{{listing.getVideoMedia().getId()}}']");
  224.                                 var videoDiv = document.querySelector("[data-video-row='{{listing.getVideoMedia().getId()}}']");
  225.                                 
  226.                                 videoDiv.addEventListener("mouseover", console.log("test"), true);
  227.                                 //videoDiv.addEventListener("mouseover", video.play(), false);
  228.                                 //videoDiv.addEventListener("mouseout", video.pause(), false);
  229.                             */
  230.                             </script>
  231.                         {% else %}
  232.                             <div class="col-sm-2">
  233.                                 <a href="{{ listing.getURL() }}" class="no-style">
  234.                                     {{ listing.getFeaturedImageTag("","max-height:165px;")|raw }}
  235.                                 </a>
  236.                             </div>
  237.                         {% endif %}
  238.                         
  239.                         <div class="col-sm-4">
  240.                             <a href="{{ listing.getURL() }}" class="no-style">
  241.                                 <h4 class="mb-0">{{ listing.getTitle() | raw }}</h4>
  242.                                 {% set company_name = listing.getContentMetaValueByKey("_company_name") %}
  243.                                 {% if company_name is not empty %}
  244.                                     <p>{{ company_name | raw }}</p>
  245.                                 {% endif %}
  246.                             </a>
  247.                         </div>
  248.                         <div class="col-sm-3">
  249.                             <a href="{{ listing.getURL() }}" class="no-style">
  250.                                 {% set jobLocation = listing.getContentMetaByKey("_job_location") %}
  251.                                 {{ jobLocation ? jobLocation.getMetaValue() : "" }}
  252.                             </a>
  253.                         </div>
  254.                     {% else %}
  255.                         <div class="col-sm-6">
  256.                             <a href="{{ listing.getURL() }}" class="no-style">
  257.                                 <h4 class="mb-0">{{ listing.getTitle() | raw }}</h4>
  258.                                 <p>{{ listing.getContentMetaValueByKey("_company_name") | raw }}</p>
  259.                             </a>
  260.                         </div>
  261.                         <div class="col-sm-3">
  262.                             <a href="{{ listing.getURL() }}" class="no-style">
  263.                                 {% set jobLocation = listing.getContentMetaByKey("_job_location") %}
  264.                                 {{ jobLocation ? jobLocation.getMetaValue() : "" }}
  265.                             </a>
  266.                         </div>
  267.                     {% endif %}
  268.                     <div class="col-sm-3">
  269.                         <a href="{{ listing.getURL() }}" class="no-style">
  270.                             <div>
  271.                                 {% set jobType = listing.getSecondaryCategoriesByTaxonomy("job_listing_type") %}
  272.                                 {% if 1 < jobType | length %}
  273.                                     <strong>Multiple</strong>
  274.                                 {% else %}
  275.                                     {% if jobType.first() %}
  276.                                         <strong>{{ jobType.first().getTitle() }}</strong>
  277.                                     {% endif %}
  278.                                 {% endif %}
  279.                             </div>
  280.                             {{ post_age_format(date(listing.getPublishedAt()|date).diff(date("now"))) }}
  281.                         </a>
  282.                     </div>
  283.                 </div>
  284.             {#</a>#}
  285.             <hr class="m-0" />
  286.             {% endfor %}
  287.         </div>
  288.         
  289.     </div>
  290.     
  291.     
  292.     {% if totalListings %}
  293.     <div class="row">
  294.         <div class="col-sm-12">
  295.             <div class="pagination float-right">
  296.                 {% set paging = (page == "_") ? 0 : page %}
  297.                 <div class="input-group">
  298.                     <div class="input-group-prepend px-3">
  299.                         <span>
  300.                         Showing: 
  301.                         
  302.                         {{ paging * pagingSize + 1 }} - 
  303.                         
  304.                         {% if totalListings < (paging * pagingSize + pagingSize) %}
  305.                             {{ totalListings }}
  306.                         {% else %}
  307.                             {{ paging * pagingSize + pagingSize }}
  308.                         {% endif %}
  309.                         
  310.                         of 
  311.                         
  312.                         {{ totalListings }}
  313.                         </span>
  314.                     </div>
  315.                     <div class="button-group input-group-append paging">
  316.                         {% if 0 < paging %}
  317.                         <button class="btn paging" value="{{ paging - 1 }}">
  318.                             <i class="fa fa-chevron-left"></i>
  319.                         </button>
  320.                         {% endif %}
  321.                         {% if (paging * pagingSize + pagingSize) < totalListings %}
  322.                         <button class="btn paging" value="{{ paging + 1 }}">
  323.                             <i class="fa fa-chevron-right"></i>
  324.                         </button>
  325.                         {% endif %}
  326.                     </div>
  327.                 </div>
  328.             </div>
  329.         </div>
  330.     </div>
  331.     {% endif %}
  332.     
  333.     
  334.     </form>
  335.     
  336.     
  337. <script>
  338.     (function($){
  339.         $(function(){
  340.             
  341.             $('[data-video-row]').each(function() {
  342.                 //$video = $(this).find('video').first();
  343.                 $(this).on('mouseover', function() {
  344.                     $(this).find('video').first()[0].play();
  345.                     $(this).find('.ytThumbContainer').first().stop(true,true).addClass('ytThumbContainer-playing', 500);
  346.                     //console.log($video);
  347.                     //console.log($(this).attr("data-video-row"));
  348.                 });
  349.                 
  350.                 $(this).on('mouseleave', function() {
  351.                     //$(this).find('video').first()[0].pause();
  352.                     //$(this).find('video').first()[0].currentTime=0;
  353.                     $(this).find('video').first()[0].load();
  354.                     $(this).find('.ytThumbContainer').first().stop(true,true).removeClass('ytThumbContainer-playing', 100);
  355.                 });
  356.             });
  357.                 
  358.             /*    
  359.             
  360.             
  361.             $('#user-dashboard-container').on('click', '#addNote', function() {
  362.                 $("#contactNotes").append(noteHtml.join(''));
  363.                 $("#updateNotes").show();
  364.             });
  365.             
  366.             $('#user-dashboard-container').on('click', '.deleteNote', function() {
  367.                 $(this).parent().parent().remove();
  368.             });
  369.             */
  370.             
  371.         });
  372.     }(jQuery));
  373. </script>
  374.             
  375. {% endblock %}
  376. {% block sidebar %}
  377.     {% include "includes/sidebar.html.twig" %}
  378. {% endblock %}
  379. {% endembed %}
  380. {% endblock %}