pages_core 3.5.1 → 3.6.0

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

@@ -0,0 +1,63 @@
+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 } = this.props;
+    return (
+      <div className="rich-text-area">
+        <RichTextToolbar 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,58 @@
+class RichTextToolbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  link(selection) {
+    let name = selection.length > 0 ? selection : "Link text";
+    var url = prompt("Enter link URL", "");
+    url = url.length > 0 ? url : "http://example.com/";
+    url = url.replace(/^(?!(f|ht)tps?:\/\/)/, 'http://');
+    return ["\"", name, `\":${url}`];
+  }
+
+  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() {
+    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,37 @@
+class Toast extends Reflux.Component {
+  constructor(props) {
+    super(props);
+    this.store = ToastStore;
+  }
+
+  componentDidMount() {
+    if (this.props.notice) {
+      ToastActions.notice(this.props.notice);
+    }
+  }
+
+  componentWillUnmount() {
+  }
+
+  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.es6.jsx → content_tabs.jsx}

@@ -2,7 +2,7 @@ var ContentTabs = {
   tabs: [],
   ids: [],
 
-  show: function(id) {
+  show: function(id, skipPushState) {
     let tabs = ContentTabs.tabs;
     let tab = tabs[id];
     if (tab) {
@@ -14,6 +14,9 @@ var ContentTabs = {
       });
       $(tab).show();
       $("#content-tab-link-" + id).addClass("current");
+      if (!skipPushState) {
+        history.pushState({ tabId: id }, "", `${window.location.pathname}#${id}`);
+      }
     }
   },
 
@@ -37,12 +40,18 @@ var ContentTabs = {
         return tabs[id] = this;
       });
     });
-    ContentTabs.show(ids[0]);
+    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();

data/app/assets/javascripts/pages/admin/features/{edit_page.es6.jsx → edit_page.jsx}

