fchristant

function getcolorcontrast($rgb1, $rgb2) {
  // https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
  return (getcolorluminance($rgb1[0], $rgb1[1], $rgb1[2]) + 0.05) / (getcolorluminance($rgb2[0], $rgb2[1], $rgb2[2]) + 0.05);
}

fchristant

function getcolorluminance($r, $g, $b) {

  // type checking
  if (!is_numeric($r) || !is_numeric($g) || !is_numeric($b)) return false;

  // range checking
  if (!($r >= 0 && $r <= 255)) return false;
  if (!($g >= 0 && $g <= 255)) return false;
  if (!($b >= 0 && $b <= 255)) return false;

fchristant

window.addEventListener('app.onReady',function() {
  app.modules.load("stickywatch");
});

fchristant

<div data-component data-component-module="dropdown" data-component-init data-open="false" data-component-id="photos_nav_popular_single" class="c_dropdown">
	<div class="c_dropdown__trigger" data-trigger>
			<span>Popular</span>
			<em class="c_dropdown__trigger-icon <?= $this->ui->iconclass ?> fa-angle-down" data-icon-toggle="true" data-icon-closed="angle-down" data-icon-open="angle-up"></em>
			<div class="c_dropdown__target" data-target>
				<ul class="c_dropdown__target-menu">
					<li><a href="#">All time</a></li>
					<li><a href="#">This month</a></li>
					<li><a href="#">This week</a></li>
					<li><a href="#">Today</a></li>

fchristant

@supports (display: grid) {

  .#{$component-prefix}photos {
    display: grid;

    &> * {
      width:auto;
      margin: 0;
    }

fchristant

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

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

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

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

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