riddles/views/admin-quizzes-new.jade

A framework for building series of puzzle challenge, like Python Challenge.

//
   Created by dsds on 10/10/15.
extends admin

block view
  if message && message.length
    p.success #{message}
  div.row
    a#save-btn.button.button-primary.float-right(href=path + "/admin/quizzes") Save
    a#cancel-btn.button.float-right(href=path + "/admin/quizzes") Cancel
    h1#quiz-title.editable= data ? data.title : ''
  div.row
    div#quiz-content.editable !{data ? data.content : ''}
  br
  if data
    form(action=path + "/admin/quizzes/delete/" + data._id, method="POST")
      input.button.button-danger(type="submit", value="Delete")
  form#hide-form(action=path + "/admin/quizzes/new", method="POST")
    input#form-title(name="title")
    input#form-content(name="content")
    input#form-id(name="id")

block footer
  script(type="text/javascript", src=path + "/javascripts/medium-editor.min.js")
  script.
    var modified = false;
    function $$(sel) {
      return document.getElementById(sel);
    }
    new MediumEditor('#quiz-title', {
      toolbar:     false,
      placeholder: {
        text: 'New Quiz'
      },
      paste:       {
        forcePlainText: true
      },
      imageDragging: false
    });
    new MediumEditor('#quiz-content', {
      placeholder: {
        text: 'Content...'
      },
      paste:       {
        forcePlainText: true
      },
      imageDragging: false
    });
    $$('quiz-title').addEventListener('keydown', function () {
      modified = true;
    });
    $$('quiz-content').addEventListener('keydown', function () {
      modified = true;
    });
    $$('save-btn').addEventListener('click', function (event) {
      var title = $$('quiz-title').innerText.trim();
      var content = $$('quiz-content').innerHTML;
      var contentText = $$('quiz-content').innerText.trim();
      if (!title.length) {
        alert('Title could not be empty!');
        event.preventDefault();
        return false;
      }
      if (!contentText.length) {
        alert('Content could not be empty!');
        event.preventDefault();
        return false;
      }
      $$('form-title').value = title;
      $$('form-content').value = content;
      !{data ? '$$("form-id").value = "' + data._id + '";' : ''}
      $$('hide-form').submit();
      event.preventDefault();
      return false;
    }, false);

    $$('cancel-btn').addEventListener('click', function (event) {
      var title = $$('quiz-title').innerText.trim();
      var contentText = $$('quiz-content').innerText.trim();
      if (title.length || contentText.length) {
        if(modified && !confirm('Are you sure?')) {
          event.preventDefault();
          return false;
        }
      }
    });