push_type_wysiwyg 0.2.1 → 0.3.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: fcbea5fa9f405e72429eac484e02b16f877180d7
-  data.tar.gz: b728892404fa6cc4cefff1afa048e69d9a435429
+  metadata.gz: 75d3e9e740dd94e9573bfbf21e804fa75a875efd
+  data.tar.gz: 4a40a561aa5c8139ac8ffdf7d88be64944bc7e79
 SHA512:
-  metadata.gz: bacbc114f10c6fba980fad7ed761219953ac844a2f1923d17bfa51f3b7226fe6375e42208627bee7ec3006607e7994bfb087912605e2766dd5b16b0965e51052
-  data.tar.gz: c5406d6df2e3ad8c1d931952565393ad98e8b0cce2580d296f5a5bb5f407b2e07350b58fd013ffc0fd509195508c46063ed83f4adf502449d0e69db922c5e582
+  metadata.gz: 9e0cdfa6fb94bfdfd60cd893272e81358d8c7f735618a7bfef07b1a01ee8ccc413d48df372bc15d5235a9644cb47d0cca5d8aed62a4eace47bea66ddf0e86478
+  data.tar.gz: 4abcb9999ea1431a4c44fbdf3b804e5337fc73cb906a272073d306b67c5aab7c44104de3cb2083f2825bfc80909d84512d559036203c4e7a146159af73a9e0c0

data/app/assets/javascripts/push_type/froala_overrides/file_upload.js

