pollypost 0.0.2

data/assets/javascripts/views/loading.js

@@ -0,0 +1,31 @@
+/**
+ *  This file is part of Pollypost, inline editing for static sites.
+ *  Copyright (C) 2015 more onion
+ *
+ *  Pollypost is free software: you can use, redistribute and/or modify it
+ *  under the terms of the GNU General Public License version 3 or later.
+ *  See LICENCE.txt or <http://www.gnu.org/licenses/> for more details.
+ */
+
+define('views/loading', [
+  'jquery',
+  'backbone',
+  'text!templates/loading.html'
+], function ($, Backbone, loadingTemplate) {
+  var LoadingView = Backbone.View.extend({
+    id: 'modal-loading',
+    className: 'polly',
+    template: _.template(loadingTemplate),
+    events: {
+      'hidden.bs.modal .modal': function () {
+        this.remove();
+      }
+    },
+    render: function() {
+      this.$el.html(this.template());
+      return this;
+    }
+  });
+  return LoadingView;
+});
+

data/assets/javascripts/views/new_page.js

@@ -0,0 +1,77 @@
+/**
+ *  This file is part of Pollypost, inline editing for static sites.
+ *  Copyright (C) 2015 more onion
+ *
+ *  Pollypost is free software: you can use, redistribute and/or modify it
+ *  under the terms of the GNU General Public License version 3 or later.
+ *  See LICENCE.txt or <http://www.gnu.org/licenses/> for more details.
+ */
+
+define('views/new_page', [
+  'jquery',
+  'underscore',
+  'backbone',
+  'text!templates/new_page.html',
+  'models/page_content'
+], function ($, _, Backbone, newPageTemplate, PageContent) {
+  var NewPageView = Backbone.View.extend({
+    id: 'modal-newpage',
+    className: 'polly',
+    template: _.template(newPageTemplate),
+    events: {
+      'click #create-new-page': 'createNewPage',
+      'hidden.bs.modal .modal': function () {
+        this.remove();
+      }
+    },
+    render: function() {
+      this.$el.html(this.template({}));
+      return this;
+    },
+    createNewPage: function() {
+      var attrs = _.map(this.$el.find('.page-attribute'),function(attrEl) {
+        var $attr = $(attrEl);
+        return { attribute: $attr.attr('name'), value: $attr.val() };
+      });
+      var reducedAttrs = _.reduce(attrs, function(memo, attr) {
+        memo[attr['attribute']] = attr['value'];
+        return memo;
+      }, {});
+      var newpage = new PageContent();
+      newpage.set('about', reducedAttrs['about']);
+      newpage.set('content', reducedAttrs['content']);
+      newpage.save({}, {
+        error: function (model, response, options) {
+          var text = typeof response['responseJSON'] !== 'undefined' ? response['responseJSON']['message'] : 'Arrgh! Error.';
+          require(['jquery.noty'], function (noty) {
+            noty({
+              text: text,
+              layout: 'bottomRight',
+              timeout: 2000,
+              theme: 'defaultTheme',
+              type: 'error'
+            });
+          });
+        },
+        success: function (model, response, options) {
+          var text = typeof response !== 'undefined' ? response['message'] : 'Yay! Success.';
+          require(['jquery.noty'], function (noty) {
+            noty({
+              text: text,
+              layout: 'bottomRight',
+              timeout: 2000,
+              theme: 'defaultTheme',
+              type: 'success'
+            });
+
+            setTimeout(function() {
+              window.location.pathname = response['about'];
+            }, 300);
+          });
+        }
+      });
+    },
+  });
+  return NewPageView;
+});
+

data/assets/javascripts/views/page_content.js

@@ -0,0 +1,26 @@
+/**
+ *  This file is part of Pollypost, inline editing for static sites.
+ *  Copyright (C) 2015 more onion
+ *
+ *  Pollypost is free software: you can use, redistribute and/or modify it
+ *  under the terms of the GNU General Public License version 3 or later.
+ *  See LICENCE.txt or <http://www.gnu.org/licenses/> for more details.
+ */
+
+define('views/page_content', [
+  'jquery',
+  'underscore',
+  'backbone'
+], function ($, _, Backbone) {
+  var PageContentView = Backbone.View.extend({
+    initialize: function () {
+      // on change/sync/...
+      this.listenTo(this.model, "change", this.render);
+    },
+    render: function() {
+      this.$el.html( this.model.get('content') );
+      return this;
+    }
+  });
+  return PageContentView;
+});

