Tiny File Manager | editor-20261027102636-20261027172349.js

Back Back Up Advanced Editor

// Post editor controller: wires Themestrap plugins to the blog's save, upload and render endpoints.
(function ($) {
  'use strict';
  var cfg = JSON.parse(document.getElementById('ts-config').textContent);
  var $title = $('#f-title'), $body = $('#f-body'), $rich = $('#f-rich');
  var isNew = !cfg.original;
  var state = { mode: 'markdown', dirty: false, saving: false, status: cfg.status, original: cfg.original, rich: null };

// Helpers

var toastTimer;
  function toast(msg, bad) {
    var t = document.getElementById('toast');
    t.textContent = msg; t.hidden = false; t.className = 'toast' + (bad ? ' bad' : '');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { t.hidden = true; }, bad ? 6000 : 2200);
  }

function setState(text) { document.getElementById('state').textContent = text; }
  function markDirty() { if (!state.dirty) { state.dirty = true; setState('Unsaved changes'); } scheduleLocal(); }

// Phone photos are often 5 MB or more. Shrink them here so uploads work on any server.
  function shrinkImage(file) {
    if (!/^image\/(jpeg|png|webp)$/.test(file.type) || !window.createImageBitmap) return Promise.resolve(file);
    return createImageBitmap(file).then(function (bmp) {
      var w = bmp.width, h = bmp.height, scale = Math.min(1, 2000 / Math.max(w, h));
      if (file.size <= 1048576 && scale === 1) { if (bmp.close) bmp.close(); return file; }
      var c = document.createElement('canvas');
      c.width = Math.round(w * scale); c.height = Math.round(h * scale);
      c.getContext('2d').drawImage(bmp, 0, 0, c.width, c.height);
      if (bmp.close) bmp.close();
      function encode(type, q) {
        return new Promise(function (res) { c.toBlob(res, type, q); });
      }
      return encode(file.type === 'image/png' ? 'image/png' : 'image/jpeg', 0.85).then(function (b) {
        // A large PNG photo is smaller as JPEG; keep PNG only when transparency may matter and it is small enough
        if (b && file.type === 'image/png' && b.size > Math.min(cfg.limit, 1572864)) return encode('image/jpeg', 0.85);
        return b;
      }).then(function (b) {
        if (!b || b.size >= file.size) return file;
        var ext = b.type === 'image/png' ? '.png' : '.jpg';
        return new File([b], file.name.replace(/\.\w+$/, '') + ext, { type: b.type });
      });
    }).catch(function () { return file; });
  }

function renderServer(md) { return post(cfg.render, { body: md }).then(function (r) { if (!r.ok) throw new Error('render'); return r.html; }); }

// Plugins

$body.val(cfg.body);
  var md = $body.themestrapPluginMarkdownEditor({
    view: 'write', minHeight: 'calc(100vh - 280px)', imageUpload: uploadImage,
    renderer: renderServer, previewDelay: 300, placeholder: 'Write your story. Markdown works here.'
  }) && $body.data('__pluginMarkdownEditor');

// These mirror what the server keeps (TSStore::parseTags), so the chips show exactly what will be saved:
  // special characters dropped, spaces collapsed, "Web" and "web" the same tag, 20 at most
  var MAX_TAGS = 20;
  var tags = $('#f-tags').themestrapPluginTagsInput({
    placeholder: 'Type or paste tags', validateEmail: false, maxTags: MAX_TAGS, ignoreCase: true,
    normalize: function (t) { return t.replace(/["'<>,\/\\?#%]/g, '').replace(/\s+/g, ' ').trim(); }
  }) && $('#f-tags').data('__tagsinput');

// Selects and the time picker (the dialogs are PluginDialog prompts, see prompts.js)
  $('#details [data-plugin-select]').each(function () {
    var $w = $(this); $w.themestrapPluginSelect();
    var $label = $w.closest('.field').find('.lbl').first(), trigger = $w.find('.ts-select-trigger')[0];
    if ($label.length && trigger && trigger.id) trigger.setAttribute('aria-labelledby', $label.attr('id') + ' ' + trigger.id);
  });

// Entry format: pictures for a slider or gallery, one address for video, audio and embeds
  var FORMAT_HINTS = {
    slider: ['Slider pictures', 'One picture address per line. They appear as a slider above the text.'],
    gallery: ['Gallery pictures', 'One picture address per line. They appear as a grid that opens in a lightbox.'],
    video: ['Video address', 'A YouTube or Vimeo link, or a link to an mp4 or webm file.'],
    audio: ['Audio address', 'A SoundCloud or Spotify link, or a link to an mp3 or ogg file.'],
    embed: ['Embed address', 'A CodePen link (or any YouTube, Vimeo, SoundCloud or Spotify link).']
  };
  function syncFormat() {
    var page = $('#f-type').val() === 'page', f = $('#f-format').val(), h = FORMAT_HINTS[f];
    $('#format-field').prop('hidden', page);
    $('#media-field').prop('hidden', page || !h);
    if (h) {
      $('#media-label').text(h[0]); $('#media-hint').text(h[1]);
      $('#f-media').attr('rows', f === 'slider' || f === 'gallery' ? 5 : 2).attr('placeholder', f === 'slider' || f === 'gallery' ? 'https://…/one.jpg' : 'https://');
      $('#media-upload').prop('hidden', f !== 'slider' && f !== 'gallery');
    }
  }
  $('#f-type, #f-format').on('change', function () { syncFormat(); markDirty(); });
  $('#f-media').on('input', markDirty);
  $('#media-upload').on('click', function () { $('#media-input').trigger('click'); });
  $('#media-input').on('change', function () {
    var files = Array.prototype.slice.call(this.files); this.value = '';
    // Upload one after another so the order matches what was picked
    files.reduce(function (chain, file) {
      return chain.then(function () {
        return uploadImage(file).then(function (url) {
          var $m = $('#f-media'), v = $m.val().replace(/\s+$/, '');
          $m.val((v ? v + '\n' : '') + url + '\n'); markDirty();
        });
      });
    }, Promise.resolve()).catch(function () {});
  });
  syncFormat();

// Auto growing title

// Mode switching: Markdown is the source of truth, rich text converts to and from it

function currentMarkdown() { return state.mode === 'rich' ? state.rich.getMarkdown() : md.getValue(); }

// Dirty tracking and local safety copy

var localTimer;
  function scheduleLocal() {
    clearTimeout(localTimer);
    localTimer = setTimeout(function () {
      try { localStorage.setItem(cfg.key, JSON.stringify({ t: Date.now(), title: $title.val(), body: currentMarkdown() })); } catch (e) {}
    }, 800);
  }
  $body[0].addEventListener('ts.markdowneditor.change', markDirty);
  $body[0].addEventListener('ts.markdowneditor.save', function () { save(); });
  $('#details').on('input change', 'input, textarea, select', markDirty);
  tags && $('#f-tags')[0].addEventListener('ts.tagsinput.add', markDirty);
  tags && $('#f-tags')[0].addEventListener('ts.tagsinput.remove', markDirty);
  // After pasting a list, say what was left out
  tags && $('#f-tags')[0].addEventListener('ts.tagsinput.paste', function (e) {
    var d = e.detail, dup = 0, over = 0;
    d.skipped.forEach(function (k) { if (k.reason === 'max') over++; else dup++; });
    if (!dup && !over) return;
    var parts = [];
    if (dup)  parts.push(dup + (dup === 1 ? ' was already there' : ' were already there'));
    if (over) parts.push(over + (over === 1 ? ' was left out' : ' were left out') + ' because a post can have ' + MAX_TAGS + ' tags');
    toast('Added ' + d.added.length + (d.added.length === 1 ? ' tag' : ' tags') + '. ' + parts.join(', ') + '.', !!over);
  });

// Offer to restore a newer local copy (for example after a lost connection)
  try {
    var saved = JSON.parse(localStorage.getItem(cfg.key) || 'null');
    if (saved && (saved.body !== cfg.body || saved.title !== $title.val()) && saved.body && saved.t > Date.now() - 7 * 864e5) {
      var bar = $('<div class="restore" role="alert">A newer unsaved copy from this browser was found. <button type="button" class="link-btn" id="restore-yes">Restore it</button> <button type="button" class="link-btn" id="restore-no">Discard</button></div>').prependTo('.ed-main');
      bar.on('click', '#restore-yes', function () { $title.val(saved.title); fitTitle(); md.setValue(saved.body, true); markDirty(); bar.remove(); });
      bar.on('click', '#restore-no', function () { localStorage.removeItem(cfg.key); bar.remove(); });
    }
  } catch (e) {}

// Publish date: PluginCalendar for the day, a time field for the hour
  var cal = null;
  (function () {
    var parts = $('#f-date').val().split('T')[0].split('-');
    var start = new Date(+parts[0], +parts[1] - 1, +parts[2]);
    $('#f-cal').themestrapPluginCalendar({ mode: 'single', selected: start, initialMonth: start, showFooter: true, fixedWeeks: true });
    cal = $('#f-cal').data('__pluginCalendar');

$('#f-cal')[0].addEventListener('ts.calendar.select', function () { sync(true); });
    $('#f-time')[0].addEventListener('ts.timepicker.change', function () { sync(true); });
    $('#date-now').on('click', function () {
      var n = new Date();
      cal.setValue(n); cal.goToToday();
      tpicker.setValue(pad(n.getHours()) + ':' + pad(n.getMinutes()), true);
      sync(true);
    });
    function pop(open) {
      $('#date-pop').prop('hidden', !open);
      $('#date-toggle').attr('aria-expanded', open ? 'true' : 'false');
    }
    $('#date-toggle').on('click', function () { pop($('#date-pop').prop('hidden')); });
    $('#date-close').on('click', function () { pop(false); $('#date-toggle').trigger('focus'); });
    $('#date-pop').on('keydown', function (e) { if (e.key === 'Escape') { e.stopPropagation(); pop(false); $('#date-toggle').trigger('focus'); } });
  })();

// Settings panel, description counter, cover image

$('#btn-details').on('click', function () {
    var open = $('#details').prop('hidden');
    $('#details').prop('hidden', !open); $(this).attr('aria-expanded', open);
    document.body.classList.toggle('details-open', open);
  });
  function descCount() { $('#desc-count').text($('#f-desc').val().length); }
  $('#f-desc').on('input', descCount); descCount();

// Slug follows the title until the author edits it

var slugTouched = !!cfg.original;
  $('#f-slug').on('input', function () { slugTouched = true; });
  $title.on('input', function () {
    if (slugTouched) return;
    $('#f-slug').val(this.value.toLowerCase().normalize('NFKD').replace(/[\u0300-\u036f]/g, '').replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '').slice(0, 80));
  });

// Focus mode

// Save and publish

function collect(status) {
    return {
      original: state.original, title: $title.val(), slug: $('#f-slug').val(), body: currentMarkdown(),
      date: $('#f-date').val().replace('T', ' '), type: $('#f-type').val(), status: status,
      tags: tags ? tags.getTags().join(',') : $('#f-tags').val(), description: $('#f-desc').val(), image: $('#f-image').val(),
      format: $('#f-format').val(), media: $('#f-media').val()
    };
  }

// Delete, and leaving with unsaved changes, both ask through PluginDialog

$('#btn-delete').on('click', function () {
    window.tsPrompt.confirm({
      title: 'Delete this post?',
      message: 'This removes it from your site for good. It cannot be undone.',
      confirmLabel: 'Delete', cancelLabel: 'Keep it', danger: true
    }).then(function (yes) {
      if (!yes) return;
      post(cfg.delete, { slug: state.original }).then(function (r) {
        if (r.ok) { state.dirty = false; try { localStorage.removeItem(cfg.key); } catch (e) {} location.href = r.redirect; }
        else toast((r.errors || ['Could not delete.']).join(' '), true);
      });
    });
  });

// A link clicked while there are unsaved changes: ask first (the browser's own warning still covers closing the tab)
  $(document).on('click', 'a[href]', function (e) {
    var a = this, href = a.getAttribute('href') || '';
    if (!state.dirty || e.isDefaultPrevented() || e.button || e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) return;
    if (a.target === '_blank' || a.hasAttribute('download') || /^(#|javascript:|mailto:|tel:)/i.test(href)) return;
    e.preventDefault();
    window.tsPrompt.confirm({
      title: 'Leave without saving?',
      message: 'You have changes that have not been saved. They will be lost if you leave.',
      confirmLabel: 'Leave without saving', cancelLabel: 'Keep editing', danger: true
    }).then(function (yes) { if (yes) { state.dirty = false; location.href = a.href; } });
  });

// Rich text is the friendly default. Posts that contain raw HTML stay in Markdown so nothing is lost.
  var risky = cfg.allowHtml && /<[a-z!][^>]*>/i.test(cfg.body);
  var pref = null;
  try { pref = localStorage.getItem('tsblog-mode'); } catch (e) {}
  if (risky) toast('This post contains HTML, so it opens in Markdown mode to keep it intact.');
  else if (pref !== 'markdown') setMode('rich');
  if (!$title.val()) $title.focus(); else if (state.mode === 'markdown') md.focus();
  state.dirty = false;
})(jQuery);