     1:  2:  3:  4:  5:  6:  7:  8:  9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59:

    <?php

    namespace WPGMZA\MarkerListing;

    class Modern extends \WPGMZA\MarkerListing
    {

        protected $listItemTemplate;
        protected $listItemContainer;

        public function __construct($map_id)
        {
            \WPGMZA\MarkerListing::__construct($map_id);

            $this->element->removeAttribute('style');

            $this->listItemTemplate = $this->document->querySelector('li');
            $this->listItemContainer = $this->listItemTemplate->parentNode;

            $this->listItemTemplate->remove();
        }

        protected function loadDocument()
        {
            $this->document->loadPHPFile($this->getItemHTMLPath() . 'modern.html.php');
        }

        protected function getElement()
        {
            return $this->document->querySelector('body>*');
        }

        public function getAjaxResponse($request)
        {
            global $wpgmza;

            $response = $this->getRecords($request);

            foreach($response->data as $marker)
            {
                $item = $this->listItemTemplate->cloneNode(true);

                if(isset($request['map_id']))
                    $item->setAttribute('mapid', $request['map_id']);
                $item->setAttribute('mid', $marker->id);

                $item->populate($marker);

                $this->appendListingItem($this->document, $item, $marker);
            }

            $response->html = "";
            foreach($this->document->querySelectorAll("li") as $li)
                $response->html .= $this->document->saveHTML($li);

            return $response;
        }
    }