Free javascript Hosting


search-bar-widget.js

Uploaded on Mar 24 2022 01:03 by kelsy.colbeth

!function(n){function t(s){if(e[s])return e[s].exports;var a=e[s]={exports:{},id:s,loaded:!1};return n[s].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var e={};return t.m=n,t.c=e,t.p="https://d2q3n06xhbi0am.cloudfront.net/",t(0)}({0:function(n,t,e){"use strict";function s(n){return n&&n.__esModule?n:{default:n}}var a=e(794),i=s(a);window.searchBar=function(n){var t=document.createElement("script");t.src="https://unpkg.com/vue@next",document.head.append(t);var e=document.createElement("style");e.innerText="\n #hostaway-booking-widget {\n --hsbw-button-color: "+n.color+";\n --hsbw-rounded: "+(n.rounded?"20px":0)+";\n --hsbw-border-color: #f1f1f1;\n position: relative;\n z-index: 9999;\n }\n .hsbw {\n position: relative;\n z-index: 9999;\n max-width: 1200px;\n /*\n display: flex;\n align-items: flex-end;\n */\n background: #ffffff;\n border-radius: "+(n.rounded?"25px":0)+';\n }\n .hsbw-grid {\n /*\n display: grid;\n grid-template-rows: auto;\n grid-template-areas: "dates guests buttons";\n padding: 0.5rem 0.75rem;\n grid-template-columns: minmax(auto, 480px) minmax(auto, 240px) 1fr;\n */\n display: flex;\n flex-direction: column;\n }\n .hsbw-dates {\n display: grid;\n grid-template-areas: "checkin checkout";\n grid-area: dates;\n grid-template-columns: minmax(auto, 240px) minmax(auto, 240px);\n }\n\n .hsbw-grid--locations {\n /*\n grid-template-rows: auto;\n grid-template-areas: "locations dates guests buttons";\n padding: 0.5rem 0.75rem;\n grid-template-columns: minmax(auto, 240px) minmax(auto, 480px) minmax(auto, 240px) 1fr;\n */\n }\n @media screen and (min-width: 900px) {\n .hsbw {\n border-radius: '+(n.rounded?"55px":0)+';\n }\n .hsbw-grid {\n display: grid;\n grid-template-rows: auto;\n grid-template-areas: "dates guests buttons";\n padding: 0.5rem 0.75rem;\n grid-template-columns: minmax(auto, 480px) minmax(auto, 240px) 1fr;\n }\n .hsbw-grid--locations {\n grid-template-rows: auto;\n grid-template-areas: "locations dates guests buttons";\n padding: 0.5rem 0.75rem;\n grid-template-columns: minmax(auto, 240px) minmax(auto, 480px) minmax(auto, 240px) 1fr;\n }\n }\n .hsbw-grid_locations {\n grid-area: locations;\n }\n .hsbw-grid_checkin {\n grid-area: checkin;\n }\n .hsbw-grid_checkout {\n grid-area: checkout;\n }\n .hsbw-grid_guests {\n grid-area: guests;\n }\n .hsbw-grid_buttons {\n grid-area: buttons;\n padding: 5px;\n }\n .hsbw-input {\n display: block;\n border: 1px solid var(--hsbw-border-color);\n border-radius: var(--hsbw-rounded);\n height: 1.5rem;\n padding: 0 8px;\n line-height: 1.5rem;\n outline: none;\n }\n .hsbw-button {\n display: inline-block;\n text-decoration: none;\n border-width: 1px;\n border-style: solid;\n border-color: var(--hsbw-button-color);\n padding: 2px 7px;\n border-radius: '+(n.rounded?"80px":0)+";\n background: #fff;\n outline: none;\n cursor: pointer;\n }\n .hsbw-button--primary {\n background-color: var(--hsbw-button-color) !important;\n border-color: var(--hsbw-button-color) !important;\n color: #fff;\n }\n .hsbw-field {\n position: relative;\n align-items: center;\n border-radius: "+(n.rounded?"80px":0)+";\n border-style: solid;\n border-width: 0px;\n display: flex;\n min-height: 3.5rem;\n padding: 0px 0.5rem;\n }\n .hsbw-field-inner {\n display: flex;\n }\n .hsbw-field-icon {\n -webkit-box-align: center;\n align-items: center;\n border-radius: "+(n.rounded?"80px":0)+";\n border-style: solid;\n border-width: 0.0625rem;\n display: flex;\n font-size: 2.5rem;\n height: 1em;\n -webkit-box-pack: center;\n justify-content: center;\n margin-right: 0.75rem;\n width: 1em;\n background-color: rgba(14, 135, 140, 0.1);\n border-color: rgba(14, 135, 140, 0.2);\n }\n .hsbw-container {\n position: relative;\n height: 0;\n }\n .hsbw-calendar {\n padding: 40px 40px 60px 40px;\n position: absolute;\n z-index: 9999;\n top: 0;\n left: 0;\n background: #fff;\n border-radius: "+(n.rounded?"10px":0)+";\n border: 1px solid var(--hsbw-border-color);\n -webkit-box-shadow: 3px 3px 8px 0px rgba(34, 60, 80, 0.1);\n -moz-box-shadow: 3px 3px 8px 0px rgba(34, 60, 80, 0.1);\n box-shadow: 3px 3px 8px 0px rgba(34, 60, 80, 0.1);\n }\n .hsbw-calendar-table {\n display: none;\n }\n .hsbw-calendar-nav {\n display: flex;\n justify-content: space-between;\n }\n .hsbw-calendar-day {\n cursor: pointer;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: "+(n.rounded?"80px":0)+";\n }\n .hsbw-calendar-day:hover {\n background: #f1f1f1;\n }\n .hsbw-calendar-container {\n display: flex;\n }\n .hsbw-calendar-container div {\n width: 40px;\n }\n .range {\n border: 1px solid gray;\n }\n .hsbw-calendar-button {\n margin: 20px;\n padding-top: 5px;\n width: 32px;\n height: 32px;\n }\n .hsbw-calendar-clear {\n position: absolute;\n bottom: 0;\n right: 0;\n font-weight: bold;\n border-width: 2px;\n margin: 20px;\n padding: 10px 15px;\n }\n .hsbw-calendar-button--left {\n position: absolute;\n top: 0;\n left: 0;\n }\n .hsbw-calendar-button--right {\n position: absolute;\n top: 0;\n right: 0;\n }\n .hsbw-label {\n font-weight: 700;\n font-size: 0.875rem;\n line-height: 1rem;\n color: rgb(5, 49, 51);\n }\n .disabled {\n opacity: 0.5;\n }\n .hsbw-popup {\n position: relative;\n height: 0;\n z-index: 9999;\n }\n .hsbw-popup_inner {\n background: white;\n margin-top: 10px;\n border-radius: "+(n.rounded?"20px":0)+';\n border: 1px solid var(--hsbw-border-color);\n -webkit-box-shadow: 3px 3px 8px 0px rgba(34, 60, 80, 0.1);\n -moz-box-shadow: 3px 3px 8px 0px rgba(34, 60, 80, 0.1);\n box-shadow: 3px 3px 8px 0px rgba(34, 60, 80, 0.1);\n position: absolute;\n width: 100%;\n padding: 20px;\n }\n .hsbw-value {\n color: rgba(5, 49, 51, 0.5);\n }\n .hsbw * {\n box-sizing: border-box;\n }\n .hsbw-count-btn {\n display: inline-block;\n border-radius: 50%;\n width: 20px;\n height: 20px;\n position: relative;\n border: 2px solid rgb(5, 49, 51);\n cursor: pointer;\n }\n .hsbw-count-btn--minus:after {\n height: 2px;\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n background-color: rgb(5, 49, 51);\n }\n .hsbw-count-btn--plus:after {\n height: 10px;\n clip-path: polygon(0px 40%, 40% 40%, 40% 0px, 60% 0px, 60% 40%, 100% 40%, 100% 60%, 60% 60%, 60% 100%, 40% 100%, 40% 60%, 0px 60%);\n content: "";\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 10px;\n background-color: rgb(5, 49, 51);\n }\n .hsbw-main-button {\n border: none;\n cursor: pointer;\n display: inline-flex;\n -webkit-box-align: center;\n align-items: center;\n -webkit-box-pack: center;\n justify-content: center;\n font-weight: 700;\n line-height: 1.25rem;\n user-select: none;\n text-decoration: none;\n font-size: 1rem;\n height: 3.25rem;\n padding: 0px 1.5rem;\n border-radius: '+(n.rounded?"80px":0)+";\n width: 100%;\n background-color: var(--hsbw-button-color);\n color: rgb(255, 255, 255);\n }\n .hsbw-location-item {\n padding: 5px 0;\n }\n .hsbw-location-item.active {\n font-weight: bold;\n }\n ",document.head.append(e);var s=new Date;s.setHours(0),s.setMinutes(0),s.setSeconds(0),s.setMilliseconds(0),t.onload=function(){var t=window.Vue.createApp({data:function(){return{showCalendar:!1,start:null,end:null,numberOfGuests:1,config:n,locations:[],location:void 0,showLocation:!1,showGuests:!1}},mounted:function(){var n=this,t=new URL("/",this.config.baseUrl),e=t.hostname,s=e.indexOf(".holidayfuture.com");s!==-1&&(e=e.slice(0,s));var a=new URL("/bookingEngines/"+e+"/listing/facets",i.default.baseUrl);fetch(a).then(function(n){return n.json()}).then(function(t){"success"===t.status&&(n.locations=t.result.city)})},directives:{outside:{beforeMount:function(n,t,e){n.clickOutsideEvent=function(e){n===e.target||n.contains(e.target)||t.value(e,n)},document.body.addEventListener("click",n.clickOutsideEvent)},unmounted:function(n){document.body.removeEventListener("click",n.clickOutsideEvent)}}},methods:{locationOutside:function(){this.showLocation=!1},calendarOutside:function(){this.showCalendar=!1},guestsOutside:function(){this.showGuests=!1},setLocation:function(n){this.location=n,this.showLocation=!1},formatDate:function(n){return[n.getDate(),n.toLocaleString("en-US",{month:"long"}),n.getFullYear()].join(" ")}},updated:function(){},computed:{urlWithParams:{get:function(){var n=new URL("/search",this.config.baseUrl);return this.start&&n.searchParams.append("start",[this.start.getFullYear(),(this.start.getMonth()+1).toString().padStart(2,"0"),this.start.getDate().toString().padStart(2,"0")].join("-")),this.end&&n.searchParams.append("end",[this.end.getFullYear(),(this.end.getMonth()+1).toString().padStart(2,"0"),this.end.getDate().toString().padStart(2,"0")].join("-")),console.log(this.location),this.location&&n.searchParams.append("city",this.location),n.searchParams.append("numberOfGuests",this.numberOfGuests),n.toString()}}},template:'\n <div class="hsbw" :style="{\'--hsbw-button-color\': config.color}">\n <div class="hsbw-grid" :class="{\'hsbw-grid--locations\': config.showLocation}">\n <div v-if="config.showLocation" class="hsbw-grid_locations" v-outside="locationOutside">\n <div class="hsbw-field" @click="showLocation = !showLocation">\n <div class="hsbw-field-icon">\n <svg width="18" height="24" viewBox="0 0 18 24" xmlns="http://www.w3.org/2000/svg">\n <path d="M8.99852 0C4.10987 0 0.132812 3.97705 0.132812 8.86571C0.132812 10.4751 0.854585 12.206 0.884833 12.279C1.11795 12.8323 1.57792 13.6918 1.9096 14.1956L7.98835 23.406C8.23711 23.7836 8.6053 24 8.99852 24C9.39174 24 9.75993 23.7836 10.0087 23.4065L16.088 14.1956C16.4202 13.6918 16.8796 12.8323 17.1127 12.279C17.143 12.2065 17.8642 10.4756 17.8642 8.86571C17.8642 3.97705 13.8872 0 8.99852 0ZM16.1511 11.8743C15.943 12.3703 15.5148 13.1698 15.217 13.6214L9.13776 22.8323C9.01782 23.0143 8.97975 23.0143 8.8598 22.8323L2.78053 13.6214C2.48275 13.1698 2.05458 12.3698 1.8465 11.8738C1.83764 11.8524 1.17584 10.2592 1.17584 8.86571C1.17584 4.55228 4.68509 1.04302 8.99852 1.04302C13.3119 1.04302 16.8212 4.55228 16.8212 8.86571C16.8212 10.2613 16.1578 11.8587 16.1511 11.8743Z" />\n <path d="M8.99855 4.17262C6.41028 4.17262 4.30493 6.27849 4.30493 8.86623C4.30493 11.454 6.41028 13.5598 8.99855 13.5598C11.5868 13.5598 13.6922 11.454 13.6922 8.86623C13.6922 6.27849 11.5868 4.17262 8.99855 4.17262ZM8.99855 12.5168C6.98603 12.5168 5.34796 10.8793 5.34796 8.86623C5.34796 6.85319 6.98603 5.21565 8.99855 5.21565C11.0111 5.21565 12.6491 6.85319 12.6491 8.86623C12.6491 10.8793 11.0111 12.5168 8.99855 12.5168Z" />\n </svg>\n </div>\n <div class="hsbw-field-content">\n <label class="hsbw-label" for="city">Location</label>\n <div v-if="location" class="hsbw-value">\n {{ location }}\n </div>\n </div>\n </div>\n <div v-if="showLocation" class="hsbw-popup">\n <div class="hsbw-popup_inner">\n <div class="hsbw-location-item" :class="{active: !location}" @click="setLocation(null)">\n Any location\n </div>\n <div v-for="l in locations" :class="{active: location === l}" class="hsbw-location-item" @click="setLocation(l)">\n\n {{ l }}\n </div>\n </div>\n </div>\n </div>\n <div class="hsbw-dates" v-outside="calendarOutside">\n <div class="hsbw-grid_checkin">\n <div class="hsbw-field" @click="showCalendar = !showCalendar">\n <div class="hsbw-field-icon">\n <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15.5977 0.349609C17.3926 0.349609 18.8477 1.80468 18.8477 3.59961V15.0996C18.8477 16.8945 17.3926 18.3496 15.5977 18.3496H4.09766C2.30273 18.3496 0.847656 16.8945 0.847656 15.0996V3.59961C0.847656 1.80468 2.30273 0.349609 4.09766 0.349609H15.5977ZM17.3477 5.84961H2.34766V15.0996C2.34766 16.0661 3.13116 16.8496 4.09766 16.8496H15.5977C16.5642 16.8496 17.3477 16.0661 17.3477 15.0996V5.84961ZM5.59766 11.8496C6.28801 11.8496 6.84766 12.4093 6.84766 13.0996C6.84766 13.79 6.28801 14.3496 5.59766 14.3496C4.9073 14.3496 4.34766 13.79 4.34766 13.0996C4.34766 12.4093 4.9073 11.8496 5.59766 11.8496ZM9.84766 11.8496C10.538 11.8496 11.0977 12.4093 11.0977 13.0996C11.0977 13.79 10.538 14.3496 9.84766 14.3496C9.1573 14.3496 8.59766 13.79 8.59766 13.0996C8.59766 12.4093 9.1573 11.8496 9.84766 11.8496ZM5.59766 7.84961C6.28801 7.84961 6.84766 8.40925 6.84766 9.09961C6.84766 9.78997 6.28801 10.3496 5.59766 10.3496C4.9073 10.3496 4.34766 9.78997 4.34766 9.09961C4.34766 8.40925 4.9073 7.84961 5.59766 7.84961ZM9.84766 7.84961C10.538 7.84961 11.0977 8.40925 11.0977 9.09961C11.0977 9.78997 10.538 10.3496 9.84766 10.3496C9.1573 10.3496 8.59766 9.78997 8.59766 9.09961C8.59766 8.40925 9.1573 7.84961 9.84766 7.84961ZM14.0977 7.84961C14.788 7.84961 15.3477 8.40925 15.3477 9.09961C15.3477 9.78997 14.788 10.3496 14.0977 10.3496C13.4073 10.3496 12.8477 9.78997 12.8477 9.09961C12.8477 8.40925 13.4073 7.84961 14.0977 7.84961ZM15.5977 1.84961H4.09766C3.13116 1.84961 2.34766 2.63311 2.34766 3.59961V4.34961H17.3477V3.59961C17.3477 2.63311 16.5642 1.84961 15.5977 1.84961Z" fill="#0B0B0B"/>\n </svg>\n </div>\n <div class="hsbw-field-content">\n <label class="hsbw-label" for="city">Check-in</label>\n <div class="hsbw-value">\n {{ start ? formatDate(start) : \'\' }}\n </div>\n </div>\n </div>\n <div class="hsbw-container" v-if="showCalendar">\n <hw-calendar v-model:start="start" v-model:end="end" @done="showCalendar = false"></hw-calendar>\n </div>\n </div>\n <div class="hsbw-grid_checkout">\n <div class="hsbw-field" @click="showCalendar = !showCalendar">\n <div class="hsbw-field-icon">\n <svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">\n <path d="M15.5977 0.349609C17.3926 0.349609 18.8477 1.80468 18.8477 3.59961V15.0996C18.8477 16.8945 17.3926 18.3496 15.5977 18.3496H4.09766C2.30273 18.3496 0.847656 16.8945 0.847656 15.0996V3.59961C0.847656 1.80468 2.30273 0.349609 4.09766 0.349609H15.5977ZM17.3477 5.84961H2.34766V15.0996C2.34766 16.0661 3.13116 16.8496 4.09766 16.8496H15.5977C16.5642 16.8496 17.3477 16.0661 17.3477 15.0996V5.84961ZM5.59766 11.8496C6.28801 11.8496 6.84766 12.4093 6.84766 13.0996C6.84766 13.79 6.28801 14.3496 5.59766 14.3496C4.9073 14.3496 4.34766 13.79 4.34766 13.0996C4.34766 12.4093 4.9073 11.8496 5.59766 11.8496ZM9.84766 11.8496C10.538 11.8496 11.0977 12.4093 11.0977 13.0996C11.0977 13.79 10.538 14.3496 9.84766 14.3496C9.1573 14.3496 8.59766 13.79 8.59766 13.0996C8.59766 12.4093 9.1573 11.8496 9.84766 11.8496ZM5.59766 7.84961C6.28801 7.84961 6.84766 8.40925 6.84766 9.09961C6.84766 9.78997 6.28801 10.3496 5.59766 10.3496C4.9073 10.3496 4.34766 9.78997 4.34766 9.09961C4.34766 8.40925 4.9073 7.84961 5.59766 7.84961ZM9.84766 7.84961C10.538 7.84961 11.0977 8.40925 11.0977 9.09961C11.0977 9.78997 10.538 10.3496 9.84766 10.3496C9.1573 10.3496 8.59766 9.78997 8.59766 9.09961C8.59766 8.40925 9.1573 7.84961 9.84766 7.84961ZM14.0977 7.84961C14.788 7.84961 15.3477 8.40925 15.3477 9.09961C15.3477 9.78997 14.788 10.3496 14.0977 10.3496C13.4073 10.3496 12.8477 9.78997 12.8477 9.09961C12.8477 8.40925 13.4073 7.84961 14.0977 7.84961ZM15.5977 1.84961H4.09766C3.13116 1.84961 2.34766 2.63311 2.34766 3.59961V4.34961H17.3477V3.59961C17.3477 2.63311 16.5642 1.84961 15.5977 1.84961Z" fill="#0B0B0B"/>\n </svg>\n </div>\n <div class="hsbw-field-content">\n <label class="hsbw-label" for="city">Check-out</label>\n <div class="hsbw-value">\n {{ end ? formatDate(end) : \'\' }}\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class="hsbw-grid_guests" v-outside="guestsOutside">\n <div class="hsbw-field" @click="showGuests = !showGuests">\n <div class="hsbw-field-icon">\n <svg width="21" height="20" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg">\n <path d="M2.72656 11.3486L11.7266 11.3496C12.7804 11.3496 13.6447 12.1651 13.7211 13.2003L13.7266 13.3496V14.8496C13.7256 18.3496 10.0106 19.3496 7.22656 19.3496C4.50443 19.3496 0.891258 18.3936 0.732017 15.0793L0.726562 14.8496V13.3486C0.726562 12.2948 1.54296 11.4305 2.57737 11.3541L2.72656 11.3486ZM13.9466 11.3496H18.7266C19.7804 11.3496 20.6447 12.166 20.7211 13.2004L20.7266 13.3496V14.3496C20.7256 17.4116 17.8686 18.3496 15.7266 18.3496C15.0466 18.3496 14.2956 18.2536 13.5866 18.0276C13.9226 17.6416 14.1936 17.2006 14.3886 16.7006C14.9316 16.8256 15.4416 16.8496 15.7266 16.8496L15.9931 16.8437C16.9784 16.8005 19.0794 16.4802 19.2192 14.5546L19.2266 14.3496V13.3496C19.2266 13.1043 19.0488 12.9 18.8161 12.8577L18.7266 12.8496H14.6756C14.5916 12.3482 14.382 11.8928 14.081 11.5094L13.9466 11.3496ZM2.72656 12.8486L2.62591 12.8586C2.50152 12.8839 2.41656 12.9514 2.37256 12.9946C2.32936 13.0386 2.26184 13.1229 2.23656 13.2476L2.22656 13.3486V14.8496C2.22656 15.8586 2.67656 16.5716 3.64356 17.0916C4.46972 17.5365 5.64607 17.8059 6.90914 17.8447L7.22656 17.8496L7.54397 17.8447C8.80691 17.8059 9.98249 17.5365 10.8096 17.0916C11.7152 16.6041 12.1682 15.947 12.2213 15.0345L12.2266 14.8486V13.3496C12.2266 13.1043 12.0488 12.9 11.8161 12.8577L11.7266 12.8496L2.72656 12.8486ZM7.22656 0.349609C9.71156 0.349609 11.7266 2.36461 11.7266 4.84961C11.7266 7.33461 9.71156 9.34961 7.22656 9.34961C4.74156 9.34961 2.72656 7.33461 2.72656 4.84961C2.72656 2.36461 4.74156 0.349609 7.22656 0.349609ZM16.2266 2.34961C18.1596 2.34961 19.7266 3.91661 19.7266 5.84961C19.7266 7.78261 18.1596 9.34961 16.2266 9.34961C14.2936 9.34961 12.7266 7.78261 12.7266 5.84961C12.7266 3.91661 14.2936 2.34961 16.2266 2.34961ZM7.22656 1.84961C5.57256 1.84961 4.22656 3.19561 4.22656 4.84961C4.22656 6.50361 5.57256 7.84961 7.22656 7.84961C8.88056 7.84961 10.2266 6.50361 10.2266 4.84961C10.2266 3.19561 8.88056 1.84961 7.22656 1.84961ZM16.2266 3.84961C15.1236 3.84961 14.2266 4.74661 14.2266 5.84961C14.2266 6.95261 15.1236 7.84961 16.2266 7.84961C17.3296 7.84961 18.2266 6.95261 18.2266 5.84961C18.2266 4.74661 17.3296 3.84961 16.2266 3.84961Z" />\n </svg>\n </div>\n <div class="hsbw-field-content">\n <label class="hsbw-label" for="city">Guests</label>\n <div v-if="numberOfGuests" class="hsbw-value">\n {{ numberOfGuests }}\n </div>\n </div>\n </div>\n <div v-if="showGuests" class="hsbw-popup">\n <div class="hsbw-popup_inner" style="width: 200px;">\n <div style="display: flex; justify-content: space-between;">\n <div>\n Guests\n </div>\n <div style="display: flex;">\n <button class="hsbw-count-btn hsbw-count-btn--minus" @click="numberOfGuests = numberOfGuests > 1 ? numberOfGuests - 1 : 1">\n </button>\n <div style="padding: 0 10px;">\n {{ numberOfGuests }}\n </div>\n <button class="hsbw-count-btn hsbw-count-btn--plus" @click="numberOfGuests = numberOfGuests + 1">\n </button>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class="hsbw-grid_buttons">\n <a class="hsbw-main-button" :href="urlWithParams" target="_self">\n Search\n </a>\n </div>\n </div>\n </div>\n '});t.component("hw-calendar",{props:["start","end"],data:function(){return{weekdays:["Su","Mo","Tu","We","Th","Fr","Sa"],current:new Date,undercursor:null,today:s}},computed:{calendar:{get:function(){for(var n=this.current.getFullYear(),t=this.current.getMonth(),e=32-new Date(n,t).getDate(),s=[[]],a=1;a<=e;a++){var i=new Date(n,t,a),o=i.getDay();0===o&&s.push([]),s[s.length-1][o]=i}return s}},current2:{get:function(){var n=new Date(+this.current);return n.setMonth(n.getMonth()+1),n}},calendar2:{get:function(){for(var n=this.current2.getFullYear(),t=this.current2.getMonth(),e=32-new Date(n,t).getDate(),s=[[]],a=1;a<=e;a++){var i=new Date(n,t,a),o=i.getDay();0===o&&s.push([]),s[s.length-1][o]=i}return s}}},methods:{clearDates:function(){this.$emit("update:start",null),this.$emit("update:end",null)},onClick:function(n){+n<+this.today||this.start&&!this.end&&+n<=+this.start||(!this.start||this.start&&this.end?(this.$emit("update:start",new Date(+n)),this.$emit("update:end",null)):(this.$emit("update:end",new Date(+n)),this.$emit("done")))},goToMonth:function(n){var t=new Date(+this.current);t.setMonth(t.getMonth()+n),this.current=t},isInRange:function(n){return n&&16===n.getDate()&&console.log({d:+n,start:+this.start,under:+this.undercursor,up:+n>=+this.start,down:+n<=+this.undercursor}),n&&this.start&&!this.end&&this.undercursor&&+n>=+this.start&&+n<=+this.undercursor}},template:'\n <div class="hsbw-calendar"\n @mouseleave="undercursor = null"\n >\n <button type="button" class="hsbw-button hsbw-calendar-button hsbw-calendar-button--left" @click="goToMonth(-1)" :disabled="+current <= +new Date()">\n <svg width="9" height="16" viewBox="0 0 9 16" xmlns="http://www.w3.org/2000/svg">\n <path d="M8.53033 0.21967C8.82322 0.512563 8.82322 0.987437 8.53033 1.28033L1.81066 8L8.53033 14.7197C8.82322 15.0126 8.82322 15.4874 8.53033 15.7803C8.23744 16.0732 7.76256 16.0732 7.46967 15.7803L0.21967 8.53033C-0.0732233 8.23744 -0.0732232 7.76256 0.21967 7.46967L7.46967 0.21967C7.76256 -0.0732233 8.23744 -0.0732233 8.53033 0.21967Z" />\n </svg>\n\n </button>\n <button type="button" class="hsbw-button hsbw-calendar-button hsbw-calendar-button--right" @click="goToMonth(1)">\n <svg width="9" height="16" viewBox="0 0 9 16" xmlns="http://www.w3.org/2000/svg">\n <path d="M0.46967 0.21967C0.176777 0.512563 0.176777 0.987437 0.46967 1.28033L7.18934 8L0.469671 14.7197C0.176778 15.0126 0.176778 15.4874 0.469671 15.7803C0.762565 16.0732 1.23744 16.0732 1.53033 15.7803L8.78033 8.53033C9.07322 8.23744 9.07322 7.76256 8.78033 7.46967L1.53033 0.21967C1.23744 -0.0732233 0.762564 -0.0732233 0.46967 0.21967Z" />\n </svg>\n </button>\n <button type="button" class="hsbw-button hsbw-calendar-clear" @click="clearDates()">\n Clear dates\n </button>\n <div class="hsbw-calendar-nav">\n </div>\n <div class="hsbw-calendar-container">\n <table>\n <thead>\n <tr>\n <th colspan="7" style="text-align: center;">\n {{ current.toLocaleString(\'en-US\', {year: \'numeric\', month: \'long\'}) }}\n </th>\n </tr>\n <tr>\n <th v-for="d in weekdays">\n {{ d }}\n </th>\n </tr>\n </thead>\n <tbody\n >\n <tr v-for="week in calendar">\n <td\n v-for="date in week"\n @click="onClick(date)"\n @mouseover="undercursor = date"\n :class="{disabled: +date < +today || (start && !end && +date <= +start) }"\n >\n <span\n class="hsbw-calendar-day"\n :class="{ range: isInRange(date) }"\n >\n {{ date && date.getDate() }}\n </span>\n </td>\n </tr>\n </tbody>\n </table>\n <div class="hsbw-calendar-table"></div>\n <table class="hsbw-calendar-table">\n <thead>\n <tr>\n <th colspan="7" style="text-align: center;">\n {{ current2.toLocaleString(\'en-US\', {year: \'numeric\', month: \'long\'}) }}\n </th>\n </tr>\n <tr>\n <th v-for="d in weekdays">\n {{ d }}\n </th>\n </tr>\n </thead>\n <tbody>\n <tr v-for="week in calendar2">\n <td\n v-for="date in week"\n @click="onClick(date)"\n @mouseover="undercursor = date"\n :class="{disabled: +date < +today || (start && !end && +date <= +start) }"\n >\n <span\n class="hsbw-calendar-day"\n :class="{ range: isInRange(date) }"\n >\n {{ date && date.getDate() }}\n </span>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n '}),t.mount("#hostaway-booking-widget")}}},794:function(n,t,e){"use strict";n.exports=e(795)},795:function(n,t){"use strict";n.exports={baseUrl:"https://api.hostaway.com",mixPanelEnabled:!1,captchaEnabled:!0}}});
//# sourceMappingURL=widget.js.map

Back to list