@stratusjs/idx
Version:
AngularJS idx/property Service and Components bundle to be used as an add on to StratusJS
162 lines (158 loc) • 11.7 kB
HTML
<div id="{{elementId}}" class="property-list property-list-default" data-ng-cloak>
<md-progress-linear data-ng-if="!initialized" md-mode="indeterminate"></md-progress-linear>
<div data-ng-if="initialized">
<div class="header-section clearfix" data-ng-if="displayOrderOptions">
<div class="sort-options-container" data-ng-if="collection.meta.data.totalRecords">
<md-menu data-md-position-mode="target-right target" data-md-offset="0 30">
<div class=" options-button" data-ng-click="$mdMenu.open()" aria-label="Sort Options - {{getOrderName()}}">
<i class="arrow small down grey"></i> <span class="options-name"><a href="" data-ng-bind="getOrderName() || 'Sort Options'"></a></span>
</div>
<md-menu-content data-ng-click="$mdMenu.close()">
<md-menu-item data-ng-repeat="(name, order) in getOrderOptions()">
<md-button data-ng-click="orderChange(order, $event)" data-ng-bind="::name" aria-label="{{::name}}"></md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</div>
</div>
<md-progress-linear data-ng-show="collection.pending" md-mode="indeterminate"></md-progress-linear>
<div data-ng-show="collection.completed && !collection.pending && collection.models.length === 0" class="no-results">
We didn't find any properties that fit your criteria.<span> You might want to try a broader search.</span>
<div
class="other-preset-filters"
data-ng-if="getOtherPresetFilterCount() > 0"
>
This search includes <span data-ng-bind="getOtherPresetFilterCount()"></span>
other filter(s).
</div>
<md-button
data-ng-click="query.where.OpenHousesOnly = null; resetLocationQuery(); search()"
aria-label="Clear Filters"
>
Clear All Filters
</md-button>
</div>
<section role="region" aria-label="Property Results List">
<div data-ng-show="collection.completed && !collection.pending && collection.models.length > 0"
class="list-container clearfix"
data-ng-class="displayPerRowText + '-per-row'"
role="list"
aria-label="Property Results"
aria-live="polite"
vocab="https://schema.org/" typeof="BreadcrumbList"
>
<div data-ng-repeat="(itemPosition, property) in collection.models | limitTo:query.perPage:(query.page-1)*query.perPage" id="{{::elementId}}_{{::property._id}}"
class="property-container" aria-labelledby="{{::elementId}}_{{::property._id}}_address"
role="listitem" data-ng-cloak
property="itemListElement" typeof="ListItem RealEstateListing Offer Accommodation"
>
<md-card class="property-item" data-ng-class="{highlight: property._unmapped._highlight}">
<meta property="position" content="{{::itemPosition+1}}" />
<meta property="priceCurrency" content="USD" />
<meta property="lastReviewed" content="{{::property.ModificationTimestamp}}" />
<meta property="datePosted" content="{{::property.ModificationTimestamp}}" />
<meta property="name" content="{{::getStreetAddress(property)}}" />
<div class="property-image">
<div class="property-status font-body" data-ng-bind="::Idx.getFriendlyStatus(property, preferredStatus)"></div>
<!-- This button is hidden in the CSS -->
<div class="button btn" data-ng-href="{{::getDetailsURL(property)}}" property="url" aria-hidden="true">
Details
</div>
<a data-ng-click="displayModelDetails(property, $event)" data-ng-href="{{::getDetailsURL(property)}}" target="popup">
<div class="image-wrapper"
data-init-now="true"
data-stratus-src-version="{{::(property.Images[0].Lazy == 'stratus-src' ? 'best' : 'false')}}"
data-stratus-src="{{::property.Images[0].MediaURL || 'false'}}"
aria-label="Main Image of Listing"
>
<meta data-ng-if="::property.Images.length > 0" property="image" content="{{::property.Images[0].MediaURL}}">
<img data-ng-if="::property.Images.length > 0" data-ng-src="{{::localDir}}images/stratus-property-shapeholder.png" alt="Image Shapeholder" aria-hidden="true"/>
<img data-ng-if="::property.Images.length === 0 || !property.Images" data-ng-src="{{::localDir}}images/no-image.jpg" alt="No Main Image Available"/>
</div>
</a>
</div>
<div class="property-content">
<div class="property-address dotted-spaced-underline">
<div id="{{::elementId}}_{{::property._id}}_address" role="text" property="address">
<h4>
<a data-ng-click="displayModelDetails(property, $event)" data-ng-href="{{::getDetailsURL(property)}}" data-ng-bind="::getStreetAddress(property)" target="popup"></a>
<br/>
<span class="city" data-ng-bind="::property.City"></span>
</h4>
</div>
</div>
<div class="property-data">
<div class="property-type font-body">
<span data-ng-if="::property.BedroomsTotal > 0" role="text">
<span data-ng-bind="::property.BedroomsTotal" property="numberOfBedrooms"></span> Beds
</span>
<span data-ng-if="::property.BathroomsFull > 0 || property.BathroomsTotalInteger > 0" role="text">
<span data-ng-bind="::property.BathroomsFull || property.BathroomsTotalInteger" property="numberOfFullBathrooms"></span><span data-ng-if="::property.BathroomsHalf || property.BathroomsOneQuarter || property.BathroomsThreeQuarter || property.BathroomsPartial">+</span>
Baths
</span>
<span data-ng-bind="::property.PropertySubType || property.PropertyType || property._Class" property="accommodationCategory"></span>
<span class="property-price" data-ng-if="::property.ClosePrice || property.ListPrice" role="text" property="price">
$<span data-ng-bind="::property.ClosePrice || property.ListPrice | number"></span>
</span>
</div>
</div>
<div class="mls-service-name" role="text">
<span data-ng-if="::getMLSLogo(property._ServiceId, 'tiny')" class="mls-logo"><img data-ng-src="{{::getMLSLogo(property._ServiceId, 'tiny')}}" alt="MLS Logo"/></span>
<span data-ng-bind="::getMLSName(property._ServiceId)" data-ng-show="::!getMLSName(property._ServiceId)" property="maintainer" class="mls-name"></span>#
<span data-ng-bind="::property.ListingId || property.ListingKey" property="identifier" class="mls-number"></span>
</div>
</div>
</md-card>
</div>
<!-- Added to bottom to not affect the blocked styling above -->
<meta property="itemListOrder" content="{{getOrderName()}}"/>
</div>
</section>
<div class="pager-container clearfix font-body" data-ng-if="displayPager && collection.meta.data.totalPages >= 2">
<nav class="pager-section" role="navigation" aria-label="Property List Nav">
<div class="pager-count" data-ng-if="collection.meta.data.totalRecords">
<span data-ng-bind="query.page" aria-current="page" aria-live=polite></span>/<span data-ng-bind="collection.meta.data.totalPages"></span>
Pages
<span class="pager-totals">
<!--<span data-ng-bind="(query.page-1)*query.perPage+1"></span>-<span data-ng-bind="(query.page*query.perPage)|min:collection.meta.data.totalRecords"></span> of -->
( <span data-ng-bind="collection.meta.data.totalRecords"></span> properties )
</span>
</div>
<md-button class="pager-button {{query.page > 1 && collection.completed ? '' : 'disabled'}}"
data-ng-disabled="!(query.page > 1 && collection.completed)"
data-ng-click="pagePrevious($event)" aria-label="Previous Page"
>
<i class="arrow small left"></i>
</md-button>
<md-button class="pager-button {{query.page < collection.meta.data.totalPages && collection.completed ? '' : 'disabled'}}"
data-ng-disabled="!(query.page < collection.meta.data.totalPages && collection.completed)"
data-ng-click="pageNext($event)" aria-label="Next Page"
>
<i class="arrow small right"></i>
</md-button>
<md-button class="pager-button search-more-filters advanced-search-link" data-ng-if="::advancedSearchUrl"
data-ng-href="{{ ::advancedSearchUrl }}"
aria-label="{{ ::advancedSearchLinkName }}"
>
<md-icon md-svg-src="{{ localDir + 'images/icons/actionButtons/filters.svg' }}"></md-icon>
<span class="btn-text"><span data-ng-bind="advancedSearchLinkName"></span></span>
</md-button>
<md-input-container
class="page-input md-block minimal"
>
<label>Go To</label>
<input
aria-label="Go To Page"
data-ng-blur="$event.target.value > 0 && pageChange($event.target.value, $event) && Idx.clearFieldInput($event)"
type="number"
size="2"
maxlength="3"
data-ng-keyup="$event.keyCode == 13 && pageChange($event.target.value, $event) && Idx.clearFieldInput($event)"
autocomplete="off"
>
</md-input-container>
</nav>
</div>
<stratus-idx-disclaimer data-init-now="collection.completed" data-hide-on-duplicate="{{hideDisclaimer}}"></stratus-idx-disclaimer>
</div>
</div>