Make modules contain their own static files and templates

realms/modules/wiki/static/js/aced.js

@@ -0,0 +1,430 @@
+function Aced(settings) {
+  var id,
+    options,
+    editor,
+    element,
+    preview,
+    previewWrapper,
+    profile,
+    autoInterval,
+    themes,
+    themeSelect,
+    loadedThemes = {};
+
+  settings = settings || {};
+
+  options = {
+    sanitize: true,
+    preview: null,
+    editor: null,
+    theme: 'idle_fingers',
+    themePath: '/static/vendor/ace-builds/src',
+    mode: 'markdown',
+    autoSave: true,
+    autoSaveInterval: 5000,
+    syncPreview: false,
+    keyMaster: false,
+    submit: function(data){ alert(data); },
+    showButtonBar: false,
+    themeSelect: null,
+    submitBtn: null,
+    renderer: null,
+    info: null
+  };
+
+  themes = {
+    chrome: "Chrome",
+    clouds: "Clouds",
+    clouds_midnight: "Clouds Midnight",
+    cobalt: "Cobalt",
+    crimson_editor: "Crimson Editor",
+    dawn: "Dawn",
+    dreamweaver: "Dreamweaver",
+    eclipse: "Eclipse",
+    idle_fingers: "idleFingers",
+    kr_theme: "krTheme",
+    merbivore: "Merbivore",
+    merbivore_soft: "Merbivore Soft",
+    mono_industrial: "Mono Industrial",
+    monokai: "Monokai",
+    pastel_on_dark: "Pastel on Dark",
+    solarized_dark: "Solarized Dark",
+    solarized_light: "Solarized Light",
+    textmate: "TextMate",
+    tomorrow: "Tomorrow",
+    tomorrow_night: "Tomorrow Night",
+    tomorrow_night_blue: "Tomorrow Night Blue",
+    tomorrow_night_bright: "Tomorrow Night Bright",
+    tomorrow_night_eighties: "Tomorrow Night 80s",
+    twilight: "Twilight",
+    vibrant_ink: "Vibrant Ink"
+  };
+
+  function editorId() {
+    return "aced." + id;
+  }
+
+  function infoKey() {
+    return editorId() + ".info";
+  }
+
+  function gc() {
+    // Clean up localstorage
+    store.forEach(function(key, val) {
+      var re = new RegExp("aced\.(.*?)\.info");
+      var info = re.exec(key);
+      if (!info || !val.time) {
+        return;
+      }
+
+      var id = info[1];
+
+      // Remove week+ old stuff
+      var now = new Date().getTime() / 1000;
+
+      if (now > (val.time + 604800)) {
+        store.remove(key);
+        store.remove('aced.' + id);
+      }
+    });
+  }
+
+  function buildThemeSelect() {
+    var $sel = $("<select class='aced-theme-sel' data-placeholder='Theme'></select>");
+    $sel.append('<option></option>');
+    $.each(themes, function(k, v) {
+      $sel.append("<option value='" + k + "'>" + v + "</option>");
+    });
+    return $("<div/>").html($sel);
+  }
+
+  function toJquery(o) {
+    return (typeof o == 'string') ? $("#" + o) : $(o);
+  }
+
+  function initProfile() {
+    profile = {theme: ''};
+
+    try {
+      // Need to merge in any undefined/new properties from last release
+      // Meaning, if we add new features they may not have them in profile
+      profile = $.extend(true, profile, store.get('aced.profile'));
+    } catch (e) { }
+  }
+
+  function updateProfile(obj) {
+    profile = $.extend(null, profile, obj);
+    store.set('profile', profile);
+  }
+
+  function render(content) {
+    return (options.renderer) ? options.renderer(content) : content;
+  }
+
+  function bindKeyboard() {
+    // CMD+s TO SAVE DOC
+    key('command+s, ctrl+s', function (e) {
+      submit();
+      e.preventDefault();
+    });
+
+    var saveCommand = {
+      name: "save",
+      bindKey: {
+        mac: "Command-S",
+        win: "Ctrl-S"
+      },
+      exec: function () {
+        submit();
+      }
+    };
+    editor.commands.addCommand(saveCommand);
+  }
+
+  function info(info) {
+    if (info) {
+      store.set(infoKey(), info);
+    }
+    return store.get(infoKey());
+  }
+
+  function val(val) {
+    // Alias func
+    if (val) {
+      editor.getSession().setValue(val);
+    }
+    return editor.getSession().getValue();
+  }
+
+  function discardDraft() {
+    stopAutoSave();
+    store.remove(editorId());
+    store.remove(infoKey());
+    location.reload();
+  }
+
+  function save() {
+    store.set(editorId(), val());
+  }
+
+  function submit() {
+    store.remove(editorId());
+    store.remove(editorId() + ".info");
+    options.submit(val());
+  }
+
+  function autoSave() {
+    if (options.autoSave) {
+      autoInterval = setInterval(function () {
+        save();
+      }, options.autoSaveInterval);
+    } else {
+      stopAutoSave();
+    }
+  }
+
+  function stopAutoSave() {
+    if (autoInterval){
+      clearInterval(autoInterval)
+    }
+  }
+
+  function renderPreview() {
+    if (!preview) {
+      return;
+    }
+    preview.html(render(val()));
+    $('pre code', preview).each(function(i, e) {
+      hljs.highlightBlock(e)
+    });
+  }
+
+  function getScrollHeight($prevFrame) {
+    // Different browsers attach the scrollHeight of a document to different
+    // elements, so handle that here.
+    if ($prevFrame[0].scrollHeight !== undefined) {
+      return $prevFrame[0].scrollHeight;
+    } else if ($prevFrame.find('html')[0].scrollHeight !== undefined &&
+      $prevFrame.find('html')[0].scrollHeight !== 0) {
+      return $prevFrame.find('html')[0].scrollHeight;
+    } else {
+      return $prevFrame.find('body')[0].scrollHeight;
+    }
+  }
+
+  function getPreviewWrapper(obj) {
+    // Attempts to get the wrapper for preview based on overflow prop
+    if (!obj) {
+      return;
+    }
+    if (obj.css('overflow') == 'auto' || obj.css('overflow') == 'scroll') {
+      return obj;
+    } else {
+      return getPreviewWrapper(obj.parent());
+    }
+  }
+
+  function syncPreview() {
+
+    var editorScrollRange = (editor.getSession().getLength());
+
+    var previewScrollRange = (getScrollHeight(preview));
+
+    // Find how far along the editor is (0 means it is scrolled to the top, 1
+    // means it is at the bottom).
+    var scrollFactor = editor.getFirstVisibleRow() / editorScrollRange;
+
+    // Set the scroll position of the preview pane to match.  jQuery will
+    // gracefully handle out-of-bounds values.
+
+    previewWrapper.scrollTop(scrollFactor * previewScrollRange);
+  }
+
+  function asyncLoad(filename, cb) {
+    (function (d, t) {
+
+      var leScript = d.createElement(t)
+        , scripts = d.getElementsByTagName(t)[0];
+
+      leScript.async = 1;
+      leScript.src = filename;
+      scripts.parentNode.insertBefore(leScript, scripts);
+
+      leScript.onload = function () {
+        cb && cb();
+      }
+
+    }(document, 'script'));
+  }
+
+  function setTheme(theme) {
+    var cb = function(theme) {
+      editor.setTheme('ace/theme/'+theme);
+      updateProfile({theme: theme});
+    };
+
+    if (loadedThemes[theme]) {
+      cb(theme);
+    } else {
+      asyncLoad(options.themePath + "/theme-" + theme + ".js", function () {
+        cb(theme);
+        loadedThemes[theme] = true;
+      });
+    }
+  }
+
+  function initSyncPreview() {
+    if (!preview || !options.syncPreview) return;
+    previewWrapper = getPreviewWrapper(preview);
+    window.onload = function () {
+      /**
+       * Bind synchronization of preview div to editor scroll and change
+       * of editor cursor position.
+       */
+      editor.session.on('changeScrollTop', syncPreview);
+      editor.session.selection.on('changeCursor', syncPreview);
+    };
+  }
+
+  function initProps() {
+    // Id of editor
+    if (typeof settings == 'string') {
+      settings = { editor: settings };
+    }
+
+    if ('theme' in profile && profile['theme']) {
+      settings['theme'] = profile['theme'];
+    }
+
+    if (settings['preview'] && !settings.hasOwnProperty('syncPreview')) {
+      settings['syncPreview'] = true;
+    }
+
+    $.extend(options, settings);
+
+    if (options.editor) {
+      element = toJquery(options.editor);
+    }
+
+    $.each(options, function(k, v){
+      if (element.data(k.toLowerCase())) {
+        options[k] = element.data(k.toLowerCase());
+      }
+    });
+
+    if (options.themeSelect) {
+      themeSelect = toJquery(options.themeSelect);
+    }
+
+    if (options.submitBtn) {
+      var submitBtn = toJquery(options.submitBtn);
+      submitBtn.click(function(){
+        submit();
+      });
+    }
+
+    if (options.preview) {
+      preview = toJquery(options.preview);
+
+      // Enable sync unless set otherwise
+      if (!settings.hasOwnProperty('syncPreview')) {
+        options['syncPreview'] = true;
+      }
+    }
+
+    if (!element.attr('id')) {
+      // No id, make one!
+      id = Math.random().toString(36).substring(7);
+      element.attr('id', id);
+    } else {
+      id = element.attr('id')
+    }
+  }
+
+  function initEditor() {
+    editor = ace.edit(id);
+    setTheme(profile.theme || options.theme);
+    editor.getSession().setMode('ace/mode/' + options.mode);
+    if (store.get(editorId()) && store.get(editorId()) != val()) {
+      editor.getSession().setValue(store.get(editorId()));
+    }
+    editor.getSession().setUseWrapMode(true);
+    editor.getSession().setTabSize(2);
+    editor.getSession().setUseSoftTabs(true);
+    editor.setShowPrintMargin(false);
+    editor.renderer.setShowInvisibles(true);
+    editor.renderer.setShowGutter(false);
+
+    if (options.showButtonBar) {
+      var $btnBar = $('<div class="aced-button-bar aced-button-bar-top">' + buildThemeSelect().html() + ' <button type="button" class="btn btn-primary btn-xs aced-save">Save</button></div>')
+      element.find('.ace_content').before($btnBar);
+
+      $(".aced-save", $btnBar).click(function(){
+        submit();
+      });
+
+      if ($.fn.chosen) {
+        $('select', $btnBar).chosen().change(function(){
+          setTheme($(this).val());
+        });
+      }
+    }
+
+    if (options.keyMaster) {
+      bindKeyboard();
+    }
+
+    if (preview) {
+      editor.getSession().on('change', function (e) {
+        renderPreview();
+      });
+      renderPreview();
+    }
+
+    if (themeSelect) {
+      themeSelect
+        .find('li > a')
+        .bind('click', function (e) {
+          setTheme($(e.target).data('value'));
+          $(e.target).blur();
+          return false;
+        });
+    }
+
+    if (options.info) {
+      // If no info exists, save it to storage
+      if (!store.get(infoKey())) {
+        store.set(infoKey(), options.info);
+      } else {
+        // Check info in storage against one passed in
+        // for possible changes in data that may have occurred
+        var info = store.get(infoKey());
+        if (info['sha'] != options.info['sha'] && !info['ignore']) {
+          // Data has changed since start of draft
+          $(document).trigger('shaMismatch');
+        }
+      }
+    }
+
+    $(this).trigger('ready');
+  }
+
+  function init() {
+    gc();
+    initProfile();
+    initProps();
+    initEditor();
+    initSyncPreview();
+    autoSave();
+  }
+
+  init();
+
+  return {
+    editor: editor,
+    submit: submit,
+    val: val,
+    discard: discardDraft,
+    info: info
+  };
+}