data/assets/javascripts/views/settings.js

@@ -0,0 +1,89 @@
+/**
+ *  This file is part of Pollypost, inline editing for static sites.
+ *  Copyright (C) 2015 more onion
+ *
+ *  Pollypost is free software: you can use, redistribute and/or modify it
+ *  under the terms of the GNU General Public License version 3 or later.
+ *  See LICENCE.txt or <http://www.gnu.org/licenses/> for more details.
+ */
+
+define('views/settings', [
+  'jquery',
+  'underscore',
+  'backbone',
+  'text!templates/settings.html'
+], function ($, _, Backbone, settingsTemplate) {
+  var SettingsView = Backbone.View.extend({
+    id: 'modal-settings',
+    className: 'polly',
+    template: _.template(settingsTemplate),
+    events: {
+      'click #apply-settings': 'applySettings',
+      'hidden.bs.modal .modal': function () {
+        this.remove();
+      }
+    },
+    applySettings: function() {
+      var attrs = _.map(this.$el.find('.page-attribute'),function(attrEl) {
+        var $attr = $(attrEl);
+        return { attribute: $attr.attr('name'), value: $attr.val() };
+      });
+      var reducedAttrs = _.reduce(attrs, function(memo, attr) {
+        memo[attr['attribute']] = attr['value'];
+        return memo;
+      }, {});
+      this.model.set('attributes', reducedAttrs);
+    },
+    render: function() {
+      this.$el.html(this.template({
+        header: '',
+        body: '',
+        footer: ''
+      }));
+      this.renderPageSettingsMode();
+      return this;
+    },
+    renderPageSettingsMode: function() {
+      this.$el.find('.modal-footer').html(
+        '<button type="button" class="btn btn-default cancel-html-editor" data-dismiss="modal">Cancel</button>' +
+        '<button type="button" class="btn btn-primary save-html-editor" data-dismiss="modal" id="apply-settings">Apply</button>'
+      );
+      this.$el.find('.modal-header').html(
+        '<h4 class="modal-title" id="myModalLabel">Settings</h4>'
+      );
+      if (!this.model.get('attributes')) {
+        var that = this;
+        this.model.fetch({
+          error: function (model, response, options) {
+          },
+          success: function (model, response, options) {
+            if (typeof response['attributes'] !== 'undefined') {
+              model.set('attributes', response['attributes']);
+              that.setBodyMarkup();
+            }
+          }
+        });
+      } else {
+        this.setBodyMarkup();
+      }
+    },
+    setBodyMarkup: function () {
+      var attributes = this.model.get('attributes');
+      var that = this;
+      this.$el.find('.modal-body').html(
+        _.reduce(_.keys(attributes), function(markup, key) {
+          return markup + that.markupForAttribute(key, attributes[key]);
+        }, '')
+      );
+    },
+    markupForAttribute: function (attribute, value) {
+      var markup = '<div class="form-group">' +
+      '  <label for="polly-attribute-'+attribute+'">'+attribute+'</label>' +
+      '  <input id="polly-attribute-'+attribute+'" type="text" name="'+attribute+'" value="'+value+'" class="page-attribute form-control input-lg">' +
+      '</div>';
+      return markup;
+    }
+  });
+  return SettingsView;
+});
+

data/assets/stylesheets/_bootstrap-custom.scss

