<div class="header fixed right-0 left-0">
<div class="relative text-white mx-auto" style="max-width: 2000px;">
<div class="bg-gradient-to-b from-black to-transparent opacity-70 absolute inset-0"></div>
<div class="flex relative">
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-start sm:items-start" x-data="{ open: false }">
<div class="m-2 sm:m-4 md:m-6 lg:m-8">
<button class="flex flex-col items-center opacity-75 hover:opacity-100" @click="open = true">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M9 4v1H5v22h22V5h-4V4h-2v1H11V4zM7 7h2v1h2V7h10v1h2V7h2v2H7zm0 4h18v14H7zm6 2v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 17v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 21v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z"></path>
</svg>
<p class="uppercase text-xs pt-1">Book</p>
</button>
<div class="absolute top-0 left-0 z-20 bg-gray-800 p-2 sm:w-72 sm:ml-6 sm:mt-6" style="background: hsl(284, 51%, 22%)" x-cloak x-show="open" @click.away="open = false" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform scale-90 -translate-y-6 -translate-x-6" x-transition:enter-end="opacity-100 transform scale-100" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform scale-100" x-transition:leave-end="opacity-0 transform scale-90 -translate-y-6 -translate-x-6">
<button @click="open = false" class="absolute group top-0 right-0" aria-label="Close">
<svg class="h-6 w-6 m-2 fill-current text-gray-500 group-hover:text-gray-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18">
<path d="M14.53 4.53l-1.06-1.06L9 7.94 4.53 3.47 3.47 4.53 7.94 9l-4.47 4.47 1.06 1.06L9 10.06l4.47 4.47 1.06-1.06L10.06 9z"></path>
</svg> </button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/css/pikaday.min.css" integrity="sha512-yFCbJ3qagxwPUSHYXjtyRbuo5Fhehd+MCLMALPAUar02PsqX3LVI5RlwXygrBTyIqizspUEMtp0XWEUwb/huUQ==" crossorigin="anonymous" />
<form id="booking-widget" class="max-w-5xl mx-auto px-4 pb-0" style="" method="get" action="https://booking.ihotelier.com/istay/istay.jsp" target="_blank" rel="noopener">
<input type="hidden" name="HotelID" value="12571" />
<input type="hidden" name="LanguageID" value="1" />
<input type="hidden" name="Rooms" value="1" />
<input type="hidden" id="DateIn" name="DateIn">
<input type="hidden" id="DateOut" name="DateOut">
<div class="flex flex-wrap content-between py-4 -mx-2">
<div class="w-full mb-4 px-2 ie-hide">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="widget-ArrivalDate">
Arrival
</label>
<div class="relative">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-4 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="widget-ArrivalDate" name="arrival" type="text" placeholder="Arrival Date" autocomplete="off" readonly="">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full mb-4 px-2 ie-hide">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="widget-DepartureDate">
Departure
</label>
<div class="relative">
<input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 py-4 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="widget-DepartureDate" name="departure" type="text" placeholder="Departure Date" autocomplete="off" readonly="">
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="h-4 w-5 fill-current text-gray-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M17 3h-1v2h-3V3H7v2H4V3H3c-1.101 0-2 .9-2 2v12c0 1.1.899 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 14H3V9h14v8zM6.5 1h-2v3.5h2V1zm9 0h-2v3.5h2V1z"></path>
</svg>
</div>
</div>
</div>
<div class="w-1/2 mb-4 px-2">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="Adults">
Adults
</label>
<div class="relative text-gray-500">
<select id="Adults" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-4 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="Adults">
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
<div class="w-1/2 mb-4 px-2">
<label class="block uppercase tracking-wide text-white text-xs font-bold mb-2" for="Children">
Children
</label>
<div class="relative text-gray-500">
<select id="Children" class="block appearance-none w-full bg-gray-100 border border-gray-200 text-gray-700 py-4 px-4 pr-8 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" name="Children">
<option value="0" selected="selected">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-brown-700">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
</svg>
</div>
</div>
</div>
<div class="w-full px-2 flex flex-col justify-end">
<button type="submit" class="block mt-2 py-4 px-4 border border-white hover:bg-teal-600 focus:bg-teal-600 text-white uppercase" onclick="ga('send','event','Outgoing','Booking System')">
Search Availability
</button>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.9.4/dayjs.min.js" integrity="sha512-XZSHSEFj4QeE0G4pwy4tToyAhF2VXoEcF9CP0t1PSZMP2XHhEEB9PjM9knsdzcEKbi6GRMazdt8tJadz0JTKIQ==" crossOrigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.6.0/pikaday.min.js" integrity="sha512-AWC8WaJpos1L8xD++XDtqY3znmqhqDY/o4KZ3wo7kmt1Hx6YjP4ZqPnYDrLg1ymG6iidGzq/UKHS/MxBwVAlwQ==" crossorigin="anonymous"></script>
<script>
/*
Javascript for booking widget
- using Pikaday for date widget
- using Day.js for date manipulation
Based on the following assumptions:
- form method is POST
- convert display dates to submitted dates using YYYYMMDD
- submitted field names are:
- DateIn
- DateOut
- Adults
- Children
*/
// Date picker for arrival date.
// On select, set minDepartureDate + minNights for departure date widget
const minNights = 1;
const arrival = new Pikaday({
field: document.querySelector('#widget-ArrivalDate'),
format: 'YYYY-MM-DD',
minDate: new Date(dayjs().add(1, 'day')),
onSelect() {
let selectedDate = new Date(this.getDate());
const minDepartureDate = new Date(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate() + minNights
);
depart.setMinDate(minDepartureDate);
// set depart calendar to selected date, important when not in same month
depart.gotoDate(selectedDate);
// format date for submission
return arrivalDateSubmitFormat = dayjs(this.getDate()).format('MM/DD/YYYY');
},
});
// Date picker for departure date.
// const departure_date = '';
const depart = new Pikaday({
field: document.querySelector('#widget-DepartureDate'),
format: 'YYYY-MM-DD',
minDate: new Date(dayjs().add(1 + minNights, 'day')),
onSelect() {
const selectedDate = new Date(this.getDate());
const maxArrivalDate = new Date(
selectedDate.getFullYear(),
selectedDate.getMonth(),
selectedDate.getDate() - minNights
);
arrival.setMaxDate(maxArrivalDate);
// format date for submission
return departureDateSubmitFormat = dayjs(this.getDate()).format('MM/DD/YYYY');
},
});
// Date conversion before submission
const bookingWidget = document.querySelector('#booking-widget');
const arrivalDisplayField = document.querySelector('#widget-ArrivalDate')
const departureDisplayField = document.querySelector('#widget-DepartureDate')
const arrivalSubmitField = document.querySelector('#DateIn')
const departureSubmitField = document.querySelector('#DateOut')
if (bookingWidget) {
bookingWidget.addEventListener("submit", function(event) {
// set the value of hidden fields to dates reformatted for submission
arrivalSubmitField.value = arrivalDateSubmitFormat;
departureSubmitField.value = departureDateSubmitFormat;
// remove the name attribute or our arrival and departure display fields to avoid submitting
arrivalDisplayField.removeAttribute('name');
departureDisplayField.removeAttribute('name');
// to test values without submitting form
// event.preventDefault();
// console.log('arrivalSubmitField: ' + arrivalSubmitField.value);
// console.log('departureSubmitField: ' + departureSubmitField.value);
});
}
</script>
<script>
var myForm = document.getElementById('booking-widget');
addListener(myForm, 'submit', decorateForm);
function decorateForm(event) {
event = event || window.event; // Cross browser hoops.
var target = event.target || event.srcElement;
if (target && target.action) {
ga('linker:decorate', target);
}
}
// Cross browser way to listen for events.
function addListener(element, type, callback) {
if (element.addEventListener) element.addEventListener(type, callback);
else if (element.attachEvent) element.attachEvent('on' + type, callback);
}
</script>
</div>
</div>
</div>
<div class="w-2/3 text-center">
<a href="" class="inline-block mx-auto md:m-2 lg:m-4">
<img src="/images/swr_logo_white.png" srcset="/images/swr/swr_logo_white.png 1x, /images/swr/[email protected] 2x" width="300" height="130" alt=" logo">
</a>
</div>
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-end sm:items-start">
<button x-data @click="$dispatch('togglesearch')" class="hidden sm:flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M19 3C13.488 3 9 7.488 9 13c0 2.395.84 4.59 2.25 6.313L3.281 27.28 4.72 28.72l7.968-7.969A9.922 9.922 0 0019 23c5.512 0 10-4.488 10-10S24.512 3 19 3zm0 2c4.43 0 8 3.57 8 8s-3.57 8-8 8-8-3.57-8-8 3.57-8 8-8z" />
</svg>
<p class="uppercase text-xs pt-1">search</p>
</button>
<button x-data @click="$dispatch('togglenav')" class="flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">
<svg class="w-12 h-12 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
<path d="M4 7v2h24V7zm0 8v2h24v-2zm0 8v2h24v-2z"></path>
</svg>
<p class="uppercase text-xs pt-1">menu</p>
</button>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script>
const showAnim = gsap.from('.header', {
yPercent: -100,
paused: true,
duration: 0.2
}).progress(1);
ScrollTrigger.create({
start: "top top",
end: 99999,
onUpdate: (self) => {
console.log(self.direction);
self.direction === -1 ? showAnim.play() : showAnim.reverse()
}
});
</script>
<div class="header fixed right-0 left-0">
<div class="relative text-white mx-auto" style="max-width: 2000px;">
<div class="bg-gradient-to-b from-black to-transparent opacity-70 absolute inset-0"></div>
<div class="flex relative">
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-start sm:items-start" x-data="{ open: false }">
<div class="m-2 sm:m-4 md:m-6 lg:m-8">
{{!--{# {% if (entry.showBookingWidget ??? null) and (entry.type != 'homepage') %}#}--}}
{{!--{# #}{# Can't have two booking widgets on page, conflict with ids and scripts. If booking widget added to page content, make the button link directly to booking system instead #}--}}
{{!--{# <a class="flex flex-col items-center opacity-75 hover:opacity-100" href="{{ contactInfo.reservationsUrl }}" rel="nofollow noopener"#}--}}
{{!--{# onclick="ga('send','event','Outgoing','Booking System')" target="_blank"><svg class="w-12 h-12 fill-current"#}--}}
{{!--{# xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">#}--}}
{{!--{# <path d="M9 4v1H5v22h22V5h-4V4h-2v1H11V4zM7 7h2v1h2V7h10v1h2V7h2v2H7zm0 4h18v14H7zm6 2v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 17v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zM9 21v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2z"></path>#}--}}
{{!--{# </svg>#}--}}
{{!--{# <p class="uppercase text-xs pt-1">Book</p>#}--}}
{{!--{# </a>#}--}}
{{!--{# {% else %}#}--}}
<button class="flex flex-col items-center opacity-75 hover:opacity-100" @click="open = true">
{{> @swr-icon-calendar }}
<p class="uppercase text-xs pt-1">Book</p>
</button>
{{> @swr-booking-widget-popup }}
</div>
{{!--{# {% endif %}#}--}}
</div>
</div>
<div class="w-2/3 text-center">
<a href="{{ siteUrl }}" class="inline-block mx-auto md:m-2 lg:m-4">
<img src="/images/swr_logo_white.png"
srcset="/images/swr/swr_logo_white.png 1x, /images/swr/[email protected] 2x"
width="300" height="130"
alt="{{ siteName }} logo"
>
</a>
</div>
<div class="w-1/6 flex flex-col sm:flex-row sm:justify-end sm:items-start">
<button x-data @click="$dispatch('togglesearch')"
class="hidden sm:flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100">
{{> @swr-icon-search }}
<p class="uppercase text-xs pt-1">search</p>
</button>
<button x-data @click="$dispatch('togglenav')"
class="flex flex-col items-center m-2 sm:m-4 md:m-6 lg:m-8 opacity-75 hover:opacity-100"
>
{{> @swr-icon-menu }}
<p class="uppercase text-xs pt-1">menu</p>
</button>
</div>
</div>
</div>
</div>
{{!-- Reveal navigation on scroll up using GSAP --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/ScrollTrigger.min.js"></script>
<script>
const showAnim = gsap.from('.header', {
yPercent: -100,
paused: true,
duration: 0.2
}).progress(1);
ScrollTrigger.create({
start: "top top",
end: 99999,
onUpdate: (self) => {
console.log(self.direction);
self.direction === -1 ? showAnim.play() : showAnim.reverse()
}
});
</script>
/* No context defined. */