Template Editing

by whelkaholism

HTML

<button id="b">
Render
</button>
<hr>

<div id="t">

<!-- cfmeta: { Destination:Client, Name: Clients: Auto upcoming OV courses, Description: List of upcoming courses near to client; sent monthly by system } -->
<h1 class="blah">
    Upcoming  Paediatric First Aid courses
</h1>
<p>
    Hello,
</p>
<p>
    Please find below a list of our Paediatric First Aid Courses available in your area at our Training Centres.  We also can deliver training at your place of work for as little as £62.50 per person.
</p>
<p>
    Our Blended Paediatric First Aid Course meets the new EYFS 2021 and OFSTED guidance and is delivered as a one-day practical course with an at-home eLearning module.  Our training is recommended by OFSTED and is delivered to over 80,000 learners every year
</p>
<p>
    As per new guidance, all courses include a FREE annual online refresher course.
</p>
<p>
    For individual bookings please booked online following the link below or for group bookings, please email <a href="maito:[email protected]">[email protected]</a> or call us on <strong>0300 3020 999</strong> for a competitive quote.
</p>
<p>
    <em>Please note that as a not for profit company we do not charge VAT.</em>
</p>
<p>
    We look forward to speaking with you soon
</p>
<style>
    table tr td a:hover {
        background: #4f2682 !important
    }
</style>
<table style="border:none;margin-bottom:20px;border-collapse:collapse;width:100%;">
    <tr>
        <th style="text-align:left;font-size:14px;padding-right:10px;">Course</th>
        <th style="text-align:left;font-size:14px;padding-right:10px;">Location</th>
        <!--
            <th style="text-align:left;font-size:16px;padding-right:10px;">Distance</th>
        -->
        <th></th>
    </tr>
    {FOREACH:Attachments{
    <tr>
        <td style="padding:5px 10px 10px 0;font-size:13px;white-space:nowrap;vertical-align:top;border-top:1px solid #dddddd">
            <b...

CSS

._et_text_parent_:hover {
  background: rgba(255, 255, 0, 0.5);
  cursor: pointer;
}

._et_editor_ {
  display: block;
  width: 100%;
  padding: 0.5em;
  font-size: 12px;
  min-height: 5em;
}

JavaScript

function EditableTemplate(o) {
  var _this = this;
  var _tree = {};
  var _el;

  this.confirm = function(s) {
    var res = new Promise(function(resolve) {
      resolve(confirm(s));
    });

    return res;
  }

  this.create = function(el) {
    _el = el;
    _create(_el, _tree); // Recursive builder

    $('body').on('click', function() {
      _this.cancelAll();
    });

    _this.initEditing();
  }

  this.initEditing = function() {
    var f_save = function(n, s) {
      return new Promise(function(resolve) {
        s = (s || '').replace(/^\s+/, '').replace(/\s+$/, '');

        if (s != '') {
          n.el.innerHTML = s;
          n.s = s;

          resolve(ok);
        } else {
          _this.confirm('YOu have deleted all content; remove the block entirely?').then(function(ok) {
            if (ok) {
            	$(n.el).remove();
            }

            resolve(ok);
          });
        }
      });
    };

    _this.map(function(n) {
      if (n.editable && n.el != _el) {
        $(n.el)
          .addClass('_et_text_parent_')
          .on('click', function(e1) {
            if (!n.editor) {
              e1.stopPropagation();

              n.restore = n.el.innerHTML;
              n.el.innerHTML = '';
              n.editor = $('<textarea class="_et_editor_">' + n.restore + '</textarea>').appendTo(n.el).focus();
              n.editor.on('keyup', function(e) {
                if ((e.key == 'Enter' && e.ctrlKey) || e.key == 'Escape') {
                  var s = (e.key == 'Enter' && e.ctrlKey) ? n.editor.val() : n.restore;

                  f_save(n, s).then(function(ok) {
                    n.editor.remove();

                    delete n.restore;
                    delete n.editor;

                  });

                }
              }).on('click', function(e) {
                e.stopPropagation();
              });
            }
          });
      }
    });
  };

  this.map = function(f) {
    _map(f, _tree); // Recursive builder
 ...