<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <base href="../">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Appearance - Standard Themes</title>

  <link href="examples/style.css" rel="stylesheet">
  <link href="build/cookieconsent.min.css" rel="stylesheet">
  <style>
    .popup-selector {position: relative; top: -5px; left: -20px;}
    .example-window .selectbox {display: inline-block; width: 8em;}
  </style>

  <script>
    window.cookieconsent_examples = {
      currentOpen: -1,
      instances: [],
      options: {
        'Red Banner Top': {type: 'info', theme: 'basic-inline', palette: 'red', position: 'banner-top'},
        'White Banner Top': {type: 'opt-out', theme: 'basic-inline', palette: 'white', position: 'banner-top'},
        'Black Banner Bottom': {type: 'opt-in', theme: 'basic-inline', palette: 'black', position: 'banner-bottom'},
        'Blue Floating Top Left': {type: 'info', theme: 'basic-block', palette: 'blue', position: 'top-left'},
        'Black Floating Top Right': {type: 'opt-out', theme: 'basic-block', palette: 'black-orange', position: 'top-right'},
        'Purple Floating Bottom Right': {type: 'opt-in', theme: 'basic-block', palette: 'purple-white', position: 'bottom-right'},
      }
    };
  </script>

<body role="document">

  <div class="center-outer fit">
    <div class="center-inner">
      <div class="example-window" role="main">
        <h1>Standard themes</h1>
        <p>Pick a standard layout and a colour scheme. Or build your own</p>

        <ul class="example-selector"></ul>

        <div class="btn-group">
          <button onclick="javascript: window.location = './examples/example-2-custom-theme.html';">Next Example</button>
        </div>
      </div>
    </div>
  </div>

<script src="examples/script.js"></script>
<script src="src/cookieconsent.js"></script>
<script>

  (function (C, E) {

    var examples = Object.keys(E.options);
    var $selector = document.querySelector('.example-selector');

    $selector.innerHTML = '<li class="container"><span class="inner">' + Object.keys(E.options).join('</span></li><li class="container"><span class="inner">') + '</span></li>';

    $selector.onclick = function (e) {
      var targ = e.target, item;

      // This click event could have been called for any of the child elements.
      // Out of these child elements, we want to find the closest LI element (the direct UL decendant).
      while (targ.tagName != 'LI' && targ.parentNode) {
        targ = targ.parentNode;
      }

      // if target is a direct child of $selector
      if (targ.parentNode.isSameNode($selector)) {
        var idx = Array.prototype.indexOf.call($selector.children, targ);

        if (idx != E.currentOpen) {
          if (E.currentOpen >= 0)
            E.instances[E.currentOpen].close();

          if (idx >= 0)
            E.instances[idx].open();

          E.currentOpen = idx;
        }
      }
    };

    for (var i = 0, l = examples.length; i < l; ++i) {
      E.instances[i] = C.factory(E.options[examples[i]]);
    }

  }(window.cookieconsent, window.cookieconsent_examples));

</script><commit_msg>fixed bug when clicking on the container<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <base href="../">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Appearance - Standard Themes</title>

  <link href="examples/style.css" rel="stylesheet">
  <link href="build/cookieconsent.min.css" rel="stylesheet">
  <style>
    .popup-selector {position: relative; top: -5px; left: -20px;}
    .example-window .selectbox {display: inline-block; width: 8em;}
  </style>

  <script>
    window.cookieconsent_examples = {
      currentOpen: -1,
      instances: [],
      options: {
        'Red Banner Top': {type: 'info', theme: 'basic-inline', palette: 'red', position: 'banner-top'},
        'White Banner Top': {type: 'opt-out', theme: 'basic-inline', palette: 'white', position: 'banner-top'},
        'Black Banner Bottom': {type: 'opt-in', theme: 'basic-inline', palette: 'black', position: 'banner-bottom'},
        'Blue Floating Top Left': {type: 'info', theme: 'basic-block', palette: 'blue', position: 'top-left'},
        'Black Floating Top Right': {type: 'opt-out', theme: 'basic-block', palette: 'black-orange', position: 'top-right'},
        'Purple Floating Bottom Right': {type: 'opt-in', theme: 'basic-block', palette: 'purple-white', position: 'bottom-right'},
      }
    };
  </script>

<body role="document">

  <div class="center-outer fit">
    <div class="center-inner">
      <div class="example-window" role="main">
        <h1>Standard themes</h1>
        <p>Pick a standard layout and a colour scheme. Or build your own</p>

        <ul class="example-selector"></ul>

        <div class="btn-group">
          <button onclick="javascript: window.location = './examples/example-2-custom-theme.html';">Next Example</button>
        </div>
      </div>
    </div>
  </div>

<script src="examples/script.js"></script>
<script src="src/cookieconsent.js"></script>
<script>

  (function (C, E) {

    var examples = Object.keys(E.options);
    var $selector = document.querySelector('.example-selector');

    $selector.innerHTML = '<li class="container"><span class="inner">' + Object.keys(E.options).join('</span></li><li class="container"><span class="inner">') + '</span></li>';

    $selector.onclick = function (e) {
      var targ = e.target, item;

      // if the target is the container, exit
      if (targ.isSameNode($selector)) return;

      // from this point, only the child elements of $selector will get through.
      // out of these child elements, we want to find the closest direct decendant <li>
      while (targ.tagName != 'LI' && targ.parentNode) {
        targ = targ.parentNode;
      }

      if (!targ.parentNode.isSameNode($selector)) return;

      // from this point, 'targ' will be a direct decendant of $selector
      var idx = Array.prototype.indexOf.call($selector.children, targ);

      if (idx != E.currentOpen) {
        if (E.currentOpen >= 0)
          E.instances[E.currentOpen].close();

        if (idx >= 0)
          E.instances[idx].open();

        E.currentOpen = idx;
      }
    };

    for (var i = 0, l = examples.length; i < l; ++i) {
      E.instances[i] = C.factory(E.options[examples[i]]);
    }

  }(window.cookieconsent, window.cookieconsent_examples));

</script>
{'fraction_non_alphanumeric': 0.17639827904118008, 'fraction_numerical': 0.003995082974800246, 'mean_word_length': 3.0937106918238992, 'pattern_counts': {'":': 0, '<': 96, '<?xml version=': 0, '>': 98, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5261555', 'n_tokens_mistral': 2111, 'n_tokens_neox': 2033, 'n_words': 527}