@@ -0,0 +1,50 @@
+// Core variables and mixins
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+// Reset and dependencies
+@import "bootstrap/normalize";
+//@import "bootstrap/print";
+//@import "bootstrap/glyphicons";
+
+// Core CSS
+@import "bootstrap/scaffolding";
+@import "bootstrap/type";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+
+// Components
+@import "bootstrap/component-animations";
+//@import "bootstrap/dropdowns";
+//@import "bootstrap/button-groups";
+//@import "bootstrap/input-groups";
+//@import "bootstrap/navs";
+//@import "bootstrap/navbar";
+//@import "bootstrap/breadcrumbs";
+//@import "bootstrap/pagination";
+//@import "bootstrap/pager";
+//@import "bootstrap/labels";
+//@import "bootstrap/badges";
+//@import "bootstrap/jumbotron";
+//@import "bootstrap/thumbnails";
+@import "bootstrap/alerts";
+//@import "bootstrap/progress-bars";
+//@import "bootstrap/media";
+@import "bootstrap/list-group";
+//@import "bootstrap/panels";
+//@import "bootstrap/responsive-embed";
+//@import "bootstrap/wells";
+@import "bootstrap/close";
+
+// Components w/ JavaScript
+@import "bootstrap/modals";
+//@import "bootstrap/tooltip";
+@import "bootstrap/popovers";
+//@import "bootstrap/carousel";
+
+// Utility classes
+@import "bootstrap/utilities";
+@import "bootstrap/responsive-utilities";

data/assets/stylesheets/_editor.scss