@@ -1,11 +1,10 @@
 class EditPage {
-  constructor() {
+  constructor(container) {
+    this.container = container;
     this.toggleAdvancedOptions();
     this.replicateFormElements();
     this.checkPublishedStatus();
     this.checkPublishedDate();
-    this.uploadModals();
-    this.fileList();
     this.previewButton();
   }
 
@@ -27,7 +26,7 @@ class EditPage {
     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);
@@ -46,35 +45,6 @@ class EditPage {
     checkDate();
   }
 
-  fileList() {
-    // Reordering files
-    $(".file-list").each(function() {
-      var list = this;
-      return $(list).sortable({
-        axis: "y",
-        cursor: "move",
-        distance: 10,
-        handle: ".drag-handle",
-        placeholder: "placeholder",
-
-        update() {
-          return $.post( $(list).data('url'), { ids: ((() => {
-            var result = [];
-            var iterable = $(list).find('li').get();
-            for (var i = 0, item; i < iterable.length; i++) {
-              item = iterable[i];
-              result.push($(item).data('file-id'));
-            }
-            return result;
-          })()) }, function() {
-            return $(list).effect("highlight", {}, 500);
-          }
-          );
-        }
-      });
-    });
-  }
-
   previewButton() {
     $("#previewButton").click(function() {
       var button = this;
@@ -112,24 +82,10 @@ class EditPage {
   }
 
   toggleAdvancedOptions() {
-    $(".advanced-options").hide();
-    $(".advanced-toggle").click(function() {
-      return $(".advanced-options").slideToggle();
-    });
-  }
-
-  uploadModals() {
-    $("#new-image").hide();
-    $("#new-file").hide();
-    $(".upload-images-button").click(function() {
-      return Modal.show(
-        "<div class=\"uploadImages\">" + $("#new-image").html() + "</div>"
-      );
-    });
-    $(".upload-file-button").click(function() {
-      return Modal.show(
-        "<div class=\"uploadImages\">" + $("#new-file").html() + "</div>"
-      );
+    let container = this.container;
+    $(container).find(".advanced-options").hide();
+    $(container).find(".advanced-toggle").click(function() {
+      return $(container).find(".advanced-options").slideToggle();
     });
   }
 }

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/stylesheets/pages/admin.scss

@@ -1,5 +1,5 @@
 @import 'jquery-ui';
-@import 'jquery.Jcrop';
+@import 'ReactCrop';
 @import 'font-awesome';
 @import 'admin/vars';
 @import 'admin/mixins/**/*';
@@ -7,12 +7,8 @@
 @import 'admin/controllers/**/*';
 
 body {
-  background: #fff;
-  color: #000;
-}
-
-main {
-  color: #222;
+  background: $c-background;
+  color: $c-text;
 }
 
 body, td, th {
@@ -30,7 +26,7 @@ img {
 
 small {
   font-size: 0.9em;
-  color: #666;
+  color: $c-text-light;
 }
 
 th {
@@ -38,7 +34,7 @@ th {
 }
 
 .hr {
-  border-top: 1px solid #aaa;
+  border-top: 1px solid $c-border;
   hr {
     display: none;
   }
@@ -61,7 +57,7 @@ td {
 }
 
 #flash-error {
-  @include vertical-gradient(#970002, #c00007);
+  @include vertical-gradient(#970002, $c-red);
   border-bottom: 1px solid #9c0002;
   color: #fff299;
   font-weight: bold;
@@ -86,7 +82,7 @@ td {
     font-size: 1.4em;
     margin: 0 -32px 16px -32px;
     padding:  8px 32px;
-    background-color: #a00;
+    background-color: $c-red;
     color: #fff;
   }
 
@@ -119,7 +115,7 @@ div.paginator {
   margin: 32px 0;
   font-size: 1.5em;
   font-weight: bold;
-  color: #666;
+  color: $c-text-light;
 }
 
 img.thumbnail {
@@ -130,7 +126,7 @@ li .actions {
   font-weight: normal;
   display:  inline;
   font-size: 12px;
-  color: #aaa;
+  color: $c-text-light;
   margin-top: 1px;
 }
 

data/app/assets/stylesheets/pages/admin/components/archive.scss

@@ -0,0 +1,6 @@
+.archive-index {
+  .count {
+    font-weight: normal;
+    color: $c-text-light;
+  }
+}

data/app/assets/stylesheets/pages/admin/components/attachments.scss

@@ -0,0 +1,130 @@
+.attachments {
+  margin-bottom: 40px;
+
+  .drop-target {
+    position: relative;
+    width: 100%;
+    text-align: center;
+    line-height: 1.6;
+    margin-top: 20px;
+
+    &:first-child {
+      margin-top: 0px;
+    }
+
+    .upload-button {
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      min-height: 150px;
+      background: $c-background-disabled;
+    }
+  }
+
+  .attachment {
+    border-bottom: 1px solid $c-border;
+    padding: 16px 0px 16px 40px;
+    cursor: pointer;
+    background: #fff;
+    transition: padding-left 50ms ease-in-out,
+                background 150ms ease-in-out;
+
+    .attachment-info {
+      transition: all 50ms ease-in-out;
+    }
+
+    &.drop-placeholder {
+      font-size: 14px;
+      margin-top: -1px;
+      border-top: 1px solid $c-border;
+      background: $c-background-disabled;
+      text-align: center;
+      color: $c-text-light;
+      padding: 24px 0px;
+    }
+
+    &.uploading,
+    &.placeholder {
+      padding-left: 56px;
+      background: $c-background-disabled;
+      .attachment-info {
+        opacity: 0.5;
+      }
+      .actions {
+        display: none;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0px;
+    }
+
+    .actions {
+      float: right;
+    }
+
+    h3 {
+      margin: 0px 0px 12px 0px;
+      .icon {
+        display: block;
+        float: left;
+        margin-left: -40px;
+        font-size: 24px;
+      }
+    }
+
+    p {
+      &:last-child {
+        margin-bottom: 0px;
+      }
+    }
+
+    button {
+      cursor: pointer;
+      border: 1px solid $c-border;
+      border-radius: 3px;
+      background: $c-button;
+      padding: 5px 20px;
+      font-size: 12px;
+      color: $c-text;
+      &:hover, &:focus {
+        background: #fff;
+      }
+    }
+  }
+}
+
+.attachment-editor {
+  width: 60vw;
+  min-height: 450px;
+  @include breakpoint-mobile {
+    width: 100%;
+    height: 100%;
+  }
+
+  form {
+    width: 100%;
+
+    .buttons {
+      margin-top: 24px;
+    }
+
+    .embed-code {
+      input[type=text] {
+        width: 50%;
+        max-width: 100px;
+        margin-right: 8px;
+      }
+    }
+
+    textarea,
+    input[type=text] {
+      max-width: 100%;
+      &.description {
+        height: 100px;
+      }
+    }
+  }
+}