Learn_System/frontend/js/chem8_ch2_widgets.js

/* chem8_ch2_widgets.js — виджеты Главы 2 «Периодический закон и ПСХЭ».
 * Использует window.Chem8: miniPeriodic, testTube.
 */
(function (W) {
  'use strict';
  function C() { return W.Chem8 || {}; }
  function $(id) { return document.getElementById(id); }

  /* интерактивная ПСХЭ с кнопками-режимами подсветки */
  function periodicModes(mountId, modes) {
    var el = $(mountId); if (!el || el._b || !C().miniPeriodic) return; el._b = 1;
    var bar = document.createElement('div'); bar.className = 'pt-modes';
    var grid = document.createElement('div');
    modes.forEach(function (m, i) {
      var b = document.createElement('button'); b.className = 'btn'; b.textContent = m.l;
      b.addEventListener('click', function () {
        bar.querySelectorAll('.btn').forEach(function (x) { x.classList.remove('primary'); });
        b.classList.add('primary'); if (api) api.highlight(m.k);
      });
      bar.appendChild(b);
    });
    el.appendChild(bar); el.appendChild(grid);
    var api = C().miniPeriodic(grid, {});
    var legend = document.createElement('div'); legend.className = 'pt-legend';
    legend.innerHTML = '<span><i style="background:rgba(13,148,136,.4)"></i>металлы</span><span><i style="background:rgba(245,158,11,.5)"></i>неметаллы</span><span><i style="background:rgba(124,58,237,.4)"></i>металлоиды</span><span><i style="background:rgba(37,99,235,.4)"></i>инертные</span>';
    el.appendChild(legend);
  }

  function mount_p24() {
    periodicModes('c-pt-metals', [
      { k: 'metals', l: 'Металлы' }, { k: 'nonmetals', l: 'Неметаллы' }, { k: 'metalloids', l: 'Металлоиды' }, { k: null, l: 'Сброс' }
    ]);
  }
  function mount_p26() {
    periodicModes('c-pt-fam', [
      { k: 'alkali', l: 'Щелочные' }, { k: 'alkaline', l: 'Щёлочноземельные' }, { k: 'halogens', l: 'Галогены' }, { k: 'noble', l: 'Инертные газы' }, { k: null, l: 'Сброс' }
    ]);
  }
  function mount_p28() {
    periodicModes('c-pt-struct', [
      { k: { period: 2 }, l: 'Период 2' }, { k: { period: 3 }, l: 'Период 3' }, { k: { group: 1 }, l: 'Группа I' }, { k: { group: 17 }, l: 'Группа VII' }, { k: null, l: 'Сброс' }
    ]);
  }

  /* §25 — амфотерность: Zn(OH)₂ растворяется и в кислоте, и в щёлочи */
  function mount_p25() {
    var el = $('c-amph'); if (!el || el._b) return; el._b = 1;
    el.innerHTML =
      '<div class="amph-row">' +
        '<button class="btn amph-btn" data-r="acid">+ кислота (HCl)</button>' +
        '<button class="btn amph-btn" data-r="base">+ щёлочь (NaOH)</button>' +
        '<button class="btn amph-reset">Сначала</button>' +
      '</div>' +
      '<div class="amph-stage"></div>' +
      '<div class="out amph-out">Zn(OH)₂ — амфотерный гидроксид. Добавь кислоту или щёлочь и посмотри, что будет.</div>';
    var stage = el.querySelector('.amph-stage'), out = el.querySelector('.amph-out');
    function tt(o) { return C().testTube ? C().testTube(o) : ''; }
    function reset() { stage.innerHTML = '<div style="text-align:center;color:#0f766e">' + tt({ color: '#fff', precipitate: '#cbd5e1', label: 'Zn(OH)2' }) + '</div><div class="tt-cap" style="margin:0 auto">Белый осадок Zn(OH)₂</div>'; out.className = 'out amph-out'; out.innerHTML = 'Zn(OH)₂ — белый студенистый осадок (амфотерный гидроксид).'; }
    el.querySelectorAll('.amph-btn').forEach(function (b) {
      b.addEventListener('click', function () {
        var r = b.getAttribute('data-r');
        stage.innerHTML = '<div style="text-align:center;color:#0f766e">' + tt({ color: '#dbeafe' }) + '</div><div class="tt-cap" style="margin:0 auto">Осадок растворился</div>';
        out.className = 'out amph-out ok';
        out.innerHTML = r === 'acid'
          ? 'Как <b>основание</b>: Zn(OH)₂ + 2HCl → ZnCl₂ + 2H₂O — осадок растворился.'
          : 'Как <b>кислота</b>: Zn(OH)₂ + 2NaOH → Na₂[Zn(OH)₄] — осадок растворился (амфотерность!).';
      });
    });
    el.querySelector('.amph-reset').addEventListener('click', reset);
    reset();
  }

  W.CHEM8_WIDGETS = { p25: mount_p25 };
  W.FLAG_MOUNTS = { p24: mount_p24, p26: mount_p26, p28: mount_p28 };
})(window);