Нужна помощь, чтобы выяснить, почему пример / учебник по сортировке изотопов в Metafizzy не работает, когда его копируют и запускают на (локальном) веб-сервере - PullRequest
Новая
       8

Нужна помощь, чтобы выяснить, почему пример / учебник по сортировке изотопов в Metafizzy не работает, когда его копируют и запускают на (локальном) веб-сервере

0 голосов
/ 12 января 2020

Ниже код копируется из Codepen Metafizzy и сохраняется как отдельные файлы (как я уже перечислил) и запускается на локальном веб-сервере (XAMPP - но, вероятно, не должен делать какой-либо diff каким-либо веб-сервером, на котором он работает или даже просто при загрузке страницы в браузере без веб-сервера).

В результате отображается ожидаемый результат, но кнопки сортировки ничего не сортируют, плюс вокруг них есть синий контур, который их нет на странице документации Metafizzy (возможно, это просто проблема стиля ... просто странно, что это не отображается в их коде); в консоли браузера не сообщается об ошибках (Chrome).

Как видите, я импортирую изотопы jquery и isotope, так как они настроены на их коде - это полная код (файлы):

индекс. html

<!doctype html>
<html class="" lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script src="https://npmcdn.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
  <link rel="stylesheet" type="text/css" href="isotope.css">
  <script src="isotope.js"></script>
</head>
<body>
  <h1>Isotope - sorting</h1>

  <div class="button-group sort-by-button-group">
    <button class="button is-checked" data-sort-value="original-order">original order</button>
    <button class="button" data-sort-value="name">name</button>
    <button class="button" data-sort-value="symbol">symbol</button>
    <button class="button" data-sort-value="number">number</button>
    <button class="button" data-sort-value="weight">weight</button>
    <button class="button" data-sort-value="category">category</button>
  </div>

  <div class="grid">
    <div class="element-item transition metal " data-category="transition">
      <h3 class="name">Mercury</h3>
      <p class="symbol">Hg</p>
      <p class="number">80</p>
      <p class="weight">200.59</p>
    </div>
    <div class="element-item metalloid " data-category="metalloid">
      <h3 class="name">Tellurium</h3>
      <p class="symbol">Te</p>
      <p class="number">52</p>
      <p class="weight">127.6</p>
    </div>
    <div class="element-item post-transition metal " data-category="post-transition">
      <h3 class="name">Bismuth</h3>
      <p class="symbol">Bi</p>
      <p class="number">83</p>
      <p class="weight">208.980</p>
    </div>
    <div class="element-item post-transition metal " data-category="post-transition">
      <h3 class="name">Lead</h3>
      <p class="symbol">Pb</p>
      <p class="number">82</p>
      <p class="weight">207.2</p>
    </div>
    <div class="element-item transition metal " data-category="transition">
      <h3 class="name">Gold</h3>
      <p class="symbol">Au</p>
      <p class="number">79</p>
      <p class="weight">196.967</p>
    </div>
    <div class="element-item alkali metal " data-category="alkali">
      <h3 class="name">Potassium</h3>
      <p class="symbol">K</p>
      <p class="number">19</p>
      <p class="weight">39.0983</p>
    </div>
    <div class="element-item alkali metal " data-category="alkali">
      <h3 class="name">Sodium</h3>
      <p class="symbol">Na</p>
      <p class="number">11</p>
      <p class="weight">22.99</p>
    </div>
    <div class="element-item transition metal " data-category="transition">
      <h3 class="name">Cadmium</h3>
      <p class="symbol">Cd</p>
      <p class="number">48</p>
      <p class="weight">112.411</p>
    </div>
    <div class="element-item alkaline-earth metal " data-category="alkaline-earth">
      <h3 class="name">Calcium</h3>
      <p class="symbol">Ca</p>
      <p class="number">20</p>
      <p class="weight">40.078</p>
    </div>
    <div class="element-item transition metal " data-category="transition">
      <h3 class="name">Rhenium</h3>
      <p class="symbol">Re</p>
      <p class="number">75</p>
      <p class="weight">186.207</p>
    </div>
    <div class="element-item post-transition metal " data-category="post-transition">
      <h3 class="name">Thallium</h3>
      <p class="symbol">Tl</p>
      <p class="number">81</p>
      <p class="weight">204.383</p>
    </div>
    <div class="element-item metalloid " data-category="metalloid">
      <h3 class="name">Antimony</h3>
      <p class="symbol">Sb</p>
      <p class="number">51</p>
      <p class="weight">121.76</p>
    </div>
    <div class="element-item transition metal " data-category="transition">
      <h3 class="name">Cobalt</h3>
      <p class="symbol">Co</p>
      <p class="number">27</p>
      <p class="weight">58.933</p>
    </div>
    <div class="element-item lanthanoid metal inner-transition " data-category="lanthanoid">
      <h3 class="name">Ytterbium</h3>
      <p class="symbol">Yb</p>
      <p class="number">70</p>
      <p class="weight">173.054</p>
    </div>
    <div class="element-item noble-gas nonmetal " data-category="noble-gas">
      <h3 class="name">Argon</h3>
      <p class="symbol">Ar</p>
      <p class="number">18</p>
      <p class="weight">39.948</p>
    </div>
    <div class="element-item diatomic nonmetal " data-category="diatomic">
      <h3 class="name">Nitrogen</h3>
      <p class="symbol">N</p>
      <p class="number">7</p>
      <p class="weight">14.007</p>
    </div>
    <div class="element-item actinoid metal inner-transition " data-category="actinoid">
      <h3 class="name">Uranium</h3>
      <p class="symbol">U</p>
      <p class="number">92</p>
      <p class="weight">238.029</p>
    </div>
    <div class="element-item actinoid metal inner-transition " data-category="actinoid">
      <h3 class="name">Plutonium</h3>
      <p class="symbol">Pu</p>
      <p class="number">94</p>
      <p class="weight">(244)</p>
    </div>
  </div>
