(meta={}, site={}) => { class Ctxt { constructor(meta, site) { this.id = this.getRandom(); meta.ctxt = () => { return this }; this.site = site; this.generate() } title = 'Bell View'; altTitle = 'Bell View'; domain = 'www.bellviewapts.com'; keywords = `luxury apartments, air conditioning, AC, pet friendly, eco-friendly, green building, luxury, high end, ev charging, ev`; description = `With features and luxury amenities that will surprise and delight, this Capitol Hill apartment building sets a new standard for Seattle rental communities.`; ogTitle = `Bell View Apartments Are Modern, Eco-friendly and Efficient`; url = ''; siteName = 'Bell View Apartments'; siteExcerpt = "Bell View Apartments"; facebookUrl = `https://www.facebook.com/bellviewapts/`; instagramUrl = `https://www.instagram.com/bellviewapts/`; email = `bellview@wallspropertymanagement.com`; mailTo = btoa(`{"href":"mailto:${this.email}", "innerHTML": "${this.email}"}`); phone = `206-752-2981`; phone2 = `(206) 752-2981`; tel = btoa(`{"href":"tel:${this.phone}", "innerHTML": "${this.phone2}"}`); // https://lucide.dev/icons/ - Stroke width: 1.5px, Size: 28px phoneSvg = ``; tel2 = btoa(`{"href":"tel:${this.phone}", "innerHTML": "${this.phoneSvg.replace(/"/g, '\\"')}"}`); twitterUrl = ``; basePrimaryColor = `gray`; baseGrayColor = `` || `gray`; orange = `#D27336`; orangeText = `text-[color:${this.orange}]`; orangeBg = `bg-[color:${this.orange}]`; darkGrey = `#3D3D3D`; darkGreyBg = `bg-[color:${this.darkGrey}]`; darkerGrey = `#222222`; darkerGreyBg = `bg-[color:${this.darkerGrey}]`; darkGreyText = `text-[color:${this.darkGrey}]`; midGrey = `#333333`; midGreyBg = `bg-[color:${this.midGrey}]`; midGreyText = `text-[color:${this.midGrey}]`; dimGrey = `#CDCDCD`; dimGreyBg = `bg-[color:${this.dimGrey}]`; lightGrey = `#F4F4F4`; lightGreyBg = `bg-[color:${this.lightGrey}]`; lightGreyText = `text-[color:${this.lightGrey}]`; offWhite = `#F9F9F9`; offWhiteBg = `bg-[color:${this.offWhite}]`; pbp = `lg` // Primary break point. headerHeightMobile = `80px`; oswald = `font-['Oswald']`; voltaire = `font-['Voltaire']`; navigationClasses = `font-normal text-[18px] text-[color:${this.darkGrey}] ${this.pbp}:text-[color:${this.offWhite}] !hover:opacity-70 h-[52px] ${this.pbp}:h-[42px]`; navigation = [ { value: "Availability", url: "/availability", classes: `${this.navigationClasses}`, }, { value: "Details", url: "/details", classes: `${this.navigationClasses}`, }, { value: "Community", url: "/community", classes: `${this.navigationClasses}`, }, { value: "Neighborhood", url: "/neighborhood", classes: `${this.navigationClasses}`, }, { value: "Residents", url: "/residents", classes: `${this.navigationClasses}`, }, { value: "Contact", url: "/contact", classes: `${this.navigationClasses}`, }, ]; pagesSiteMap = [ '/', '/contact', '/video', '/css/radix.css', '/css/splide.min.css', '/js/splide.min.js', '/js/image-loader-worker.js', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-012-1.png_Q_alt_E_media_EXT_.png', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-03.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-07.png_Q_alt_E_media_EXT_.png', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-09.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbv-transparent.svg_Q_alt_E_media_EXT_.svg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-08.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-012.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-011.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-10.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-014.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-015.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-016.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-017.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-019.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-020.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-021.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-022.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-023.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-024.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-025.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-026.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-027.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-028.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-029.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-030.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-031.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-1_P_2F_assets_P_2Flounging.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-1_P_2F_assets_P_2Fcontact.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-032.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-033.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-034.png_Q_alt_E_media_EXT_.png', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-013.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-036.png_Q_alt_E_media_EXT_.png', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-035.png_Q_alt_E_media_EXT_.png', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbell-view-037.png_Q_alt_E_media_EXT_.png', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-a-1.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-a-2.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-b-1.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-b-2.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-c-1.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-c-2.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-d-1.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fpenthouse-d-2.jpg_Q_alt_E_media_EXT_.jpg', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-1.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-2.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-3.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-4.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-5.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-6.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-7.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-8.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-9.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F2-bed-10.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-1.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-2.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-3.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-4.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-5.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-6.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-7.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-8.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-9.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-10.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-11.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-12.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-13.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-14.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-15.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2F1-or-studio-16.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbv-005.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Froom-001.webp_Q_alt_E_media_EXT_.webp', '/api/fetch/_FB__FS_v0_FS_b_FS_memcap-p.appspot.com_FS_o_FS_websites_P_2Fwall-bell-view_P_2F_assets_P_2Fbv-to-wp.webp_Q_alt_E_media_EXT_.webp', ]; topBanner = ` `; metaTags = ` `; baseFontDefinition = `

`; baseFontFamily = `` || `'Open Sans', sans-serif`; titleFontFamily = `` || `'Oswald', sans-serif`; headerFontFamily = `` || this.baseFontFamily; favIcon = `` || ``; feedDefinition = `` || ``; baseFontSize = `21px` || `1.25rem`; baseFontWeight = `` || `500`; baseLineHeight = `42px` || `1.5rem`; baseCornerRadius = `` || `rounded-none`; // https://tailwindcss.com/docs/border-radius#rounded-corners primaryColors = [ 'gold', 'bronze', 'brown', 'yellow', 'amber', 'orange', 'tomato', 'red', /*'ruby',*/ 'crimson', 'pink', 'plum', 'purple', 'violet', /*'iris',*/ 'indigo', 'blue', 'cyan', 'teal', /*'jade'*/, 'green', 'grass', 'lime', 'mint', 'sky' ]; generate = (primary = '') => { /***************** * BEGIN: Colors ******************/ /* Gold, Bronze, Brown, Yellow, Amber, Orange, Tomato, Red, *Ruby, Crimson, Pink, Plum, Purple, Violet, *Iris, Indigo, Blue, Cyan, Teal, *Jade, Green, Grass, Lime, Mint, Sky var(--tomato-2) */ this.generateColorPalette(primary || this.basePrimaryColor, 'primary') /* Gray is pure gray. Mauve is based on a desaturated purple hue. Slate is based on a desaturated blue hue. Sage is based on a desaturated green hue. Olive is based on a desaturated lime hue. Sand is based on a desaturated yellow hue. */ this.generateColorPalette(this.baseGrayColor, 'gray') /* Error: Red, Ruby, Tomato, Crimson Success: Green, Teal, Jade, Grass, Mint Warning: Yellow, Amber, Orange Info: Blue, Indigo, Sky, Cyan */ this.generateColorPalette('ruby', 'error') this.generateColorPalette('teal', 'success') this.generateColorPalette('amber', 'warning') this.generateColorPalette('indigo', 'info') this.generateColorPalette('amber', 'accent') this.colorHoverText = `` || this.generateColorVar(this.basePrimaryColor, 8); this.colorHoverTextClass = `` || `hover:text-[color:${this.cp.accent_LowContrastText}]`|| `hover:text-[color:${this.colorHoverText}]`; this.bodyBackgroundColor = `` || this.cp.primary_SubtleBackground || this.cp.primary_UiElementBackground; this.bodyBackgroundColorClass = `bg-[color:${this.bodyBackgroundColor}]`; //console.log('cp', this.cp) /***************** * END: Colors https://www.radix-ui.com/colors/docs/palette-composition/scales ******************/ this.wrapStyles = () => {}; this.pmsw = `max-w-screen-xl` // Primary max screen width. https://tailwindcss.com/docs/max-width this.headerWrapClasses = `borderr border-red-500` || `${this.pmsw} mx-auto border border-red-500` this.contentWrapClasses = `borderr border-blue-500` || `${this.pmsw} mx-auto border border-blue-500` this.footerWrapClasses = `max-w-full mx-auto borderr border-green-500` || `${this.pmsw} mx-auto border border-green-500` this.baseBorderStyles = `` || `border border-[color:${this.cp.primary_BorderAndFocusRings}]` this.baseShadowStyles = `shadow shadow-zinc-800/5` || `shadow-sm shadow-zinc-800/5`; this.baseRingStyles = `` || `ring-1 ring-[color:${this.cp.primary_SubtleBorderAndSeparators}] focus:ring-zinc-400`; this.baseWrapStyles = `` || `mx-auto min-h-screen rounded-md px-4 py-8`; //bg-gradient-to-b from-[color:${this.cp.primary_ActiveUiElementBackground}] transparent this.baseImageStyles = `` || `${this.baseCornerRadius} ${this.baseShadowStyles} ${this.baseRingStyles} backdrop-blur`; this.baseHeaderStyles = `${this.oswald} font-medium uppercase leading-[50px]` || `font-bold ${this.cp.accent_LowContrastTextClass}`; this.baseH1Styles = `${this.baseHeaderStyles} text-[47px] mb-4 mb:mb-8` || `${this.baseHeaderStyles} text-5xl mb-4 mb:mb-8`; this.baseH2Styles = `${this.baseHeaderStyles} text-[38px]` || `${this.baseHeaderStyles} text-4xl mt-0`; this.baseH3Styles = `${this.baseHeaderStyles} text-[33px]` || `${this.baseHeaderStyles} text-3xl mt-0`; this.baseH4Styles = `` || `${this.baseHeaderStyles} text-2xl mt-0`; this.baseAnchorStyles = `` || `${this.cp.primary_HighContrastTextClass} ${this.colorHoverTextClass} underline underline-offset-4 font-bold`; this.baseButtonStyles = `${this.baseBorderStyles} ${this.baseAnchorStyles} ${this.baseCornerRadius} ${this.baseShadowStyles} ${this.cp.primary_LowContrastTextClass} hover:${this.cp.primary_HoveredUiElementBackgroundClass} !no-underline cursor-pointer py-3 px-6 font-medium text-center inline-flex items-center leading-[25px]` || `${this.baseBorderStyles} ${this.baseAnchorStyles} ${this.baseCornerRadius} ${this.baseShadowStyles} ${this.cp.primary_LowContrastTextClass} hover:${this.cp.primary_HoveredUiElementBackgroundClass} !no-underline cursor-pointer py-3 px-8 font-medium backdrop-blur text-center inline-flex items-center`; this.baseButtonPrimaryStyles = ` ${this.orangeBg} !hover:${this.orangeBg} hover:opacity-80 !text-white border-none uppercase text-[18px] tracking-wide`; this.baseButtonSecondaryStyles = ` ${this.midGreyBg} !${this.lightGreyText} !hover:${this.orangeText} `; this.baseFormFieldStyles = `${this.midGreyBg} ${this.lightGreyText} ${this.baseCornerRadius} ${this.baseShadowStyles} text-sm block w-full p-2.5 prose` || `${this.baseBorderStyles} ${this.baseCornerRadius} ${this.cp.primary_HoveredUiElementBackgroundClass} ${this.baseShadowStyles} text-sm block w-full p-2.5 prose`; this.baseSectionStyles = `pt-10 px-2 ${this.pbp}:p-10 ${this.darkGreyBg} text-[color:${this.lightGrey}]` || `py-3 prose w-full`; this.title1 = `font-['Oswald'] uppercase text-[32px] font-normal mb-3`; this.title2 = `font-['Oswald'] uppercase text-[27px] font-normal mb-2`; this.title3 = `font-['Oswald'] uppercase text-[22px] font-light mb-1`; this.p1 = `font-['Open Sans'] leading-[25px] mb-2 font-normal text-[16px] max-w-[800px]`; this.baseSiteStyles = `` || ` html, body { min-height: 100%; min-width: 100%; max-width: 100%; font-family: ${this.baseFontFamily}; font-weight: ${this.baseFontWeight}; font-size: ${this.baseFontSize}; line-height: ${this.baseLineHeight}; background-color: ${this.darkerGrey}; color: ${this.cp.primary_LowContrastText}; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .alt-title { font-family: 'Jost', sans-serif; } html { overflow: overlay; scroll-behavior: smooth; } html #mode_moon { display: inline; } html #mode_sun { display: none; } html.dark #mode_moon { display: none; } html.dark #mode_sun { display: inline; } .transition-all-250ms { transition: all 250ms; } .transition-all-500ms { transition: all 500ms; } .transition-all-1s { transition: all 1s; } ::-webkit-scrollbar-thumb, .dark ::-webkit-scrollbar-thumb { background: rgba(90, 90, 90, 0) !important; } ::-webkit-scrollbar-track, .dark ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0) !important; } ::-webkit-scrollbar { width: 0; background: transparent; } .pattern { box-shadow: 3px 0px 20px 10px rgba(0, 0, 0, .1); } .mcp-scroll-bg { background-color: rgba(17, 24, 39, 0.9) !important; } #mcp-e-mode { z-index: 11; } /* Underline */ .mcp-underline::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background-color: white; opacity: 0; transition: opacity 300ms, transform 300ms; } .mcp-underline:hover::after, .mcp-menu-item:focus::after { opacity: .5; transform: translate3d(0, 0.2em, 0); } /* Slide in */ li .mcp-underline { overflow: hidden; } li .mcp-underline::after { opacity .5; transform: translate3d(-50%, 0, 0); } li .mcp-underline:hover::after, li .mcp-underline:focus::after { transform: translate3d(0, 0, 0); } /* Main nav highlight */ .mc-availability a[href="/availability"] > span.mcp-underline::after, .mc-availability-_stage_ a[href="/availability"] > span.mcp-underline::after { opacity: .5; height: 2px; background-color: ${this.orange}; transform: translate3d(0, 0, 0); } .mc-details a[href="/details"] > span.mcp-underline::after, .mc-details-_stage_ a[href="/details"] > span.mcp-underline::after { opacity: .5; height: 2px; background-color: ${this.orange}; transform: translate3d(0, 0, 0); } .mc-community a[href="/community"] > span.mcp-underline::after, .mc-community-_stage_ a[href="/community"] > span.mcp-underline::after { opacity: .5; height: 2px; background-color: ${this.orange}; transform: translate3d(0, 0, 0); } .mc-neighborhood a[href="/neighborhood"] > span.mcp-underline::after, .mc-neighborhood-_stage_ a[href="/neighborhood"] > span.mcp-underline::after { opacity: .5; height: 2px; background-color: ${this.orange}; transform: translate3d(0, 0, 0); } .mc-residents a[href="/residents"] > span.mcp-underline::after, .mc-residents-_stage_ a[href="/residents"] > span.mcp-underline::after { opacity: .5; height: 2px; background-color: ${this.orange}; transform: translate3d(0, 0, 0); } .mc-contact a[href="/contact"] > span.mcp-underline::after, .mc-contact-_stage_ a[href="/contact"] > span.mcp-underline::after { opacity: .5; height: 2px; background-color: ${this.orange}; transform: translate3d(0, 0, 0); } #mcp-top-banner.mcp-collapsed { opacity: 0; } /* Hide promo dialog on availability page */ .mc-availability #promotion-popup { display: none; } /* Hide certain items when mobile menu is showing */ .mcp-mobile-menu .mcp-mobile-menu-hide { display: none; } `; }; font12 = `text-[12px]`; initStaging = () => { //console.log('initStaging') const unstage = document.querySelector('#mcp-unstage') if (unstage) { unstage?.classList?.add(this.gcn('hidden')) } if (!this.isHosted() && /_stage_/.test(window.location.href)) { console.log('Update links') if (unstage) { unstage?.classList?.remove(this.gcn('hidden')) } const anchors = Array.from(document.querySelectorAll('.mcp-anchor')) anchors.forEach((anchor) => { const href = anchor.getAttribute('href') if (!/_stage_/.test(href)) { if (href === '/') { anchor.setAttribute(`href`, href + 'home/_stage_') } else { anchor.setAttribute(`href`, href + '_stage_') } console.log(anchor.getAttribute('href')) } }) } }; adjustLayout = () => { /* console.log('adjustLayout'); console.log('isMobile', this.isMobile()) console.log('isSmall', this.isSmall()) console.log('isMedium', this.isMedium()) console.log('isLarge', this.isLarge()) console.log('isXLarge', this.isXLarge()) console.log('is2XLarge', this.is2XLarge()) */ this.calculateScrollToTopButton(); this.calculatePromotionPopup() this.updateTawk(); //this.logVersion(); //this.calculatePatternOnMobileMenu(); } initSplide = () => { // Slider /* if (window.mcp_carousel && this.isHosted()) { //console.log('skip') return; } */ //console.log('initSplide 1') //window?.mcp_carousel?.destroy() if (window?.mcp_carousels?.length) { window?.mcp_carousels.forEach((carousel) => { //console.log('destroy') carousel?.destroy() }) } window.mcp_carousels = null; if (!window.mcp_carousels && window.Splide && document.querySelectorAll('.splide').length) { //console.log('initSplide 2') window.mcp_carousels = []; const splides = Array.from(document.querySelectorAll('.splide')); //console.log('create', splides) splides.forEach((splide) => { const s = new Splide(splide, { type : 'loop', perPage: 1, perMove: 1, autoplay: true, }); s.mount(); window.mcp_carousels.push(s) }) } }; calculatePromotionPopup = () => { const itm = document.querySelector('#promotion-popup'); if (!itm) return; const scrollTop = window.pageYOffset || 0; if (scrollTop > 100) { //console.log('hide') itm.classList.add(this.gcn('!hidden')); } else { //console.log('show') if (!itm.classList.contains(this.gcn('!hidden'))) { return; } itm.classList.add(this.gcn('!opacity-0')); itm.classList.remove(this.gcn('!hidden')); setTimeout(() => { itm.classList.remove(this.gcn('!opacity-0')); }, 250) } } calculateScrollToTopButton = () => { const up = document.querySelector('#top-button'); if (!up) return; const scrollTop = window.pageYOffset || 0; if (scrollTop > 100) { //console.log('show') if (!up.classList.contains(this.gcn('!hidden'))) { return; } up.classList.add(this.gcn('!opacity-0')); up.classList.remove(this.gcn('!hidden')); setTimeout(() => { up.classList.remove(this.gcn('!opacity-0')); }, 250) } else { //console.log('hide') up.classList.add(this.gcn('!hidden')); } }; calculatePatternOnMobileMenu = () => { //mega-menu-full const mmf = document.querySelector('#mega-menu-full'); if (this.isMobile() || this.isMedium() || this.isSmall()) { mmf.classList.add('pattern') } else { mmf.classList.remove('pattern') } } updateTawk = () => { try { // Try to run it. window?.Tawk_API?.hideWidget(); } catch(e) {} } updateContactInfo = () => { const anchors = Array.from(document.querySelectorAll('.mcp-update-value')) anchors.forEach((anchor) => { try { let data = anchor.getAttribute('data-cfg') data = JSON.parse(atob(data)) anchor.setAttribute('href', data.href); anchor.innerHTML = data.innerHTML; } catch (err) { console.log(`ERR - updateContactInfo: ${err}`) } }) //mcp-update-value } logVersion = () => { console.log(`(0001 - ${this.id} - ${this.count++})`) } tag = (command, param1, param2, param3) => { /* // Set global campaign ID gtag('set', { 'campaign_id': '1234' }); // Set campaign ID for gtag('config','', { 'campaign_id': 'ABCD' }); // Allows you to get various values from gtag.js including values set with the set command. gtag('get', '', '', callback) */ //console.log('tag', command, param1, param2, param3) if (!window.gtag || !command) { console.warn('Missing gtag or command.') return; } // Not allowed to send undefined parameters if (param1 && param2 && param3) { window.gtag(command, param1, param2, param3) } else if (param1 && param2) { window.gtag(command, param1, param2) } else if (param1) { window.gtag(command, param1) } else { window.gtag(command) } } logConversion = (obj='') => { //console.log('logConversion', window.gtag) if (!window.gtag || !obj) { console.warn('Missing gtag or obj.') return; } // https://developers.google.com/tag-platform/gtagjs/reference this.tag('event', 'conversion', obj); }; initAnalyticsConversions = () => { // Setup customer conversion prior to setting these handlers. // Footer & /contact page: hello@bellviewapts.com this.attachSingleHandler('.mcp-hello-contact', 'click', () => { this.logConversion({ 'send_to': 'AW-351668051/d3ZYCILv_oIZENOO2KcB', 'data': 'User clicked email link.', }) }); // Footer & /contact page: (206) 784-9780 this.attachSingleHandler('.mcp-phone-contact', 'click', () => { this.logConversion({ 'send_to': 'AW-351668051/lL8ICNTGm4MZENOO2KcB', 'data': 'User clicked phone number link.', }) }); // Form submit this.attachSingleHandler('.mcp-form-submit', 'click', () => { this.logConversion({ 'send_to': 'AW-351668051/WzCRCLnvmIMZENOO2KcB', 'data': 'User submitted contact form.', }) }); // Availability page load. (Set on /availability page.) }; // initImageLoaderWorker = () => { //console.log('initImageLoaderWorker') const ImageLoaderWorker = new Worker('/js/image-loader-worker.js'); const imgElements = document.querySelectorAll('[data-mcp-lazy-load]') this.attachSingleHandler([ImageLoaderWorker], 'message', event => { // Grab the message data from the event const imageData = event.data console.log(`imageData: ${imageData}`) // Get the original element for this image const itms = Array.from(document.querySelectorAll(`[data-mcp-lazy-load='${imageData.imageURL}']`)); // We can use the `Blob` as an image source! We just need to convert it // to an object URL first const objectURL = URL.createObjectURL(imageData.blob) console.log(`objectURL: ${objectURL}`) itms.forEach((itm) => { if (itm.tagName.toLowerCase() === 'img') { itm.setAttribute('src', objectURL); } else { itm.style.backgroundImage = `url(${objectURL})`; } setTimeout(() => { itm.classList.remove(this.gcn('opacity-0')); }, 250) }) // Let's remove the original `data-src` attribute to make sure we don't // accidentally pass this image to the worker again in the future //imageElement.removeAttribute('data-mcp-lazy-load') }) imgElements.forEach(imageElement => { const imageURL = imageElement.getAttribute('data-mcp-lazy-load') ImageLoaderWorker.postMessage(imageURL) }) } attachHandlers = () => { //console.log('attachHandlers', typeof this.attachSingleHandler, this.id, this) //this.initImageLoaderWorker(); //setTimeout(this.lazyLoadImages, 1); this.initAnalyticsConversions(); //this.setLightMode(true) //this.adjustLayout(); setTimeout(this.adjustLayout, 150) this.initStaging(); //this.initSplide(); setTimeout(this.initSplide, 150) this.updateContactInfo(); /* Dynamic loading of content here can create FOUC. Use with caution. this.loadStyles('/css/radix.css', 'mcp-radix') this.loadStyles(() => { return this.baseSiteStyles; }, 'mcp-site-styles', false) this.loadStyles(()=>{ return ` body { background-color: green !important; } ` }, 'mcp-style-test', false) this.loadScript(this.loadDarkMode, 'mcp-dark-mode'); */ this.attachSingleHandler('.mega-menu-button', 'click', this.megaMenuClickHandler); this.attachSingleHandler('#mega-menu-full-button', 'click', this.mobileMenuClickHandler); this.attachSingleHandler([document.body], 'click', this.documentClickHandler); this.attachSingleHandler([window], 'resize', this.adjustLayout); this.attachSingleHandler('#dark-mode-toggle', 'click', this.toggleDarkMode); this.attachSingleHandler('#top-button', 'click', () => { setTimeout(() => { window.scrollTo({ top: 0, behavior: 'smooth' }); }, 100) }) this.attachSingleHandler('#mega-menu-full-close', 'click', () => { this.hideMegaMenus(); this.hideMegaMenuFull(); }) //this.checkDarkMode() // Window scroll this.attachSingleHandler([window], 'scroll', () => { this.calculateScrollToTopButton(); this.calculatePromotionPopup(); //this.calculatePatternOnMobileMenu(); }); /* setTimeout(() => { //console.log('mcp-top-banner',document.getElementById('mcp-top-banner')) document.getElementById('mcp-top-banner')?.classList?.remove('mcp-collapsed'); }, 1000) */ }; id = 0; count = 0; documentClickHandler = (evt) => { //console.log('documentClickHandler') const target = evt.target; let isClickInside = true; const fullButton = document.getElementById('mega-menu-full-button') const full = document.getElementById('mega-menu-full') isClickInside = Boolean(full?.contains(target)) const isMenuItem = Boolean(target?.classList?.contains('mcp-menu-item')) || Boolean(target?.parentElement?.classList.contains('mcp-menu-item')) if (Boolean(fullButton?.contains(target))) { // Let the mobile menu do its thing. return; } if (!isClickInside || isMenuItem) { this.hideMegaMenus(); this.hideMegaMenuFull(); } }; toggleMegaMenuFull = () => { const bod = document.querySelector('body'); const full = document.querySelector('#mega-menu-full') const blur = document.querySelector('#background-blur') const nav = document.querySelector('nav') if (!full?.classList.contains(this.gcn('hidden'))) { // Hide menu console.log('toggleMegaMenuFull hide: this.scrollTop', this.scrollTop) bod?.classList.remove('mcp-mobile-menu'); window.scrollTo({ top: this.scrollTop, behavior: 'instant' }); full?.classList.add(this.gcn('hidden')) full?.classList.remove(this.gcn('!top-5')) blur?.classList.add(this.gcn('hidden')) nav?.classList.add(this.gcn('fixed')) // Unable to set z-index unless we remove the 'relative'. Need relative for background hero image. } else { // Show menu bod?.classList.add('mcp-mobile-menu') this.scrollTop = window.pageYOffset || 0; window.scrollTo({ top: 0, behavior: 'instant' }); full?.classList.add(this.gcn('opacity-0')) full?.classList.remove(this.gcn('!top-5')) full?.classList.remove(this.gcn('hidden')) blur?.classList.remove(this.gcn('hidden')) nav?.classList.remove(this.gcn('fixed')) setTimeout(() => { full?.classList.remove(this.gcn('opacity-0')) full?.classList.add(this.gcn('!top-5')) }, 50) } }; mobileMenuClickHandler = () => { //console.log('mobileMenuClickHandler') this.hideMegaMenus(); this.toggleMegaMenuFull(); }; hideMegaMenus = () => { const list = document.querySelectorAll('.mega-menu'); list.forEach((node) => { node.classList.add(this.gcn('hidden')) node.classList.add(this.gcn('opacity-0')) }) }; hideMegaMenuFull = () => { const bod = document.querySelector('body'); const full = document.querySelector('#mega-menu-full') const blur = document.querySelector('#background-blur') const nav = document.querySelector('nav') full?.classList.add(this.gcn('hidden')) blur?.classList.add(this.gcn('hidden')) nav?.classList.add(this.gcn('fixed')) bod?.classList.remove('mcp-mobile-menu'); window.scrollTo({ top: this.scrollTop, behavior: 'instant' }); }; megaMenuClickHandler = (evt) => { const currentTarget = evt.currentTarget; const idSelector = `${currentTarget?.getAttribute('id')}-menu`; const menu = document.getElementById(idSelector); if (!menu) { return; } if (!menu.classList.contains(this.gcn('hidden'))) { this.hideMegaMenus(); return; } // Hide any open menus this.hideMegaMenus(); // Show the associated menu. const mediaTest = document.getElementById('media-test'); menu.classList.remove(this.gcn('hidden')); setTimeout(() => { menu.classList.remove(this.gcn('opacity-0')) if (mediaTest.offsetParent !== null) { // https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom // Only perform scroll into view on mobile menu currentTarget.scrollIntoView({behavior: 'smooth'}); } }, 25) }; submitHandler = async (evt) => { //console.log('Submit', evt) evt.preventDefault(); const data = []; const fd = new FormData(event.target); const subj = document.getElementById('form-name')?.value || 'Form Submission'; const subject = `${subj} (${window.location}) (${Date.now()})`; const email = document.getElementById('email')?.value || '(none provided)'; const fields = document.querySelectorAll('.mcp-data-field'); if (fields) { fields.forEach((field) => { data.push(` ${field.getAttribute('name') || ''}: ${field?.checked ? 'checked' : field?.value || ''} `) }) } fd.set('subject', subject) fd.set('email', email) fd.set('form-name', 'Form Submit') fd.set('data', '---------\n' + data.join('')) const resp = await fetch('/api/submit', { method: 'POST', headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: new URLSearchParams(fd).toString(), }); if (!resp.ok) { this.showToast('toast-failure') return; } this.showToast('toast-success') document.getElementById('reset')?.click(); }; showToast = (id='toast-success') => { const toast = document.getElementById(id); const bg = document.getElementById('toast-bg'); if (toast) { bg.classList.remove(this.gcn('hidden')); toast.classList.remove(this.gcn('hidden')); setTimeout(() => { bg.classList.add(this.gcn('hidden')); toast.classList.add(this.gcn('hidden')); }, 3000) } }; /** * BEGIN: Shared blog formatting */ catTagStyles = 'text-xs no-underline m-1 py-1 px-2 font-medium shadow-md shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur'; catTagStylesMdRounded = `${this.catTagStyles} rounded-md ${this.colorHoverTextClass}`; blogPostH1 = (title='') => { return `

${title}

` }; blogPostPublished = (date='') => { return ` Published: ${(new Intl.DateTimeFormat("en", {hour12: true, year: "numeric", month: "short", day: "numeric",})).format(new Date(date))} `; } blogPostUpdated = (date='') => { return ` Updated: ${(new Intl.DateTimeFormat("en", {hour12: true, year: "numeric", month: "short", day: "numeric",})).format(new Date(date))} `; } blogPostCategories = (categories='') => { return `

${categories}

`; } /** * END: Shared blog formatting */ /** * BEGIN: Templates */ // headContentPersist is loaded once upon initial navigation. Use this method to avoid FOUC. headContentPersist = (meta) => { // Do not reload in hosted mode. const content = this.isHosted() ? `` : ` ${this.baseFontDefinition} ${this.baseSiteStyles} `; return ` ${content} `; }; // headContent is hydrated. It is updated with every edit. headContent = () => { const analytics = ` window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'AW-351668051'); gtag('config', 'G-8Y61YPS002'); `; // This content should exist in headContentPersist as well. Duplicated for dynamic editing. const content = this.isHosted() ? ` ${this.baseFontDefinition} ${this.baseSiteStyles} ` : ``; return ` ${this.metaTags} ${this.feedDefinition} ${this.favIcon} ${content} ${analytics} ` }; isHosted = () => { try { return (window !== window.top) } catch(err) { return false; } }; isMobile = () => { const mediaTest = document.getElementById('media-test-mobile'); return (mediaTest.offsetParent !== null); }; isSmall = () => { const mediaTest = document.getElementById('media-test-sm'); return (mediaTest.offsetParent !== null); }; isMedium = () => { const mediaTest = document.getElementById('media-test-md'); return (mediaTest.offsetParent !== null); }; isLarge = () => { const mediaTest = document.getElementById('media-test-lg'); return (mediaTest.offsetParent !== null); }; isXLarge = () => { const mediaTest = document.getElementById('media-test-xl'); return (mediaTest.offsetParent !== null); }; is2XLarge = () => { const mediaTest = document.getElementById('media-test-2xl'); return (mediaTest.offsetParent !== null); }; mainTemplate = (content='') => { const tawk = ` ` || this.isHosted() ? ' ' : ` var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date(); (function(){ var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0]; s1.async=true; s1.src='https://embed.tawk.to/625b7da8b0d10b6f3e6dec84/1g0qm5mgc'; s1.charset='UTF-8'; s1.setAttribute('crossorigin','*'); s0.parentNode.insertBefore(s1,s0); })(); window.Tawk_API = window.Tawk_API || {}; window.Tawk_API.onLoad = function(){ window.Tawk_API.hideWidget(); }; `; return `

${this.topBanner}

${content}

${tawk} ` }; siteHeader = () => { return `

` }; siteMenuItems = () => { const items = []; this.navigation.forEach((item) => { items.push(`

${item.navigation ? ` ` : ` ` }

`) }); return items.join('') }; siteMegaMenuItems = (items=[]) => { const html = []; items.forEach((itm) => { html.push(`

${itm.value}

${itm.text} `); }); return html.join('') }; siteFooter = () => { return ` mobile sm md lg xl 2xl ` }; backToBlog = () => { return `

Back to Blog

` } /** * END: Templates */ /** * BEGIN: Library */ lazyLoadImages = () => { //console.log('lazyLoadImage') const col = Array.from(document.querySelectorAll('[data-mcp-lazy-load]')); col.forEach((itm) => { const url = itm.getAttribute('data-mcp-lazy-load'); let img = new Image(); img.onload = () => { //console.log(`Loading ${itm.tagName.toLowerCase()}: ${url}`) if (itm.tagName.toLowerCase() === 'img') { itm.src = url; } else { itm.style.backgroundImage = `url(${url})`; } setTimeout(() => { itm.classList.remove(this.gcn('opacity-0')); }, 250) } img.error = () => { console.error(`Unable to load: ${url}`) } img.src = url; }) } getLocalStorage = () => { try { return window.localStorage; } catch(err) { return {}; } }; toggleDarkMode = () => { if (this.getLocalStorage().theme !== 'light') { this.setLightMode(true) } else { this.setDarkMode(true) } // Close the menus this.hideMegaMenus(); this.hideMegaMenuFull(); }; setLightMode = (persist) => { //console.log('set LIGHT mode') document.documentElement.classList.remove('dark'); if (persist) { this.getLocalStorage().theme = 'light'; this.setCookie('theme', 'light') } }; setDarkMode = (persist) => { //console.log('set DARK mode') document.documentElement.classList.add('dark'); if (persist) { this.getLocalStorage().theme = 'dark'; this.setCookie('theme', 'dark') } }; checkDarkMode = () => { const params = new URL(window.location.href); const mode = params.searchParams.get('mode'); if (mode === 'light') { this.setLightMode(true); } else if (mode === 'dark') { this.setDarkMode(true); } return mode; }; loadDarkMode = () => { // This function is utilized outside the context of `this`. Access to `this` will be `window` let mcpMode; try { mcpMode = window.localStorage.theme; } catch(err) { mcpMode = null; } if (mcpMode === 'dark') { //console.log('loadDarkMode: set DARK mode') document.documentElement.classList.add('dark'); } else if (mcpMode === 'light') { //console.log('loadDarkMode: set LIGHT mode') document.documentElement.classList.remove('dark'); } }; setCookie = (name = '', value, httpOnly = true, days = 7, path = '/') => { const expires = new Date(Date.now() + days * 864e5).toUTCString() document.cookie = name + '=' + encodeURIComponent(value) + '; expires=' + expires + '; path=' + path }; getCookie = (name = '') => { return document.cookie.split('; ').reduce((r, v) => { const parts = v.split('=') return parts[0] === name ? decodeURIComponent(parts[1]) : r }, '') }; deleteCookie = (name = '', path = '/') => { setCookie(name, '', -1, path) }; gcn = (nme='', prefix='mcp-') => { let dev = false; if (dev) { return nme } const elem = document.getElementById(`mcp-${nme}`); if (!elem) { console.warn('Unable to locate class value:', nme) return nme; } return elem.classList.value }; getRandom = (min=0, max=9999) => { min = Math.ceil(0); max = Math.floor(9999); return `${Math.floor(Math.random() * (max - min + 1)) + min}${Date.now()}`; }; attachSingleHandler = (elms='', eventName='', handler=()=>{}) => { //console.log('attachSingleHandler elms:', elms, 'eventName', eventName, this.id) elms = this.clearHandlers(elms, eventName) if (elms && typeof elms === 'string') { // This may be a selector elms = Array.from(document.querySelectorAll(elms)) } if (Array.isArray(elms)) { //console.log(typeof elms, window.location.href) elms.forEach((elm) => { const refid = eventName + '-' + this.getRandom(); this.setHandlerReference(refid, handler) elm.addEventListener(eventName, handler) if (elm.setAttribute) { elm.setAttribute(`data-${eventName}-ref`, refid) } else { document.body.setAttribute(`data-${eventName}-ref`, refid) } }); } return elms; }; clearHandlers = (elms='', eventName='') => { //console.log('clearHandlers', elms, eventName, this.id) if (elms && typeof elms === 'string') { // This may be a selector elms = Array.from(document.querySelectorAll(elms)) } if (Array.isArray(elms)) { elms.forEach((elm) => { const dataAttr = `data-${eventName}-ref`; let refid; if (elm.getAttribute) { refid = elm.getAttribute(dataAttr) || '' } else { refid = document.body.getAttribute(dataAttr) || '' } let handler = this.getHandlerFromId(refid) elm.removeEventListener(eventName, handler) this.removeHandlerReference(refid); //console.log(refid, handler) }); } return elms; }; removeHandlerReference = (refid='') => { if (window.mcp_handlers && window.mcp_handlers[refid]) { window.mcp_handlers[refid] = null; delete window.mcp_handlers[refid]; return true; } return false; }; getHandlerFromId = (refid='', remove=false) => { let ret = null; if (window.mcp_handlers && window.mcp_handlers[refid]) { ret = window.mcp_handlers[refid]; if (remove) { this.removeHandlerReference(refid); } } return ret; }; setHandlerReference = (refid='', handler=()=>{}) => { window.mcp_handlers = window.mcp_handlers || {}; if (refid && handler) { window.mcp_handlers[refid] = handler } }; initParalax = (emblaApi) => { const TWEEN_FACTOR = 1.2 const calculateTweenValuesParallax = (emblaApi) => { const engine = emblaApi.internalEngine() const scrollProgress = emblaApi.scrollProgress() return emblaApi.scrollSnapList().map((scrollSnap, index) => { if (!emblaApi.slidesInView().includes(index)) return 0 let diffToTarget = scrollSnap - scrollProgress if (engine.options.loop) { engine.slideLooper.loopPoints.forEach((loopItem) => { const target = loopItem.target() if (index === loopItem.index && target !== 0) { const sign = Math.sign(target) if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress) if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress) } }) } return diffToTarget * (-1 / TWEEN_FACTOR) * 100 }) } const setupTweenParallax = (emblaApi) => { const tweenNodes = emblaApi .slideNodes() .map((slideNode) => slideNode.querySelector('.embla__parallax__layer')) const applyTweenParallax = () => { const tweenValues = calculateTweenValuesParallax(emblaApi) tweenValues.forEach((tweenValue, index) => { tweenNodes[index].style.transform = `translateX(${tweenValue}%` }) } const removeTweenParallax = () => { tweenNodes.forEach((slide) => slide.removeAttribute('style')) } return { applyTweenParallax, removeTweenParallax } } return setupTweenParallax(emblaApi) }; // Parameter `content` is either a path to a css file or a function. loadStyles = async (content='', id = Date.now(), skipReload=true, cb = ()=>{}) => { return new Promise((resolve, reject) => { const isFunction = typeof content === 'function' const oldStyles = document.getElementById(id); if (skipReload && oldStyles) { //console.log('Already loaded:', content) resolve(null) return; } if (oldStyles) { console.log('Removing', id) oldStyles.parentNode.removeChild(oldStyles); } const style = isFunction ? document.createElement(`sty`+`le`) : document.createElement(`li`+`nk`); style.onload = (...vargs) => { //console.log('link onload', ...vargs) cb(...vargs) resolve(...vargs) }; style.id = id; if (isFunction) { // Function must return a string style.appendChild(document.createTextNode(content())) } else { style.rel = 'stylesheet' style.href = `${content}` //?cb=${Date.now()} } document.getElementsByTagName('head')[0].appendChild(style) }); }; // Parameter `content` is either a path to a script file or a function. loadScript = async (content = '', id = Date.now(), skipReload=true, cb = ()=>{}) => { return new Promise((resolve, reject) => { const oldScript = document.getElementById(id); if (skipReload && oldScript) { //console.log('Already loaded:', content) resolve(null) return; } if (oldScript) { console.log('Removing', id) oldScript.parentNode.removeChild(oldScript); } const script = document.createElement(`scr`+`ipt`); script.onload = (...vargs) => { //console.log('onload', ...vargs) cb(...vargs) resolve(...vargs) }; script.id = id; script.type = 'text/javascript' if (typeof content === 'function') { script.appendChild(document.createTextNode(`(${content.toString()})()`)) } else { script.src = `${content}` //?cb=${Date.now()} } document.getElementsByTagName('head')[0].appendChild(script) }); }; generateColorVar = (color, num) => { return `var(--${color}-${num})` }; generateBackgroundColorClass = (prop = '') => { return `bg-[color:${prop}]` } gbcc = this.generateBackgroundColorClass; generateTextColorClass = (prop = '') => { return `text-[color:${prop}]` } gtcc = this.generateTextColorClass; cp = {}; generateColorPalette = (color = '', prefix = '' ) => { if (!color) { return; } // Color palette object prefix = prefix || color; // 1 = App background this.cp[`${prefix}_AppBackground`] = this.generateColorVar(color, 1); this.cp[`${prefix}_AppBackgroundBackgroundClass`] = this.gbcc(this.cp[`${prefix}_AppBackground`]); // 2 = Subtle background this.cp[`${prefix}_SubtleBackground`] = this.generateColorVar(color, 2); this.cp[`${prefix}_SubtleBackgroundClass`] = this.gbcc(this.cp[`${prefix}_SubtleBackground`]); // 3 = UI element background this.cp[`${prefix}_UiElementBackground`] = this.generateColorVar(color, 3); this.cp[`${prefix}_UiElementBackgroundClass`] = this.gbcc(this.cp[`${prefix}_UiElementBackground`]); // 4 = Hovered UI element background this.cp[`${prefix}_HoveredUiElementBackground`] = this.generateColorVar(color, 4); this.cp[`${prefix}_HoveredUiElementBackgroundClass`] = this.gbcc(this.cp[`${prefix}_HoveredUiElementBackground`]); // 5 = Active / Selected UI element background this.cp[`${prefix}_ActiveUiElementBackground`] = this.generateColorVar(color, 5); this.cp[`${prefix}_ActiveUiElementBackgroundClass`] = this.gbcc(this.cp[`${prefix}_ActiveUiElementBackground`]); // 6 = Subtle borders and separators this.cp[`${prefix}_SubtleBorderAndSeparators`] = this.generateColorVar(color, 6); this.cp[`${prefix}_SubtleBorderAndSeparatorsClass`] = `border-[color:${this.cp[`${prefix}_SubtleBorderAndSeparators`]}]`; // 7 = UI element border and focus rings this.cp[`${prefix}_BorderAndFocusRings`] = this.generateColorVar(color, 7); this.cp[`${prefix}_BorderAndFocusRingsClass`] = `border-[color:${this.cp[`${prefix}_BorderAndFocusRings`]}]`; // 8 = Hovered UI element border this.cp[`${prefix}_HoveredUiElementBorder`] = this.generateColorVar(color, 8); this.cp[`${prefix}_HoveredUiElementBorderClass`] = `border-[color:${this.cp[`${prefix}_HoveredUiElementBorder`]}]`; // 9 = Solid backgrounds this.cp[`${prefix}_SolidBackgrounds`] = this.generateColorVar(color, 9); this.cp[`${prefix}_SolidBackgroundsClass`] = this.gbcc(this.cp[`${prefix}_SolidBackgrounds`]); // 10 = Hovered solid backgrounds this.cp[`${prefix}_HoveredSolidBackgrounds`] = this.generateColorVar(color, 10); this.cp[`${prefix}_HoveredSolidBackgroundsClass`] = this.gbcc(this.cp[`${prefix}_HoveredSolidBackgrounds`]); // 11 = Low-contrast text this.cp[`${prefix}_LowContrastText`] = this.generateColorVar(color, 11); this.cp[`${prefix}_LowContrastTextClass`] = this.gtcc(this.cp[`${prefix}_LowContrastText`]); // 12 = High-contrast text // Steps 11 and 12 are designed for low-contrast text and high-contrast text respectively. // Depending on the vibe you want, you can use your accent scale or your gray scale. this.cp[`${prefix}_HighContrastText`] = this.generateColorVar(color, 12); this.cp[`${prefix}_HighContrastTextClass`] = this.gtcc(this.cp[`${prefix}_HighContrastText`]); // Hover text this.cp[`${prefix}_HoverText`] = this.generateColorVar(color, 2); this.cp[`${prefix}_HoverTextClass`] = `hover:${this.gtcc(this.cp[`${prefix}_HoverText`])}]` }; /** * END: Library */ } return new Ctxt(meta, site) }

Bell View Apartments

3 Months Free Rent with a 27 month lease

2 Months Free Rent with a 16 month lease

1 Month Free Rent with a 12 month lease

3 Months Free Rent
with a 27 month lease

2 Months Free Rent
with a 16 month lease

1 Month Free Rent
with a 12 month lease