realms/modules/wiki/static/js/collaboration/firepad.js

@@ -0,0 +1,52 @@
+// Helper to get hash from end of URL or generate a random one.
+function getExampleRef() {
+  var ref = new Firebase('https://' + Config['FIREBASE_HOSTNAME']);
+  var hash = window.location.hash.replace(/^#fp-/, '');
+  if (hash) {
+    ref = ref.child(hash);
+  } else {
+    ref = ref.push(); // generate unique location.
+    window.location = window.location + '#fp-' + ref.name(); // add it as a hash to the URL.
+  }
+  return ref;
+}
+
+function initFirepad() {
+  var new_ = true;
+  if (window.location.hash.lastIndexOf('#fp-', 0) === 0) {
+    new_ = false;
+  }
+  var firepadRef = getExampleRef();
+  var session = aced.editor.session;
+  var content;
+
+  if (new_) {
+    content = session.getValue();
+  }
+
+  // Firepad wants an empty editor
+  session.setValue('');
+
+  //// Create Firepad.
+  var firepad = Firepad.fromACE(firepadRef, aced.editor, {
+    defaultText: content
+  });
+
+  firepad.on('ready', function() {
+    startCollaboration();
+  });
+
+  $(document).on('end-collaboration', function() {
+    firepad.dispose();
+  });
+}
+
+$(document).on('loading-collaboration', function() {
+  initFirepad(true);
+});
+
+$(function(){
+  if (window.location.hash.lastIndexOf('#fp-', 0) === 0) {
+    loadingCollaboration();
+  }
+});

realms/modules/wiki/static/js/collaboration/main.js

@@ -0,0 +1,36 @@
+var $startCollaborationBtn = $('#start-collaboration');
+var $endCollaborationBtn = $('#end-collaboration');
+var $loadingCollaborationBtn = $('#loading-collaboration');
+
+function loadingCollaboration() {
+  $endCollaborationBtn.hide();
+  $startCollaborationBtn.hide();
+  $loadingCollaborationBtn.show();
+  $(document).trigger('loading-collaboration');
+}
+
+function startCollaboration() {
+  $loadingCollaborationBtn.hide();
+  $startCollaborationBtn.hide();
+  $endCollaborationBtn.show();
+  $(document).trigger('start-collaboration');
+}
+
+function endCollaboration() {
+  $loadingCollaborationBtn.hide();
+  $endCollaborationBtn.hide();
+  $startCollaborationBtn.show();
+  $(document).trigger('end-collaboration');
+}
+
+$(function() {
+  $startCollaborationBtn.click(function(e) {
+    loadingCollaboration();
+    e.preventDefault();
+  });
+  $endCollaborationBtn.click(function(e) {
+    endCollaboration();
+    e.preventDefault();
+
+  });
+});

realms/modules/wiki/static/js/collaboration/togetherjs.js

@@ -0,0 +1,28 @@
+$(document).on('loading-collaboration', function() {
+  TogetherJS();
+});
+
+$(document).on('end-collaboration', function() {
+  TogetherJS();
+});
+
+TogetherJSConfig_toolName = "Collaboration";
+TogetherJSConfig_suppressJoinConfirmation = true;
+
+if (User.is_authenticated) {
+  TogetherJSConfig_getUserName = function () {
+    return User.username;
+  };
+
+  TogetherJSConfig_getUserAvatar = function () {
+    return User.avatar;
+  };
+}
+
+TogetherJSConfig_on_ready = function () {
+  startCollaboration();
+};
+
+TogetherJSConfig_on_close = function () {
+  //endCollaboration();
+};

realms/modules/wiki/static/js/editor.js

@@ -0,0 +1,119 @@
+var $entry_markdown_header = $("#entry-markdown-header");
+var $entry_preview_header = $("#entry-preview-header");
+var $entry_markdown = $(".entry-markdown");
+var $entry_preview = $(".entry-preview");
+var $page_name = $("#page-name");
+var $page_message = $("#page-message");
+
+// Tabs
+$entry_markdown_header.click(function(){
+  $entry_markdown.addClass('active');
+  $entry_preview.removeClass('active');
+});
+
+$entry_preview_header.click(function(){
+  $entry_preview.addClass('active');
+  $entry_markdown.removeClass('active');
+});
+
+$(document).on('shaMismatch', function() {
+  bootbox.dialog({
+    title: "Page has changed",
+    message: "This page has changed and differs from your draft.  What do you want to do?",
+    buttons: {
+      ignore: {
+        label: "Ignore",
+        className: "btn-default",
+        callback: function() {
+          var info = aced.info();
+          info['ignore'] = true;
+          aced.info(info);
+        }
+      },
+      discard: {
+        label: "Discard Draft",
+        className: "btn-danger",
+        callback: function() {
+          aced.discard();
+        }
+      },
+      changes: {
+        label: "Show Diff",
+        className: "btn-primary",
+        callback: function() {
+          bootbox.alert("Draft diff not done! Sorry");
+        }
+      }
+    }
+  })
+});
+
+$(function(){
+  $("#discard-draft-btn").click(function() {
+    aced.discard();
+  });
+
+  $(".entry-markdown .floatingheader").click(function(){
+    aced.editor.focus();
+  });
+
+  $("#delete-page-btn").click(function() {
+    bootbox.confirm('Are you sure you want to delete this page?', function(result) {
+      if (result) {
+        deletePage();
+      }
+    });
+  });
+});
+
+var deletePage = function() {
+  var pageName = $page_name.val();
+  var path = Config['RELATIVE_PATH'] + '/' + pageName;
+
+  $.ajax({
+    type: 'DELETE',
+    url: path,
+  }).done(function(data) {
+    var msg = 'Deleted page: ' + pageName;
+    bootbox.alert(msg, function() {
+      location.href = '/';
+    });
+  }).fail(function(data, status, error) {
+    bootbox.alert('Error deleting page!');
+  });
+};
+
+var aced = new Aced({
+  editor: $('#entry-markdown-content').find('.editor').attr('id'),
+  renderer: function(md) { return MDR.convert(md) },
+  info: Commit.info,
+  submit: function(content) {
+    var data = {
+      name: $page_name.val().replace(/^\/*/g, "").replace(/\/+/g, "/"),
+      message: $page_message.val(),
+      content: content
+    };
+
+    // If renaming an existing page, use the old page name for the URL to PUT to
+    var subPath = (PAGE_NAME) ? PAGE_NAME : data['name'];
+    var path = Config['RELATIVE_PATH'] + '/' + subPath;
+    var newPath = Config['RELATIVE_PATH'] + '/' + data['name'];
+
+    var type = (Commit.info['sha']) ? "PUT" : "POST";
+
+    $.ajax({
+      type: type,
+      url: path,
+      data: data,
+      dataType: 'json'
+    }).always(function(data, status, error) {
+      var res = data['responseJSON'];
+      if (res && res['error']) {
+        $page_name.addClass('parsley-error');
+        bootbox.alert("<h3>" + res['message'] + "</h3>");
+      } else {
+        location.href = newPath;
+      }
+    });
+  }
+});