</body>
</html>

изотоп. js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.element-item',
  layoutMode: 'fitRows',
  getSortData: {
    name: '.name',
    symbol: '.symbol',
    number: '.number parseInt',
    category: '[data-category]',
    weight: function( itemElem ) {
      var weight = $( itemElem ).find('.weight').text();
      return parseFloat( weight.replace( /[\(\)]/g, '') );
    }
  }
});

// bind sort button click
$('.sort-by-button-group').on( 'click', 'button', function() {
  var sortValue = $(this).attr('data-sort-value');
  $grid.isotope({ sortBy: sortValue });
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

изотоп. css

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
}

/* ---- button ---- */

.button {
  display: inline-block;
  padding: 0.5em 1.0em;
  margin-bottom: 10px;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  cursor: pointer;
}

.button:hover {
  background-color: #8CF;
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #28F;
}

.button.is-checked {
  color: white;
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: 1px;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- grid ---- */

.grid {
  border: 1px solid #333;
  max-width: 1200px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .element-item ---- */

.element-item {
  position: relative;
  float: left;
  width: 100px;
  height: 100px;
  margin: 5px;
  padding: 10px;
  background: #888;
  color: #262524;
}

.element-item > * {
  margin: 0;
  padding: 0;
}

.element-item .name {
  position: absolute;

  left: 10px;
  top: 60px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 12px;
  font-weight: normal;
}

.element-item .symbol {
  position: absolute;
  left: 10px;
  top: 0px;
  font-size: 42px;
  font-weight: bold;
  color: white;
}

.element-item .number {
  position: absolute;
  right: 8px;
  top: 5px;
}

.element-item .weight {
  position: absolute;
  left: 10px;
  top: 76px;
  font-size: 12px;
}

.element-item.alkali          { background: #F00; background: hsl(   0, 100%, 50%); }
.element-item.alkaline-earth  { background: #F80; background: hsl(  36, 100%, 50%); }
.element-item.lanthanoid      { background: #FF0; background: hsl(  72, 100%, 50%); }
.element-item.actinoid        { background: #0F0; background: hsl( 108, 100%, 50%); }
.element-item.transition      { background: #0F8; background: hsl( 144, 100%, 50%); }
.element-item.post-transition { background: #0FF; background: hsl( 180, 100%, 50%); }
.element-item.metalloid       { background: #08F; background: hsl( 216, 100%, 50%); }
.element-item.diatomic        { background: #00F; background: hsl( 252, 100%, 50%); }
.element-item.halogen         { background: #F0F; background: hsl( 288, 100%, 50%); }
.element-item.noble-gas       { background: #F08; background: hsl( 324, 100%, 50%); }
...