+ {{ content }}
+
- Bangkok.rb
-
-
- -
- {% for social_platform in site.data.social_platforms %}
-
-
-
- {% capture socialIcon %}{{ social_platform.icon | prepend: 'icon-' }}{% endcapture %}
- {% capture className %}{{ social_platform.icon | prepend: 'list-social-plaftorm__icon--' | prepend: ' ' | prepend: 'list-social-plaftorm__icon' | append: ' ' | append: 'icon--xs' }}{% endcapture %}
- {% include icon.svg icon=socialIcon class=className %}
- {{ social_platform.name }}
+
+ diff --git a/_includes/icon-sprite.svg b/_includes/icon-sprite.svg index 802b70d..bfde4b7 100755 --- a/_includes/icon-sprite.svg +++ b/_includes/icon-sprite.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/_includes/list-keynote-speaker.html b/_includes/list-keynote-speaker.html new file mode 100644 index 0000000..427abde --- /dev/null +++ b/_includes/list-keynote-speaker.html @@ -0,0 +1,16 @@ +++ + RubyConf TH {π} - - {% endfor %} - + ++ + + + ++++ September 6-7, 2019 +++ Venue: Pullman Bangkok King Power ++-
+ {% for keynote_speaker in site.data.speakers.keynote %}
+
-
+
+ ++
+ {{ keynote_speaker.first_name }} {{ keynote_speaker.last_name }} + + {{ keynote_speaker.twitter_handle }} ++ {{ keynote_speaker.bio }} +
+
+ {% endfor %}
+
+ {% for sponsor_level in site.data.sponsors %} ++{% endcapture %} +{% comment %} Workaround to prevent Markdown to interpret the content as a code snippet {% endcomment %} +{{ content | replace: ' ', ''}} diff --git a/_includes/map-venue.html b/_includes/map-venue.html new file mode 100644 index 0000000..d53ddb8 --- /dev/null +++ b/_includes/map-venue.html @@ -0,0 +1,19 @@ +{% capture content %} +++ {% endfor %} +{{ sponsor_level.title }}
+-
+ {% for company in sponsor_level.companies %}
+
-
+
+
+ +
+ {% endfor %}
+
++{% endcapture %} +{% comment %} Workaround to prevent Markdown to interpret the content as a code snippet {% endcomment %} +{{ content | replace: ' ', ''}} diff --git a/_js/application.js b/_js/application.js index e69de29..f103b8a 100755 --- a/_js/application.js +++ b/_js/application.js @@ -0,0 +1 @@ +import './initializers/'; diff --git a/_js/components/AppNavigation/index.js b/_js/components/AppNavigation/index.js new file mode 100644 index 0000000..e794718 --- /dev/null +++ b/_js/components/AppNavigation/index.js @@ -0,0 +1,222 @@ +import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'; +import { ScrollSpy } from 'Vendor/bootstrap/'; + +// Default component selector +export const DEFAULT_SELECTOR = '.app-navigation'; + +const SELECTOR = { + menu: '.app-navigation__menu', + menuLink: '.app-navigation__link', + menuPane: '.app-navigation__pane', + toggleButton: 'button.app-navigation__btn-toggle-menu' +}; + +const CLASS_NAME = { + unscrollable: 'layout-website--unscrollable' +}; + +const STATES = { + show: 'app-navigation--menu-open', + sticky: 'app-navigation--sticky' +}; + +// Scroll position to trigger animation +const NAVIGATION_PANE_ANIMATION_THRESHOLD = 30; + +class AppNavigation { + /** + * Initializer + * + * @param {Element} elementRef - HTML node to mount the component. + * @param {Object} options - Configuration option for the component. + * */ + constructor(elementRef, options = {}) { + this.elementRef = elementRef; + + this.menu = this.elementRef.querySelector(SELECTOR.menu); + this.menuPane = this.elementRef.querySelector(SELECTOR.menuPane); + this.menuLinks = this.elementRef.querySelectorAll(SELECTOR.menuLink); + this.toggleButton = this.elementRef.querySelector(SELECTOR.toggleButton); + + this.scrollContent = options.scrollContent || undefined; + + this._bind(); + this._addEventListener(); + this._setup(); + } + + // Event listeners + + /** + * Open/close the navigation pane on mobile screen. + * */ + onToggleNavigationPane() { + this._togglePageScrollability(); + this._toggleNavigationPane(); + } + + /** + * Scroll handler of navLinks. + * Finds the closest link clicked. + * 1) If the href is a hash url, enables smooth scroll. + * 2) Else allows the default browser action. + * + * @param {Event} event - scroll event on navLinks + * */ + onClickMenuLink(event) { + let closestLink = event.target.closest('a'); + let targetHref = closestLink.hash; + + if ((closestLink.pathname !== window.location.pathname) || (targetHref.indexOf('#') === -1)) { return; } + + event.preventDefault(); + + let scrollToEl = document.querySelector(targetHref); + let verticalScroll = scrollToEl.getBoundingClientRect().y; + + // Close the opened mobile navigation + this._isMobileNavigation() && this._manuallyToggleNavigationPane(); + + // Scroll to the selected section + window.scrollBy({ + top: verticalScroll, + left: 0, + behavior: 'smooth' + }); + } + + /** + * Animate the navigation elements on scroll. + * + * @param {Event} _event - Scroll event + * */ + onScroll(_event) { + this._updatePanePosition(); + } + + /** + * Reset the navigation elements on page resize to avoid any conflicting rules. + * + * @param {Event} _event - Resize event + * */ + onResize(_event) { + // Scroll back to the top of the page + window.scrollTo(0, 0); + + this._resetPanePosition(); + this._setMenuPaneRect(); + } + + // Private + + /** + * Bind all functions to the local instance scope. + * */ + _bind() { + this.onToggleNavigationPane = this.onToggleNavigationPane.bind(this); + this.onClickMenuLink = this.onClickMenuLink.bind(this); + this.onScroll = this.onScroll.bind(this); + this.onResize = this.onResize.bind(this); + } + + /** + * Adds all the required event listeners. + * */ + _addEventListener() { + this.toggleButton.addEventListener('click', this.onToggleNavigationPane); + + this.menuLinks.forEach(menuLink => menuLink.addEventListener('click', this.onClickMenuLink)); + + window.addEventListener('scroll', this.onScroll); + window.addEventListener('resize', this.onResize); + } + + /** + * Component bootstrapping actions. + * */ + _setup() { + this._setMenuPaneRect(); + this._setupScrollspy(); + } + + /** + * Removes or restore the scroll of the page depending on the state of the navigation page. + * */ + _togglePageScrollability() { + const pageContainer = document.querySelector('html'); + + pageContainer.classList.toggle(CLASS_NAME.unscrollable); + + if (pageContainer.classList.contains(CLASS_NAME.unscrollable)) { + disableBodyScroll(this.elementRef); + } else { + enableBodyScroll(this.elementRef); + } + } + + /** + * Add or remove the show class from navigation page. + * */ + _toggleNavigationPane() { + this.elementRef.classList.toggle(STATES.show); + } + + /** + * Manually trigger the toggle off the navigation pane. + * */ + _manuallyToggleNavigationPane() { + this.toggleButton.dispatchEvent(new MouseEvent('click')); + } + + /** + * Change the position property of the navigation based on the scroll position. + * */ + _updatePanePosition() { + if (this._isMobileNavigation()) { + return; + } + + if (window.pageYOffset >= NAVIGATION_PANE_ANIMATION_THRESHOLD) { + this.elementRef.classList.add(STATES.sticky); + this.menuPane.style.left = `${this.menuPaneRect.left}px`; + } else { + this._resetPanePosition(); + } + } + + /** + * Store dimensions and positioning of the navigation pane. + * */ + _setMenuPaneRect() { + this.menuPaneRect = this.menuPane.getBoundingClientRect(); + } + + _resetPanePosition() { + this.elementRef.classList.remove(STATES.sticky); + this.menuPane.style.left = null; + } + + /** + * Highlight current section on scroll. + * */ + _setupScrollspy() { + if (!this.scrollContent) { + return; + } + + new ScrollSpy(document.querySelector(this.scrollContent), { + target: this.menu, + // Top offset position of the sticky menu + offset: 220 + }); + } + + /** + * Check if the button to toggle the mobile menu is visible. + * */ + _isMobileNavigation() { + return this.toggleButton.offsetWidth > 0 && this.toggleButton.offsetHeight > 0; + } +} + +export default AppNavigation; diff --git a/_js/components/Map/index.js b/_js/components/Map/index.js new file mode 100644 index 0000000..34c93ad --- /dev/null +++ b/_js/components/Map/index.js @@ -0,0 +1,147 @@ +// Default map selector +export const DEFAULT_SELECTOR = '.map'; + +export const DEFAULT_OPTIONS = { + zoom: 14, + size: '640x640', + scale: 2, + maptype: 'roadmap', + key: process.env.GOOGLE_MAP_API_KEY +}; + +class Map { + /** + * Initializer + * + * @param {Element} elementRef - HTML node to mount the Google map. + * @param {Object} options - Configuration options. + * */ + constructor(elementRef, options = {}) { + this.elementRef = elementRef; + this.options = Object.assign(DEFAULT_OPTIONS, options); + + this.baseStaticMapUrl = 'https://maps.googleapis.com/maps/api/staticmap'; + this.baseSearchMapUrl = 'https://maps.google.com/'; + this.center = null; + + this._bind(); + this._addEventListeners(); + this._setup(); + } + + /** + * Set the map as a background image (responsive behaviour) + * */ + render() { + this.elementRef.setAttribute('style', `background-image: url(${this._requestUrl()})`); + } + + // Event listeners + + /** + * Redirect to a dynamic Google Map + * + * @param {Event} _event - click event + * */ + onClick(_event) { + event.preventDefault(); + + window.open(`${this.baseSearchMapUrl}?q=${encodeURIComponent(this.marker)}`, '_blank'); + } + + // Private + + /** + * Bind all functions to the local instance scope. + * */ + _bind() { + this.onClick = this.onClick.bind(this); + } + + /** + * Set-up Google map with markers. + * */ + _setup() { + this._retrieveCenter(); + this._retrieveMarker(); + } + + /** + * Adds all the required event listeners. + * */ + _addEventListeners() { + this.elementRef.addEventListener('click', this.onClick); + } + + /** + * Retrieve the map center parameters from data attributes + * */ + _retrieveCenter() { + const { geolocation } = this.elementRef.dataset; + + if (!geolocation) { + throw Error('Missing data-geolocation attribute'); + } + + if (!this._isValidGeolocation(geolocation)) { + throw Error('Invalid geolocation format. Verify that it complies with this format: data-gelocation="lat,lng"'); + } + + this.center = geolocation; + } + + /** + * Retrieve marker parameters from data attributes + * */ + _retrieveMarker() { + const { marker } = this.elementRef.dataset; + + this.marker = marker; + } + + /** + * Validate if a string is a valid geolocation + * + * @param {String} geolocation - latitude and longitude separated by a comma + * @return {Boolean} whether the passed in string is a valid gelocation + * */ + _isValidGeolocation(geolocation) { + if (geolocation === '') { + return false; + } + + const geolocationParts = geolocation.split(','); + + return geolocationParts.length === 2 && + geolocationParts.every(geolocationPart => !isNaN(geolocationPart)); + } + + /** + * Generate the request URL with the required parameters + * + * @return {String} - complete URL to fetch a static map + * */ + _requestUrl() { + let urlParams = this._requestParams().join('&'); + + return [this.baseStaticMapUrl, urlParams].join('?'); + } + + /** + * List of requests parameters to fetch a custom map + * + * @return {Array} - URI encoded list of required map params + * */ + _requestParams() { + let requestParams = Object.assign(this.options, { + center: this.center, + markers: `color:red|${this.center}` + }); + + return Object.keys(requestParams).map(key => { + return `${encodeURIComponent(key)}=${encodeURIComponent(requestParams[key])}`; + }); + } +} + +export default Map; diff --git a/_js/initializers/index.js b/_js/initializers/index.js new file mode 100644 index 0000000..1046d17 --- /dev/null +++ b/_js/initializers/index.js @@ -0,0 +1,3 @@ +// Components +import './map'; +import './navigation'; diff --git a/_js/initializers/map.js b/_js/initializers/map.js new file mode 100644 index 0000000..3ab43c0 --- /dev/null +++ b/_js/initializers/map.js @@ -0,0 +1,6 @@ +import Map, { DEFAULT_SELECTOR } from '../components/Map/'; + +document.querySelectorAll(DEFAULT_SELECTOR).forEach(mapElement => { + const map = new Map(mapElement); + map.render(); +}); diff --git a/_js/initializers/navigation.js b/_js/initializers/navigation.js new file mode 100644 index 0000000..f65e9ae --- /dev/null +++ b/_js/initializers/navigation.js @@ -0,0 +1,5 @@ +import AppNavigation, { DEFAULT_SELECTOR } from '../components/AppNavigation'; + +const appNavigation = document.querySelector(DEFAULT_SELECTOR); + +appNavigation && new AppNavigation(appNavigation, { scrollContent: '.app-content' }); diff --git a/_js/polyfills/smoothscroll.js b/_js/polyfills/smoothscroll.js new file mode 100644 index 0000000..47b2c9a --- /dev/null +++ b/_js/polyfills/smoothscroll.js @@ -0,0 +1,9 @@ +import SmoothScroll from 'smoothscroll-polyfill'; + +/** + * [Scroll Behavior specification](https://drafts.csswg.org/cssom-view/#dom-window-scrollby) has been introduced as an + * extension of the Window interface to allow for the developer to opt in to native smooth scrolling. + * + * Add polyfill for the specification. + * */ +SmoothScroll.polyfill(); diff --git a/_layouts/default.html b/_layouts/default.html index 8f958fc..5d0e4dd 100755 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -16,9 +16,14 @@ {% include header.html %}+ {% comment %}load map for each locations{% endcomment %} +++ + Pullman Bangkok King Power + 8-2 Rang Nam Alley + Khwaeng Thanon Phaya Thai, Khet Ratchathewi, + Bangkok + 10400 + + Get Location ++- {{ content }} + {% include footer.html %} + + + -
+