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

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

<div data-component data-component-module="scaffold" data-component-init data-component-id="scaffold1" class="c_scaffold">
<!-- inner markup -->
</div>

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

<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

<script src="/dragon.mjs" type="module"></script>

fchristant

 dragon.script.load("https://code.jquery.com/jquery-3.4.1.min.js").then(() =>{
  $( document ).ready(function() {
    console.log($(document));
  });
 });

fchristant

dragon.module.load("test").then(module => {
  console.log(module.hello);
});

fchristant

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

fchristant

<div data-component data-component-module="scaffold" data-component-init data-component-id="scaffold1" data-name="Alpha" class="c_scaffold f_row--2">
    <textarea data-panel="" rows="10"></textarea>
</div>