Merge pull request #53 from bangkokrb/release/0.3.1

Release - 0.3.1

_config.yml

@@ -17,7 +17,7 @@ sass:
 kramdown:
   # All config options: https://jekyllrb.com/docs/configuration/markdown/
   input: GFM
-  parse_block_html: true
+  parse_block_html: false
   auto_ids: false
 
 collections:

_includes/header.html

@@ -10,7 +10,7 @@
           September <strong>6-7, 2019</strong>
         </div>
         <div class="app-header__venue">
-          Venue: <strong>Pullman Bangkok King Power</strong>
+          <a href="#venue">Venue: <strong>Pullman Bangkok King Power</strong></a>
         </div>
       </div>
     </div>

_includes/list-sponsor.html

@@ -1,4 +1,3 @@
-{% capture content %}
 <div class="list-sponsor">
   {% for sponsor_level in site.data.sponsors %}
   <div class="list-sponsor__level">
@@ -15,6 +14,3 @@ <h5 class="list-sponsor__title">{{ sponsor_level.title }}</h5>
   </div>
   {% endfor %}
 </div>
-{% endcapture %}
-{% comment %} Workaround to prevent Markdown to interpret the content as a code snippet {% endcomment %}
-{{ content | replace: '    ', ''}}

_includes/map-venue.html

@@ -1,4 +1,3 @@
-{% capture content %}
 <div class="map-venue">
   <div class="map map-venue__map" data-geolocation="13.75893,100.5352453" data-marker="Pullman Bangkok King Power">
     {% comment %}load map for each locations{% endcomment %}
@@ -11,9 +10,6 @@
       <span class="locality">Bangkok</span>
       <span class="postal-code">10400</span>
     </address>
-    <a href="https://goo.gl/maps/vnLpSxt1zzw" target="_blank" class="map-venue__btn btn btn--primary btn--lg">Get Location</a>
+    <a href="https://goo.gl/maps/vnLpSxt1zzw" target="_blank" class="map-venue__btn btn btn--primary btn--lg">View Map</a>
   </div>
 </div>
-{% endcapture %}
-{% comment %} Workaround to prevent Markdown to interpret the content as a code snippet {% endcomment %}
-{{ content | replace: '    ', ''}}

_js/application.js

@@ -1 +1,2 @@
 import './initializers/';
+import './screens/';

_js/components/AppNavigation/index.js

@@ -61,7 +61,7 @@ class AppNavigation {
    * 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
+   * @param {Event} event - click event on navLinks
    * */
   onClickMenuLink(event) {
     let closestLink = event.target.closest('a');
@@ -91,6 +91,10 @@ class AppNavigation {
    * @param {Event} _event - Scroll event
    * */
   onScroll(_event) {
+    if (this._isMobileNavigation()) {
+      return;
+    }
+
     this._updatePanePosition();
   }
 
@@ -100,6 +104,10 @@ class AppNavigation {
    * @param {Event} _event - Resize event
    * */
   onResize(_event) {
+    if (this._isMobileNavigation()) {
+      return;
+    }
+
     // Scroll back to the top of the page
     window.scrollTo(0, 0);
 

_js/screens/Home/index.js

@@ -0,0 +1,61 @@
+const SELECTOR = {
+  appHeaderEvent: '.app-header__event'
+};
+
+class HomeScreen {
+  /**
+   * Initializer
+   *
+   * @param {Element} elementRef - HTML node to mount the component.
+   * */
+  constructor() {
+    this.appHeaderEvent = document.querySelector(SELECTOR.appHeaderEvent);
+
+    this._bind();
+    this._addEventListener();
+  }
+
+  // Event listeners
+
+  /**
+   * Scroll handler of links in the app header.
+   *
+   * @param {Event} event - click event on header links
+   * */
+  onClickAppHeaderLink(event) {
+    let closestLink = event.target.closest('a');
+    let targetHref = closestLink.hash;
+
+    event.preventDefault();
+
+    let scrollToEl = document.querySelector(targetHref);
+    let verticalScroll = scrollToEl.getBoundingClientRect().y;
+
+    // Scroll to the selected section
+    window.scrollBy({
+      top: verticalScroll,
+      left: 0,
+      behavior: 'smooth'
+    });
+  }
+
+  // Private
+
+  /**
+   * Bind all functions to the local instance scope.
+   * */
+  _bind() {
+    this.onClickAppHeaderLink = this.onClickAppHeaderLink.bind(this);
+  }
+
+  /**
+   * Adds all the required event listeners.
+   * */
+  _addEventListener() {
+    this.appHeaderEvent.querySelectorAll('a').forEach(appHeaderLink => appHeaderLink.addEventListener('click', this.onClickAppHeaderLink));
+  }
+}
+
+if (document.body.classList.contains('home')) {
+  new HomeScreen();
+}

_js/screens/index.js

@@ -0,0 +1 @@
+import './Home/';

index.md

@@ -5,30 +5,30 @@ permalink: /
 ---
 
 <section id="about" class="home-hero">
-<div class="home-hero__brand">
-{% include icon.svg icon="icon-logo" class="home-hero__logo" %}
-</div>
-<div class="home-hero__text">
-<h1 class="home-hero__heading display-heading">Join us for the <strong>first</strong> Ruby Conference in Bangkok</h1>
-</div>
+    <div class="home-hero__brand">
+        {% include icon.svg icon="icon-logo" class="home-hero__logo" %}
+    </div>
+    <div class="home-hero__text">
+        <h1 class="home-hero__heading display-heading">Join us for the <strong>first</strong> Ruby Conference in Bangkok</h1>
+    </div>
 </section>
 
 <section id="speakers" class="home-speaker">
-<h2>Speakers</h2>
-{% include list-keynote-speaker.html %}
-<div class="call-to-action">
-<a href="https://www.papercall.io/rubyconfth" target="_blank" class="call-to-action__btn btn btn--primary btn--lg">Submit your talk</a>
-</div>
+    <h2>Speakers</h2>
+    {% include list-keynote-speaker.html %}
+    <div class="call-to-action">
+        <a href="https://www.papercall.io/rubyconfth" target="_blank" class="call-to-action__btn btn btn--primary btn--lg">Submit your talk</a>
+    </div>
 </section>
 
 <section id="venue" class="home-venue">
-<h2>Venue</h2>
-{% include map-venue.html %}
+    <h2>Venue</h2>
+    {% include map-venue.html %}
 </section>
 
 <section id="sponsors" class="home-sponsor">
-<h2>Sponsors</h2>
-<p>Our event is supported by amazing sponsors and partners.</p>
-{% include list-sponsor.html %}
-<p>If you are interested in supporting our event, reach out to our team: <a href="mailto:[email protected]">[email protected]</a>. <br />Our sponsors deck will be published soon.</p>
+    <h2>Sponsors</h2>
+    <p>Our event is supported by amazing sponsors and partners.</p>
+    {% include list-sponsor.html %}
+    <p>If you are interested in supporting our event, reach out to our team: <a href="mailto:[email protected]">[email protected]</a>. <br />Our sponsors deck will be published soon.</p>
 </section>