@@ -0,0 +1,303 @@
+/**
+ *  This file is part of Pollypost, inline editing for static sites.
+ *  Copyright (C) 2015 more onion
+ *
+ *  Pollypost is free software: you can use, redistribute and/or modify it
+ *  under the terms of the GNU General Public License version 3 or later.
+ *  See LICENCE.txt or <http://www.gnu.org/licenses/> for more details.
+ */
+
+
+/* ==================================================================
+ * Variables
+ * ================================================================== */
+
+@import 'variable-overrides';
+
+$screen-sm-min: 768px !default;
+$screen-md-min: 992px !default;
+$screen-sm-max: ($screen-md-min - 1) !default;
+
+$brand-primary: #337ab7 !default;
+$text-color: #333333 !default;
+$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
+
+$ck-selected-button-bg: #fd7 !default;
+
+$split-screen-editor-header-height: 64px !default;
+$split-screen-editor-width: 45% !default;
+
+
+/* ==================================================================
+ * Editier Bar
+ * ================================================================== */
+
+#editier-bar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 0;
+  font-size: 18px;
+  background-color: transparent;
+
+  .bar-inner {
+    padding: 15px;
+    border-bottom: 2px solid;
+  }
+
+  button {
+    background: none;
+    box-shadow: none;
+    display: inline-block;
+    padding: 10px 15px;
+    border-radius: 8px;
+    border: 1px solid;
+    text-transform: uppercase;
+    font-weight: bold;
+  }
+
+  .popover.list-group {
+    .popover-content {
+      padding: 0;
+    }
+    .list-group-item {
+      border-width: 1px 0 0 0;
+
+      &:first-child {
+        border-width: 0;
+      }
+    }
+  }
+
+  .revision {
+    display: inline-block;
+    padding: 5px 15px;
+  }
+}
+
+/* ---------- view mode --------------------------------------------- */
+
+#editier-bar .view-mode {
+  background-color: rgba(0, 0, 0, 0.7);
+  border-color: rgba(0, 0, 0, 0.9);
+
+  button {
+    border-color: black;
+    background-color: rgba(100, 100, 100, 0.9);
+    color: lighten($text-color, 50%);
+
+    &:hover, &:focus {
+      background-color: rgba(0, 0, 0, 1);
+    }
+
+    &:disabled {
+      color: #aaa;
+      background-color: rgba(40, 40, 40, 0.9);
+    }
+  }
+}
+
+/* ---------- edit mode --------------------------------------------- */
+
+#editier-bar .edit-mode {
+  background-color: rgba(255, 255, 255, 0.7);
+  border-color: rgba(250, 250, 250, 0.9);
+
+  button {
+    border-color: white;
+    background-color: rgba(255, 255, 255, 0.9);
+    color: lighten($text-color, 25%);
+
+    &:hover, &:focus {
+      background-color: rgba(255, 255, 255, 1);
+    }
+
+    &:disabled {
+      color: #aaa;
+      background-color: rgba(240, 240, 240, 0.9);
+    }
+  }
+
+  button[name=save] {
+    background-color: rgba(150, 175, 60, 0.9);
+    color: white;
+
+    &:hover {
+      background-color: rgba(150, 175, 60, 1);
+    }
+  }
+}
+
+
+/* ==================================================================
+ * Modals
+ * ================================================================== */
+
+.polly .modal {
+  background-color: rgba(0, 0, 0, 0.4);
+
+  .modal-content {
+    background-color: #fafafa;
+  }
+}
+
+.polly #loading {
+  .modal-dialog {
+    margin: 0 auto;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    .modal-content {
+      position: relative;
+      height: 50px;
+      width: 200px;
+      top: -20px;
+      left: -100px;
+      background: transparent;
+      background: rgba(255,255,255,0.6);
+      border: 1px solid rgba(255,255,255,0.9);
+      box-shadow: none;
+      line-height: 48px;
+      border-radius: 6px;;
+      text-align: center;
+      font-size: 16px;
+      text-transform: uppercase;
+      font-weight: bold;
+      letter-spacing: 1px;
+      .modal-body {
+        padding: 0;
+      }
+    }
+  }
+}
+
+/* ==================================================================
+ * HTML Editor
+ * ================================================================== */
+
+/* ---------- html editor modal ------------------------------------- */
+
+#html-editor {
+
+  .modal-dialog {
+    @media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
+      width: auto;
+      margin: 30px;
+    }
+    @media (min-width: $screen-md-min) {
+      margin: 30px auto;
+    }
+  }
+  .modal-body {
+    padding: 0;
+  }
+  .btn-split-screen {
+    display: none;
+  }
+
+  .ace_tooltip {
+    background-image: none;
+    background-color: lighten($brand-primary, 40%);
+    color: $text-color;
+    font-family: $font-family-sans-serif;
+    font-size: 0.9em;
+
+    border: none;
+    padding: 8px;
+    white-space: normal;
+
+    position: absolute;
+    top: auto!important;
+    left: auto!important;
+    right: 0;
+    bottom: 0;
+    max-width: 60%;
+  }
+}
+
+/* ---------- spilt screen html editor ------------------------------ */
+
+.split-screen-editor {
+  @media (min-width: 1600px) {
+
+    &.modal-open {
+      margin-left: $split-screen-editor-width;
+      overflow: visible;
+
+      .container {
+        max-width: 100%;
+      }
+    }
+
+    #html-editor {
+      width: $split-screen-editor-width;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      background-color: transparent;
+
+
+      .modal-lg {
+        margin: 0;
+        width: 98%;
+        height: 100%;
+      }
+      .modal-content {
+        height: 100%;
+        border-radius: 0;
+      }
+      .modal-header {
+        height: $split-screen-editor-header-height;
+      }
+      .modal-title {
+        display: inline-block;
+        padding-top: 3px;
+      }
+      .btn-split-screen {
+        display: block;
+        float: right;
+        margin-left: 5px;
+      }
+      .modal-body {
+        position: absolute;
+        top: $split-screen-editor-header-height;
+        right: 0;
+        bottom: 0;
+        left: 0;
+      }
+      #editor {
+        height: 100%!important;
+      }
+      .modal-footer {
+        display: none;
+      }
+    }
+  }
+}
+
+
+/* ==================================================================
+ * Inline Editor
+ * ================================================================== */
+
+/* ---------- flat skin overwrites ---------------------------------- */
+
+.cke {
+  .cke_combo_button, .cke_toolgroup {
+    border: 1px solid #eee;
+    border-bottom: 1px solid #ddd;
+  }
+  .cke_combo_arrow {
+    border-top-width: 4px;
+  }
+  .cke_button_on,
+  .cke_combo_on a.cke_combo_button,
+  .cke_combo_off a.cke_combo_button:active {
+    background-color: $ck-selected-button-bg;
+
+    &:hover {
+      background-color: darken($ck-selected-button-bg, 5%);
+    }
+  }
+}