@@ -1,3 +1,6 @@
+/**
+ * Override to add file upload UI
+ */
 $.Editable.prototype.fileUploadHTML = function () {
   var html = '<div class="froala-popup froala-file-popup" style="display: none;"><h4><span data-text="true">Upload file</span><i title="Cancel" class="fa fa-times" id="f-file-close-' + this._id + '"></i></h4>';
 
@@ -12,9 +15,11 @@ $.Editable.prototype.fileUploadHTML = function () {
 
   html += '</div>';
 
+  // PT BEGIN
   if (this.options.fileLink) {
     html += '<div class="f-popup-line"><label><span data-text="true">Enter URL</span>: </label><input id="f-file-url-' + this._id + '" type="text" placeholder="http://example.com"><button class="f-browse fr-p-bttn" id="f-browser-' + this._id + '"><i class="fa fa-search"></i></button><button data-text="true" class="f-ok fr-p-bttn" id="f-file-ok-' + this._id + '">OK</button></div>';
   }
+  // PT END
 
   html += '</div>';
   html += '<p class="f-progress" id="f-file-progress-' + this._id + '"><span></span></p>';
@@ -25,7 +30,7 @@ $.Editable.prototype.fileUploadHTML = function () {
 
 
 /**
- * Build file upload.
+ * Override to integrate with media manager
  */
 $.Editable.prototype.buildFileUpload = function () {
   // Add file wrapper to editor.
@@ -89,6 +94,7 @@ $.Editable.prototype.buildFileUpload = function () {
     $(this).val('');
   });
 
+  // PT BEGIN
   // Create a list with all the items from the popup.
   this.$file_wrapper.on('click', '#f-file-ok-' + this._id, $.proxy(function () {
     var file = this.$file_wrapper.find('#f-file-url-' + this._id).val();
@@ -96,9 +102,10 @@ $.Editable.prototype.buildFileUpload = function () {
       this.writeFile(file, file);
     }
   }, this));
+  // PT END
 
   // Wrap things in file wrapper.
-  this.$file_wrapper.on(this.mouseup, '#f-file-close-' + this._id, $.proxy(function () {
+  this.$file_wrapper.on(this.mouseup, '#f-file-close-' + this._id, $.proxy(function (e) {
     e.stopPropagation();
     e.preventDefault();
 
@@ -111,6 +118,7 @@ $.Editable.prototype.buildFileUpload = function () {
     this.hide();
   }, this))
 
+  // PT BEGIN
   this.$file_wrapper
     .on('click', '#f-browser-' + this._id, $.proxy(function () {
       this.showMediaManager('file');
@@ -120,6 +128,7 @@ $.Editable.prototype.buildFileUpload = function () {
     }, this));
 
   this.$file_wrapper.find('#f-browser-' + this._id).show();
+  // PT END
 
   this.$file_wrapper.on('click', function (e) {
     e.stopPropagation();

data/app/assets/javascripts/push_type/froala_overrides/froala_editor.js

@@ -2,23 +2,40 @@
  * Override so the popup is never too bar below bottom of editor element
  */
 $.Editable.prototype.showByCoordinates = function (x, y) {
-  
-  var editor_width = Math.max(this.$popup_editor.width(), 250),
-      bottom        = this.$element.offset().top + this.$element.outerHeight();
+  x = x - 22;
+  y = y + 8;
 
-  y = Math.min(y, bottom);
+  var $container = this.$document.find(this.options.scrollableContainer);
+
+  if (this.options.scrollableContainer != 'body') {
+    x = x - $container.offset().left;
+    y = y - $container.offset().top;
 
-  x = x - 20;
-  y = y + 15;
+    if (!this.iPad()) {
+      y = y + $container.scrollTop();
+      x = x + $container.scrollLeft();
+    }
+  }
 
+  var editor_width = Math.max(this.$popup_editor.outerWidth(), 250);
 
-  if (x + editor_width >= $(window).width() - 50 && (x + 40) - editor_width > 0) {
+  // PT BEGIN
+  var bottom = $container.offset().top + $container.outerHeight() + 8;
+  y = Math.min(y, bottom);
+  // PT END
+
+  if (x + editor_width >= $container.outerWidth() - 50 && (x + 44) - editor_width > 0) {
     this.$popup_editor.addClass('right-side');
-    x = $(window).width() - (x + 40);
+    x = $container.outerWidth() - (x + 44);
+
+    if ($container.css('position') == 'static') {
+      x = x + parseFloat($container.css('margin-left'), 10) + parseFloat($container.css('margin-right'), 10)
+    }
+
     this.$popup_editor.css('top', y);
     this.$popup_editor.css('right', x);
     this.$popup_editor.css('left', 'auto');
-  } else if (x + editor_width < $(window).width() - 50) {
+  } else if (x + editor_width < $container.outerWidth() - 50) {
     this.$popup_editor.removeClass('right-side');
     this.$popup_editor.css('top', y);
     this.$popup_editor.css('left', x);
@@ -26,29 +43,35 @@ $.Editable.prototype.showByCoordinates = function (x, y) {
   } else {
     this.$popup_editor.removeClass('right-side');
     this.$popup_editor.css('top', y);
-    this.$popup_editor.css('left', Math.max(($(window).width() - editor_width), 10) / 2);
+    this.$popup_editor.css('left', Math.max(($container.outerWidth() - editor_width), 10) / 2);
     this.$popup_editor.css('right', 'auto');
   }
 
   this.$popup_editor.show();
 };
 
+/**
+ * Override to fix IE9 bug
+ */
 $.Editable.prototype.parseImageResponse = function (response) {
-    try {
-      var resp = $.parseJSON(response);
-      if (!resp) {
-        // Is this IE9 being a wugger?
-        return;
-      } else if (resp.link) {
-        this.writeImage(resp.link);
-      } else if (resp.error) {
-        this.throwImageErrorWithMessage(resp.error);
-      } else {
-        // No link in upload request.
-        this.throwImageError(2);
-      }
-    } catch (ex) {
-      // Bad response.
-      this.throwImageError(4);
+  try {
+    var resp = $.parseJSON(response);
+
+    // PT BEGIN
+    // Is this IE9 being a wugger?
+    if (!resp) { return; }
+    // PT END
+      
+    if (resp.link) {
+      this.writeImage(resp.link);
+    } else if (resp.error) {
+      this.throwImageErrorWithMessage(resp.error);
+    } else {
+      // No link in upload request.
+      this.throwImageError(2);
     }
-  };
+  } catch (ex) {
+    // Bad response.
+    this.throwImageError(4);
+  }
+};

data/app/assets/javascripts/push_type/froala_overrides/image_editor.js

@@ -1,41 +1,25 @@
 /**
- * Init popup for image.
+ * Overide to add imageStyle UI
  */
 $.Editable.prototype.initImagePopup = function () {
   this.$image_editor = $('<div class="froala-popup froala-image-editor-popup" style="display: none">');
 
   var $buttons = $('<div class="f-popup-line f-popup-toolbar">').appendTo(this.$image_editor);
-  for (var i = 0; i < this.options.imageButtons.length; i++) {
-    var cmd = this.options.imageButtons[i];
-    if ($.Editable.image_commands[cmd] === undefined) {
-      continue;
-    }
-    var button = $.Editable.image_commands[cmd];
-
-    var btn = '<button class="fr-bttn" data-callback="' + cmd + '" data-cmd="' + cmd + '" title="' + button.title + '">';
-
-    if (this.options.icons[cmd] !== undefined) {
-      btn += this.prepareIcon(this.options.icons[cmd], button.title);
-    } else {
-      btn += this.prepareIcon(button.icon, button.title);
-    }
-
-    btn += '</button>';
-
-    $buttons.append(btn);
-  }
+  $buttons.append(this.buildImageButtons());
 
   this.addListener('hidePopups', this.hideImageEditorPopup);
 
+  // PT BEGIN
   if (this.options.imageStyle) {
     $('<div class="f-popup-line f-image-style">').appendTo(this.$image_editor);
     $('<div class="f-popup-line f-image-custom-style">').hide().appendTo(this.$image_editor);
   }
+  // PT END
 
   if (this.options.imageTitle) {
     $('<div class="f-popup-line f-image-alt">')
       .append('<label><span data-text="true">Title</span>: </label>')
-      .append($('<input type="text">').on('mouseup keydown', function (e) {
+      .append($('<input type="text">').on('mouseup keydown touchend', function (e) {
         var keyCode = e.which;
         if (!keyCode || keyCode !== 27) {
           e.stopPropagation();
@@ -48,14 +32,16 @@ $.Editable.prototype.initImagePopup = function () {
   this.$popup_editor.append(this.$image_editor);
 
   this.bindCommandEvents(this.$image_editor);
+  this.bindDropdownEvents(this.$image_editor);
 };
 
 
 /**
- * Show image editor popup.
+ * Override to control media styles
  */
 $.Editable.prototype.showImageEditorPopup = function () {
   if (this.$image_editor) {
+    // PT BEGIN
     var _self = this;
     setTimeout( function(){ 
       _self.$image_editor.find('.f-image-style')
@@ -76,6 +62,7 @@ $.Editable.prototype.showImageEditorPopup = function () {
         .append('<button class="fr-p-bttn f-ok" data-text="true" data-callback="setImageCustomStyle" data-cmd="setImageCustomStyle" title="OK">OK</button>');
       $.inArray(currentStyle, _self.options.mediaStyles) === -1 ? $customRow.show() : $customRow.hide();
     }, 0);
+    // PT END
     this.$image_editor.show();
   }
 
@@ -86,7 +73,7 @@ $.Editable.prototype.showImageEditorPopup = function () {
 
 
 /**
- * Media style options for select
+ * Media style options for select (new code)
  */
 $.Editable.prototype.mediaStyleOptions = function() {
   var currentStyle  = this.currentMediaStyle();
@@ -102,7 +89,7 @@ $.Editable.prototype.mediaStyleOptions = function() {
 
 
 /**
- * Get the current media style
+ * Get the current media style (new code)
  */
 $.Editable.prototype.currentMediaStyle = function() {
   var $image_editor = this.$element.find('span.f-img-editor');
@@ -114,7 +101,7 @@ $.Editable.prototype.currentMediaStyle = function() {
 
 
 /**
- * Set image styke.
+ * Set image style (new code)
  */
 $.Editable.prototype.setImageStyle = function () {
   var $image_editor = this.$element.find('span.f-img-editor'),
@@ -135,7 +122,7 @@ $.Editable.prototype.setImageStyle = function () {
 
 
 /**
- * Set image styke.
+ * Set custom image style (new code)
  */
 $.Editable.prototype.setImageCustomStyle = function () {
   var $image_editor = this.$element.find('span.f-img-editor'),
@@ -152,12 +139,10 @@ $.Editable.prototype.setImageCustomStyle = function () {
 
 
 /**
- * Insert image command.
  * Override so the image_link is manipulated to add default style
- * an image title is grabbed from $media_images
- * @param image_link
+ * and image title is grabbed from $media_images
  */
-$.Editable.prototype.writeImage = function (image_link, sanitize) {
+$.Editable.prototype.writeImage = function (image_link, sanitize, response) {
   if (sanitize) {
     image_link = this.sanitizeURL(image_link);
     if (image_link === '') {
@@ -165,12 +150,14 @@ $.Editable.prototype.writeImage = function (image_link, sanitize) {
     }
   }
 
+  // PT BEGIN
   var image_data = this.$media_images.find('img[data-src="'+ image_link +'"]').data();
   if ( typeof image_data != 'undefined' && 'title' in image_data ) {
     image_title = image_data.title;
   } else {
     image_title = this.options.defaultImageTitle;
   }
+  // PT END
 
   var img = new Image();
   img.onerror = $.proxy(function () {
@@ -181,10 +168,12 @@ $.Editable.prototype.writeImage = function (image_link, sanitize) {
   if (this.imageMode) {
     img.onload = $.proxy(function () {
       var $img = this.$element.find('.f-img-editor > img');
+      // PT BEGIN
       $img.attr({
         src:  image_link,
         alt:  image_title
       }).removeAttr('title');
+      // PT END
 
       this.hide();
       this.hideImageLoader();
@@ -193,7 +182,7 @@ $.Editable.prototype.writeImage = function (image_link, sanitize) {
       this.enable();
 
       // call with (image HTML)
-      this.triggerEvent('imageReplaced', [$img]);
+      this.triggerEvent('imageReplaced', [$img, response]);
 
       setTimeout(function () {
         $img.trigger('click');
@@ -203,9 +192,11 @@ $.Editable.prototype.writeImage = function (image_link, sanitize) {
 
   else {
     img.onload = $.proxy(function () {
-      this.insertLoadedImage(image_link);
+      this.insertLoadedImage(image_link, response);
+      // PT BEGIN
       var $img = this.$element.find('.f-img-editor > img');
       $img.attr('alt', image_title);
+      // PT END
     }, this);
   }
 

data/app/assets/javascripts/push_type/froala_overrides/media_manager.js

@@ -1,12 +1,21 @@
+/**
+ * Override to accept kind param which sets title of media manager
+ */
+  // PT BEGIN
 $.Editable.prototype.showMediaManager = function (kind) {
   this.$image_modal.data('context', kind);
   this.$image_modal.find('h4 span').text('Manage '+ kind +'s');
+  // PT END
   this.$image_modal.show();
   this.$overlay.show();
   this.loadImages();
-  $('body').css('overflow','hidden');
+  this.$document.find('body').css('overflow','hidden');
 }
 
+
+/**
+ * Override to add pagination UI
+ */
 $.Editable.prototype.mediaModalHTML = function () {
   var html = '<div class="froala-modal"><div class="f-modal-wrapper"><h4><span data-text="true">Manage images</span><i title="Cancel" class="fa fa-times" id="f-modal-close-' + this._id + '"></i></h4>'
 
@@ -18,13 +27,19 @@ $.Editable.prototype.mediaModalHTML = function () {
     html += '<div class="f-image-list" id="f-image-list-' + this._id + '"></div>';
   }
 
+  // PT BEGIN
   html += '<div class="pagination-centered" id="f-pagination-' + this._id + '"></div>';
+  // PT END
 
   html += '</div></div>';
 
   return html;
 }
 
+
+/**
+ * Override so media manage can be used for images and files
+ */
 $.Editable.prototype.buildMediaManager = function () {
   this.$image_modal = $(this.mediaModalHTML()).appendTo('body');
   this.$preloader = this.$image_modal.find('#f-preloader-' + this._id);
@@ -56,11 +71,13 @@ $.Editable.prototype.buildMediaManager = function () {
   this.$media_images.on(this.mouseup, 'img', $.proxy(function (e) {
     e.stopPropagation();
     var img = e.currentTarget;
+    // PT BEGIN
     if ( $(img).data('kind') == 'image' ) {
       this.writeImage($(img).data('src'));
     } else {
       this.writeFile($(img).data('src'), $(img).data('title'));
     }
+    // PT END
     this.hideMediaManager();
   }, this));
 
@@ -84,6 +101,7 @@ $.Editable.prototype.buildMediaManager = function () {
 
   // Add button for media manager to image.
   if (this.options.mediaManager) {
+    // PT BEGIN
     this.$image_wrapper
       .on('click', '#f-browser-' + this._id, $.proxy(function () {
         this.showMediaManager('image');
@@ -91,6 +109,7 @@ $.Editable.prototype.buildMediaManager = function () {
       .on('click', '#f-browser-' + this._id + ' i', $.proxy(function () {
         this.showMediaManager('image');
       }, this));
+    // PT END
 
     this.$image_wrapper.find('#f-browser-' + this._id).show();
   }
@@ -98,6 +117,10 @@ $.Editable.prototype.buildMediaManager = function () {
   this.hideMediaManager();
 };
 
+
+/**
+ * Initilizes pagination control (new code)
+ */
 $.Editable.prototype.initPagination = function(data) {
   var mm = this;
   this.$image_modal.find('#f-pagination-' + this._id).pagination({
@@ -111,13 +134,19 @@ $.Editable.prototype.initPagination = function(data) {
   });
 }
 
-// Load images from server.
+
+/**
+ * Override so loads images and files
+ */
+  // PT BEGIN
 $.Editable.prototype.loadImages = function (page) {
   var isPaginated = (typeof page !== 'undefined');
+  // PT END
 
   this.$preloader.show();
   this.$media_images.empty();
 
+  // PT BEGIN
   if (this.$image_modal.data('context') == 'file') {
     ajax = {
       url: this.options.filesLoadURL,
@@ -132,16 +161,19 @@ $.Editable.prototype.loadImages = function (page) {
   if (isPaginated) {
     ajax.opts.page = page;
   }
+  // PT END
 
-  if (ajax.url) {
+  if (ajax.url) { // PT EDIT
     $.support.cors = true;
-    $.getJSON(ajax.url, ajax.opts, $.proxy(function (data) {
+    $.getJSON(ajax.url, ajax.opts, $.proxy(function (data) { // PT EDIT
       // data
       this.triggerEvent('imagesLoaded', [data], false);
+      // PT BEGIN
       this.processLoadedImages(data.assets);
       if (!isPaginated && data.meta.total_pages > 1) {
         this.initPagination(data);
       }
+      // PT END
       this.$preloader.hide();
     }, this))
       .fail($.proxy(function () {
@@ -153,6 +185,10 @@ $.Editable.prototype.loadImages = function (page) {
   }
 };
 
+
+/**
+ * Override to replace delete button with title element
+ */
 $.Editable.prototype.loadImage = function (src, info) {
   var img = new Image();
   var $li = $('<div>').addClass('f-empty');
@@ -167,7 +203,9 @@ $.Editable.prototype.loadImage = function (src, info) {
       $img.attr('data-' + k, info[k]);
     }
 
+    // PT BEGIN
     $li.append($img).append('<span class="f-media-title">'+ info.title +'</span>');
+    // PT END
     $li.removeClass('f-empty');
     this.$media_images.hide();
     this.$media_images.show();

data/app/assets/javascripts/push_type/wysiwyg.js.coffee

@@ -12,9 +12,11 @@
 #
 #= require froala_editor.min
 #= require plugins/lists.min
+#= require plugins/tables.min
 #= require plugins/file_upload.min
 #= require plugins/media_manager.min
 #= require plugins/video.min
+#= require plugins/fullscreen.min
 #= require jquery.simplePagination
 #= require_self
 #= require_tree .
@@ -24,11 +26,14 @@ $(document).on 'ready page:load', ->
 
   $('textarea.froala', '.wysiwyg').editable
     inlineMode:       false
-    buttons:          ['bold', 'italic', 'underline', 'sep', 'formatBlock', 'align', 'insertOrderedList', 'insertUnorderedList', 'sep', 'createLink', 'insertImage', 'uploadFile', 'insertVideo', 'table', 'sep', 'removeFormat', 'undo', 'redo', 'sep' ,'html']
+    buttons:          ['bold', 'italic', 'underline', 'sep', 'formatBlock', 'align', 'insertOrderedList', 'insertUnorderedList', 'table', 'sep', 'createLink', 'insertImage', 'uploadFile', 'insertVideo', 'sep', 'undo', 'redo', 'removeFormat', 'fullscreen', 'sep', 'html']
     blockTags:
       n:  'Normal'
-      h1: 'Heading 1'
       h2: 'Heading 2'
+      h3: 'Heading 3'
+      h4: 'Heading 4'
+      blockquote: 'Quote'
+      pre: 'Code'
     height:             400
     filesLoadURL:       '/push_type/wysiwyg_media'
     filesLoadParams:    { filter: 'file' }

data/app/assets/stylesheets/push_type/froala_overrides.scss

@@ -74,4 +74,8 @@
   overflow: hidden;
   font-size: 14px;
   line-height: 20px;
+}
+
+.froala-box.fr-fullscreen {
+  z-index: 2000;
 }

data/app/assets/stylesheets/push_type/pt_theme.scss

@@ -81,10 +81,12 @@
   color: '#444';
 }
 .pt-theme.froala-box .froala-element.f-basic a {
-  color: inherit;
+  color: $primary-color;
+  text-decoration: underline;
 }
 .pt-theme.froala-box .froala-element table td {
   border: solid 1px $input-border-color;
+  background: #fff;
 }
 .pt-theme.froala-box.f-html .froala-element {
   background: #202020;

data/test/dummy/app/controllers/application_controller.rb

@@ -2,20 +2,4 @@ class ApplicationController < ActionController::Base
   # Prevent CSRF attacks by raising an exception.
   # For APIs, you may want to use :null_session instead.
   protect_from_forgery with: :exception
-
-  protected
-
-  def before_node_load
-    logger.info 'before node load'
-    @foo = {}
-  end
-
-
-
-  def before_page_action
-    logger.info 'before page action'
-    @foo[:before_page] = true
-  end
-
-  
 end

data/test/dummy/app/models/page.rb

@@ -4,9 +4,7 @@ class Page < PushType::Node
   # has_child_nodes :all
 
   # Set custom fields
-  # field :description
-  # field :body, :text, validates: { presence: true }
   field :body, :wysiwyg, validates: { presence: true }
-  field :tags, :tag_list
+  
 
 end

data/test/dummy/app/views/nodes/page.html.erb

@@ -2,4 +2,4 @@
 <p>This is a generated Page template.</p>
 <p>Find me at: app/views/nodes/page.html.erb</p>
 
-<pre><%= @foo.inspect %></pre>
+  

data/test/dummy/config/initializers/push_type.rb

@@ -28,6 +28,6 @@ PushType.setup do |config|
   #   secret_access_key:  ENV['SECRET_ACCESS_KEY_ID']
   # }
 
-  # config.dragonfly_secret = '8540762c7c9d35ce96571b65305fc590b426d1accbf0bea8bb42ad9a3ad6f18b'
+  # config.dragonfly_secret = 'e9338844ff6bcfe49704ad6e0e8ed17de0cc4e60378f47922c9c649f4655e4e1'
 
 end

data/test/dummy/config/secrets.yml

@@ -11,10 +11,10 @@
 # if you're sharing your code publicly.
 
 development:
-  secret_key_base: e251d932e6c08ac3eb402a03bf8fc4e2c7499732ad73ea05d827364ab2bf0752fb9419e5d4e7a74dffd70c3d7d06bde5d61a804c330ba70b7f231c2f0e997939
+  secret_key_base: 33dd7641312acab0296bfd17f923c5933b780a63e1373c8dba542665a94cc029a023b7f78008814fbf22a1a66eb6fd6ec81568361b661f049f218e0346f28244
 
 test:
-  secret_key_base: f2a6f1ea574c80229711d70e9017b50361019bb99ce7c2dea83a95946909ea3c0b8b68e6cde2690d3a9bda1a097d416cc37c60ca5cbc6557d9e6dc0fed44439b
+  secret_key_base: 2e5822bd19c75f1829ed220d35fed0ee0bf13640c51d30b781f8a102265123fc34c58cf4f4930d61c9fefa5656a2f1fef9b74bfed32b1ad4c4b1a2d69ae8af12
 
 # Do not keep production secrets in the repository,
 # instead read values from the environment.

data/test/dummy/db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20150209204405) do
+ActiveRecord::Schema.define(version: 20150222152516) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"