fchristant

<div data-component data-component-init data-compoent-module="googlemap" data-lat="4.570868" data-lng="-74.297333" data-zoom="5" data-component-id="map3" class="c_google-map">
  <div class="c_google-map__map"></div>
</div>

fchristant

dragon.ready().then(() => {
  var myMap = dragon.components.googlemap.map1;
  myMap.zoom = 1;
});

fchristant

window.addEventListener('app.onReady',function() {
  app.components.load("GoogleMap").then(function(GoogleMap) {
    var newComp = document.createElement('div');
    newComp.innerHTML = '<div class="c_google-map__map"></div>';
    newComp.setAttribute('data-component','');
    newComp.setAttribute('data-component-init','');
    newComp.setAttribute('data-module','GoogleMap');
    newComp.setAttribute('data-zoom','1');
    newComp.setAttribute('id','map2');
    newComp.classList += 'c_google-map';

fchristant

𝒮(() => {
  console.log(app);
});

fchristant

add() {
 return `${this.a} + ${this.b} = ${this.a + this.b}`;
}

fchristant

export default class Component {

  constructor(selector){

    let self = this;
    this._selector = selector;
    // reference to DOM element
    this.dom = !selector ? false : document.querySelector(this._selector);
    if (this.dom) {
      // store attributes of DOM element

fchristant

import Component from 'component.js';
class GoogleMap extends Component {

  constructor(selector) {

    super(selector);

    // data attributes
    this._lat = parseFloat(this.attributes.lat || 0);
    this._lng = parseFloat(this.attributes.lng || 0);

fchristant

const OFFLINE_URL = '/offline';
self.addEventListener('install', function(e) {
  e.waitUntil(
    caches.open('jungledragon').then(function(cache) {
      return cache.addAll([
        OFFLINE_URL, '/'
      ]);
    })
  );
});

fchristant

@mixin NotHandHeld() {
	@media (any-pointer:fine) and #{map-deep-get($site_breakpoints, "m", "mq")},
	#{map-deep-get($site_breakpoints, "m", "mq")} and (-moz-touch-enabled: 0), #{map-deep-get($site_breakpoints, "m", "mq")} and (-moz-touch-enabled: 1),
	#{map-deep-get($site_breakpoints, "m", "mq")} and (-ms-high-contrast: none), #{map-deep-get($site_breakpoints, "m", "mq")} and (-ms-high-contrast: active)
	 {
		 @content;
	 }
 }

fchristant

.#{$component-prefix}photos {
  display: flex;
  width:100%;
  flex-wrap: wrap;
  overflow: hidden;
  &> * {
    width:calc(25% - 20px);
    margin: 10px;
  }
}