pages_core 3.4.3 → 3.7.0

data/app/assets/javascripts/pages/admin/components/rich_text_area.jsx

@@ -0,0 +1,64 @@
+class RichTextArea extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: props.value || "",
+      rows: props.rows || 5
+    };
+    this.inputRef = React.createRef();
+    this.handleChange = this.handleChange.bind(this);
+    this.getSelection = this.getSelection.bind(this);
+    this.replaceSelection = this.replaceSelection.bind(this);
+  }
+
+  getSelection() {
+    let { selectionStart,
+          selectionEnd,
+          value } = this.inputRef.current;
+    return value.substr(selectionStart, (selectionEnd - selectionStart));
+  }
+
+  replaceSelection(prefix, replacement, postfix) {
+    let textarea = this.inputRef.current;
+    let { selectionStart, selectionEnd, value } = textarea;
+
+    textarea.value =
+      value.substr(0, selectionStart) +
+      prefix + replacement + postfix +
+      value.substr(selectionEnd, value.length);
+
+    textarea.focus({ preventScroll: true });
+    textarea.setSelectionRange(
+      selectionStart + prefix.length,
+      selectionStart + prefix.length + replacement.length
+    );
+    this.setValue(textarea.value);
+  }
+
+  handleChange(evt) {
+    this.setValue(evt.target.value);
+  }
+
+  render() {
+    let { value, rows } = this.state;
+    let { id, name, simple } = this.props;
+    return (
+      <div className="rich-text-area">
+        <RichTextToolbar simple={simple}
+                         getSelection={this.getSelection}
+                         replaceSelection={this.replaceSelection} />
+        <textarea className="rich"
+                  ref={this.inputRef}
+                  id={id}
+                  name={name}
+                  value={value}
+                  rows={rows}
+                  onChange={this.handleChange} />
+      </div>
+    );
+  }
+
+  setValue(value) {
+    this.setState({ value: value });
+  }
+}

data/app/assets/javascripts/pages/admin/components/rich_text_toolbar.jsx

