pages_core 3.4.3 → 3.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 200e34fe559ba502528e3090ca7586c9f69bca8f
-  data.tar.gz: 4a35d1688c4acbd7bf05fd7d5d723f8709d1629c
+SHA256:
+  metadata.gz: cba48a2b0698e8cd5316c0a6ff4ac970acea8abafb22cafb9963bda731c1ff8c
+  data.tar.gz: 9496d0d7a91a8109461bdf0481e612dc5fa164ca9f429a1a020a5f0113a96a42
 SHA512:
-  metadata.gz: 7a4ad5e9d16d73460d1f2140dd46338cd5f2c2fedc4e2db874a4f5bf54193a055bfba6b49342c284ced382a581acb2411ab524b205ce1a29ee71c91db923e4d0
-  data.tar.gz: 993c77ec2473ac90dfad7deb9c851367cd1ef1456fc6dc1fccfe86b78d6604dfb72f4034869145c5823b5489e53eaa3247f0b02c7400a034daff492aff97270e
+  metadata.gz: 2e6907a2509eac3121bc1afb5a77a4aca368c624bbb26499ba4cca59301e706471f72a6f06fbff0e024a402805e5ddf09f932b723a30dca0e617b363a6389b03
+  data.tar.gz: aea50ccfcbbc65d5ec92f0e8dcb7d55e4088c2d71cce24d6d1b1a627545532c5d3b70496c5954612f83b46bcce794e1f55bb9ef7493dfbd3bd5c4bd16fa19c7b

data/README.md

