\r\n
\r\n}","export function isExternalLink(link){\r\n return link && (link.indexOf('https://') === 0 || link.indexOf('http://') === 0 || link.indexOf('://') === 0);\r\n}\r\n\r\nexport function getLinkFromElement(el){\r\n if (!el) return null;\r\n const linkEl = el.closest('a');\r\n //console.log(el, linkEl);\r\n if (linkEl){\r\n return linkEl.getAttribute('href');\r\n }\r\n return null;\r\n}\r\n\r\n\r\n// router utils\r\nexport function getLinkInfo(link) {\r\n if (!link) return null;\r\n\r\n const origin = typeof window !== `undefined` && window.location && window.location.origin;\r\n const currentPath = typeof window !== `undefined` && window.location && window.location.pathname;\r\n let linkFiltered = link.replace(origin, '').replace(currentPath + '#', '#');\r\n let linkLower = link.toLowerCase();\r\n\r\n //if (isStaticFile(linkLower)) return null;\r\n const isExternal = isExternalLink(linkFiltered);\r\n const isHash = linkFiltered.indexOf('#') === 0;\r\n const isTel = linkFiltered.indexOf('tel:') === 0;\r\n const isMailTo = linkFiltered.indexOf('mailto:') === 0;\r\n const type = (isHash && 'hash') || (isTel && 'tel') || (isMailTo && 'mailto') || \r\n (isStaticFile(linkLower) && 'static') || (isExternal && 'external') || 'internal';\r\n\r\n return { url: linkFiltered, type: type, ext: getExtension(link) };\r\n}\r\n\r\nvar exts = ['.pdf', '.jpg', '.png', '.gif', '.docx', '.doc']\r\nfunction isStaticFile(path) {\r\n for(let i = 0; i < exts.length; i++) {\r\n if (path.indexOf(exts[i]) >= 0) return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function getExtension(filename) {\r\n if (!filename || filename.indexOf('.') < 0) return null;\r\n return filename.split('.').pop().toLowerCase();\r\n}\r\n\r\nexport function getFilename(url) {\r\n return url.split('/').pop().split('?')[0];\r\n}\r\n\r\nexport function getFolderPath(url, parentDepth = -1) {\r\n return url.split('/').slice(0, parentDepth).join('/');\r\n}\r\n\r\n//\r\nexport function toQueryString(params) {\r\n var queryString = Object.keys(params).map((key) => {\r\n return encodeURIComponent(key) + '=' + encodeURIComponent(params[key])\r\n }).join('&');\r\n return queryString;\r\n}\r\n\r\nexport function getYoutubeId(url){\r\n url = url.split(/(vi\\/|v=|\\/v\\/|youtu\\.be\\/|\\/embed\\/)/);\r\n return (url[2] !== undefined) ? url[2].split(/[^0-9a-z_-]/i)[0] : url[0];\r\n}\r\n\r\nexport function getSlug(text){\r\n return text.toLowerCase().replace(/ /g,'-').replace(/[-]+/g, '-').replace(/[^\\w-]+/g,'');\r\n}\r\n\r\nexport function getWebUrl(url, schema = 'https://'){\r\n if (!url) return null;\r\n if (url.indexOf('https:') >= 0 || url.indexOf('http:') >= 0 || url.indexOf(':') >= 0) {\r\n return url;\r\n }\r\n return schema + url;\r\n}","//#region error json parsing\r\nexport const getErrors = (result) => {\r\n let errors = [];\r\n if (result && result.errors && result.errors.length > 0) {\r\n result.errors.forEach(err => {\r\n errors.push(err.errorMessage);\r\n });\r\n }\r\n return errors;\r\n}\r\n\r\nexport const getErrorMessage = (result) => {\r\n let errors = getErrors(result);\r\n return errors.join(\" \");\r\n}\r\n//#endregion","//#region conversion between array and object\r\nexport const convertToObject = (array, key) => {\r\n const initialValue = {};\r\n return array.reduce((obj, item) => {\r\n return {\r\n ...obj,\r\n [item[key]]: item,\r\n };\r\n }, initialValue);\r\n};\r\n\r\nexport const convertToKeyValues = (array, key, value) => {\r\n const initialValue = {};\r\n return array.reduce((obj, item) => {\r\n return {\r\n ...obj,\r\n [item[key]]: item[value],\r\n };\r\n }, initialValue);\r\n};\r\n//#endregion\r\n\r\n//#region array helper functions\r\nexport const moveItem = (list, fromIndex, toIndex) => {\r\n //const list = Array.from(array);\r\n const [removed] = list.splice(fromIndex, 1);\r\n list.splice(toIndex, 0, removed);\r\n\r\n return list;\r\n};\r\n\r\nexport const removeItem = (list, index) => {\r\n //const list = Array.from(array);\r\n list.splice(index, 1);\r\n\r\n return list;\r\n};\r\n\r\nexport const insertItem = (list, index, item) => {\r\n //const list = Array.from(array);\r\n list.splice(index, 0, item);\r\n\r\n return list;\r\n};\r\n\r\n\r\nexport const find = (list, fn) => {\r\n if (!list) return null;\r\n for (let i = 0; i < list.length; i++) {\r\n if (fn(list[i])) {\r\n return list[i];\r\n }\r\n }\r\n return null;\r\n};\r\n\r\nexport const findIndex = (list, fn) => {\r\n if (!list) return -1;\r\n for (let i = 0; i < list.length; i++) {\r\n if (fn(list[i])) {\r\n return i;\r\n }\r\n }\r\n return -1;\r\n};\r\n\r\nexport const contains = (list, fn) => {\r\n return findIndex(list, fn) >= 0;\r\n}\r\n\r\n// utils.array.distinct(images, (x, y) => x.imageUrl === y.imageUrl)\r\nexport const distinct = (list, comparer) => {\r\n const filtered = []\r\n for (let i = 0; i < list.length; i++) {\r\n if (!contains(filtered, (x) => comparer(x, list[i]))) {\r\n filtered.push(list[i])\r\n }\r\n }\r\n return filtered;\r\n}\r\n\r\nexport const sum = (list, fn) => {\r\n if (!list) return 0;\r\n let total = 0;\r\n for (let i = 0; i < list.length; i++) {\r\n total += fn(list[i]) || 0\r\n }\r\n return total\r\n}\r\n\r\nexport const equal = (list1, list2, fn) => {\r\n if (!list1 && !list2) return true;\r\n if (!list1 || !list2) return false;\r\n if (list1.length !== list2.length) return false;\r\n for (let i = 0; i < list1.length; i++) {\r\n let found = false;\r\n for (let j = 0; j < list2.length; j++) {\r\n if(fn(list1[i], list2[i])) {\r\n found = true;\r\n break;\r\n }\r\n }\r\n if (!found) return false;\r\n }\r\n return true;\r\n}\r\n//#endregion\r\n\r\n//#region sorting helpers\r\nexport const caseInsensitiveCompare = function (a, b) {\r\n return a.toLowerCase().localeCompare(b.toLowerCase());\r\n}\r\n\r\n// put the null items at the end.\r\nexport const compareIgnoreEmpty = function (asc) {\r\n return asc ?\r\n function (a, b) {\r\n return (a === null || isNaN(a)) - (b === null || isNaN(b)) || +(a > b) || -(a < b);\r\n }\r\n :\r\n function (a, b) {\r\n return (a === null || isNaN(a)) - (b === null || isNaN(b)) || -(a > b) || +(a < b);\r\n }\r\n}\r\n//#endregion","import parse from 'date-fns/parse';\r\nimport parseISO from 'date-fns/parseISO';\r\n\r\n//#region manipulation\r\nexport const addDays = (date, days) => {\r\n var result = new Date(date)\r\n result.setDate(result.getDate() + days)\r\n return result\r\n}\r\n//#endregion\r\n\r\n//#region format\r\nexport function formatYYYYMMDD(dateObj) {\r\n const date = toDate(dateObj);\r\n //console.log(dateObj, date)\r\n if (!date) return '';\r\n var dd = date.getDate();\r\n var mm = date.getMonth() + 1; //January is 0!\r\n\r\n var yyyy = date.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n } \r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n } \r\n return (`${yyyy}-${mm}-${dd}`)\r\n}\r\n\r\nexport function formatDDMMYYYY(dateObj) {\r\n const date = toDate(dateObj);\r\n //console.log(dateObj, date)\r\n if (!date) return '';\r\n var dd = date.getDate();\r\n var mm = date.getMonth() + 1; //January is 0!\r\n\r\n var yyyy = date.getFullYear();\r\n if (dd < 10) {\r\n dd = '0' + dd;\r\n } \r\n if (mm < 10) {\r\n mm = '0' + mm;\r\n }\r\n return (`${dd}-${mm}-${yyyy}`)\r\n}\r\n//#endregion\r\n\r\n//#region parse\r\nexport function toDate(dateObj){\r\n if (!dateObj) return null;\r\n if (typeof dateObj === 'string') {\r\n return parseDate(dateObj, 'yyyy-MM-dd') ||\r\n parseDate(dateObj, 'yyyy-M-d') ||\r\n parseDate(dateObj, 'dd/MM/yyyy') ||\r\n parseDate(dateObj, 'd/M/yyyy') ||\r\n parseISO(dateObj)\r\n } else {\r\n return dateObj;\r\n }\r\n}\r\n\r\nexport function toDateTime(dateObj){\r\n if (!dateObj) return null;\r\n if (typeof dateObj === 'string') {\r\n return parseDate(dateObj, \"yyyy-MM-dd'T'HH:mm:ss.SSSxxx\") ||\r\n parseDate(dateObj, 'yyyy-MM-dd HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'yyyy-M-d HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'dd/MM/yyyy HH:mm:ss.SSSxxx') ||\r\n parseDate(dateObj, 'd/M/yyyy HH:mm:ss.SSSxxx') ||\r\n parseISO(dateObj)\r\n } else {\r\n return dateObj;\r\n }\r\n}\r\n\r\nexport function parseDate(dateStr, format) {\r\n const date = parse(dateStr, format, new Date());\r\n return date && isValidDate(date)? date : null;\r\n}\r\n\r\nexport function isValidDate(d) {\r\n return d instanceof Date && !isNaN(d);\r\n}\r\n//#endregion","//#region background images\r\nexport const bgUrl = (imageUrl) => {\r\n return `background-image:url(\"` + encodeURI(decodeURI(imageUrl)) + `\")`\r\n}\r\n\r\nexport const bgUrlStyle = (imageUrl) => {\r\n return `url(\"` + encodeURI(decodeURI(imageUrl)) + `\")`\r\n}\r\n//#endregion\r\n\r\n//#region screen/element size\r\nexport const screenWidth = () => {\r\n if (typeof window !== `undefined`) { \r\n return window.innerWidth ||\r\n document.documentElement.clientWidth ||\r\n document.body.clientWidth\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nexport const screenHeight = () => {\r\n if (typeof window !== `undefined`) { \r\n return window.innerHeight ||\r\n document.documentElement.clientHeight ||\r\n document.body.clientHeight\r\n } else {\r\n return 0;\r\n }\r\n}\r\n\r\nexport const outerWidth = el => el.offsetWidth\r\nexport const outerHeight = el => el.offsetHeight\r\n//#endregion\r\n\r\n//#region css class\r\n/**\r\n * Check if element has the css class on it.\r\n */\r\nexport const hasClass = (el, className) => {\r\n if (el.classList) {\r\n return el.classList.contains(className)\r\n }\r\n\r\n return !!el.className.match(new RegExp(`(\\\\s|^)${className}(\\\\s|$)`))\r\n}\r\n\r\n/**\r\n * Adds the provided css className to the element.\r\n */\r\nexport const addClass = (el, className) => {\r\n if (el.classList) {\r\n el.classList.add(className)\r\n return\r\n }\r\n\r\n if (!hasClass(el, className)) {\r\n el.className += ` ${className}`\r\n }\r\n}\r\n\r\n/**\r\n * Remove the provided css className from the element.\r\n */\r\nexport const removeClass = (el, className) => {\r\n if (el.classList) {\r\n el.classList.remove(className)\r\n return\r\n }\r\n\r\n if (hasClass(el, className)) {\r\n const reg = new RegExp(`(\\\\s|^)${className}(\\\\s|$)`)\r\n el.className = el.className.replace(reg, ' ')\r\n }\r\n}\r\n\r\n/**\r\n * Adds or removes a class name on the input depending on the status flag.\r\n */\r\nexport const toggleClass = (el, className, status) => {\r\n if (!el || !className) return\r\n\r\n if (status) {\r\n return addClass(el, className)\r\n }\r\n\r\n removeClass(el, className)\r\n}\r\n//#endregion","import { gsap } from 'gsap';\r\nimport { ScrollToPlugin } from 'gsap/ScrollToPlugin';\r\n\r\ngsap.registerPlugin(ScrollToPlugin);\r\n\r\nexport function scrollTo(selector, duration = 750, delay = 0) {\r\n const el = findElement(selector);\r\n if (el) {\r\n setTimeout(() => {\r\n //console.log(element);\r\n const offset = elementOffset(el);\r\n //console.log(offset)\r\n //window.scrollTo(0, offset.top - 300);\r\n\r\n gsap.to(window, {duration: (duration/1000), scrollTo: offset.top - 100, ease: 'power1'});\r\n\r\n }, delay);\r\n //el.scrollIntoView({ block: 'start', inline: 'nearest', behavior: 'smooth' }); }, timeout);\r\n return true;\r\n }\r\n return false;\r\n}\r\n\r\nexport function findElement(selector) {\r\n if (typeof selector !== 'string') return selector;\r\n\r\n let found = querySelectorOrNull(selector)\r\n || querySelectorOrNull('#' + selector)\r\n || querySelectorOrNull('.' + selector)\r\n \r\n return found;\r\n}\r\n\r\nexport function querySelectorOrNull(selector) {\r\n try {\r\n return document.querySelector(selector);\r\n } catch(e){\r\n return null;\r\n };\r\n}\r\n\r\nexport function elementOffset(el) {\r\n var rect = el.getBoundingClientRect(),\r\n scrollLeft = typeof window !== `undefined` ? (window.pageXOffset || document.documentElement.scrollLeft) : 0,\r\n scrollTop = typeof window !== `undefined` ? (window.pageYOffset || document.documentElement.scrollTop) : 0;\r\n\r\n return { top: rect.top + scrollTop, left: rect.left + scrollLeft, width: el.offsetWidth, height: el.offsetHeight }\r\n}\r\n\r\nexport function isElementInViewport (el) {\r\n if (typeof window !== `undefined`) {\r\n var rect = el.getBoundingClientRect();\r\n\r\n return (\r\n rect.top >= 0 &&\r\n rect.left >= 0 &&\r\n rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /* or $(window).height() */\r\n rect.right <= (window.innerWidth || document.documentElement.clientWidth) /* or $(window).width() */\r\n );\r\n } else {\r\n return true;\r\n }\r\n}\r\n\r\nexport function getCurrentBreakpoint() {\r\n if (typeof window === `undefined`) return null;\r\n \r\n const bpHolder = document.querySelector('.devMediaQueryStatus__current');\r\n if (!bpHolder) return null;\r\n return window.getComputedStyle(bpHolder, ':before').getPropertyValue('content').replace(/[\"']/g, '');\r\n}\r\n\r\n","export function formatMoney(number, fraction = 0) {\r\n var formatter = new Intl.NumberFormat('en-AU', {\r\n style: 'currency',\r\n currency: 'AUD',\r\n minimumFractionDigits: fraction,\r\n });\r\n\r\n return formatter.format(number);\r\n}\r\n\r\nexport function toMonthlyCost(amount, frequency) {\r\n if (!amount) return 0;\r\n if (frequency === 'Week') {\r\n return amount * 52.1429 / 12.0;\r\n } else if (frequency === 'Fortnight') {\r\n return amount * 52.1429 / 2.0 / 12.0;\r\n } else if (frequency === 'Month') {\r\n return amount;\r\n } else if (frequency === 'Quarter') {\r\n return amount * 4.0 / 12.0;\r\n } else if (frequency === 'Year') {\r\n return amount / 12.0;\r\n } else {\r\n return amount;\r\n }\r\n}\r\n","export function isBlank(str) {\r\n return (!str || /^\\s*$/.test(str))\r\n}\r\n\r\nexport function isEmpty(str) {\r\n return (!str || str.length === 0)\r\n}\r\n\r\nexport function isNumeric(num){\r\n return !isNaN(num)\r\n}\r\n\r\nexport function capitalize(expression) {\r\n return expression.charAt(0).toUpperCase() + expression.slice(1);\r\n}\r\n\r\nexport function toFieldName(str) {\r\n if (!str) return null;\r\n return capitalize((str.replace(/([A-Z]+)/g, ' $1').replace(/([A-Z][a-z])/g, ' $1')).trim());\r\n}\r\n\r\nexport function toHtml(str) {\r\n if (!str) return null;\r\n return str.replace(/[\\n\\r]/g, '\r\n
\r\n ')\r\n}\r\n\r\n// Shorten a string to less than maxLen characters without truncating words.\r\nexport function truncateWords(str, maxLen, separator = ' ', ellipsis = '...') {\r\n if (str.length <= maxLen) return str\r\n var pos = str.lastIndexOf(separator, maxLen)\r\n return str.substr(0, pos) + ellipsis\r\n}\r\n\r\nexport function numberWithCommas(x) {\r\n var parts = x.toString().split(\".\");\r\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, \",\");\r\n return parts.join(\".\");\r\n}\r\n\r\nexport const formatNumber = (value) => {\r\n if (value === 0) return '0';\r\n if (!value) return '';\r\n return Math.round(value * 100) / 100\r\n}\r\n\r\nexport const toTelephoneNumber = (str) => {\r\n return (str || []).replace(/[^+\\d]+/g, \"\");\r\n\r\n}\r\n\r\n// utils.text.like('text here', '%keyword%')\r\nexport const like = (str, search) => {\r\n if (typeof search !== 'string' || str === null) { return false; }\r\n // Remove special chars\r\n search = search.replace(new RegExp(\"([\\\\.\\\\\\\\\\\\+\\\\*\\\\?\\\\[\\\\^\\\\]\\\\$\\\\(\\\\)\\\\{\\\\}\\\\=\\\\!\\\\<\\\\>\\\\|\\\\:\\\\-])\", \"g\"), \"\\\\$1\");\r\n // Replace % and _ with equivalent regex\r\n search = search.replace(/%/g, '.*').replace(/_/g, '.');\r\n // Check matches\r\n return RegExp('^' + search + '$', 'gi').test(str);\r\n\r\n}","import shortid from 'shortid';\r\nimport uuid from 'uuid/v4';\r\n\r\nexport function shortId() {\r\n return shortid();\r\n}\r\n\r\nexport function guid() {\r\n return uuid();\r\n}","export function toCamel(o) {\r\n var newO, origKey, newKey, value\r\n if (o instanceof Array) {\r\n return o.map(function(value) {\r\n if (typeof value === \"object\") {\r\n value = toCamel(value)\r\n }\r\n return value\r\n })\r\n } else {\r\n newO = {}\r\n for (origKey in o) {\r\n if (o.hasOwnProperty(origKey)) {\r\n newKey = (origKey.charAt(0).toLowerCase() + origKey.slice(1) || origKey).toString()\r\n value = o[origKey]\r\n if (value instanceof Array || (value !== null && value.constructor === Object)) {\r\n value = toCamel(value)\r\n }\r\n newO[newKey] = value\r\n }\r\n }\r\n }\r\n return newO\r\n}","import { getFilename } from './url';\r\nimport { contains } from './array';\r\nexport function getImageSetPath(url, setId) {\r\n const info = getPathDetails(url)\r\n if (!info) return url;\r\n //console.log(url, info);\r\n return info.baseFolder + \"/@\" + setId + '/' + info.filename\r\n}\r\n\r\nexport function getPathDetails(url, setIds) {\r\n if (!url) return null;\r\n const parts = url.split('/').slice(0, -1);\r\n if (parts.length <= 1) return { baseFolder: '/', setId: null, filename: getFilename(url) };\r\n\r\n const lastFolder = parts[parts.length - 1];\r\n const hasSet = setIds && setIds.length > 0 ? contains(setIds, x => x === lastFolder) : lastFolder.indexOf('@') === 0;\r\n\r\n return hasSet ?\r\n { baseFolder: parts.slice(0, -1).join('/'), setId: lastFolder, filename: getFilename(url) } :\r\n { baseFolder: parts.join('/'), setId: null, filename: getFilename(url) }\r\n}","import classNames from 'classnames';\r\nimport * as url from './url';\r\nimport * as form from './form';\r\nimport * as array from './array';\r\nimport * as date from './date';\r\nimport * as css from './css';\r\nimport * as ui from './ui';\r\nimport * as money from './money';\r\nimport * as text from './text';\r\nimport * as random from './random';\r\nimport * as object from './object';\r\nimport * as media from './media';\r\n\r\nexport default { classNames, url, form, array, date, css, ui, money, text, random, object, media};","import utils from \"utils\";\nimport env from 'env';\n\nexport const isMobile = () => {\n var width = utils.css.screenWidth()\n return width < 768\n}\n\nexport function resourcePath(url){\n return utils.url.isExternalLink(url)? url : env.resourceBase + url;\n}\n\nexport const isNZ = env.locale === 'nz'","import coreUtils from 'lib/utils-core';\nimport * as site from 'site/siteUtils';\n\nexport default { ...coreUtils, site };","import { useState, useEffect } from 'react';\r\nimport utils from '../../utils';\r\nimport siteConfig from '../../config';\r\n\r\nexport function useApi(fn) {\r\n //console.log('useApi')\r\n const [response, setResponse] = useState({});\r\n const [errors, setErrors] = useState([]);\r\n const [status, setStatus] = useState('ready');\r\n const [request, setRequest] = useState(null);\r\n\r\n useEffect(() => {\r\n if (!request) return;\r\n\r\n //console.log('fetch now')\r\n setResponse(null);\r\n setErrors([]);\r\n setStatus('ready');\r\n\r\n const fetchData = async () => {\r\n setStatus('pending');\r\n try {\r\n //console.log(request);\r\n const options = request.options || {}\r\n siteConfig.apiNetJwt && await siteConfig.apiNetJwt(options);\r\n\r\n const res = await fetch(request.url, options);\r\n //console.log(res);\r\n\r\n if (!res.ok) {\r\n try {\r\n const json = await res.json();\r\n console.log(json);\r\n\r\n if (json.message) {\r\n setErrors([json.message]);\r\n setStatus('error')\r\n return;\r\n }\r\n } catch (e) { }\r\n\r\n const statusText = res.status === 401 ? 'Permission denied. Please login first.' : res.statusText\r\n setErrors(['Error - [' + res.status + ']' + (statusText && (' - ' + statusText))]);\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n //const json = await res.json();\r\n const text = await res.text();\r\n const json = text && text.length ? JSON.parse(text) : null;\r\n //console.log(json);\r\n\r\n // check if ajax result from c#\r\n if (json && json.errors && json.errors.length > 0) {\r\n setErrors(utils.form.getErrors(json));\r\n setStatus('error')\r\n return;\r\n }\r\n\r\n setResponse(json);\r\n setStatus('done')\r\n } catch (err) {\r\n //console.log(error, error.toString(), typeof error, JSON.stringify(error))\r\n setErrors([err.toString()]);\r\n setStatus('error')\r\n }\r\n };\r\n fetchData();\r\n }, [request]);\r\n\r\n const containsErrorMessage = (msg) => {\r\n const finding = (msg || '').toLowerCase()\r\n return errors.some(x => (x || '').toLowerCase().indexOf(finding) >= 0)\r\n }\r\n\r\n //return [ response, error, status, (...args) => setRequest(fn(...args)) ];\r\n return {\r\n request: request,\r\n response: response,\r\n errors: errors,\r\n status: status,\r\n hasErrors: () => status === 'error',\r\n containsErrorMessage: containsErrorMessage,\r\n addErrors: (errs) => {\r\n setErrors(...errors, ...errs)\r\n setStatus('error')\r\n },\r\n done: () => status === 'done',\r\n send: (...args) => { setStatus('ready'); setRequest(fn(...args)) },\r\n sendRaw: (httpOptionFn, ...args) => { setStatus('ready'); setRequest(httpOptionFn(...args)) },\r\n setResult: (json) => { setResponse(json); setStatus('done') },\r\n reset: () => {\r\n setStatus('ready');\r\n setErrors([]);\r\n }\r\n };\r\n}\r\n\r\nexport function usePost() {\r\n const formDataFn = (url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n body: data // FormData\r\n }\r\n });\r\n const post = useApi((url, data, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application/json' },\r\n body: JSON.stringify(data)\r\n }\r\n })\r\n );\r\n return {\r\n ...post,\r\n loading: () => post.status === 'ready' || post.status === 'pending',\r\n sending: () => post.status === 'pending',\r\n sendFormData: (...args) => post.sendRaw(formDataFn, ...args)\r\n }\r\n}\r\n\r\nexport function useGet() {\r\n const get = useApi((url, options = {}) =>\r\n ({\r\n url: url,\r\n options: {\r\n ...options,\r\n method: 'GET'\r\n }\r\n })\r\n );\r\n return {\r\n ...get,\r\n loading: () => get.status === 'ready' || get.status === 'pending'\r\n }\r\n}\r\n\r\n//https://medium.com/@jaryd_34198/seamless-api-requests-with-react-hooks-part-2-3ab42ba6ad5c","import React from 'react';\r\nimport env from '../../env';\r\n\r\nexport function MediaQueryStatus(props) {\r\n return (\r\n
\r\n \r\n
\r\n );\r\n}\r\n","import React from 'react';\r\nimport { Helmet } from 'react-helmet-async';\r\n\r\nexport function MetaTag({ data: seoData }) {\r\n //console.log(seoData)\r\n const data = Object.assign({}, {\r\n title: ''\r\n }, seoData)\r\n\r\n return (<>\r\n \n {\n _atdwContext.setupAtdwDataHistory2(product.productId);\n }}>\n \n
\n )\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n//import { useState, useEffect } from 'react';\nimport style from './style';\nimport { AtdwTile } from '../tile/view';\n\nexport function AtdwSearchResult(props){\n \n //const [products, setProducts] = useState(props.atdwData || []);\n const atdwDatas = props.atdwData || [];\n\n return(\n \n {product.town}\n
\n \n
\n
\n \n \n {product.productName}\n
\n \n
\n {\n product.additionalData.PRODUCTTYPES.map((item, index)=> {\n if(product.additionalData.PRODUCTTYPES.length === (index + 1)){\n return(\n {item.productTypeDescription}\n )\n }\n else{\n return (\n {item.productTypeDescription} | \n )\n }\n })\n }\n
\n \n {product.shortDesc}\n
\n \n
\n )\n}","function payload(item, key, defaultVal = '') {\n const found = item.payloads.find(x => x.key === key);\n return found ? found.value : defaultVal;\n}\n\nexport default { payload };","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n//import style from './style';\nimport utils from 'utils';\nimport { AtdwSearchOption } from '../searchOption/view'\nimport { AtdwSearchResult } from '../searchResult/view'\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport { useState, useEffect, useCallback, useContext } from 'react';\nimport env from 'env';\nimport { AtdwContext } from '../index';\n\nfunction AtdwSearchTitle(props){\n const type = props.type;\n const title = {sTitle : '', title : ''};\n if(type === 'ACCOMM'){\n title.sTitle = \"SEARCH & BOOK\";\n title.title = \"ACCOMMODATION\";\n }\n else if(type === 'ATTRACTION'){\n title.sTitle = \"SEARCH\";\n title.title = \"ATTRACTIONS\";\n }\n else if(type === 'DESTINFO'){\n title.sTitle = \"SEARCH\";\n title.title = \"TOWN\";\n }\n else if(type === 'RESTAURANT'){\n title.sTitle = \"SEARCH\";\n title.title = \"EATING OUT\";\n }\n else if(type === 'EVENT'){\n title.sTitle = \"SEARCH\";\n title.title = \"EVENT\";\n }\n else if(type === 'INFO'){\n title.sTitle = \"SEARCH\";\n title.title = \"INFO\";\n }\n else if(type === 'TOUR'){\n title.sTitle = \"SEARCH\";\n title.title = \"TOUR\";\n }\n else if(type === 'GENSERVICE'){\n title.sTitle = \"SEARCH\";\n title.title = \"GENSERVICE\";\n }\n else if(type === 'JOURNEY'){\n title.sTitle = \"SEARCH\";\n title.title = \"JOURNEY\";\n }\n\n return(\n \n { atdwDatas.map((item, index) =>
\n {title.sTitle} {title.title}
\n )\n}\n\nexport function AtdwSearch(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n //console.log(\"AtdwSearchItem11111\", item);\n const cssClass = utils.classNames('cms_item', 'atdwSearch', item.cssClass || item.anchorName || '');\n const bgColor = cmsUtils.payload(item, 'BgColor');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const tilesSize = 12;\n const atdwType = cmsUtils.payload(item, 'ProductType');\n\n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const [atdwState, setAtdwState] = useState({\n atdwType : atdwType,\n index : 1,\n atdwDataFromDB : [],\n reserveAtdwData : [],\n atdwData : [],\n towns : [],\n trigger : 0,\n context : useContext(AtdwContext)\n });\n\n //TXA\n const [trigger, setTrigger] = useState(0);\n const [checkIn, setCheckIn] = useState('');\n const [checkOut, setCheckOut] = useState('');\n const [numOfAdults, setNumOfAdults] = useState('');\n const [numOfKids, setNumOfKids] = useState('');\n\n const onGetSearchOptionFun = ((value) => {\n const _checkIn = value.checkIn ? value.checkIn : '';\n const _checkOut = value.checkOut ? value.checkOut : '';\n const _numOfAdults = value.numOfAdults.value ? value.numOfAdults.value : '';\n const _numOfKids = value.numOfKids.value ? value.numOfKids.value : '';\n \n const subType = [];\n for(var i in value.subType){\n subType.push(value.subType[i].value);\n }\n const town = value.town.trim();\n const name = value.name.trim();\n\n const _filteredData = atdwState.atdwDataFromDB.filter((data) => { \n let returnResult = false;\n //1\n if(subType.length > 0){\n for(var i in data.additionalData.PRODUCTTYPES){\n returnResult = false;\n if(subType.toString().includes(data.additionalData.PRODUCTTYPES[i].productTypeId)){\n returnResult = true;\n }\n else{\n returnResult = false;\n break;\n }\n }\n }\n else{\n returnResult = true;\n }\n\n //2\n if(returnResult === true && (town !== \"\" && town !== null)){\n returnResult = false;\n if(data.town.toLowerCase().includes(town.toLowerCase())){\n returnResult = true;\n }\n }\n\n //3\n if(returnResult === true && (name !== \"\" && name !== null)){\n returnResult = false;\n if(data.productName.toLowerCase().includes(name.toLowerCase())){\n returnResult = true;\n }\n }\n\n //4 for event //atdwState.atdwType === 'ACCOMM'\n if(atdwState.atdwType === 'EVENT'){\n if(returnResult === true && (_checkIn !== \"\" && _checkIn !== null)){\n returnResult = false;\n if(data.additionalData.eventFrequency.length > 0){\n var fDate = new Date(_checkIn);\n var tDate = new Date(_checkOut);\n for(var n in data.additionalData.eventFrequency){\n var pFDate = new Date(data.additionalData.eventFrequency[n].frequencyStartDate);\n var pTDate = new Date(data.additionalData.eventFrequency[n].frequencyEndDate);\n if(pFDate >= fDate && pTDate <= tDate){\n returnResult = true;\n break;\n }\n }\n }\n \n }\n }\n return returnResult;\n });\n \n const _data = [];\n if(_filteredData.length > 0){\n for(var x = 0; x < tilesSize; x++){\n _data.push(_filteredData[x]);\n if(x === (_filteredData.length -1)){\n break;\n }\n }\n }\n\n //setReserveAtdwData(_filteredData);\n\n setAtdwState(pre => {\n let _new = {...pre};\n _new.reserveAtdwData = _filteredData;\n if(_checkIn !== '' && atdwState.atdwType === 'ACCOMM'){\n setCheckIn(_checkIn);\n setCheckOut(_checkOut);\n setNumOfAdults(_numOfAdults);\n setNumOfKids(_numOfKids);\n setTrigger(trigger + 1);\n }\n else{\n _new.atdwData = _data;\n _new.index = 1;\n \n _new.context.setupAtdwDataHistory({\n atdwDataFromDB : _new.atdwDataFromDB,\n reserveAtdwData : _new.reserveAtdwData,\n atdwData : _new.atdwData,\n index : _new.index\n });\n \n }\n return _new;\n });\n });\n\n useEffect(()=>{\n //console.log(\"useEffect_1\");\n if(atdwState.context.atdwDataHistory2 !== null){\n setAtdwState(pre => {\n let _new = {...pre};\n _new.atdwDataFromDB = atdwState.context.atdwDataHistory.atdwDataFromDB;\n _new.reserveAtdwData = atdwState.context.atdwDataHistory.reserveAtdwData;\n _new.atdwData = atdwState.context.atdwDataHistory.atdwData;\n _new.index = atdwState.context.atdwDataHistory.index;\n return _new;\n });\n setTimeout(() => {\n document.getElementById(atdwState.context.atdwDataHistory2).scrollIntoView({behavior:'smooth', block:'center'});\n atdwState.context.setupAtdwDataHistory2(null);\n }, 500);\n return;\n }\n\n const fetchData = async () =>{\n const res = await fetch(env.apiBase + \"/api/atdw/getproducts/\" + atdwState.atdwType);\n const data = await res.json();\n const _data = [];\n if(data.products.length > 0){\n for(var i = 0; i < tilesSize; i++){\n _data.push(data.products[i]);\n if(i === (data.products.length -1)){\n break;\n }\n }\n }\n\n setAtdwState(pre => {\n let _new = {...pre};\n _new.atdwDataFromDB = data.products; \n _new.towns = data.tows;\n _new.reserveAtdwData = data.products;\n _new.atdwData = _data;\n _new.context.setupAtdwDataHistory({\n atdwDataFromDB : _new.atdwDataFromDB,\n reserveAtdwData : _new.reserveAtdwData,\n atdwData : _new.atdwData,\n index : _new.index\n });\n return _new;\n });\n }\n fetchData();\n }, [ atdwState.atdwType, atdwState.context ]);\n\n useEffect(() => { \n if(trigger === 0){\n return\n }\n const fetchData = async () => {\n const sendData = {\n checkIn : checkIn,\n checkOut : checkOut,\n adults : numOfAdults,\n kids : numOfKids,\n txaList : []\n };\n atdwState.reserveAtdwData.forEach(el => {\n if(el.additionalData.externalSystems.length > 0){\n for(var i in el.additionalData.externalSystems){\n if(el.additionalData.externalSystems[i].externalSystemCode === \"TXA_DEFAULT\"){\n sendData.txaList.push(el.additionalData.externalSystems[i].externalSystemText);\n break;\n }\n }\n }\n });\n\n const res = await fetch(env.apiBase + \"/api/atdw/gettxaproducts\", {\n method : 'post',\n headers: { 'Content-Type': 'application/json' },\n body: JSON.stringify(sendData)\n });\n const data = await res.json();\n //console.log(\"data\", data);\n const r_data = [];\n const _data = [];\n for(var i = 0; i < atdwState.reserveAtdwData.length; i++){\n for(var n =0; i < atdwState.reserveAtdwData[i].additionalData.externalSystems; n++){\n if(data.toString().includes(atdwState.reserveAtdwData[i].additionalData.externalSystems[n].externalSystemText)){\n r_data.push(atdwState.reserveAtdwData[i]);\n if(i < tilesSize){\n _data.push(atdwState.reserveAtdwData[i]);\n }\n break;\n }\n }\n }\n //setReserveAtdwData(r_data);\n //setAtdwData(_data);\n setAtdwState(pre => {\n let _new = {...pre};\n _new.reserveAtdwData = r_data;\n _new.atdwData = _data;\n return _new;\n });\n };\n fetchData();\n setTrigger(0);\n }, [trigger, checkIn, checkOut, numOfAdults, numOfKids, atdwState.reserveAtdwData]);\n\n const addAtdw = useCallback((reserveAtdwData, _atdwContext)=>{\n const av = [];\n for(var i = (atdwState.index * tilesSize); i < ((atdwState.index * tilesSize) + tilesSize); i++){\n av.push(reserveAtdwData[i]);\n if(reserveAtdwData.length - 1 === i){\n break;\n }\n }\n setAtdwState(pre => {\n let _new = {...pre};\n _new.atdwData = [..._new.atdwData, ...av];\n _new.index = _new.index + 1;\n _atdwContext.setupAtdwDataHistory({\n atdwDataFromDB : _new.atdwDataFromDB,\n reserveAtdwData : _new.reserveAtdwData,\n atdwData : _new.atdwData,\n index : _new.index \n }); \n\n return _new;\n });\n }, [atdwState.index]);\n\n return(\n\n \n
\n \n 1 to { atdwState.atdwData.length } of { atdwState.reserveAtdwData.length }\n
\n { atdwState.atdwData ? (\n \n 1 to { atdwState.atdwData.length } of {atdwState.reserveAtdwData.length}\n
\n ) : null }\n\n {\n atdwState.atdwData.length !== atdwState.reserveAtdwData.length && atdwState.atdwData.length > 0 ?\n \n \n
: null\n }\n\n {\n atdwState.atdwData.length === 0 ?\n Sorry, there are no available results.
: null\n }\n \n \n \n {slides}\n \n
\n );\n}","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { SiteLink } from 'components';\n\nexport function BannerItem(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('BannerItem', item);\n\n const cssClass = utils.classNames('cms_item', 'banner-item', 'bannerSize', item.cssClass || item.anchorName || '');\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n // const caption = cmsUtils.payload(item, 'Caption');\n const caption = cmsUtils.payload(item, 'ExtraCaption');\n \n //console.log('item', bgUrl);\n // const titlePanel = captionTitle ? (\n // linkUrl ? (\n {titlePanel && \n
\n : (\n \n
\n }\n \n
\n \n
\n \n {titlePanel}\n
\n {caption ? { caption }
: null}\n \n {titlePanel && \n
\n \n
\n }\n \n
\n \n
\n \n {titlePanel}\n
\n {caption ? { caption }
: null}\n \n {titlePanel && \n
)\n\n );\n\n}","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport { Item } from 'cms/items/item';\nimport utils from 'utils';\n\nexport function Panel(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n \n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n //console.log(bgTheme)\n\n\n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || '');\n\n const subItemsElts = subItems.map((subItem, index) =>\n \n
\n }\n\n
\n \n
\n \n {titlePanel}\n
\n \n {caption ? { caption }
: null}\n \n {subItemsElts}\n
\n handleClick(e)}>
\n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}","import React from 'react';\nimport { Item } from 'cms/items/item';\n\nexport function TestimonialPanel(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n\n let itemElt = ({item.itemTypeCode}
);\n \n const subItemsElts = subItems.map((subItem, index) =>\n \n {itemElt}\n {subItemsElts}\n
\n );\n}\n","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport { Item } from 'cms/items/item';\n\nexport function TestimonialItem(props) {\n const item = props.item;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems);\n\n //const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const title = cmsUtils.payload(item, 'Title');\n //const desc = cmsUtils.payload(item, 'Desc');\n const bottomText = cmsUtils.payload(item, 'BottomText');\n //const ratingStar = cmsUtils.payload(item, 'RatingStar');\n //const alt = cmsUtils.payload(item, 'Alt');\n\n let itemElt = ({item.itemTypeCode} {title} {bottomText}
);\n \n const subItemsElts = subItems.map((subItem, index) =>\n \n {itemElt}\n {subItemsElts}\n
\n );\n}\n\n","import React, { useRef } from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\n//import Html from 'cms/items/html/view';\n\nexport function ImagePanel(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n \n const cssClass = utils.classNames('cms_item', 'imagePanel', 'parallax', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const htmlBlock = useRef(null);\n const cssClass2 = utils.classNames('cms_item', 'htmlPanel', cmsOption.isCmsEdit && 'html', item.cssClass || item.anchorName || '');\n const content = cmsUtils.payload(item, 'Content');\n\n return (\n \n //data-cms-item-id={cmsOption.isCmsEdit && item.itemId} id={item.anchorName}\n \n \n
\n );\n\n\n}","//import { css, keyframes } from '@emotion/core'\n//import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\nimport { mq } from 'cssInJs'\n\nexport default {\n pageTiles : css({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n //margin: '2rem -10px'\n margin: '2rem auto',\n maxWidth : '960px',\n '&.notUseSlider .pageTile__j5' : css(mq({\n flexBasis: ['100%', '46%', '30.33%'],\n maxWidth : ['100%', '46%', '30.33%'],\n position: 'relative',\n margin: \"10px\",\n overflow:'hidden'\n }))\n }),\n useSliderpageTiles : css({ \n '& .slick-track' : css({\n display:'flex !important',\n '& .slick-slide' : css({\n height: 'inherit !important',\n }),\n '& .slick-slide>div' : css({\n height:'100%'\n }),\n '& .pageTile__j5' : css({\n height : '100%',\n margin:'0px !important',\n padding : '10px'\n }),\n '& a.pageTile__j5__content' : css({\n display:'flex',\n flexDirection:'column',\n height: '100%',\n '& .pageTile__j5__content__details' : css({\n height: 'unset !important',\n flexGrow : '1'\n })\n })\n }), \n '&.useSlider .pageTile__j5' : css({\n margin: \"10px\"\n }),\n }),\n// pageTile__tile : css(mq({\n// flexBasis: ['100%', '46%', '30.33%' ],\n// maxWidth : ['100%', '46%', '30.33%' ],\n// //padding: '10px',\n// position: 'relative',\n// margin: \"10px\",\n// overflow:'hidden'\n// })),\n\n tile__content : css({\n '&:hover' : {\n textDecoration: 'none',\n '.pageTile__j5__content__details' : {\n opacity:'1 !important'\n }\n } \n }),\n\n tile__bg : css(mq({\n transition: 'all .2s ease-in-out',\n height: ['auto !important', '200px !important'],\n objectFit: 'cover',\n })),\n\n tile__details : css({\n transition: 'all .2s ease-in-out',\n marginTop: '0.5rem',\n //padding: '.5rem 2rem 1.5rem',\n color: '#000',\n textDecoration: 'none',\n overflow: 'hidden',\n padding: '10px 15px',\n height:'100%'\n }),\n\n tile__details__wrapper : css({\n minHeight: '7rem'\n }),\n\n tile__details__title : css({\n //marginBottom : '1rem',\n color : '#fff',\n margin: '0px',\n fontSize : '1.4rem',\n fontWeight : '700',\n marginBottom: '0.5rem'\n }),\n tile__details__desc : css(mq({\n fontSize : ['0.9rem', '0.7rem'],\n fontWeight: '100',\n lineHeight: '1.2',\n color : '#fff'\n }))\n}","import cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { SiteLink } from 'components';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\nimport Slider from \"react-slick\";\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n \nfunction Tile(props) {\n const page = props.page;\n //console.log(\"aa\", page);\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n return ( \n \n
\n\n \n \n 
\n \n
\n )\n}\n\nexport function PageTileJ5(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const pages = getPages(cmsUtils.payload(item, 'PageObjects'));\n const useSlider = cmsUtils.payload(item, 'UseSlider') === 'slider';\n\n var settings = {\n dots: false,\n infinite: true,\n speed: 500,\n autoplaySpeed: 3000,\n fade: false,\n autoplay: true,\n slidesToShow: 3,\n slidesToScroll: 1,\n responsive: [\n {\n breakpoint: 992,\n settings: {\n slidesToShow: 2,\n slidesToScroll: 1\n }\n },\n {\n breakpoint: 576,\n settings: {\n slidesToShow: 1,\n slidesToScroll: 1\n }\n }\n ]\n };\n\n const pageTileElts = pages.map((page, index) =>\n \n
\n \n
\n \n {page.pageTitle}\n
\n\n {page.tileDesc || page.description}\n
\n \n \n {pageTileElts}\n \n
\n )\n }\n else{\n return (\n \n {pageTileElts}\n
\n );\n }\n} ","import { css } from '@emotion/core'\nimport { mq, variables } from '../../../cssInJs'\n\nexport default {\n pageTiles : css({\n display: 'flex',\n justifyContent: 'flex-start',\n flexWrap: 'wrap',\n margin: '2rem -10px',\n overflow:'hidden'\n }),\n pageTile__tile : css(mq({\n flex: '0 0 100%',\n maxWidth: '100%',\n padding: '10px',\n zIndex:'1',\n '&:nth-of-type(even)' : {\n '.pageTile__bsyc__bg' : mq({\n order: ['0',null,'2'],\n }),\n '.pageTile__bsyc__content__details' : mq({\n order: '1'\n })\n }\n })),\n\n tile__content : css({\n '&:hover' : {\n textDecoration: 'none',\n '& .pageTile__bsyc__content__details' : {\n color: 'white',\n },\n // '& .pageTile__bsyc__content__details::after' : {\n // content:'\"\"',\n // backgroundColor:'rgba(0,0,0,0.5)',\n // width:'100%',\n // height:'100%',\n // display:'block'\n // },\n '& .pageTile__bsyc__bg2' : {\n //transform: scale(1.05)\n transform : 'scale(1.05)'\n }\n }\n }),\n\n tile__flip__wrapper : css({\n zIndex:'-1', \n display: 'flex',\n flexDirection: 'row',\n justifyContent: 'space-between',\n width: '100%',\n height: '100%',\n cursor: 'pointer',\n position: 'relative',\n flexWrap: 'wrap'\n }),\n\ntile__bg : css(mq({\n height: '0',\n paddingTop: ['50%','35%','30%'],\n //height: ['50%','35%','30%'],\n flex: '1 1 300px',\n overflow:'hidden',\n position:'relative'\n})),\n\ntile__bg2 : css(mq({\n height: '100%',\n backgroundPosition: '50%',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'cover',\n //overflow:'hidden',\n transition:'all .2s',\n position:'absolute',\n top:'0px',\n width:'100%'\n})),\n tile__details : css({\n overflow: 'hidden',\n flexGrow: '1',\n textAlign: 'center',\n width: '100%',\n bottom: '0',\n backgroundImage : 'url(\"/assets/tile-graphic.png?v=1\")',\n backgroundRepeat: 'no-repeat',\n backgroundSize: 'contain',\n backgroundColor: variables.themeDefaultColor,\n '&.left' : css({\n backgroundPosition: 'left'\n }),\n '&.right' : css({\n backgroundPosition: 'right'\n }),\n '&.default' : css({\n backgroundColor: variables.themeDefaultColor\n }),\n '&.red' : css({\n backgroundColor: variables.themeRedColor\n }),\n '&.orange' : css({\n backgroundColor: variables.themeOrangeColor\n }),\n '&.green' : css({\n backgroundColor: variables.themeGreenColor\n }),\n '&.blue' : css({\n backgroundColor: variables.themeBlueColor\n }),\n '&.yellow' : css({\n backgroundColor: variables.themeYellowColor\n }),\n '&.purple' : css({\n backgroundColor: variables.themePurpleColor\n }),\n '&.grey' : css({\n backgroundColor: variables.themeGreyColor\n }), \n //backgroundColor : '#77cf22',\n flex: '1 1 300px',\n transition: 'all .2s ease-in-out',\n color: '#ebebeb',\n position:'relative',\n '& .pageTile__bsyc__container' : mq({\n //position: 'absolute',\n position: ['static,',null,'absolute'],\n top: '50%',\n left:'50%',\n transform: ['none',null,'translate(-50%, -50%)'],\n width:['100%',null,'90%'],\n padding:['1rem',null,'0px'],\n '& .pageTile__bsyc__title' : {\n fontFamily: variables.familyHeader,\n fontSize: '2rem',\n //textTransform: 'uppercase',\n fontWeight: '800',\n lineHeight: '1',\n margin: '0',\n paddingTop: '.5rem',\n paddingBottom: '.5rem',\n color:'inherit'\n },\n '& .pageTile__bsyc__desc' : {\n lineHeight: '1.3',\n fontSize: '.9rem',\n //color: '#3d3d3d',\n minHeight: '70px',\n color:'inherit',\n fontWeight: 500\n }\n })\n })\n}","//import React from 'react';\nimport cmsUtils from '../../../cms/utils/cmsUtils';\nimport utils from '../../../utils';\nimport { SiteLink } from '../../../components';\n\n/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nexport function PageTilesBsyc(props) {\n const item = props.item;\n //const detailHoverBgColor = props.detailHoverBgColor ? props.detailHoverBgColor : \"black\";\n const cmsOption = props.cmsOption || {};\n const pages = getPages(cmsUtils.payload(item, 'PageObjects'))\n const pageTileElts = pages.map((page, index) =>\n \n {pageTileElts}\n
\n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n //console.log(\"ddfsfdsfds\", page);\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n const colorTheme = page.colorTheme;\n const index = props.idx;\n return (\n \n \n \n \n
\n )\n}","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { SiteLink } from 'components';\n\nexport function SingleBanner(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n\n const cssClass = utils.classNames('cms_item', 'single-banner', 'banner-item', `bannerSize--${heightSet}`, item.cssClass || item.anchorName || '');\n const bgUrl = utils.site.resourcePath(cmsUtils.payload(item, 'ImageUrl'));\n\n const captionTitle = cmsUtils.payload(item, 'CaptionTitle2') || cmsUtils.payload(item, 'CaptionTitle');\n const linkUrl = cmsUtils.payload(item, 'LinkUrl2') || cmsUtils.payload(item, 'LinkUrl');\n\n const titlePanel = captionTitle ? (\n linkUrl ? (\n\n
\n \n \n
\n \n \n
\n \n \n {\n (page.pageTitle && page.pageTitle !== '') &&\n
\n \n {page.pageTitle}\n
\n }\n\n \n {page.tileDesc || page.description}\n
\n \n {titlePanel &&
\n );\n\n\n}\n","export function findControl(controlNameOrIndex, root) {\r\n if (typeof controlNameOrIndex === 'number' && root && root.controls.length > controlNameOrIndex) return root.controls[controlNameOrIndex];\r\n return findControlTraverse(controlNameOrIndex, root);\r\n}\r\n\r\nfunction findControlTraverse(controlName, control) {\r\n if (!control) return null;\r\n if (control.name === controlName) return control;\r\n if (control.controls && control.controls.length > 0) {\r\n for (let i = 0; i < control.controls.length; i++) {\r\n const found = findControlTraverse(controlName, control.controls[i]);\r\n if (found) {\r\n return found;\r\n }\r\n }\r\n }\r\n return null;\r\n}\r\n\r\nexport function findControlById(id, root) {\r\n return findControlByIdTraverse(id, root);\r\n}\r\n\r\nfunction findControlByIdTraverse(id, control) {\r\n if (!control) return null;\r\n if (control.id === id) return control;\r\n if (control.controls && control.controls.length > 0) {\r\n for (let i = 0; i < control.controls.length; i++) {\r\n const found = findControlByIdTraverse(id, control.controls[i]);\r\n if (found) {\r\n return found;\r\n }\r\n }\r\n }\r\n return null;\r\n}\r\n\r\nexport function getValue(root) {\r\n //console.log(root)\r\n return getValueTraverse(root);\r\n}\r\n\r\nconst helperFns = {\r\n getValueTraverse: getValueTraverse,\r\n getFilesTraverse: getFilesTraverse\r\n}\r\n\r\nfunction getKeyValueTraverse(control) {\r\n let keyValue = {};\r\n keyValue[control.name] = getValueTraverse(control);\r\n return keyValue\r\n}\r\n\r\nfunction getValueTraverse(control) {\r\n //console.log(control);\r\n if (control.controlType === 'control') {\r\n if (control.customValueFn)\r\n return control.customValueFn(control, helperFns);\r\n\r\n return control.value;\r\n } else if (control.controlType === 'group') {\r\n if (control.customValueFn)\r\n return control.customValueFn(control, helperFns);\r\n\r\n let value = {};\r\n for (let i = 0; i < control.controls.length; i++) {\r\n value = { ...value, ...getKeyValueTraverse(control.controls[i]) };\r\n }\r\n return value;\r\n } else if (control.controlType === 'array') {\r\n if (control.customValueFn)\r\n return control.customValueFn(control, helperFns);\r\n\r\n const array = [];\r\n for (let i = 0; i < control.controls.length; i++) {\r\n array.push(getValueTraverse(control.controls[i]))\r\n }\r\n return array;\r\n }\r\n return null;\r\n}\r\n\r\nexport function getFiles(root) {\r\n //console.log(root)\r\n return getFilesTraverse(root);\r\n}\r\n\r\nfunction getFilesTraverse(control) {\r\n if (control.controlType === 'control') {\r\n return control.files ? [{ name: control.name, files: control.files }] : [];\r\n } else if (control.controlType === 'group') {\r\n let files = [];\r\n for (let i = 0; i < control.controls.length; i++) {\r\n files.push(...getFilesTraverse(control.controls[i]));\r\n }\r\n return files;\r\n } else if (control.controlType === 'array') {\r\n let files = [];\r\n for (let i = 0; i < control.controls.length; i++) {\r\n files.push(...getFilesTraverse(control.controls[i]));\r\n }\r\n return files;\r\n }\r\n return [];\r\n}","//import uuid from 'uuid/v4';\r\nimport shortid from 'shortid';\r\nimport * as formModelHelper from './formModelHelper';\r\n\r\n//#region helpers\r\nfunction findIndexById(id) {\r\n for (let i = 0; i < this.controls.length; i++) {\r\n if (this.controls[i].id === id) return i;\r\n }\r\n return -1;\r\n}\r\n//#endregion\r\n\r\nconst group = (controls) => {\r\n const controlArray = [];\r\n //console.log('group', controls, typeof controls);\r\n if (controls && typeof controls === 'object') {\r\n Object.keys(controls).forEach(key => {\r\n controlArray.push(abstractControl(key, controls[key]))\r\n })\r\n }\r\n\r\n const ctrl = {\r\n controlType: 'group',\r\n id: shortid(),\r\n controls: controlArray,\r\n find: (name) => controlArray.find((x) => x.name === name),\r\n customValueFn: null, // function\r\n disableValidators: false\r\n }\r\n ctrl.getValue = () => formModelHelper.getValue(ctrl)\r\n ctrl.controls.forEach(x => x.parent = ctrl)\r\n\r\n return ctrl\r\n}\r\n\r\nconst array = (controls) => {\r\n //console.log('array', controls);\r\n const ctrl = {\r\n controlType: 'array',\r\n id: shortid(),\r\n controls: controls,\r\n findIndexById: findIndexById\r\n }\r\n ctrl.getValue = () => formModelHelper.getValue(ctrl)\r\n ctrl.controls.forEach(x => x.parent = ctrl)\r\n\r\n return ctrl\r\n}\r\n\r\nconst abstractControl = (name, controlObject) => {\r\n //console.log('abstractControl', name, controlObject);\r\n if (!controlObject) return null;\r\n // array or group\r\n if (controlObject.controlType) {\r\n controlObject.name = name;\r\n return controlObject;\r\n } else {\r\n return control(name, controlObject)\r\n }\r\n}\r\n\r\nconst control = (name, [value, validators, controlOptions]) => {\r\n //const { label, type, options, style } = controlOptions || {};\r\n //console.log(value, validators, label, type, options)\r\n return {...{\r\n controlType: 'control',\r\n id: shortid(),\r\n name: name,\r\n value: value,\r\n validators: validators || [],\r\n touched: false,\r\n incomplete: false,\r\n findValidator: (type) => (validators || []).find((x) => x.type === type),\r\n // label: label,\r\n // type: type,\r\n // options: options,\r\n // style: style\r\n }, ...controlOptions};\r\n}\r\n\r\nexport default { group, array }","import utils from '../../utils';\r\n\r\nexport function hasRequiredValidator(control) {\r\n if (!control) return false;\r\n return !!control.findValidator('required')\r\n}\r\n\r\nexport function getNameForValidator(label, name) {\r\n return utils.text.toFieldName(label || name);\r\n}\r\n\r\nexport function getValidatorOptions(params) {\r\n const defaultOpt = { continueToValidate: false }\r\n return params ? { ...defaultOpt, ...params } : defaultOpt;\r\n}\r\n\r\nexport function createValidator(type, message, opt, validate) {\r\n const validator =\r\n {\r\n type: type,\r\n disabled: false,\r\n ...getValidatorOptions(opt),\r\n message: message,\r\n validate: validate\r\n }\r\n return validator;\r\n}","import { createValidator, getNameForValidator } from '../validatorHelper';\r\n\r\nexport function Required(message = null, opt = null) {\r\n return createValidator('required', message, opt, function(control, e, validateOpt) {\r\n if (validateOpt.triggeredByChange && control.incomplete) return null;\r\n return isEmpty(control.value) ? (message || (getNameForValidator(control.label, control.name) + ' is required.')) : null\r\n })\r\n}\r\n\r\nfunction isEmpty(val) {\r\n if (Array.isArray(val))\r\n return val.length === 0;\r\n return !val && val !== 0;\r\n}\r\n","import { createValidator, getNameForValidator } from '../validatorHelper';\r\n\r\nexport function Email(message = null, opt = null) {\r\n return createValidator('email', message, opt, function(control, e, validateOpt) {\r\n if (validateOpt.triggeredByChange && control.incomplete) return null;\r\n // only validate for blur keydown tab\r\n if (e && e.type === 'change') return null;\r\n return !isEmpty(control.value) && !isValidEmail(control.value) ? (message || (getNameForValidator(control.label, control.name) + ' - Invalid email.')) : null\r\n })\r\n}\r\n\r\n\r\nexport const isValidEmail = mail => {\r\n const regex = /^(([^<>()[\\]\\\\.,;:\\s@\"]+(\\.[^<>()[\\]\\\\.,;:\\s@\"]+)*)|(\".+\"))@((\\[[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}\\.[0-9]{1,3}])|(([a-zA-Z\\-0-9]+\\.)+[a-zA-Z]{2,}))$/;\r\n return regex.test(mail);\r\n}\r\n\r\nfunction isEmpty(val) {\r\n if (Array.isArray(val))\r\n return val.length === 0;\r\n return !val && val !== 0;\r\n}\r\n","import { createValidator, getNameForValidator } from '../validatorHelper';\r\nimport utils from '../../../utils';\r\n\r\nexport function ValidateDate(message = null, opt = null) {\r\n return createValidator('date', message, opt, function(control, e, validateOpt) {\r\n if (validateOpt.triggeredByChange && control.incomplete) return null;\r\n return !isDate(control.value) ? (message || (getNameForValidator(control.label, control.name) + ' is invalid.')) : null\r\n })\r\n}\r\n\r\nexport function PastDate(message = null, opt = null) {\r\n return createValidator('past-date', message, opt, function(control, e, validateOpt) {\r\n if (validateOpt.triggeredByChange && control.incomplete) return null;\r\n return !isPast(control.value) ? (message || (getNameForValidator(control.label, control.name) + ' is invalid.')) : null\r\n })\r\n}\r\n\r\nfunction isDate(val) {\r\n if (val) {\r\n const date = utils.date.toDate(val);\r\n return !!date;\r\n }\r\n return false\r\n}\r\n\r\nfunction isPast(val) {\r\n if (val) {\r\n const date = utils.date.toDate(val);\r\n //console.log(date, typeof date)\r\n if (date){\r\n const now = new Date();\r\n return date.getTime() < now.getTime();\r\n }\r\n }\r\n return false\r\n}\r\n","import { createValidator, getNameForValidator } from '../validatorHelper';\r\n\r\nexport function Length(message = null, opt = null) {\r\n return createValidator('email', message, opt, function(control, e, validateOpt, validator) {\r\n if (validateOpt.triggeredByChange && control.incomplete) return null;\r\n return !isValidLength(control.value, validator) ? (message || (getNameForValidator(control.label, control.name) + ' - Invalid length.')) : null\r\n })\r\n}\r\n\r\n\r\nexport const isValidLength = (text, validator) => {\r\n const length = (text || '').length;\r\n if (validator.min && length < validator.min) return false;\r\n if (validator.max && length > validator.max) return false;\r\n return true;\r\n}\r\n","import { Required } from './validators/required';\r\nimport { Email } from './validators/email';\r\nimport { ValidateDate, PastDate } from './validators/date';\r\nimport { Length } from './validators/length';\r\n\r\nconst validateControl = (control, e, validateOpt) => {\r\n const errors = [];\r\n const validators = control.validators || [];\r\n for (let i = 0; i < validators.length; i++) {\r\n const validator = validators[i];\r\n if (!validator.disabled) {\r\n const error = validator.validate && validator.validate(control, e, validateOpt, validator);\r\n if (error) {\r\n errors.push(error);\r\n //console.log(error, control, validator, e)\r\n\r\n if (!validator.continueToValidate) break;\r\n }\r\n }\r\n }\r\n control.errors = errors;\r\n return errors;\r\n}\r\n\r\nexport default {\r\n Required, Email, Date: ValidateDate, PastDate, Length, validateControl\r\n}","import utils from '../../utils';\r\nimport React from 'react';\r\nimport { hasRequiredValidator } from './validatorHelper';\r\n\r\nexport function getLabel(control, formOption) {\r\n //console.log(label, label == null, label === null, name, label || name)\r\n const { label, name } = control\r\n const requiredMark = hasRequiredValidator(control) && (formOption.requiredMark || '*')\r\n if (label === null) return \"\";\r\n return <>\r\n \r\n {requiredMark && {requiredMark}}\r\n ;\r\n}\r\n\r\nexport function getLabelAsString(control, formOption) {\r\n //console.log(label, label == null, label === null, name, label || name)\r\n const { label, name } = control\r\n const requiredMark = hasRequiredValidator(control) && (formOption.requiredMark || '*')\r\n if (label === null) return \"\";\r\n \r\n return (label || utils.text.toFieldName(name)) + (requiredMark ? requiredMark : '');\r\n}","import React from 'react';\r\n\r\nconst ValidationAlert = ({ errors }) => {\r\n if (!errors || errors.length === 0) return null;\r\n return ') }}>\r\n}\r\n\r\nexport default ValidationAlert;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel, getLabelAsString } from '../formRenderHelper';\r\n\r\nfunction TextInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(control, formOption)\r\n const placeHolder = usePlaceholder ? getLabelAsString(control, formOption) : null;\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n if (type === 'date' && value) {\r\n valueStr = utils.date.formatYYYYMMDD(value);\r\n }\r\n\r\n let prependText = null;\r\n if (style && style.prependText) {\r\n prependText = style.prependText\r\n }\r\n //console.log(name, !!(style && style.autoFocus))\r\n //const autoFocus = !!(style && style.autoFocus)\r\n\r\n function keyDown(e) {\r\n //console.log(e.key)\r\n if (e.key === \"Enter\" || e.key === 'Tab') {\r\n handleChange(e, control)\r\n }\r\n }\r\n function changed(e) {\r\n //console.log('changed', name, e.target.value)\r\n handleChange(e, control)\r\n }\r\n function blur(e) {\r\n //console.log('blur', name, e.target.value)\r\n handleChange(e, control)\r\n }\r\n\r\n // function focus(e) {\r\n // console.log('focus', name, e.target.value)\r\n // }\r\n\r\n return (\r\n {titlePanel}
}\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default TextInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction RadioListInput({ control, handleChange, formOption }) {\r\n const { name, label, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n return (\r\n \r\n {prependText &&
\r\n {helpText && }\r\n \r\n
\r\n }\r\n\r\n handleChange(e, control)} \r\n // onBlur={(e) => handleChange(e, control, true)}\r\n onChange={changed}\r\n onKeyDown={keyDown}\r\n onBlur={blur}\r\n autoComplete=\"new-password\"\r\n //onFocus={focus}\r\n //autoFocus={autoFocus}\r\n placeholder={placeHolder}\r\n className={\"form-control\" + (errors && errors.length > 0 ? ' is-invalid' : '')} {...attrs} />\r\n {prependText}
\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nfunction checked(value, optionValue) {\r\n if (optionValue === null || typeof optionValue === 'undefined') return false;\r\n return value === optionValue;\r\n}\r\n\r\nexport default RadioListInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nconst CheckboxListInput = ({ control, handleChange, formOption }) => {\r\n const { name, label, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n const values = value ? [...value] : [];\r\n return (\r\n \r\n {options && options.map((option, index) =>\r\n
\r\n {helpText && }\r\n \r\n handleChange(e, control)}\r\n value={option.value} id={fieldId + '_' + index} {...attrs} />\r\n \r\n
)}\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nfunction checked(values, value) {\r\n if (value === null || typeof value === 'undefined') return false;\r\n return values.includes(value);\r\n}\r\n\r\nexport default CheckboxListInput;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction DateSeparateInput({ control, handleChange, formOption }) {\r\n //const { name, label, value, errors, style } = control;\r\n const { name, label, errors, style, helpText, attrs } = control;\r\n const thisYear = (new Date()).getFullYear();\r\n //console.log(name, value)\r\n const [year, setYear] = React.useState('')\r\n const [month, setMonth] = React.useState('')\r\n const [day, setDay] = React.useState('')\r\n\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(label, name + '|'+ fieldLabel)\r\n //const placeHolder = usePlaceholder ? fieldLabel : null;\r\n // let valueStr = value === 0 ? 0 : (value || \"\");\r\n // if (type === 'date' && value) {\r\n // valueStr = utils.date.formatYYYYMMDD(value);\r\n // }\r\n\r\n function handleChangeDay(e) {\r\n setDay(e.target.value)\r\n handleChangeInner(year, month, e.target.value)\r\n }\r\n\r\n function handleChangeMonth(e) {\r\n setMonth(e.target.value)\r\n handleChangeInner(year, e.target.value, day)\r\n }\r\n\r\n function handleChangeYear(e) {\r\n setYear(e.target.value)\r\n handleChangeInner(e.target.value, month, day)\r\n }\r\n\r\n function handleChangeInner(yyyy, mm, dd) {\r\n control.incomplete = !(yyyy !== '' && mm !== '' && dd !== '')\r\n const newVal = yyyy + '-' + mm + '-' + dd;\r\n //console.log(newVal)\r\n //mimic event\r\n handleChange({\r\n persist: () => { },\r\n target: { name: name, value: newVal, checked: false }\r\n }, control)\r\n }\r\n\r\n //const monthsFull = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']\r\n const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\r\n const selectStyle = { width: 'auto', display: 'inline-block', marginRight: '0.5em' };\r\n\r\n const fromYear = style && style.recentYear ? thisYear : thisYear - 10;\r\n const recentYear = style && style.recentYear ? style.recentYear : 100;\r\n return (\r\n \r\n
\r\n {helpText && }\r\n \r\n {options && options.map((option, index) =>\r\n
\r\n \r\n handleChange(e, control)}\r\n value={option.value} id={fieldId + '_' + index} {...attrs}/>\r\n \r\n
)}\r\n\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default DateSeparateInput;","import * as React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction FileInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const fieldId = utils.random.shortId();\r\n const { usePlaceholder = false } = formOption;\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(label, control)\r\n const placeHolder = usePlaceholder ? fieldLabel : null;\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n if (type === 'date' && value) {\r\n valueStr = utils.date.formatYYYYMMDD(value);\r\n }\r\n return (\r\n \r\n \r\n \r\n \r\n
\r\n {helpText && }\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n\r\n )\r\n}\r\n\r\nexport default FileInput;","import TextInput from './TextInput';\r\nimport RadioListInput from './RadioListInput';\r\nimport TextareaInput from './TextareaInput';\r\nimport CheckboxInput from './CheckboxInput';\r\nimport CheckboxListInput from './CheckboxListInput';\r\nimport SelectInput from './SelectInput';\r\nimport HiddenInput from './HiddenInput';\r\n//import HtmlInput from './HtmlInput';\r\nimport DateSeparateInput from './DateSeparateInput';\r\nimport FileInput from './FileInput';\r\n\r\nconst Components = { TextInput, RadioListInput, TextareaInput, CheckboxInput, CheckboxListInput, SelectInput, HiddenInput, DateSeparateInput, FileInput };\r\n\r\nconst capitalize = expression => expression.charAt(0).toUpperCase() + expression.slice(1);\r\n\r\nexport function getControl(control, formOption) {\r\n let Component = null;\r\n if (control.type === 'number' || control.type === 'email' || control.type === 'date' || control.type === 'password' || control.type === 'tel')\r\n Component = TextInput;\r\n else if (control.type === \"dob\")\r\n Component = DateSeparateInput;\r\n else\r\n Component = Components[capitalize(control.type || '') + 'Input'];\r\n\r\n return Component;\r\n}\r\n\r\n","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel, getLabelAsString } from '../formRenderHelper';\r\n\r\nfunction TextareaInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n //const { template = 'bootstrap', usePlaceholder = false } = formOption;\r\n const { usePlaceholder = false } = formOption;\r\n const placeHolder = usePlaceholder ? getLabelAsString(control, formOption) : null;\r\n const valueStr = value === 0 ? 0 : (value || \"\");\r\n\r\n\r\n const textAreaRef = React.useRef(null);\r\n const [textAreaHeight, setTextAreaHeight] = React.useState(\"auto\");\r\n const [parentHeight, setParentHeight] = React.useState(\"auto\");\r\n\r\n React.useEffect(() => {\r\n if (textAreaRef.current) {\r\n const h = textAreaRef.current.scrollHeight > 60? textAreaRef.current.scrollHeight : 60\r\n setParentHeight(`${h}px`);\r\n setTextAreaHeight(`${h}px`);\r\n }\r\n }, [valueStr]);\r\n\r\n function onChangeInternal(e) {\r\n setTextAreaHeight(\"auto\");\r\n if (textAreaRef.current) {\r\n const h = textAreaRef.current.scrollHeight > 60? textAreaRef.current.scrollHeight : 60\r\n setParentHeight(`${h}px`);\r\n }\r\n handleChange(e, control);\r\n }\r\n\r\n return (\r\n \r\n handleChange(e, control)} onBlur={(e) => handleChange(e, control)}\r\n placeholder={placeHolder}\r\n className={\"form-control-file\" + (errors && errors.length > 0 ? ' is-invalid' : '')} {...attrs}/>\r\n
\r\n {helpText && }\r\n \r\n {!usePlaceholder && fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default TextareaInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nconst CheckboxInput = ({ control, handleChange, formOption }) => {\r\n const { name, label, type, value, errors, style, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n return (\r\n \r\n \r\n
\r\n {helpText && }\r\n \r\n handleChange(e, control)} \r\n className={\"form-check-input\"} {...attrs}/>\r\n \r\n {helpText && }\r\n
\r\n )\r\n}\r\n\r\nexport default CheckboxInput;","import React from 'react';\r\nimport ValidationAlert from '../components/ValidationAlert';\r\nimport utils from '../../../utils';\r\nimport { getLabel } from '../formRenderHelper';\r\n\r\nfunction SelectInput({ control, handleChange, formOption }) {\r\n const { name, label, type, value, errors, style, options, helpText, attrs } = control;\r\n const fieldId = utils.random.shortId();\r\n const fieldLabel = getLabel(control, formOption);\r\n //console.log(value, typeof value)\r\n return (\r\n \r\n {fieldLabel && }\r\n
\r\n )\r\n}\r\n\r\nexport default SelectInput;\r\n\r\n","import * as React from 'react';\r\nimport utils from '../../../utils';\r\n\r\nfunction TextInput({ control, handleChange, formOption }) {\r\n const { name, value } = control;\r\n const fieldId = utils.random.shortId();\r\n let valueStr = value === 0 ? 0 : (value || \"\");\r\n\r\n\r\n return (\r\n \r\n )\r\n}\r\n\r\nexport default TextInput;","import React from 'react';\r\nimport * as formModelHelper from './formModelHelper';\r\nimport { getControl } from './controls';\r\nimport { getSiteControl } from '../../form';\r\n\r\nexport function renderControlDirect(control, handleChange, formOption) {\r\n if (control === null) return null;\r\n let Component = getSiteControl(control, formOption) || getControl(control, formOption);\r\n if (!Component) return control.value;\r\n return \r\n \r\n
\r\n {helpText && }\r\n \n\n
\n )\n}","// https://www.pluralsight.com/guides/re-render-react-component-on-window-resize\r\nexport function debounce(fn, ms) {\r\n let timer\r\n return _ => {\r\n clearTimeout(timer)\r\n timer = setTimeout(_ => {\r\n timer = null\r\n fn.apply(this, arguments)\r\n }, ms)\r\n };\r\n}","import utils from '../../utils';\r\n\r\nexport function loadApi(onApiReady) {\r\n if (typeof window !== `undefined` && !window.YT) { // If not, load the script asynchronously\r\n const tag = document.createElement('script');\r\n tag.src = 'https://www.youtube.com/iframe_api';\r\n\r\n // onYouTubeIframeAPIReady will load the video after the script is loaded\r\n window.onYouTubeIframeAPIReady = () => onApiReady(true);\r\n\r\n const firstScriptTag = document.getElementsByTagName('script')[0];\r\n firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n } else { // If script is already there, load the video directly\r\n onApiReady(false);\r\n }\r\n}\r\n\r\n// export function player(playerId, videoId, playerVars = {}, events = {}) {\r\n// //let player = null;\r\n// const defaultPlayerVars = {\r\n// 'autoplay': 1,\r\n// 'controls': 0,\r\n// 'loop': 1,\r\n// 'showinfo': 0,\r\n// 'rel': 0,\r\n// 'modestbranding': 1,\r\n// 'origin': window.location.origin,\r\n// 'allowfullscreen': true,\r\n// 'wmode': 'transparent'\r\n// }\r\n// const defaultEvents = {\r\n// 'onStateChange': (e) => { },\r\n// 'onReady': (e) => { console.log('onReady'); player.mute() },\r\n// 'onError': (e) => { console.log(e) }\r\n// }\r\n\r\n// const player = new window.YT.Player(playerId, {\r\n// videoId: videoId,\r\n// playerVars: Object.assign({}, defaultPlayerVars, playerVars),\r\n// events: Object.assign({}, defaultEvents, events),\r\n// });\r\n// return player;\r\n// }\r\n\r\nexport function thumbnailMax(videoId){\r\n return `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`\r\n}\r\n\r\n// onPlayerStateChange(event){\r\n// switch (event.data){\r\n// case window['YT'].PlayerState.PLAYING:\r\n// //console.log('Playing');\r\n// //this.player.mute();\r\n// break;\r\n// case window['YT'].PlayerState.PAUSED:\r\n// //console.log('Pafdsu');\r\n// break;\r\n// case window['YT'].PlayerState.ENDED:\r\n// //console.log('ended ');\r\n// //this.player.playVideo();\r\n// this.player.stopVideo();\r\n// break;\r\n// }\r\n// }\r\n\r\n// toggleBannerYoutueInCMS(toggleItem:string){ \r\n// if(toggleItem == 'youtube'){\r\n// //location.reload();\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.playVideo();\r\n// this.init();\r\n// }\r\n// else{\r\n// this.toggleBannerOrYoutube = toggleItem;\r\n// this.player.stopVideo();\r\n// }\r\n// }\r\n\r\n\r\nexport function getYoutubeCode(src) {\r\n // if (src.indexOf('http') >= 0) {\r\n // if (src.indexOf('v=') >= 0) {\r\n // return src.split('v=')[1];\r\n // }\r\n // }\r\n // return src;\r\n return utils.url.getYoutubeId(src);\r\n}","import React, { useState, useRef } from 'react';\r\nimport utils from '../../utils';\r\nimport { debounce } from '../utils-core/debounce';\r\nimport * as yt from './iframeApi';\r\nimport { FiVolumeX, FiVolume2 } from 'react-icons/fi';\r\nimport { FaRegPlayCircle } from 'react-icons/fa';\r\nimport ModalVideo from 'react-modal-video'\r\n\r\n\r\nexport function YoutubeBannerMobilePopup(props) {\r\n const youtubeBannerRef = React.useRef(null);\r\n\r\n const [playerStatus, setPlayerStatus] = useState('loading');\r\n const [playerSize, setPlayerSize] = useState(null);\r\n const [ytPlayer, setYtPlayer] = useState(null);\r\n const [muted, setMuted] = useState(true);\r\n const countPlayedRef = useRef(0);\r\n const [popupOpened, setPopupOpened] = useState(false);\r\n const { heightSet, videoLinkOrId, playerId } = props.video;\r\n const videoId = yt.getYoutubeCode(videoLinkOrId);\r\n //const posterImageUrl = yt.thumbnailMax(videoId);\r\n const posterImageUrl = (props.posterImageUrl && props.posterImageUrl !== '') ? props.posterImageUrl : yt.thumbnailMax(videoId);\r\n const mobileImageUrl = props.mobileImageUrl;\r\n //let countPlayed = 0;\r\n const canPlayVideo = () => (typeof window !== `undefined` && typeof props.canPlayVideo === `undefined`)? window.innerWidth >= 1200 : !!(typeof props.canPlayVideo === 'function'? props.canPlayVideo() : props.canPlayVideo);\r\n\r\n const playerVars = {\r\n 'enablejsapi': 1,\r\n //'autoplay': 1,\r\n 'controls': 0,\r\n 'loop': 1,\r\n 'showinfo': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1,\r\n //'origin': typeof window !== `undefined` && window.location.origin,\r\n 'allowfullscreen': true,\r\n 'wmode': 'transparent'\r\n }\r\n\r\n //console.log('videoId: ' + videoId)\r\n //const canPlayVideo = () => window.innerWidth >= 1200\r\n React.useEffect(() => {\r\n const resized = debounce(() => {\r\n loadVideo();\r\n });\r\n loadVideo();\r\n if (typeof window !== `undefined`)\r\n window.addEventListener('resize', resized)\r\n return () => {\r\n if (typeof window !== `undefined`)\r\n window.removeEventListener('resize', resized)\r\n }\r\n // eslint-disable-next-line\r\n }, [])\r\n\r\n \r\n function loadVideo() {\r\n if (youtubeBannerRef.current)\r\n setPlayerSize(getSize(youtubeBannerRef.current));\r\n if (canPlayVideo()) {\r\n yt.loadApi((loadJs) => {\r\n loadJs ? init() : setTimeout(init, 100)\r\n })\r\n }\r\n }\r\n\r\n function init() {\r\n let player = null;\r\n if (typeof window !== `undefined`) {\r\n player = new window.YT.Player(playerId, {\r\n events: {\r\n 'onStateChange': (e) => {\r\n switch (e.data) {\r\n // case window.YT.PlayerState.PLAYING:\r\n // break;\r\n // case window.YT.PlayerState.PAUSED:\r\n // break;\r\n case window.YT.PlayerState.ENDED:\r\n const countPlayed = countPlayedRef.current;\r\n if (countPlayed < 3 - 1) {\r\n //console.log('ended', countPlayed + 1);\r\n countPlayedRef.current = countPlayed + 1;\r\n if (player && player.playVideo)\r\n player.playVideo();\r\n } else {\r\n setPlayerStatus('finished');\r\n }\r\n break;\r\n default:\r\n }\r\n },\r\n 'onReady': (e) => {\r\n //console.log('onReady');\r\n if (player && player.mute && player.playVideo) {\r\n player.mute();\r\n player.playVideo();\r\n }\r\n setTimeout(() => setPlayerStatus('loaded'), 1000)\r\n },\r\n 'onError': (e) => { console.log(e) }\r\n }\r\n });\r\n\r\n setYtPlayer(player);\r\n }\r\n }\r\n\r\n function soundToggle(e) {\r\n e.preventDefault();\r\n e.stopPropagation();\r\n if (ytPlayer){\r\n if (muted) {\r\n setMuted(false);\r\n setTimeout(() => {\r\n if (ytPlayer && ytPlayer.pauseVideo && ytPlayer.unMute && ytPlayer.playVideo) {\r\n ytPlayer.pauseVideo();\r\n ytPlayer.unMute();\r\n ytPlayer.playVideo();\r\n }\r\n }, 100)\r\n } else {\r\n setMuted(true);\r\n setTimeout(() => {\r\n if (ytPlayer && ytPlayer.pauseVideo && ytPlayer.unMute && ytPlayer.playVideo) {\r\n ytPlayer.pauseVideo();\r\n ytPlayer.mute();\r\n ytPlayer.playVideo();\r\n }\r\n }, 100)\r\n }\r\n }\r\n\r\n //https://developers.google.com/web/updates/2017/09/autoplay-policy-changes\r\n }\r\n\r\n function playVideo() {\r\n setPopupOpened(true)\r\n }\r\n\r\n const canPlay = canPlayVideo();\r\n const imageUrl = !canPlay && mobileImageUrl ? mobileImageUrl : posterImageUrl;\r\n return (\r\n \n
\n\n \r\n \r\n \r\n {canPlay && playerSize && }\r\n {canPlay && playerStatus === 'loaded' &&
\r\n \r\n {muted?
}\r\n\r\n {!canPlay && !mobileImageUrl && \r\n
}\r\n \n {/* {canPlayVideo() ?
\n );\n\n // return (\n // \n // );\n}","import React from 'react';\n// import { Item } from 'cms/items/item';\n// import { SiteLink } from 'shared/link/siteLink';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { YoutubeEmbed } from 'components';\n\nexport function YoutubeEmbedded(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n // const heightSet = cmsUtils.payload(item, 'HeightSet') || 'standard';\n const videoCode = cmsUtils.payload(item, 'YoutubeCode');\n\n const cssClass = utils.classNames('cms_item', 'youtubeEmbedded', item.cssClass || item.anchorName || '');\n\n //console.log(window.innerWidth, canPlayVideo())\n\n return (\n \n
\n );\n}\n","import React from 'react';\nimport env from 'env';\nimport { SiteLink} from 'components';\nimport { usePost } from 'components';\nimport { ErrorPopup, Loading } from 'components';\nimport { useRouter } from 'components';\nimport { AtdwSearchResultWithSite } from '../atdw/index';\n\nexport function SearchResult(props) {\n \n const { query } = useRouter();\n const post = usePost();\n const keyword = query.q;\n //console.log(keyword);\n\n React.useEffect(() => {\n post.send(env.apiBase + '/api/search/search', { keyword: keyword });\n // eslint-disable-next-line\n }, [keyword]);\n\n if (post.loading()) {\n return \n // No result found.\n //
\n // )\n return (\n <>\n {pages.length > 0 ? \n
: (!atdw.length > 0 &&\n Pages
\n\n No result found.\n
) \n }\n {\n atdw.length > 0 ?\n \n
: (!pages.length > 0 &&\n ATDW
\n\n No ATDW result found.\n
)\n }\n \n );\n}\n\n// function ProductList({products}) {\n// return (\n// \n// {products.map((product, index) =>\n//
\n// );\n// }\n\nfunction PageList({pages}) {\n return (\n \n {pages.map((page, index) =>\n
\n );\n}","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { SearchResult } from 'site/searchResult/searchResult';\nimport { InstagramFeed } from 'components';\nimport { AppVersion } from 'components';\n\nexport function Code(props) {\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, cmsOption);\n\n const code = cmsUtils.payload(item, 'Code');\n const codeType = cmsUtils.payload(item, 'CodeType');\n let controls = null;\n if (codeType === 'Json') {\n const codeJson = JSON.parse(code);\n\n if (codeJson.control === 'search-results'){\n controls = \n
\n )}\n \n {page.pageTitle} \n \n
\n \n
\n )\n else if (codeType === 'Text')\n return (\n \n )\n else\n return (\n \nCode Type: {codeType}\n{code} \n {controls}
\n )\n}","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { SiteLink } from 'components';\n\nexport function BlogPosts(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const posts = getPages(cmsUtils.payload(item, 'BlogPosts'));\n const numOfTileLines = parseInt(cmsUtils.payload(item, 'NumOfTileLines', '2'));\n //console.log(numOfPost, parseInt(numOfPost));\n //console.log(posts);\n const bp = utils.ui.getCurrentBreakpoint();\n const tilesPerLine = {xs:1, sm:1, md:2, lg:2, xl:3, xxl:4}\n const numOfPost = numOfTileLines * (tilesPerLine[bp] || 3);\n const step = numOfPost;\n console.log(bp, numOfTileLines, tilesPerLine, numOfPost)\n\n const [tilesToShow, setTilesToShow] = React.useState(numOfPost);\n\n const displayingPosts = posts.length > tilesToShow ? posts.slice(0, tilesToShow) : posts;\n const showMore = posts.length > displayingPosts.length;\n\n const pageTileElts = displayingPosts.map((page, index) =>\n \n {pageTileElts}\n
\n {showMore && (\n { setTilesToShow(tilesToShow + step) }}>LOAD MORE
)}\n \n );\n}\n\nfunction getPages(pagesSerialized) {\n if (pagesSerialized) {\n return JSON.parse(pagesSerialized);\n }\n return [];\n}\n\nfunction Tile(props) {\n const page = props.page;\n const imageUrl = utils.site.resourcePath(page.imageUrl);\n const disableLink = props.disableLink;\n return (\n \n \n \n \n
\n )\n}","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\n\nexport function BlogPostTitle(props) {\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item);\n\n const title = cmsUtils.payload(item, 'PageTitle');\n const postDate = cmsUtils.payload(item, 'PostDate');\n\n const cssClass = utils.classNames('blogView__titleContainer', 'cms_item', item.cssClass || item.anchorName || '');\n\n return (\n \n
\n \n
\n \n {page.pageTitle}\n
\n \n {page.tileDesc || page.description}\n
\n READ MORE
\n \n
\n );\n}\n","import React from 'react';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport { Item } from 'cms/items/item';\nimport utils from 'utils';\n\nexport function MultiColumnPanel(props){\n const item = props.item;\n const mobileReverse = cmsUtils.payload(item, 'MobileReverse', 'no');\n //const subItems = item.items || [];\n const subItems = (mobileReverse === \"yes\" && window.innerWidth <= 550) ? item.items.reverse() || [] : item.items || [];\n const cmsOption = props.cmsOption || {};\n const columnWidths = cmsUtils.payload(item, 'ColumnWidths').split(\",\");\n const mobileColumnWidths = cmsUtils.payload(item, 'MobileColumnWidths').split(\",\");\n const countItem = {countD : 0, countM : 0, col : \"\"};\n\n const bgColor = cmsUtils.payload(item, 'BgColor');\n //const textColorTheme = cmsUtils.payload(item, 'TextColorTheme');\n const imageUrl = cmsUtils.payload(item, 'ImageUrl');\n const backgroundTile = cmsUtils.payload(item, 'BackgroundTile');\n const bgTheme = cmsUtils.payload(item, 'TextColorTheme') || 'white';\n \n let bgUrl = null;\n if (imageUrl)\n bgUrl = utils.site.resourcePath(imageUrl);\n else if (backgroundTile)\n bgUrl = utils.site.resourcePath(`/dist/transparent-textures/textures/${backgroundTile}`);\n\n const cssClass = utils.classNames('cms_item', 'contentPanel', 'multiColumnPanel', 'contentPanel--' + bgTheme, item.cssClass || item.anchorName || ''); \n\n function setupClass(index){ \n countItem.col = \"\";\n if(columnWidths.length === countItem.countD){\n countItem.countD = 0;\n }\n\n if(mobileColumnWidths.length === countItem.countM){\n countItem.countM = 0;\n }\n \n countItem.col = \"col-sm-\" + columnWidths[countItem.countD] + \" col-\" + mobileColumnWidths[countItem.countM];\n countItem.countD ++;\n countItem.countM ++;\n };\n\n const subItemsElts = subItems.map((subItem, index) => {\n setupClass();\n return \n {postDate}\n
\n \n {title}\n
\n\n
\n } \n );\n return (\n \n
\n \n {subItemsElts}\n
\n handleClick(e)}>\n
\n )\n\n return (\n \n {e.preventDefault(); e.stopPropagation();}}>{buttonTitle}
\n \n \n To edit the button title, please double click or open item editor
\n handleClick(e)}>\n
\n )\n}\n\n\nfunction restructureButton(el) {\n if (!el.querySelector('span')) {\n const span = document.createElement('span');\n span.innerHTML = el.innerHTML;\n el.innerHTML = '';\n el.appendChild(span);\n }\n}","//import { css, keyframes } from '@emotion/core'\n//import { variables, mq } from 'cssInJs'\n\nimport { css } from '@emotion/core'\n//import { mq } from 'cssInJs'\n\n\nexport default {\n \n photoGallery : css({\n maxWidth : '960px',\n margin: 'auto'\n }),\n \n photos : css({\n marginLeft: '-5px',\n marginRight: '-5px',\n '& > div' : {\n display: 'flex',\n flexWrap: 'wrap'\n }\n // display: 'flex',\n // flexWrap: 'wrap',\n // marginLeft: '-5px',\n // marginRight: '-5px',\n // '& img' : {\n // flex: '1 1 150px',\n // margin: '5px',\n // paddingTop : '60%',\n // width : '150px',\n // border: '1px solid red'\n // }\n }),\n photoContainer : css({\n color : 'red',\n flex: '1 1 150px',\n margin : '5px',\n height : '150px',\n display: 'flex',\n overflow: 'hidden'\n }),\n photo : css({\n margin : 'auto',\n transform: 'scale(3)'\n }),\n photoEmpty : css({\n flex: '1 1 150px',\n height : '0px'\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core'\nimport style from './style';\n\nimport SimpleReactLightbox, {SRLWrapper} from 'simple-react-lightbox'\nimport utils from 'utils';\nimport cmsUtils from 'cms/utils/cmsUtils';\n\nconst options = {\n enablePanzoom : false,\n showCaption : false\n};\n\nexport function PhotoGallery(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'photoGallery', item.cssClass || item.anchorName || '');\n const _images = cmsUtils.payload(item, 'ImageUrl') ? cmsUtils.payload(item, 'ImageUrl').split(\"|\") : [];\n \n const imageElts = _images.map((im, index) =>\n \n {buttonTitle}
\n \n \n \n 
\n
\n );\n \n return(\n \n \n \n
\n ); \n}","import React from 'react';\nimport { BannerPanel } from 'cms/items/bannerPanel/view';\nimport { BannerItem } from 'cms/items/bannerItem/view';\nimport { Panel } from 'cms/items/panel/view';\nimport { Html } from 'cms/items/html/view';\nimport { TestimonialPanel } from 'cms/items/testimonialPanel/view';\nimport { TestimonialItem } from 'cms/items/testimonialItem/view';\nimport { ImagePanel } from 'cms/items/imagePanel/view';\n//import { PageTiles } from 'cms/items/pageTiles/view';\n//import { PageTileAdore } from 'components/pageTileAdore/view';\nimport { PageTileJ5 } from 'components/pageTileJ5/view';\nimport { PageTilesBsyc } from '../../components/tiles/bsyc/view';\nimport { SingleBanner } from 'cms/items/singleBanner/view';\nimport { ContactForm } from 'cms/items/contactForm/view';\n//import { YoutubeBannerPanel } from 'cms/items/youtubeBannerPanel/view';\nimport { YoutubeBannerPanel2 } from 'cms/items/youtubeBannerPanel2/view';\nimport { YoutubeEmbedded } from 'cms/items/youtubeEmbedded/view';\nimport { Code } from 'cms/items/code/view';\nimport { BlogPosts } from 'cms/items/blogPosts/view';\nimport { BlogPostTitle } from 'cms/items/blogPostTitle/view';\nimport { MultiColumnPanel } from 'cms/items/multiColumnPanel/view';\nimport { ExpandableHtml } from 'cms/items/expandableHtml/view';\nimport { AtdwSearch, AtdwMap } from 'site/atdw/index';\nimport { PhotoGallery } from 'components/photoGallery/view';\nimport cmsUtils from '../utils/cmsUtils'\n\nexport function Item(props) {\n const item = props.item;\n //const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n //console.log('item', item, subItems, cmsOption);\n\n let itemElt = (<>);\n if (item.itemTypeCode === 'Panel') {\n itemElt = ( \n \n {/* \n
\n \n ![\"Caption\"](\"https://dummyimage.com/2560x800/333333/fff\")
\n
\n \n \n
*/}\n { imageElts }\n \n \n \n \n \n \n \n {item.itemTypeCode}
);\n }\n // const subItemsElts = subItems.map((subItem, index) =>\n // \n // \n // {_images}\n // ![\"image2\"/](\"/assets/logos/logo2.png\")
\n // \n //
));\n // va.push((\n // \n // \n // {_images}\n // \n // \n //
));\n // va.push((\n // \n \n {_images}\n \n \n
);\n\n if(multimedia[i].attributeIdMultimediaContent === 'IMAGE' &&\n multimedia[i].attributeIdSizeOrientation === '4X3' &&\n parseInt(multimedia[i].width) >= 800){\n va.push((\n \n \n {_images}\n \n \n
));\n if(multimedia[i].attributeIdMultimediaContent === 'IMAGE' &&\n multimedia[i].attributeIdSizeOrientation === '4X3' &&\n parseInt(multimedia[i].width) >= 800){\n va.push((\n \n {\n _com.phone === '' ? null : (\n \n
\n PHONE
\n \n )\n }\n\n {\n props.onCheckOpen();\n document.getElementById('atdwPageLocation').scrollIntoView({behavior:'smooth', block:'center'});\n }}>\n
\n\n {\n _com.website === '' ? null : (\n \n LOCATION
\n WEBSITE
\n \n )\n }\n\n {\n _com.book === '' ? null : (\n \n BOOKINGS
\n \n )\n }\n \n {item.attributeIdCommunicationDescription + ' : ' + item.communicationDetail}\n
\n )\n })\n }\n\n {\n dates.map((item, index) => {\n var pDate = new Date(item.frequencyStartDate);\n if( pDate >= todayDate){\n return(\n
\n \n { \n ((''+ pDate.getDate()).length < 2 ? '0' + pDate.getDate() : ''+pDate.getDate()) + '-' +\n ((''+(pDate.getMonth() + 1)).length < 2 ? '0' + (pDate.getMonth() + 1) : ''+(pDate.getMonth() + 1)) + '-' +\n pDate.getFullYear() + ' : ' +\n item.frequencyStartTime\n }\n
\n )\n }\n return null;\n })\n }\n \n {attributes[i].attributeIdDescription}\n
\n )\n }\n }\n\n return( \n \n {entity_fac}\n
\n {\n props.onCheckOpen();\n var map, marker;\n map = new window.google.maps.Map(ele.current, {\n center: {lat: geoCode.lat, lng: geoCode.lng},\n zoom: 15\n });\n console.log(marker);\n marker = new window.google.maps.Marker({\n position: {lat: geoCode.lat, lng: geoCode.lng},\n map: map,\n title:productName\n });\n }}>
\n \n \n
\n {text}
)\n )\n }\n const [checkOpen, setCheckOpen] = useState(false);\n\n const onCheckOpen = useCallback(()=>{\n setCheckOpen(!checkOpen);\n }, [checkOpen]);\n\n return( \n\n \n \n
: null\n }\n \n
\n \n
\n
\n { atdwProduct.product.cityName}
\n{ atdwProduct.product.productName}
\n\n
\n
\n \n \n \n \n
\n \n
\n \n // \n // {_images}\n // ![](\"/assets/logos/logo.png\")
\n // \n //
\n // ) \n // }\n // }\n // });","import React from 'react';\nconst AtdwContext = React.createContext(null);\nexport { AtdwContext };","import { css } from '@emotion/core'\n//import { mq } from 'cssInJs'\n\nexport default{\n atdwMap : css({\n maxWidth:'960px',\n margin: 'auto',\n '.info__window' : {\n maxWidth: '300px'\n },\n '.info__title' : {\n fontWeight: '700',\n fontSize: '15px'\n },\n '.info__town' : {\n fontWeight: '300',\n fontSize: '13px',\n margin:'0.2rem 0px'\n }\n }),\n filters : css({\n display:'flex',\n flexDirection:'row',\n flexWrap:'wrap',\n justifyContent:'center',\n marginTop: '0.5rem',\n marginBottom:'0.5rem',\n '.btn' : {\n lineHeight: '1',\n margin:'4px',\n fontSize:'0.6rem'\n },\n '.btn.selected' : {\n backgroundColor : '#89732a',\n borderColor: '#89732a'\n }\n }),\n popupBackground : css({\n backgroundColor:'rgba(0,0,0,0.3)',\n position: 'fixed',\n top:'0px',\n left:'0px',\n width:'100%',\n height: '100%',\n zIndex:'9999'\n }),\n container : css({\n position: 'fixed',\n width: '95%',\n left: '50%',\n top: '50%',\n transform: 'translate(-50%, -50%)',\n marginTop: '-1rem',\n zIndex:'9999',\n backgroundColor:'white',\n padding: '1rem',\n maxWidth:'450px'\n }),\n popupTitle : css({\n fontWeight: '700',\n fontSize: '1rem'\n }),\n popupTown : css({\n fontWeight: '300',\n fontSize: '0.8rem',\n margin:'0.2rem 0px'\n }),\n popupDesc : css({\n fontSize:'0.8rem'\n }),\n button : css({\n fontWeight: '700'\n })\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\nimport utils from '../../../utils';\nimport style from './style';\nimport { useState, useEffect, useRef, useCallback, Fragment } from 'react';\nimport env from '../../../env';\n//import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\nimport { useHistory } from \"react-router-dom\";\nimport { createPortal } from \"react-dom\";\n\nfunction Portal({children}){\n const [el] = useState(document.createElement('div'));\n useEffect(() => {\n let mount = document.getElementById(\"portal-root\");\n mount.appendChild(el);\n return () => mount.removeChild(el);\n }, [el]);\n return createPortal(children, el);\n}\n\nexport function AtdwMap(props){\n const item = props.item;\n const cmsOption = props.cmsOption || {};\n const cssClass = utils.classNames('cms_item', 'atdwMap', item.cssClass || item.anchorName || '');\n const [mapSate, setMapSate ] = useState({\n currentFilterType :'ACCOMM',\n trigger:0,\n fetchAble:true,\n data : []\n });\n\n const el = useRef(null);\n const history = useHistory();\n const [openPopup, setOpenPopup] = useState(false);\n const [popupData, setPopupData] = useState();\n\n useEffect(()=>{\n if(mapSate.fetchAble === false){\n return;\n }\n const abortController = new AbortController();\n const signal = abortController.signal;\n let checkScript = true;\n const script = document.createElement('script');\n const fetchData = async () =>{\n const res = await fetch(env.apiBase + \"/api/atdw/getproductsformap/\" + mapSate.currentFilterType, {signal:signal});\n const data = await res.json();\n if(window['google'] === undefined){\n checkScript = false;\n }\n else{\n if(window['google'].maps === undefined){\n checkScript = false;\n }\n }\n \n if(!checkScript){\n script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyDdeE10fagsW-TTheuB3W-kGvkVTFe3NyY';\n script.async = true;\n document.body.appendChild(script);\n setTimeout(() => {\n setMapSate(pre=>{\n let _new = {...pre};\n _new.fetchAble = false;\n \n let items = [];\n _new.data = data.results.productResult.products;\n items = _new.data;\n \n let center = {lat: -34.3420612, lng: 138.9141141};\n let zoom = 9;\n \n var map = new window.google.maps.Map(el.current, {\n center: center,\n zoom: zoom\n });\n \n items.forEach(_el => {\n let geoCode = {\n lat : Number(_el.additionalData.googlemap.geocodeGdaLatitude),\n lng : Number(_el.additionalData.googlemap.geocodeGdaLongitude)\n };\n var marker = new window.google.maps.Marker({\n position: {lat: geoCode.lat, lng: geoCode.lng},\n map: map,\n title:_el.productName\n //icon : '/assets/icons/' + icon\n });\n var infowindow = new window.google.maps.InfoWindow({\n //content : _el.shortDesc\n content : '\n // ' +\n '
'\n });\n \n var isMobile = false;\n //var isMobile = true;\n if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {\n isMobile = true;\n }\n \n marker.addListener('mouseover', function(){\n if(!isMobile) {\n infowindow.open(map, marker);\n }\n });\n marker.addListener('mouseout', function(){ \n if(!isMobile) {\n infowindow.close();\n }\n });\n marker.addListener('click', function(){\n if(isMobile) {\n setPopupData({\n productName : _el.productName,\n address : _el.address,\n town : _el.town,\n desc : _el.shortDesc,\n slug : _el.slug\n });\n setOpenPopup(true); \n }\n else{\n history.push('/atdwproduct/' + _el.slug);\n }\n });\n });\n return _new;\n });\n }, 1000);\n }\n else{\n setMapSate(pre=>{\n let _new = {...pre};\n _new.fetchAble = false;\n \n let items = [];\n _new.data = data.results.productResult.products;\n items = _new.data;\n \n let center = {lat: -34.3420612, lng: 138.9141141};\n let zoom = 9;\n \n var map = new window.google.maps.Map(el.current, {\n center: center,\n zoom: zoom\n });\n \n items.forEach(_el => {\n let geoCode = {\n lat : Number(_el.additionalData.googlemap.geocodeGdaLatitude),\n lng : Number(_el.additionalData.googlemap.geocodeGdaLongitude)\n };\n var marker = new window.google.maps.Marker({\n position: {lat: geoCode.lat, lng: geoCode.lng},\n map: map,\n title:_el.productName\n //icon : '/assets/icons/' + icon\n });\n var infowindow = new window.google.maps.InfoWindow({\n //content : _el.shortDesc\n content : '' + _el.productName + '
' + \n '' + _el.town + '
' + \n '' + _el.address + ' ' + _el.town + '
' + \n '' + _el.shortDesc + '
' + \n '' +\n '
'\n });\n \n var isMobile = false;\n //var isMobile = true;\n if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {\n isMobile = true;\n }\n \n marker.addListener('mouseover', function(){\n if(!isMobile) {\n infowindow.open(map, marker);\n }\n });\n marker.addListener('mouseout', function(){ \n if(!isMobile) {\n infowindow.close();\n }\n });\n marker.addListener('click', function(){\n if(isMobile) {\n setPopupData({\n productName : _el.productName,\n address : _el.address,\n town : _el.town,\n desc : _el.shortDesc,\n slug : _el.slug\n });\n setOpenPopup(true); \n }\n else{\n history.push('/atdwproduct/' + _el.slug);\n }\n });\n });\n return _new;\n });\n } \n }\n fetchData();\n return function cleanup(){\n abortController.abort();\n if(!checkScript){\n document.body.removeChild(script);\n }\n }\n }, [mapSate, history]);\n\n const switchMap = useCallback((value)=>{\n setMapSate(pre=>{\n let _new = {...pre};\n _new.fetchAble = true;\n _new.currentFilterType = value;\n return _new;\n });\n }, []);\n\n const Filters = (() => {\n return(\n ' + _el.productName + '
' + \n '' + _el.town + '
' + \n '' + _el.address + ' ' + _el.town + '
' + \n '' + _el.shortDesc + '
' + \n '\n \n \n \n \n {/* */}\n \n \n\n \n\n \n\n \n\n \n\n \n {/* */}\n
\n )\n });\n \n return(\n \n \n {\n openPopup && \n \n \n \n }\n \n
\n )\n}","import { css } from '@emotion/core'\n//import { mq } from 'cssInJs'\n\nexport default {\n atdwTiles : css({\n display: 'flex',\n alignItems: 'stretch',\n flexWrap: 'wrap',\n //justifyContent: 'space-between'\n justifyContent: 'start',\n marginTop: '0.2rem'\n }),\n expendablePanel : css({\n marginTop: '1rem',\n '&.open' : {\n '.exPanelTitle svg' : {\n transform:'translateY(-50%) rotate(180deg)'\n },\n '.expendablePanelContent' : {\n opacity: '1',\n //height: '100%'\n height: 'auto'\n }\n }\n }),\n expendablePanelTitle : css({\n borderBottom: '1px solid black',\n cursor:'pointer',\n position:'relative',\n 'svg' : {\n position:'absolute',\n right:'0px',\n top:'50%',\n transform: 'translateY(-50%)',\n transition: 'all 0.2s ease-in-out'\n }\n }),\n expendablePanelContent : css({\n transition: 'opacity 1s ease-out !important',\n opacity: '0',\n height: '0',\n overflow:'hidden'\n })\n\n}","/** @jsx jsx */\nimport { jsx } from '@emotion/core';\n//import { useState, useEffect } from 'react';\nimport style from './style';\nimport { AtdwTile } from '../tile/view';\nimport { useEffect, useState, Fragment } from 'react';\nimport { MdArrowDropDownCircle } from \"react-icons/md\";\n\nexport function AtdwSearchResultWithSite(props){\n\n const atdwDatas = props.atdwData || [];\n \n const [atdw, setAtdw] = useState();\n const [open, setOpen] = useState({\n accom : false, attraction : false,\n destinfo : false, restaurant : false,\n event :false, info : false, hire : false,\n genservice:false, tour:false\n });\n\n useEffect(()=>{\n const _atdw = {\n accomm : [],\n attraction : [],\n destinfo : [],\n restaurant : [],\n event :[],\n info:[],\n hire :[],\n genservice :[],\n tour:[]\n };\n atdwDatas.forEach(el => {\n switch(el.productType){\n case 'ACCOMM' :\n _atdw.accomm.push(el);\n break;\n case 'ATTRACTION' :\n _atdw.attraction.push(el);\n break;\n case 'DESTINFO' :\n _atdw.destinfo.push(el);\n break;\n case 'RESTAURANT' :\n _atdw.restaurant.push(el);\n break;\n case 'EVENT' :\n _atdw.event.push(el);\n break;\n case 'INFO' :\n _atdw.info.push(el);\n break;\n case 'HIRE' :\n _atdw.hire.push(el);\n break;\n case 'GENSERVICE' :\n _atdw.genservice.push(el);\n break;\n case 'TOUR' :\n _atdw.tour.push(el);\n break;\n default:\n }\n });\n setAtdw(_atdw);\n }, [atdwDatas]);\n\n return(\n \n \n
\n \n
\n { popupData.productName }
\n { popupData.town }
\n { popupData.address + ' ' + popupData.town }
\n { popupData.desc }
\n\n \n \n
\n \n {\n atdw &&\n \n {\n atdw.accomm.length > 0 &&\n \n } \n
\n )\n}","import React from 'react';\nimport { Link } from 'react-router-dom';\nimport utils from 'utils';\n//import { handleElementLink } from './handleLink';\nimport { handleElementLink } from '../../lib/router/handleLink';\nimport { AtdwContext } from '../../site/atdw/index';\n\nexport function SiteLink(props) {\n const { children, to, target, onClick, back, ...other } = props;\n const _atdwContext = React.useContext(AtdwContext);\n\n function goToLink(e) {\n //console.log(e, e.target);\n if(!back){\n _atdwContext.setupAtdwDataHistory2(null);\n }\n \n if (onClick) onClick(e);\n const processed = handleElementLink(e.target);\n if (processed.handled) {\n e.preventDefault();\n e.stopPropagation();\n }\n //console.log(processed)\n }\n\n return utils.url.isExternalLink(to) ?\n goToLink(e)} {...other}>{children}\n :\n goToLink(e)} {...other}>{children}\n ;\n}","import { css } from '@emotion/core'\r\nimport { mixin, mq } from '../../cssInJs'\r\n\r\nexport default {\r\n tiles: css(mq({\r\n marginLeft: [0, -5, null, -10],\r\n marginRight: [0, -5, null, -10],\r\n display: 'flex',\r\n justifyContent: 'center',\r\n flexWrap: 'wrap'\r\n })),\r\n tile: css(mq({\r\n flexBasis: ['50%', '33.33%', '25%', '25%', '20%', '16.66%'],\r\n padding: [0, 5, null, 10],\r\n cursor: 'pointer'\r\n })),\r\n tileImage: css({\r\n position: 'relative',\r\n display: 'block',\r\n ':after': { ...mixin.overlay() },\r\n ':hover, :focus': {\r\n ':after': {\r\n backgroundColor: 'rgba(0, 0, 0, 0.2)'\r\n }\r\n }\r\n }),\r\n tileIcon: css({\r\n position: 'absolute',\r\n top: 10,\r\n right: 10,\r\n fontSize: 30,\r\n color: 'white',\r\n zIndex: 1\r\n })\r\n}","import React from 'react';\r\n/** @jsx jsx */\r\nimport { jsx } from '@emotion/core'\r\nimport env from '../../env';\r\nimport utils from '../../utils';\r\nimport { useGet, ErrorPopup, Loading } from '../../components';\r\nimport style from './feedStyle';\r\nimport {FaRegCaretSquareRight, FaRegClone} from 'react-icons/fa';\r\n\r\nexport function InstagramFeed(props){\r\n const get = useGet();\r\n\r\n React.useEffect(() => {\r\n get.send(env.apiBase + `/api/instagram/GetInstagramFeeds`);\r\n // eslint-disable-next-line\r\n }, []);\r\n\r\n if (get.loading()) {\r\n return \n
\n }\n {\n atdw.attraction.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.accom){\n //setOpen(false);\n setOpen({...open, accom : false});\n }\n else{\n setOpen({...open, accom : true});\n }\n }}>\n {'ACCOMMODATION (' + atdw.accomm.length +')'}\n
\n \n
\n \n { atdw.accomm.map((item, index) =>\n
\n \n
\n }\n {\n atdw.destinfo.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.attraction){\n //setOpen(false);\n setOpen({...open, attraction : false});\n }\n else{\n setOpen({...open, attraction : true});\n }\n }}>\n {'ATTRACTIONS (' + atdw.attraction.length +')'}\n
\n \n
\n \n { atdw.attraction.map((item, index) =>\n
\n \n
\n }\n {\n atdw.restaurant.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.destinfo){\n //setOpen(false);\n setOpen({...open, destinfo : false});\n }\n else{\n setOpen({...open, destinfo : true});\n }\n }}>\n {'TOWN (' + atdw.destinfo.length +')'}\n
\n \n
\n \n { atdw.destinfo.map((item, index) =>\n
\n \n
\n }\n {\n atdw.event.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.restaurant){\n //setOpen(false);\n setOpen({...open, restaurant : false});\n }\n else{\n setOpen({...open, restaurant : true});\n }\n }}>\n {'EATING OUT (' + atdw.restaurant.length +')'}\n
\n \n
\n \n { atdw.restaurant.map((item, index) =>\n
\n \n
\n }\n {\n atdw.hire.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.event){\n //setOpen(false);\n setOpen({...open, event : false});\n }\n else{\n setOpen({...open, event : true});\n }\n }}>\n {'EVENT (' + atdw.event.length +')'}\n
\n \n
\n \n { atdw.event.map((item, index) =>\n
\n \n
\n }\n {\n atdw.info.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.hire){\n //setOpen(false);\n setOpen({...open, hire : false});\n }\n else{\n setOpen({...open, hire : true});\n }\n }}>\n {'HIRE (' + atdw.hire.length +')'}\n
\n \n
\n \n { atdw.hire.map((item, index) =>\n
\n \n
\n }\n {\n atdw.tour.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.info){\n //setOpen(false);\n setOpen({...open, info : false});\n }\n else{\n setOpen({...open, info : true});\n }\n }}>\n {'INFO (' + atdw.info.length +')'}\n
\n \n
\n \n { atdw.info.map((item, index) =>\n
\n \n
\n }\n {\n atdw.genservice.length > 0 &&\n {\n e.preventDefault();\n e.stopPropagation();\n if(open.tour){\n //setOpen(false);\n setOpen({...open, tour : false});\n }\n else{\n setOpen({...open, tour : true});\n }\n }}>\n {'TOUR (' + atdw.tour.length +')'}\n
\n \n
\n \n { atdw.tour.map((item, index) =>\n
\n \n
\n }\n \n {\n e.preventDefault();\n e.stopPropagation();\n if(open.genservice){\n //setOpen(false);\n setOpen({...open, genservice : false});\n }\n else{\n setOpen({...open, genservice : true});\n }\n }}>\n {'GENERAL SERVICE (' + atdw.genservice.length +')'}\n
\n \n
\n \n { atdw.genservice.map((item, index) =>\n
\n \r\n {displayingPosts.map((item, index) =>\r\n
\r\n )\r\n}\r\n\r\nfunction Feed({item}) {\r\n return (\r\n \r\n {/* {item.link} */}\r\n \r\n })
\r\n {item.type === 'video' &&
\r\n )\r\n}","import React from 'react';\r\nimport utils from '../../utils';\r\nimport * as yt from './iframeApi';\r\n\r\nexport function YoutubeEmbed({ url, title }) {\r\n const videoId = yt.getYoutubeCode(url);\r\n //const posterImageUrl = yt.thumbnailMax(videoId);\r\n\r\n const playerVars = {\r\n 'enablejsapi': 1,\r\n //'autoplay': 1,\r\n 'controls': 1,\r\n 'loop': 0,\r\n 'showinfo': 0,\r\n 'rel': 0,\r\n 'modestbranding': 1,\r\n //'origin': typeof window !== `undefined` && window.location.origin,\r\n 'allowfullscreen': true,\r\n 'wmode': 'transparent'\r\n }\r\n\r\n return (\r\n \r\n {item.type === 'video' && \r\n \r\n
\r\n );\r\n}\r\n","import React, { useState, useEffect } from 'react';\nimport { useRouter } from 'components';\nimport { useGet } from 'components';\nimport { Item } from 'cms/items/item';\nimport { NotFound } from 'components';\nimport env from 'env';\nimport { useStore } from 'store';\nimport { ErrorPopup, Loading } from 'components';\nimport { useInstagram } from 'components';\nimport { MetaTag } from 'components';\nimport cmsUtils from 'cms/utils/cmsUtils';\nimport utils from 'utils';\nimport { gtm } from 'lib/tracking';\n\nconst log = (...args) => {\n //console.log(args);\n}\nconst areEqual = (prevProps, nextProps) => {\n return (prevProps.pageData === nextProps.pageData)\n};\nconst PageMemo = React.memo(Page, areEqual)\n\nexport function ViewPage(props) {\n const { dispatch } = useStore();\n const [pageLoaded, setPageLoaded] = useState(false);\n //const [page, setPage] = useState(null);\n //const path = usePath();\n //log('view page', path);\n const { pathname } = useRouter();\n useInstagram();\n\n const get = useGet();\n log('0. viewpage ready');\n\n useEffect(() => {\n log('*. start loading')\n setPageLoaded(false);\n get.send(env.apiBase + \"/api/cms/GetPublishedPage?path=\" + pathname);\n // eslint-disable-next-line\n }, [pathname]);\n\n if (get.loading()) {\n return \n {sectionItems}\n
\n \n );\n}\n\nfunction Section(props) {\n log('5. section rendering')\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n if (!subItems || subItems.length === 0)\n return (<>);\n\n const subItemsElts = subItems.map((subItem, index) =>\n <\\/p>/g, '');\n //editor.insertHtml(evt.data.dataValue); return false;\n setTimeout(function () {\n CKEDITOR.instances.cmsCurrentEditor.setData(CKEDITOR.instances.cmsCurrentEditor.getData());\n }, 100);\n }, null, null, 9);\n }\n\n close($editor = null) {\n const CKEDITOR = window['CKEDITOR'] || {};\n //console.log('ckeditor close');\n if (typeof CKEDITOR.instances.cmsCurrentEditor != \"undefined\")\n CKEDITOR.instances.cmsCurrentEditor.destroy();\n\n //for (var instance in CKEDITOR.instances) {\n // CKEDITOR.instances[instance].destroy();\n //}\n\n }\n}\n","import { CmsRadioSender } from './cms-radio-sender'\nimport { CmsRadioReceiver } from './cms-radio-receiver'\nimport { CmsHtmlEditor } from './cms-html-editor'\nimport env from 'env';\n\n// declare var CKEDITOR: any;\n// import * as $ from 'jquery';\n\n\nexport class CmsPageController {\n settings;//: any;\n sender;//: CmsRadioSender;\n receiver;//: CmsRadioReceiver;\n htmlEditor;//: CmsHtmlEditor;\n\n constructor() {\n this.settings = { root: \"body\", viewOnly: false };\n this.sender = new CmsRadioSender(this);\n this.receiver = new CmsRadioReceiver(this);\n this.htmlEditor = new CmsHtmlEditor(env.cmsEndpoint, this.sender);\n }\n init(options) {\n const $ = window['jQuery'];\n this.settings = Object.assign({}, /*default*/{ root: \"body\", viewOnly: false }, options);\n this.initGlobalVars();\n\n var self = this;\n $(\"[onclick]\").prop(\"onclick\", null);\n $(\"[dblclick]\").prop(\"dblclick\", null);\n $(self.settings.root).off(\"click dblclick\", \"*\");\n $(self.settings.root).on(\"click dblclick\", \"*\", function (e) {\n //$(\".cms_html_editor_img_selected\").removeClass(\"cms_html_editor_img_selected\");\n // console.log($(e.target).hasClass(\"allowClick\"));\n // console.log(e.target);\n\n if (!$(e.target).hasClass(\"allowClick\")) {\n e.stopPropagation();\n e.preventDefault();\n }\n\n if ($(this).attr(\"contenteditable\") === \"true\" ||\n $(\"#cms_html_editor_source_id\").is(\":visible\")) {\n e.stopPropagation();\n return;\n }\n if (!self.settings.viewOnly)\n self.selectItem($(this), false, e.type === \"dblclick\");\n });\n\n if (self.settings.viewOnly) return; // stop the editing logic for viewonly mode.\n\n // ctrl + s for html block\n $(self.settings.root).on('keydown', \"#cmsCurrentEditor\", function (e) {\n if (e.ctrlKey && e.which === 83) {\n //var itemId = $(this).data(\"cms-item-id\");\n //if (!itemId)\n // itemId = $(this).closest(\"[data-cms-item-id]\").data(\"cms-item-id\");\n //window.parent.cms.site.saveHtml(itemId);\n //e.preventDefault();\n\n self.sender.saveAllDirtyHtml(self.getAllDirtyHtml());\n return false;\n }\n });\n }\n\n selectItemFromController(id) {\n const $ = window['jQuery'];\n var item = $(\".cms_item[data-cms-item-id='\" + id + \"']\");\n this.scrollTo(item);\n this.selectItem(item, true);\n }\n\n selectItem($item, fromController, doubleclicked = false) {\n //console.log(\"select item - \" + fromController + \" - \" + doubleclicked);\n //console.log($item);\n var editor = $item.closest(\"[contenteditable]\");\n if (editor.length > 0)\n return;\n var cke_top = $item.closest(\".cke_top\");\n if (cke_top.length > 0)\n return;\n\n this.closeEditingItem();\n //console.log($item);\n if (typeof $item === \"undefined\") return;\n if ($item.length === 0) return;\n this.findItem($item, fromController, 0, doubleclicked);\n }\n\n closeEditingItem() {\n const $ = window['jQuery'];\n //console.log(\"close editing item\");\n $(\"[contenteditable]\").removeAttr(\"contenteditable\");\n $(\"#cms_hovermenu\").remove();\n $(\".cms_editing_item\").removeClass(\"cms_editing_item\");\n\n }\n\n findItem($item, fromController, depth, doubleclicked) {\n if (depth > 100) return false;\n // console.log($item, fromController, depth, doubleclicked)\n if (typeof $item.attr(\"data-cms-html\") !== \"undefined\" && $item.attr(\"data-cms-html\") === \"true\") {\n $item.attr(\"contenteditable\", \"true\");\n this.showHtmlEditor($item);\n }\n if (typeof $item.attr(\"data-cms-item-id\") !== \"undefined\") {\n //$item.attr(\"contenteditable\", \"true\");\n $item.addClass(\"cms_editing_item\");\n if (!fromController) {\n //window.parent.cms.site.selectControllerItem($item.attr(\"data-cms-item-id\"),\n // typeof doubleclicked != \"undefined\" && doubleclicked == true\n //);\n this.sender.selectControllerItem({\n id: $item.attr(\"data-cms-item-id\"),\n openEdit: typeof doubleclicked !== \"undefined\" && doubleclicked === true\n });\n\n }\n\n //show_hovermenu($item);\n\n } else {\n var editableParent = $item.parents(\".cms_item[data-cms-item-id], [data-cms-html]\");\n if (editableParent.length > 0)\n this.findItem(editableParent.first(), fromController, depth + 1, doubleclicked);\n\n }\n }\n\n sameContent(a, b) {\n return a === b;\n }\n\n showHtmlEditor($item) {\n const $ = window['jQuery'];\n var editor = $item;\n //console.log(editor);\n //var $menu = $(\"#cms_html_editor_ctrl\");\n ////$menu.css(\"top\", $item.offset().top - 40);\n ////$menu.css(\"left\", $item.offset().left);\n //$menu.show();\n //initHtmlEditor($item);\n\n if (editor.attr(\"id\") === \"cmsCurrentEditor\") return;\n\n $(\"#cmsCurrentEditor\").attr(\"id\", \"\");\n this.htmlEditor.close(editor);\n\n editor.attr(\"id\", \"cmsCurrentEditor\");\n //editor.data(\"current-content\", editor.html());\n\n this.htmlEditor.show(editor);\n //setHandlers($item);\n\n }\n\n\n initGlobalVars() {\n const $ = window['jQuery'];\n window[\"cmsPage\"] = $.extend({}, window[\"cmsPage\"] || {}, {\n htmleditor: {\n // cmsPage.htmleditor.getAnchors();\n getAnchors: function (opt) {\n //var options = $.extend({}, opt);\n //console.log(options);\n var anchors = [];\n\n $(\"a[name]\").each(function (inx, obj) {\n anchors.push({ id: $(obj).attr(\"id\"), name: $(obj).attr(\"name\") });\n });\n\n $(\"[data-cms-item-name],[data-cms-anchor]\").each(function (inx, obj) {\n if (typeof $(obj).attr(\"data-cms-anchor\") !== \"undefined\" && $(obj).attr(\"data-cms-anchor\") !== \"\" && $(obj).parents(\".owl-item\").length === 0) {\n anchors.push({ id: null, name: $(obj).attr(\"data-cms-anchor\") });\n } else if ($(obj).attr(\"data-cms-item-name\") !== \"\" && $(obj).parents(\".owl-item\").length === 0) {\n anchors.push({ id: null, name: $(obj).attr(\"data-cms-item-name\") });\n }\n });\n\n return anchors;\n }\n }\n });\n }\n\n scrollTo(target) {\n const $ = window['jQuery'];\n if (typeof target === \"undefined\") return;\n if ($(target).length === 0) return;\n var htmlbody = $('html,body');\n var top = 0;\n if ($(target).height() > $(window).height())\n top = $(target).offset().top;\n else {\n top = $(target).offset().top - Math.floor(($(window).height() - $(target).height()) / 2);\n }\n //console.log(top);\n //htmlbody.animate({ scrollTop: top }, 500, 'easeInOutQuint');\n htmlbody.animate({ scrollTop: top }, 500);\n }\n\n getCurrentHtml() {\n const CKEDITOR = window['CKEDITOR'] || {};\n try {\n return CKEDITOR.instances.cmsCurrentEditor.getData();\n } catch (e) { return \"\"; }\n }\n\n getAllDirtyHtml() {\n const $ = window['jQuery'];\n var self = this;\n var htmlChanges = [];\n $(\".dirtyHtml\").each(function (inx, obj) {\n var $section = $(obj);\n var content = $section.is(\"#cmsCurrentEditor\") ? // if the html editor is active, it needs to get the html from the editor.\n self.getCurrentHtml() : $section.html();\n if ($section.is(\"[data-cms-section-id]\")) {\n // section level?\n let $item = $section.closest(\"[data-cms-item-id]\");\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: $section.data(\"cms-section-id\"), Content: content });\n } else if ($section.is(\"[data-cms-item-id]\")) {\n // section level?\n let $item = $section;\n htmlChanges.push({ ItemId: $item.data(\"cms-item-id\"), SectionId: \"Content\", Content: content });\n }\n });\n return htmlChanges;\n }\n\n getHtml(itemid: any) {\n const $ = window['jQuery'];\n this.htmlEditor.close();\n var self = this;\n var item = $(\".cms_item[data-cms-item-id='\" + itemid + \"']\");\n\n var formvals = { Content: this.cms_replace_item_html(item) };\n\n //cms_msg_progressing(\"#save_message\", \"Saving...\");\n if ($(\"[data-cms-section-id]\", item).length > 0) {\n $(\"[data-cms-section-id]\", item).each(function (inx, section) {\n var closestItemId = $(section).closest(\".cms_item\").data(\"cms-item-id\");\n if (closestItemId === itemid) {\n var id = $(section).attr(\"data-cms-section-id\");\n formvals[id] = self.cms_replace_item_html($(section)); //.find(\">:first-child\")().html();\n\n }\n });\n }\n return formvals;\n }\n\n cms_replace_item_html(item) {\n return item.html();\n // var $tmp = $(\"
\").html(item.html());\n // if ($tmp.find('.cms-skeleton').length > 0)\n // return $tmp.find('.cms-skeleton').html();\n // else\n // return item.html();\n //tmp.find(\".cms_ctrl_in_editor\").each(function (inx, obj) {\n // var ctrlid = $(obj).attr(\"data-cms-ctrl-id\");\n // $(obj).replaceWith(\"__cms__ctrl:\" + ctrlid + \"__\");\n //});\n //return tmp.html();\n }\n\n}\n","import React, { useEffect } from 'react';\nimport { useRouter } from 'components';\nimport { useGet } from 'components';\nimport { Item } from 'cms/items/item';\nimport env from 'env';\nimport { loadJs } from 'lib/net-loader';\nimport { CmsPageController } from 'cms/services/cms-page-controller';\nimport { ErrorPopup, Loading } from 'components';\nimport cmsUtils from 'cms/utils/cmsUtils';\n\n// function useQuery() {\n// return new URLSearchParams(useLocation().search);\n// }\n\nexport function EditPage(props) {\n //const [page, setPage] = useState(null);\n\n //const pageId = props.pageId;\n const { query } = useRouter();\n const { cmsViewMode = 'edit', id, publishVer, editVer } = query;\n const pageId = id;\n\n //console.log(pageId, cmsViewMode, env.apiBase, env)\n\n const get = useGet();\n useEffect(() => {\n get.send(env.apiBase + '/api/cms/GetPage/' + pageId + '?cmsViewMode=' + cmsViewMode\n + (publishVer ? '&publishVer=' + publishVer : '')\n + (editVer ? '&editVer=' + editVer : '')\n );\n // eslint-disable-next-line\n }, [pageId]);\n\n if (get.loading()) {\n return\n {sectionItems}\n
\n );\n}\n\nfunction Section(props) {\n const item = props.item;\n //const sectionName = item.sectionName;\n const subItems = item.items || [];\n const cmsOption = props.cmsOption || {};\n\n if (!subItems || subItems.length === 0)\n return (<>);\n\n const subItemsElts = subItems.map((subItem, index) =>\n - \n {subItemsElts}\n
{link.title}
\n \n {\n }}\n />\n
\n\n );\n}","import React, {useState, useCallback, useEffect} from 'react';\nimport { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';\nimport { useRouter } from 'components';\nimport { StoreProvider } from 'store';\nimport { ViewPage } from './cms/pages/viewPage/viewPage';\nimport { EditPage } from './cms/pages/editPage/editPage';\nimport { TopHeader } from './layout/topHeader/topHeader';\n//import { Footer } from './layout/footer/footer';\nimport { BottomDock } from './layout/bottomDock/bottomDock';\n// import { BlogView } from './site/blog/blogView';\nimport { useScrollPosition } from '@n8tb1t/use-scroll-position';\nimport { useParallax } from 'components';\nimport { AppVersionPage } from 'components';\nimport { MediaQueryStatus } from 'components';\nimport { CommonVideoPopup } from \"./layout/popup/commonVideoPopup\";\nimport { HelmetProvider } from 'react-helmet-async';\nimport { AtdwPage, AtdwContext } from 'site/atdw/index';\nimport AOS from 'aos';\n\nfunction PageUpdated() {\n //const { pathname } = useRouter();\n const { path } = useRouter();\n const parallax = useParallax();\n\n React.useLayoutEffect(() => {\n window.scrollTo(0, 0);\n parallax.reset();\n // eslint-disable-next-line\n }, [path]);\n return null;\n}\n\nfunction AppLayout(props) {\n const { pathname } = useRouter();\n const [themeColor, setThemeColor] = useState('');\n //const [scrolled, setScrolled] = useState(false)\n //const path = usePath();\n //const routeResult = useRoutes(routes);\n\n // const parallax = useParallax();\n // //console.log(path, routeResult);\n // const routeChanged = (path) => {\n // //console.log(path);\n // parallax.reset();\n // }\n\n useScrollPosition(({ prevPos, currPos }) => {\n //console.log(currPos.x)\n //console.log(currPos.y);\n if (currPos.y > 90) {\n document.querySelector('body').classList.add('scrolled')\n } else {\n document.querySelector('body').classList.remove('scrolled')\n }\n //setScrolled(currPos.y > 90)\n }, [], null, true)\n\n //const pageChanged = useCallback(path => routeChanged(path), [])\n //useLocationChange((path) => { routeChanged(path, history)})\n //useLocationChange(path => routeChanged(path))\n\n //sapmple\n // const onChangeThemeColor = ((value) => {\n // console.log(\"onChangeThemeColor\");\n // setThemeColor(value);\n // });\n\n const onChangeThemeColor = useCallback((value)=>{\n //console.log(\"onChangeThemeColor\");\n setThemeColor(value);\n }, []);\n\n useEffect(()=>{\n AOS.init({\n duration : 1200\n });\n }, []);\n\n return (\n \n
\n );\n}\n\nfunction App() {\n \n const [atdwDataHistory, setAtdwDataHistory] = useState(null);\n const [atdwDataHistory2, setAtdwDataHistory2] = useState(null);\n\n function setupAtdwDataHistory(value){\n //console.log(\"setupAtdwDataHistory\", value);\n setAtdwDataHistory(value);\n }\n\n function setupAtdwDataHistory2(value){\n //console.log(\"setupAtdwDataHistory2\");\n setAtdwDataHistory2(value);\n }\n\n return (\n \n
\n {/* */}\n \n \n \n \n \n \n \n \n
\n {/*