UNPKG

@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
<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>