@@ -1,29 +1,88 @@
-# PagesCore
+[![Version](https://img.shields.io/gem/v/pages_core.svg?style=flat)](https://rubygems.org/gems/pages_core)
+[![Build Status](https://travis-ci.org/anyone-oslo/pages.svg?branch=master)](https://travis-ci.org/anyone-oslo/pages)
+[![Code Climate](https://codeclimate.com/github/anyone-oslo/pages/badges/gpa.svg)](https://codeclimate.com/github/anyone-oslo/pages)
+[![Test Coverage](https://codeclimate.com/github/anyone-oslo/pages/badges/coverage.svg)](https://codeclimate.com/github/anyone-oslo/pages)
+[![Inline docs](http://inch-ci.org/github/anyone-oslo/pages.svg)](http://inch-ci.org/github/anyone-oslo/pages)
 
-Pages is a CMS for Rails apps.
+# Pages
 
-## Installation
+## Getting started
 
-### Using the template
+Pages is a Ruby on Rails-based CMS tailored for Rails developers.
 
-    rails new [app name] -T -d mysql -m ~/Dev/gems/pages/template.rb
+The box does not include any themes or templates. Rather, it aims to
+make it as easy as possible to build your site from scratch, harnessing
+all the power of Rails and it's assets pipeline.
 
-### Using the generators
+To get started, you'll need a Rails app. A freshly generated one will
+do. Add it to your Gemfile:
 
-Add pages_core to your Gemfile:
+```ruby
+gem "pages_core"
+```
 
-    gem 'pages_core', git: 'git@github.com:manualdesign/pages.git', branch: 'master'
+Next, run the installer (which will ask you a few questions), and then
+the migrations.
 
-Run Bundler:
+```sh
+bin/rails g pages_core:install
+bin/rake db:migrate
+```
 
-    bundle install
+You should now be ready to fire up the server and visit /admin to
+create your first user account.
 
-And generate the config files:
+## Quick tour
 
-    rails g pages_core:install
+Pages is all about the `Page` model - a site is a tree of Pages. Every
+page has a template (which corresponds to the files in
+`app/views/pages/templates`). Here's a sample template:
 
-Now visit /admin and create your user account.
+```html
+<h1>
+  <%= @page.name %>
+</h1>
 
-## Upgrading
+<% if @page.excerpt? %>
+  <%= @page.excerpt.to_html %>
+<% end %>
 
-Review the [changelog](CHANGELOG.md) for breaking changes.
+<% if @page.body? %>
+  <%= @page.body.to_html %>
+<% end %>
+
+<% if @page.pages.any? %>
+  <h2>
+    More stuff
+  </h2>
+  <ul>
+    <% @page.pages.each do |p| %>
+      <li>
+        <%= link_to p.name, page_path(locale, p) %>
+      </li>
+    <% end %>
+  </ul>
+<% end %>
+```
+
+Every template has one or more blocks of content, configured in
+the `page_templates.rb` initializer. `name`, `excerpt` and `body`
+in the example above are the defaults, but this is fully customizable
+along with other optional features like images, file uploads, tags and more.
+
+You'll also notice that the page links have a locale param. Pages does support
+localizations:
+
+```ruby
+@page.localize(:en).name # => "Hello"
+@page.localize(:fr).name # => "Bonjour"
+```
+
+All the helpers and controllers will automatically set the locale for
+you and it propagates across relations, so you'll rarely end up
+interacting with it directly in this fashion.
+
+## License
+
+Pages is licensed under the
+[MIT License](http://www.opensource.org/licenses/MIT).

data/Rakefile

@@ -1,3 +1,5 @@
+# frozen_string_literal: true
+
 require "bundler/gem_tasks"
 require "rspec/core/rake_task"
 

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

@@ -0,0 +1,17 @@
+// Gem assets
+//= require jquery
+//= require jquery_ujs
+//= require jquery-ui
+//= require react
+//= require react_ujs
+//= require reflux.min
+
+// Vendored assets
+//= require ReactCrop.min
+
+//= require_self
+//= require pages/login_form
+//= require_tree ./admin/lib
+
+//= require pages/admin/components
+//= require_tree ./admin/features

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

@@ -0,0 +1,2 @@
+//= require ./components/drag_uploader
+//= require_tree ./components

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

@@ -0,0 +1,130 @@
+class Attachment extends React.Component {
+  constructor(props) {
+    super(props);
+    this.copyEmbed = this.copyEmbed.bind(this);
+    this.editAttachment = this.editAttachment.bind(this);
+    this.deleteRecord = this.deleteRecord.bind(this);
+    this.dragStart = this.dragStart.bind(this);
+  }
+
+  copyEmbed(evt) {
+    let attachment = this.props.record.attachment;
+    evt.preventDefault();
+    const el = document.createElement("textarea");
+    el.value = `[attachment:${attachment.id}]`;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand("copy");
+    document.body.removeChild(el);
+    ToastActions.notice("Embed code copied to clipboard");
+  }
+
+  deleteRecord(evt) {
+    evt.preventDefault();
+    if (this.props.deleteRecord) {
+      this.props.deleteRecord(this.props.record);
+    }
+  }
+
+  dragStart(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    if (this.props.startDrag) {
+      this.props.startDrag(evt, this.props.record);
+    }
+  }
+
+  description() {
+    let attachment = this.props.record.attachment;
+    if (attachment.description && attachment.description[this.props.locale]) {
+      return attachment.description[this.props.locale];
+    }
+    return null;
+  }
+
+  name() {
+    let attachment = this.props.record.attachment;
+    if (attachment.name && attachment.name[this.props.locale]) {
+      return attachment.name[this.props.locale];
+    }
+    return null;
+  }
+
+  editAttachment(evt) {
+    evt.preventDefault();
+    ModalActions.open(
+      <AttachmentEditor attachment={this.props.record.attachment}
+                        locale={this.props.locale}
+                        locales={this.props.locales}
+                        csrf_token={this.props.csrf_token}
+                        onUpdate={this.props.onUpdate} />
+    );
+  }
+
+  renderAttachment() {
+    let { attachment, uploading } = this.props.record;
+
+    let icon = uploading ? "cloud-upload" : "paperclip";
+
+    return(
+      <div className="attachment-info">
+        <h3>
+          <i className={`fa fa-${icon} icon`} />
+          {this.name() || <em>Untitled</em>}<br />
+        </h3>
+        {!uploading &&
+         <a href={attachment.url}
+            target="_blank">{attachment.filename}</a>}
+        {!uploading && this.description() && <p>{this.description()}</p>}
+      </div>
+    );
+  }
+
+  render() {
+    let { attributeName, record } = this.props;
+    let uploading = record.uploading;
+    let attachment = record.attachment;
+    let classes = ["attachment"];
+    if (this.props.placeholder) {
+      classes.push("placeholder");
+    }
+    if (this.props.record.uploading) {
+      classes.push("uploading");
+    }
+    return (
+      <div className={classes.join(" ")}
+           onDragStart={this.dragStart}
+           ref={this.props.record.ref}
+           draggable>
+        <input name={`${attributeName}[id]`}
+               type="hidden" value={record.id || ""} />
+        <input name={`${attributeName}[attachment_id]`}
+               type="hidden" value={(attachment && attachment.id) || ""} />
+        <input name={`${attributeName}[position]`}
+               type="hidden" value={this.props.position} />
+        {this.props.enablePrimary && (
+           <input name={`${attributeName}[primary]`}
+                  type="hidden" value={this.props.primary} />
+        )}
+        {!uploading &&
+         <div className="actions">
+           <button onClick={this.editAttachment}>
+             Edit
+           </button>
+           {this.props.showEmbed && (
+             <button onClick={this.copyEmbed}>
+               Embed
+             </button>
+           )}
+           {this.props.deleteRecord && (
+             <button onClick={this.deleteRecord}>
+               Remove
+             </button>
+           )}
+         </div>
+        }
+        {attachment && this.renderAttachment()}
+      </div>
+    );
+  }
+}

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

@@ -0,0 +1,131 @@
+class AttachmentEditor extends React.Component {
+  constructor(props) {
+    let attachment = props.attachment;
+
+    super(props);
+
+    this.state = {
+      locale:      this.props.locale,
+      name:        attachment.name || {},
+      description: attachment.description || {}
+    };
+
+    this.copyEmbedCode = this.copyEmbedCode.bind(this);
+    this.save = this.save.bind(this);
+  }
+
+  copyEmbedCode(evt) {
+    evt.preventDefault();
+    const el = document.createElement("textarea");
+    el.value = `[attachment:${this.props.attachment.id}]`;
+    document.body.appendChild(el);
+    el.select();
+    document.execCommand("copy");
+    document.body.removeChild(el);
+    ToastActions.notice("Embed code copied to clipboard");
+  }
+
+  copySupported() {
+    return document.queryCommandSupported &&
+      document.queryCommandSupported("copy");
+  }
+
+  render() {
+    let { locale, name, description } = this.state;
+    let locales = this.props.locales;
+    let attachment = this.props.attachment;
+    return (
+      <div className="attachment-editor">
+        <form>
+          {locales && Object.keys(locales).length > 1 && (
+            <div className="field">
+              <label>
+                Locale
+              </label>
+              <select name="locale"
+                      onChange={e => this.setState({locale: e.target.value})}>
+                {Object.keys(locales).map(key => (
+                  <option key={`locale-${key}`} value={key}>
+                    {locales[key]}
+                  </option>
+                ))}
+              </select>
+            </div>
+          )}
+          <div className="field">
+            <label>Name</label>
+            <input type="text"
+                   className="name"
+                   value={name[locale] || ""}
+                   onChange={e => this.updateLocalized("name",
+                                                       e.target.value)} />
+          </div>
+          <div className="field">
+            <label>Description</label>
+            <textarea className="description"
+                      value={description[locale] || ""}
+                      onChange={e => this.updateLocalized("description",
+                                                          e.target.value)} />
+          </div>
+          <div className="field embed-code">
+            <label>
+              Embed code
+            </label>
+            <input type="text"
+                   value={`[attachment:${attachment.id}]`}
+                   disabled={true} />
+            {this.copySupported() && (
+              <button onClick={this.copyEmbedCode}>
+                Copy
+              </button>
+            )}
+          </div>
+          <div className="field">
+            <label>File</label>
+            <a href={attachment.url}
+               target="_blank">{attachment.filename}</a>
+          </div>
+          <div className="buttons">
+            <button onClick={this.save}>
+              Save
+            </button>
+            <button onClick={() => ModalActions.close()}>
+              Cancel
+            </button>
+          </div>
+        </form>
+      </div>
+    );
+  }
+
+  save(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+
+    let data = { name: this.state.name,
+                 description: this.state.description };
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("PUT", `/admin/attachments/${this.props.attachment.id}`, true);
+    xhr.setRequestHeader("Content-Type","application/json; charset=utf-8");
+    xhr.setRequestHeader("X-CSRF-Token", this.props.csrf_token);
+    xhr.onload = function () {
+      if (xhr.readyState == 4 && xhr.status == "200") {
+	// Success
+      }
+    };
+    xhr.send(JSON.stringify({attachment: data}));
+
+    if (this.props.onUpdate) {
+      this.props.onUpdate(data);
+    }
+    ModalActions.close();
+  }
+
+  updateLocalized(name, value) {
+    let locale = this.state.locale;
+    this.setState({
+      [name]: { ...this.state[name], [locale]: value }
+    });
+  }
+}

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

@@ -0,0 +1,211 @@
+class Attachments extends DragUploader {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ...this.state,
+      records: props.records.map(
+        r => ({ ...r, ref: React.createRef(), handle: this.getHandle() })),
+      deleted: []
+    };
+
+    this.container = React.createRef();
+
+    this.deleteRecord = this.deleteRecord.bind(this);
+    this.receiveFiles = this.receiveFiles.bind(this);
+  }
+
+  attributeName(record) {
+    return `${this.props.attribute}[${this.index(record) + 1}]`;
+  }
+
+  deleteRecord(record) {
+    let { records, deleted } = this.state;
+    records = records.filter(i => i != record);
+    if (record.id) {
+      deleted = [...deleted, record];
+    }
+    this.setState({ records: records, deleted: deleted });
+  }
+
+  draggables() {
+    return this.state.records;
+  }
+
+  getDraggedOrder() {
+    let dragging = this.state.dragging;
+    var records = this.state.records;
+    if (dragging) {
+      if (this.hovering(this.container)) {
+        records = [];
+        this.state.records.filter(r => r !== dragging).forEach(r => {
+          if (this.hovering(r) && records.indexOf(dragging) === -1) {
+            records.push(dragging);
+          }
+          records.push(r);
+        });
+        if (records.indexOf(dragging) === -1) {
+          records.push(dragging);
+        }
+      } else {
+        records = this.state.records.filter(r => r !== dragging);
+        if (this.state.y < this.container.current.getBoundingClientRect().top) {
+          records = [dragging, ...records];
+        } else {
+          records.push(dragging);
+        }
+      }
+    }
+    return records;
+  }
+
+  index(record) {
+    let { records, deleted } = this.state;
+    let ordered = [...records, ...deleted];
+    return ordered.indexOf(record);
+  }
+
+  injectUploads(files, records) {
+    let queue = files.slice();
+    let source = records;
+
+    if (source.indexOf("Files") === -1) {
+      return [...source, ...queue];
+    } else {
+      records = [];
+      source.forEach(function (record) {
+        if (record === "Files") {
+          records = [...records, ...queue];
+        } else {
+          records.push(record);
+        }
+      });
+    }
+
+    return records;
+  }
+
+  receiveFiles(files, newState) {
+    this.setState({
+      ...newState,
+      records: this.injectUploads(files.map(f => this.uploadAttachment(f)),
+                                  this.getDraggedOrder())
+    });
+  }
+
+  render() {
+    let { dragging, deleted } = this.state;
+    let records = this.getDraggedOrder();
+    let classes = ["attachments"];
+    if (dragging) {
+      classes.push("dragover");
+    }
+    return (
+      <div className={classes.join(" ")}
+           ref={this.container}
+           onDragOver={this.drag}
+           onDrop={this.dragEnd}>
+        <div className="files">
+          {records.map(r => this.renderAttachment(r))}
+        </div>
+        <div className="deleted">
+          {deleted.map(r => this.renderDeletedRecord(r))}
+        </div>
+        <div className="drop-target">
+          <FileUploadButton multiple={true}
+                            multiline={true}
+                            callback={this.receiveFiles} />
+        </div>
+      </div>
+    );
+  }
+
+  renderAttachment(record) {
+    let dragging = this.state.dragging;
+
+    if (record === "Files") {
+      return (
+        <div className="attachment drop-placeholder"
+             key="file-placeholder">
+          Upload files here
+        </div>
+      );
+    }
+
+    let onUpdate = (attachment) => {
+      this.updateAttachment(record, attachment);
+    };
+
+    return (
+      <Attachment key={record.handle}
+                  record={record}
+                  locale={this.props.locale}
+                  locales={this.props.locales}
+                  csrf_token={this.props.csrf_token}
+                  showEmbed={this.props.showEmbed}
+                  startDrag={this.startDrag}
+                  position={this.index(record) + 1}
+                  onUpdate={onUpdate}
+                  deleteRecord={this.deleteRecord}
+                  attributeName={this.attributeName(record)}
+                  placeholder={dragging && dragging == record} />
+    );
+  }
+
+  renderDeletedRecord(record) {
+    let attachment = record.attachment;
+    let attrName = this.attributeName(record);
+    return (
+      <span className="deleted-attachment" key={`deleted-${record.id}`}>
+        <input name={`${attrName}[id]`}
+               type="hidden" value={record.id} />
+        <input name={`${attrName}[attachment_id]`}
+               type="hidden" value={(attachment && attachment.id) || ""} />
+        <input name={`${attrName}[_destroy]`}
+               type="hidden" value={true} />
+      </span>
+    );
+  }
+
+  updateAttachment(record, attachment) {
+    let records = this.state.records.slice();
+
+    records[records.indexOf(record)] = {
+      ...record,
+      attachment: { ...record.attachment, ...attachment }
+    };
+
+    this.setState({ records: records });
+  }
+
+  filenameToName(str) {
+    return str.replace(/\.[\w\d]+$/, "").replace(/_/g, " ");
+  }
+
+  uploadAttachment(file) {
+    let component = this;
+    let locale = this.props.locale;
+    let locales = this.props.locales ? Object.keys(this.props.locales) : [locale];
+
+    let name = {};
+    locales.forEach((l) => name[l] = file.name);
+
+    let obj = { attachment: { filename: file.name, name: name },
+                uploading: true,
+                ref: React.createRef(),
+                handle: this.getHandle() };
+    let data = new FormData();
+
+    data.append("attachment[file]", file);
+    locales.forEach((l) => {
+      data.append(`attachment[name][${l}]`, this.filenameToName(file.name));
+    });
+    this.postFile("/admin/attachments.json", data, function (json) {
+      obj.attachment = json;
+      obj.uploading = false;
+      component.setState({ });
+    });
+
+    return obj;
+  }
+}