@@ -0,0 +1,91 @@
+class RichTextToolbar extends React.Component {
+  constructor(props) {
+    super(props);
+    this.link = this.link.bind(this);
+  }
+
+  relativeUrl(str) {
+    let url = null;
+
+    if (!str.match(/^https:\/\//) || !document || !document.location) {
+      return str;
+    }
+
+    try {
+      url = new URL(str);
+    } catch (error) {
+      console.log("Error parsing URL: ", error);
+    }
+
+    if (url &&
+        url.hostname == document.location.hostname &&
+        (document.location.port || "80") == (url.port || "80")) {
+      return url.pathname;
+    }
+    return str;
+  }
+
+  link(selection) {
+    let name = selection.length > 0 ? selection : "Link text";
+    var url = prompt("Enter link URL", "");
+    if (url) {
+      return ["\"", name, `":${this.relativeUrl(url)}`];
+    } else {
+      return ["", name, ""];
+    }
+  }
+
+  emailLink(selection) {
+    var address = prompt("Enter email address", "");
+    let name = selection.length > 0 ? selection : address;
+    return ["\"", name, `":mailto:${address}`];
+  }
+
+  strToList(str, prefix) {
+    return str.split("\n").map(l => prefix +  " " + l).join("\n");
+  }
+
+  button(name, className, handler) {
+    let clickHandler = (evt) => {
+      evt.preventDefault();
+      let [prefix, replacement, postfix] = handler(this.props.getSelection());
+      this.props.replaceSelection(prefix, replacement, postfix);
+    };
+
+    return (
+      <a title={name}
+         className={"button " + className}
+         onClick={clickHandler}>
+        <i className={"fa fa-" + className} />
+      </a>
+    );
+  }
+
+  render() {
+    if (this.props.simple) {
+      return (
+        <div className="rich-text toolbar">
+          {this.button("Bold", "bold", (str) => ["<b>", str, "</b>"])}
+          {this.button("Italics", "italic", (str) => ["<i>", str, "</i>"])}
+        </div>
+      );
+    } else {
+      return (
+        <div className="rich-text toolbar">
+          {this.button("Bold", "bold", (str) => ["<b>", str, "</b>"])}
+          {this.button("Italics", "italic", (str) => ["<i>", str, "</i>"])}
+          {this.button("Heading 2", "header h2", (str) => ["h2. ", str, ""])}
+          {this.button("Heading 3", "header h3", (str) => ["h3. ", str, ""])}
+          {this.button("Heading 4", "header h4", (str) => ["h4. ", str, ""])}
+          {this.button("Blockquote", "quote-left", (str) => ["bq. ", str, ""])}
+          {this.button("List", "list-ul",
+                       (str) => ["", this.strToList(str, "*"), ""])}
+          {this.button("Ordered list", "list-ol",
+                       (str) => ["", this.strToList(str, "#"), ""])}
+          {this.button("Link", "link", this.link)}
+          {this.button("Email link", "envelope", this.emailLink)}
+        </div>
+      );
+    }
+  }
+}

data/app/assets/javascripts/pages/admin/components/toast.jsx

@@ -0,0 +1,34 @@
+class Toast extends Reflux.Component {
+  constructor(props) {
+    super(props);
+    this.store = ToastStore;
+  }
+
+  componentDidMount() {
+    if (this.props.notice) {
+      ToastActions.notice(this.props.notice);
+    }
+  }
+
+  render() {
+    let toast = this.state.current;
+    let classNames = ["toast"];
+
+    if (toast) {
+      classNames.push(toast.type);
+      if (this.state.fadeout) {
+        classNames.push("fadeout");
+      }
+    }
+
+    return (
+      <div className="toast-wrapper">
+        {toast && (
+           <div className={classNames.join(" ")}>
+             {toast.message}
+           </div>
+        )}
+      </div>
+    );
+  }
+}

data/app/assets/javascripts/pages/admin/components/toast_store.jsx

@@ -0,0 +1,52 @@
+var ToastActions = Reflux.createActions([
+  "notice",
+  "error"
+]);
+
+class ToastStore extends Reflux.Store {
+  constructor() {
+    super();
+    this.state = {
+      current: null,
+      fadeout: false,
+      queue: []
+    };
+    this.listenToMany(ToastActions);
+  }
+
+  addToQueue(msg, type) {
+    let entry = { message: msg, type: type };
+    if (this.state.current) {
+      this.setState({ queue: [...this.state.queue, entry] });
+    } else {
+      this.showToast(entry, this.state.queue);
+    }
+  }
+
+  showToast(entry, queue) {
+    let store = this;
+    this.setState({ current: entry, queue: queue, fadeout: false });
+    setTimeout(function () {
+      store.setState({ fadeout: true });
+      setTimeout(() => store.next(), 500);
+    }, 4000);
+  }
+
+  next() {
+    let queue = this.state.queue;
+    if (queue.length > 0) {
+      let entry = queue.shift();
+      this.showToast(entry, queue);
+    } else {
+      this.setState({ current: null, fadeout: false });
+    }
+  }
+
+  onNotice(msg) {
+    this.addToQueue(msg, "notice");
+  }
+
+  onError(msg) {
+    this.addToQueue(msg, "error");
+  }
+}

data/app/assets/javascripts/pages/admin/features/content_tabs.jsx

@@ -0,0 +1,72 @@
+var ContentTabs = {
+  tabs: [],
+  ids: [],
+
+  show: function(id, skipPushState) {
+    let tabs = ContentTabs.tabs;
+    let tab = tabs[id];
+    if (tab) {
+      $.each(ContentTabs.ids, function(i) {
+        if (tabs[this]) {
+          $(tabs[this]).hide();
+        }
+        $("#content-tab-link-" + this).removeClass("current");
+      });
+      $(tab).show();
+      $("#content-tab-link-" + id).addClass("current");
+      if (!skipPushState) {
+        history.pushState({ tabId: id }, "", `${window.location.pathname}#${id}`);
+      }
+    }
+  },
+
+  showFromURL: function(url) {
+    let tab_expression = /#(.*)$/;
+    if (url.toString().match(tab_expression)) {
+      let id = url.toString().match(tab_expression)[1];
+      if (ContentTabs.tabs[id]) {
+        ContentTabs.show(id);
+      }
+    }
+  },
+
+  enable: function(ids) {
+    let tabs = ContentTabs.tabs;
+    ContentTabs.ids = ids;
+    $.each(ids, function(i) {
+      let id = this;
+      return $("#content-tab-" + this).each(function(i) {
+        this.id = id;
+        return tabs[id] = this;
+      });
+    });
+    ContentTabs.show(ids[0], true);
+    ContentTabs.showFromURL(document.location);
+  },
+
+  init: function() {
+    if ($("#content-tabs").length > 0) {
+      window.addEventListener("popstate", (evt) => {
+        if (evt.state && evt.state.tabId) {
+          ContentTabs.show(evt.state.tabId);
+        }
+      });
+
+      let tabNames = $("#content-tabs li").map(function() {
+        return $(this).data("tab-name");
+      }).get();
+      ContentTabs.enable(tabNames);
+      $("#content-tabs a").each(function() {
+        $(this).click(function() {
+          ContentTabs.showFromURL(this.href);
+          return false;
+        });
+      });
+    }
+    window.showContentTab = ContentTabs.show;
+  }
+};
+
+$(function() {
+  ContentTabs.init();
+});

data/app/assets/javascripts/pages/admin/features/edit_page.jsx

@@ -0,0 +1,97 @@
+class EditPage {
+  constructor(container) {
+    this.container = container;
+    this.toggleAdvancedOptions();
+    this.replicateFormElements();
+    this.checkPublishedStatus();
+    this.checkPublishedDate();
+    this.previewButton();
+  }
+
+  checkPublishedStatus() {
+    let checkStatus = function() {
+      var pageStatus = $("#page-form-sidebar #page_status").val();
+      if (pageStatus === "2") {
+        return $("#page-form-sidebar .published-date").fadeIn();
+      } else {
+        return $("#page-form-sidebar .published-date").hide();
+      }
+    };
+    $("#page-form-sidebar #page_status").change(checkStatus);
+    checkStatus();
+  }
+
+  checkPublishedDate() {
+    $(".autopublish-notice").hide();
+    let publishedAt = function(i) {
+      return $(`#page-form-sidebar select[name="page[published_at(${i}i)]"]`)
+               .val();
+    };
+    let checkDate = function() {
+      var year = publishedAt(1);
+      var month = publishedAt(2);
+      var day = publishedAt(3);
+      var hour = publishedAt(4);
+      var minute = publishedAt(5);
+      var publishDate = new Date(year, (month - 1), day, hour, minute);
+      var now = new Date();
+      if (publishDate > now) {
+        return $(".autopublish-notice").fadeIn();
+      } else {
+        return $(".autopublish-notice").fadeOut();
+      }
+    };
+    $(".published-date").find("select").change(checkDate);
+    checkDate();
+  }
+
+  previewButton() {
+    $("#previewButton").click(function() {
+      var button = this;
+      var form = $(button).closest("form").get(0);
+      var previewUrl = $(this).data("url");
+
+      // Rewrite the form and submit
+      form.oldAction = form.action;
+      form.target = "_blank";
+      form.action = previewUrl;
+      $(form).submit();
+
+      // Undo rewrite
+      form.action = form.oldAction;
+      form.target = "";
+    });
+  }
+
+  replicateFormElements() {
+    let replicateFormElement = function() {
+      var newValue = this;
+      $("#page-form").find("[name=\"" + newValue.name + "\"]")
+                     .each(function() {
+                       if (newValue.type === "checkbox") {
+                         $(this).prop("checked", $(newValue).prop("checked"));
+                       } else {
+                         $(this).val($(newValue).val());
+                       }
+                     });
+    };
+
+    $("#page-form-sidebar")
+      .find("input,textarea,select")
+      .change(replicateFormElement);
+  }
+
+  toggleAdvancedOptions() {
+    let container = this.container;
+    $(container).find(".advanced-options").hide();
+    $(container).find(".advanced-toggle").click(function() {
+      return $(container).find(".advanced-options").slideToggle();
+    });
+  }
+}
+
+$(function () {
+  $(".edit-page").each(function() {
+    new EditPage(this);}
+  );
+});

data/app/assets/javascripts/pages/admin/features/rich_text.jsx

@@ -0,0 +1,14 @@
+$(function() {
+  $("textarea.rich").each(function () {
+    let container = document.createElement("div");
+    this.parentNode.appendChild(container);
+    ReactDOM.render(
+      <RichTextArea value={this.value}
+                    name={this.name}
+                    rows={this.rows}
+                    id={this.id} />,
+      container
+    );
+    this.parentNode.removeChild(this);
+  });
+});

data/app/assets/javascripts/pages/admin/features/tag_editor.jsx

@@ -0,0 +1,160 @@
+var TagEditor = function(container) {
+  this.initialize(container);
+};
+
+$.extend(TagEditor.prototype, {
+  initialize: function(container) {
+    var tagEditor = this;
+    tagEditor.container = container;
+    tagEditor.tags = Array();
+    tagEditor.serializeField = $(tagEditor.container).find(".serialized_tags").get(0);
+    tagEditor.findTags(true);
+
+    tagEditor.inputField = $(tagEditor.container).find(".add-tag").get(0);
+    $(tagEditor.container).find(".add-tag-button").click(function() {
+      tagEditor.addTag();
+      $(tagEditor.container).find(".add-tag").blur();
+      return false;
+    });
+    $(tagEditor.container).find(".add-tag").keydown(function(event) {
+      if (event.which === 13) {
+        tagEditor.addTag();
+        return false;
+      }
+    });
+
+    $(tagEditor.container).find(".add-tag").each(function(){
+      var field = this;
+      field.exampleText = $(field).val();
+      $(field).addClass("example");
+      $(field).focus(function(event){
+        $(tagEditor.container).find(".add-tag-button").fadeIn("fast");
+        $(field).removeClass("example");
+        if ($(field).val() === field.exampleText) {
+          $(field).val("");
+        }
+      });
+      $(field).blur(function(event) {
+        $(tagEditor.container).find(".add-tag-button").fadeOut("fast");
+        if (!$(field).val() || $(field).val() === field.exampleText) {
+          $(field).addClass("example").val(field.exampleText);
+        }
+      });
+    });
+    $(tagEditor.container).find(".add-tag-button").hide();
+  },
+
+  addTag: function() {
+    var tagEditor = this;
+    var tagName = $(tagEditor.inputField).val().replace(/^\s\s*/, "").replace(/\s\s*$/, "");
+    if (tagName) {
+      if (this.hasTag(tagName)) {
+        this.enable(this.getTagByName(tagName));
+      } else {
+        $(tagEditor.container).find(".tags").append("<span class=\"tag\"><input type=\"checkbox\" name=\"tag-"+tagName+"\" value=\"1\" checked=\"checked\"><span class=\"name\">"+tagName+"</span></span>");
+        tagEditor.findTags();
+      }
+    }
+    $(tagEditor.inputField).val("");
+  },
+
+  findTags: function(permanentize) {
+    var tagEditor = this;
+    $(this.container).find(".tag").each(function () {
+      var tag = this;
+      if (!tag.tagEditorApplied) {
+        tag.checkBox = $(tag).find("input[type=checkbox]").get(0);
+        tag.name = $(tag).find(".name").text();
+        if(tagEditor.isChecked(tag)){
+          tag.enabled = true;
+          $(tag).addClass("enabled");
+        } else {
+          tag.enabled = false;
+        }
+        $(tag).click(function () {
+          tagEditor.toggle(tag);
+        });
+        tagEditor.tags[tagEditor.tags.length] = tag;
+        tag.tagEditorApplied = true;
+      }
+    });
+    tagEditor.serializeTags();
+  },
+
+  hasTag: function(tagName) {
+    var hasTag = false;
+    $(this.tags).each(function () {
+      if (tagName.toLowerCase() === this.name.toLowerCase()) {
+        hasTag = true;
+      }
+    });
+    return hasTag;
+  },
+
+  setEnabled: function(tag, enabled) {
+    tag.enabled = enabled;
+    if (tag.enabled) {
+      $(tag).addClass("enabled");
+    } else {
+      $(tag).removeClass("enabled");
+    }
+    $(tag.checkBox).attr("checked", tag.enabled);
+    this.serializeTags();
+  },
+
+  toggle: function(tag) {
+    if (tag.enabled) {
+      this.disable(tag);
+    } else {
+      this.enable(tag);
+    }
+  },
+
+  enable: function(tag) {
+    this.setEnabled(tag, true);
+  },
+
+  disable: function(tag) {
+    this.setEnabled(tag, false);
+  },
+
+  getTagByName: function(tagName) {
+    var tag = null;
+    $(this.tags).each(function(){
+      if (this.name.toLowerCase() === tagName.toLowerCase()) {
+        tag = this;
+      }
+    });
+    return tag;
+  },
+
+  isChecked: function(tag) {
+    return $(tag.checkBox).attr("checked");
+  },
+
+  enabledTags: function() {
+    var enabledTags = Array();
+    $(this.tags).each(function() {
+      if (this.enabled) {
+        enabledTags[enabledTags.length] = this;
+      }
+    });
+    return enabledTags;
+  },
+
+  serializeTags: function() {
+    var tagNames = Array();
+    $(this.enabledTags()).each(function() {
+      tagNames[tagNames.length] = "\"" + this.name.replace("\"", "\\\"") + "\"";
+    });
+    $(this.serializeField).val("["+tagNames.join(", ")+"]");
+    $(this.container).find(".add-tag").attr("disabled", false);
+  }
+});
+
+// Apply the tag editor to each instance
+$(function() {
+  $(".tag-editor").each(function() {
+    this.tagEditor = new TagEditor(this);
+  });
+});