rails_admin_content_builder 1.0.3 → 1.0.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 742c830676fed82d2a0389a6f24b26dccc8a119f
-  data.tar.gz: e5eaf59557cc530b4a8258b277b2228930a405e6
+  metadata.gz: 08dbceab826bfbc8a3b8999691cb31ff290844cb
+  data.tar.gz: 7f49c1ab99d574403295a9cae17e0ea3500977e7
 SHA512:
-  metadata.gz: 89c62ab066b15a6d270b0c1528fe31a8227d76f9da90d087c5d98caee182e10938a25ca7d33309cf74cc7b06c4048760ac51cada25aa0297e691fb726b1df7e5
-  data.tar.gz: 144f7984915bb931dda2e06b170b85245fea1f29cedaab927eeabec6b933e7a60ab3558ab7717807b80f3da5e3e10bc4287c0b22e45b688f8ee8bdbd9097d3d0
+  metadata.gz: fd9ee5c8f53f075e6ed2fb08f98ddcdb2882a3d9d46e552ca5990568759c33ecfe2370aab5d6dbbeaae3d0dac28a3477ed4e281046cf00f7d8390c9af45e6317
+  data.tar.gz: 54abe1bdc19700b174bdaaa112bc202ac7bf6fed66af1b14d46941f9941ff3dca6629f18226d067eccfd3da6d021e508dfca9b0e3cfcc885ed8682356d151b85

data/.gitignore

@@ -10,6 +10,6 @@
 /.idea/*
 /test_app/*
 /spec/dummy/tmp/*
-spec/dummy/log/test.log
+spec/dummy/log/*.log
 spec/dummy/db/test.sqlite3
 *.gem

data/.ruby-version

@@ -1 +1 @@
-ruby-2.2.1
+ruby-2.3.0

data/README.md

@@ -1,7 +1,5 @@
 # RailsAdminContentBuilder
 
-![Work in progress](http://messages.hellobits.com/warning.svg?message=Work%20in%20progress)
-
 [![Build Status](https://travis-ci.org/luizpicolo/rails_admin_content_builder.svg?branch=master)](https://travis-ci.org/luizpicolo/rails_admin_content_builder)
 [![Code Climate](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/badges/gpa.svg)](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder)
 [![Test Coverage](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/badges/coverage.svg)](https://codeclimate.com/github/luizpicolo/rails_admin_content_builder/coverage)
@@ -29,11 +27,13 @@ Supported Asset Plugin
 
 ## Installation
 
+**Test with rails < 5 and TurboLink < 5**
+
 Add this line to your application's Gemfile:
 
 ```ruby
 gem 'rails_admin'
-gem 'rails_admin_content_builder', git: 'git://github.com/luizpicolo/rails_admin_content_builder.git'
+gem 'rails_admin_content_builder'
 ```
 
 Run the generator and migrations
@@ -113,6 +113,13 @@ content_sanitized : Text
 content_builder_images : Object
 ```
 
+# Demonstration
+
+Content Builder:
+[link](https://example-cb-fc.herokuapp.com/admin/rails_admin_content_builder~content_builder/1/content_builder)    
+Content:
+[link](https://example-cb-fc.herokuapp.com/noticias/general/orem-ipsum-dolor-sit-amet-consectetur-adipiscing-elit-aenean-tellus-ante-auctor-ut-facilisis-nec)
+
 ## Development
 
 After checking out the repo, run `bin/setup` to install dependencies. Then, run `rake spec` to run the tests. You can also run `bin/console` for an interactive prompt that will allow you to experiment.

data/app/assets/javascripts/rails_admin/content_builder.js.erb

@@ -2,12 +2,15 @@
 
 // when rails admin ready
 $(document).on('rails_admin.dom_ready', function() {
+  activeSortable();
+
   $('.cb-form').on('submit', function(e){
     var content = $('.cb-container').html();
     $('#content').attr('value', content);
   });
 
-  $('.cb-tools__input--upload').each(function() {
+  $('.cb-content').each(function() {
+    autocomplete($(this).attr('id'));
     addEventToInputFile($(this).attr('id'));
   });
 
@@ -58,6 +61,7 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
   var snippet = $(this).attr('data-snippet');
   var container = $('.cb-container');
   var id = generateID();
+  var section_id = generateID();
 
   switch (snippet) {
     case '1':
@@ -188,13 +192,151 @@ $(document).on('click', '.cb-snippet__btn', function(e) {
     break;
 
     default:
+
+    case '6':
+    var element = '<div id="'+ id + '" class="cb-content">';
+
+    element += '<div class="cb-tools">';
+    element += '<a class="cb-tools__btn cb-tools__btn--move fa fa-arrows" href="#"></a>';
+    element += '<a class="cb-tools__btn cb-tools__btn--delete fa fa-trash" href="#'+ id + '"></a>';
+    element += '</div>';
+
+    element += '<blockquote class="cb-blockquote cb-blockquote--left">';
+    element += '<div class="cb-blockquote__text cb-text"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p></div>';
+    element += '<footer class="cb-blockquote__footer cb-text">Lorem Ipsum</footer>';
+    element += '</blockquote>';
+
+    element += '<div class="cb-text">';
+    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '</div>';
+
+    element += '</div>';
+
+    container.append(element);
+    addEventToInputFile(id);
+    scrollTo(id);
+    break;
+
+    case '7':
+    var element = '<div id="'+ id + '" class="cb-content">';
+
+    element += '<div class="cb-tools">';
+    element += '<a class="cb-tools__btn cb-tools__btn--move fa fa-arrows" href="#"></a>';
+    element += '<a class="cb-tools__btn cb-tools__btn--delete fa fa-trash" href="#'+ id + '"></a>';
+    element += '</div>';
+
+    element += '<blockquote class="cb-blockquote cb-blockquote--right">';
+    element += '<div class="cb-blockquote__text cb-text"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p></div>';
+    element += '<footer class="cb-blockquote__footer cb-text">Lorem Ipsum</footer>';
+    element += '</blockquote>';
+
+    element += '<div class="cb-text">';
+    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '</div>';
+
+    element += '</div>';
+
+    container.append(element);
+    addEventToInputFile(id);
+    scrollTo(id);
+    break;
+
+    case '8':
+    var element = '<div id="'+ id + '" class="cb-content">';
+
+    element += '<div class="cb-tools">';
+    element += '<a class="cb-tools__btn cb-tools__btn--move fa fa-arrows" href="#"></a>';
+    element += '<a class="cb-tools__btn cb-tools__btn--delete fa fa-trash" href="#'+ id + '"></a>';
+    element += '</div>';
+
+    element += '<blockquote class="cb-blockquote">';
+    element += '<div class="cb-blockquote__text cb-text"><p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos</p></div>';
+    element += '<footer class="cb-blockquote__footer cb-text">Lorem Ipsum</footer>';
+    element += '</blockquote>';
+
+    element += '<div class="cb-text">';
+    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '</div>';
+
+    element += '</div>';
+
+    container.append(element);
+    addEventToInputFile(id);
+    scrollTo(id);
+    break;
+
+    case '9':
+    var sections = [];
+    var element = '<div id="'+ id + '" class="cb-content">';
+
+    element += '<div class="cb-tools">';
+    element += '<a class="cb-tools__btn cb-tools__btn--move fa fa-arrows" href="#"></a>';
+    element += '<a class="cb-tools__btn cb-tools__btn--delete fa fa-trash" href="#'+ id + '"></a>';
+    element += '</div>';
+
+    element += '<aside class="cb-relational cb-relational--left">'
+    element += '<h2 class="cb-relational__title">Saiba mais</h2>';
+    element += '<input class="cb-search" type="text" name="search" placeholder="Buscar notícia">';
+    element += '<ol class="cb-relational__list"></ol>';
+    element += '</aside>';
+
+    element += '<div class="cb-text">';
+    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '</div>';
+
+    element += '</div>';
+
+    container.append(element);
+    addEventToInputFile(id);
+    autocomplete(id);
+    scrollTo(id);
+    activeSortable();
+    break;
+
+    case '10':
+    var sections = [];
+    var element = '<div id="'+ id + '" class="cb-content">';
+
+    element += '<div class="cb-tools">';
+    element += '<a class="cb-tools__btn cb-tools__btn--move fa fa-arrows" href="#"></a>';
+    element += '<a class="cb-tools__btn cb-tools__btn--delete fa fa-trash" href="#'+ id + '"></a>';
+    element += '</div>';
+
+    element += '<aside class="cb-relational cb-relational--right">'
+    element += '<h2 class="cb-relational__title">Saiba mais</h2>';
+    element += '<input class="cb-search" type="text" name="search" placeholder="Buscar notícia">';
+    element += '<ol class="cb-relational__list"></ol>';
+    element += '</aside>';
+
+    element += '<div class="cb-text">';
+    element += '<p>Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos.</p>';
+    element += '</div>';
+
+    element += '</div>';
+
+    container.append(element);
+    addEventToInputFile(id);
+    autocomplete(id);
+    scrollTo(id);
+    activeSortable();
+    break;
   };
 
   activeMediumEditor();
 });
 
+// sortable to relational
+function activeSortable() {
+  $('.cb-relational__list').sortable({
+    revert: true,
+    placeholder: 'ui-sortable-placeholder',
+    handle: '.cb-relational__btn--move',
+    cursor: 'move',
+  });
+};
+
 // scroll to
-var scrollTo = function(id) {
+ function scrollTo(id) {
   if(id) {
     $('html, body').animate({
       scrollTop: $('#' + id).offset().top
@@ -203,12 +345,12 @@ var scrollTo = function(id) {
 };
 
 // add event on input file
-var addEventToInputFile = function(id) {
+function addEventToInputFile(id) {
   $('#' + id).on('change', fileSelectAndUpload);
 };
 
 // upload file via ajax
-var fileSelectAndUpload = function(evt) {
+function fileSelectAndUpload(evt) {
   var file = evt.target.files[0];
 
   if(file) {
@@ -240,7 +382,7 @@ var fileSelectAndUpload = function(evt) {
 };
 
 // get image of position
-var getImageOfPosition = function(position, e) {
+function getImageOfPosition(position, e) {
   switch(position) {
     case 'left':
     case 'right':
@@ -254,12 +396,12 @@ var getImageOfPosition = function(position, e) {
 };
 
 // generate random id
-var generateID = function() {
+function generateID() {
   return '_' + Math.random().toString(36).substr(2, 9);
 };
 
 // active medium editor plugin
-var activeMediumEditor = function() {
+function activeMediumEditor() {
   var editor = new MediumEditor('.cb-text', {
     placeholder: {
       text: '',
@@ -277,13 +419,34 @@ var activeMediumEditor = function() {
     anchorPreview: false,
 
     paste: {
-      cleanPastedHTML: true
+      forcePlainText: true,
+      cleanPastedHTML: false,
+      cleanReplacements: [],
+      cleanAttrs: ['class', 'style', 'dir'],
+      cleanTags: ['meta'],
+      unwrapTags: []
+    }
+  });
+
+  var editor = new MediumEditor('.cb-editable', {
+    placeholder: false,
+    toolbar: false,
+    anchor: false,
+    anchorPreview: false,
+
+    paste: {
+      forcePlainText: true,
+      cleanPastedHTML: false,
+      cleanReplacements: [],
+      cleanAttrs: ['class', 'style', 'dir'],
+      cleanTags: ['meta'],
+      unwrapTags: []
     }
   });
 };
 
 // parse url by youtube using expression regular
-var youtubeParser = function(url) {
+function youtubeParser(url) {
   var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
   var match = url.match(regExp);
 
@@ -293,3 +456,32 @@ var youtubeParser = function(url) {
     alert('Ops! Você não informou uma url válida.');
   }
 };
+
+function autocomplete(id) {
+  $('#' + id + ' input:text').autocomplete({
+    source: "search_content",
+    minLength: 5,
+    select: function(event, ui) {
+      section_id = generateID();
+
+      element = '<li id="'+ section_id +'" class="cb-relational__item">';
+      element += '<a href="/noticias/' + ui.item.content_builder_category.slug + '/' + ui.item.slug + '" class="cb-relational__link" target="blank"></a>';
+      element += '<h2 class="cb-relational__caption cb-editable">'+ ui.item.title +'</h2>';
+      element += '<div class="cb-tools">';
+      element += '<a class="cb-tools__btn cb-tools__btn--small cb-relational__btn--move fa fa-arrows" href="#"></a>';
+      element += '<a class="cb-tools__btn cb-tools__btn--small cb-tools__btn--delete fa fa-trash" href="#'+ section_id +'"></a>';
+      element += '</div>';
+      element += '</li>';
+
+      $("#" + id + ' ol').append(element);
+      activeMediumEditor();
+      activeSortable();
+      
+      return false;
+    }
+  }).autocomplete("instance")._renderItem = function(ul, item) {
+    return $( "<li>" )
+        .append( "<a>" + item.title + "</a>" )
+        .appendTo( ul );
+  };
+};

data/app/assets/stylesheets/rails_admin/content_builder.scss

@@ -8,7 +8,7 @@
   bottom: 110px;
   right: 0;
 
-  width: 180px;
+  width: 150px;
 
   padding: 20px;
 
@@ -20,17 +20,31 @@
 }
 
 .cb-snippet__btn {
+  margin-bottom: 20px;
+
   display: block;
+  background: #fff;
+
+  text-align: center;
   text-decoration: none;
-  margin-bottom: 20px;
 
   transition: box-shadow .1s ease;
 
   &:hover {
+    text-decoration: none;
     box-shadow: 0 0 0 2px rgba(0,0,0,.1);
   }
 }
 
+.cb-snippet__caption {
+  display: block;
+  padding: 5px;
+  border-top: solid 2px rgba(0,0,0,.05);
+
+  color: rgba(0,0,0,.6);
+  font-size: 10px;
+}
+
 .cb-snippet__image {
   width: 100%;
 }
@@ -42,7 +56,7 @@
   bottom: 0;
   right: 0;
 
-  width: 180px;
+  width: 150px;
 
   padding: 20px;
 
@@ -94,6 +108,11 @@
   }
 }
 
+.cb-tools__btn--small {
+  font-size: 9px;
+  padding: 8px;
+}
+
 .cb-tools__input {
 
 }
@@ -123,12 +142,11 @@
   }
 }
 
-
 .cb-text {
   line-height: 1.6;
 
   color: rgba(0,0,0,.7);
-  font-family: arial, sans-serif;
+  font-family: sans-serif;
   font-size: 16px;
 
   margin-bottom: 30px;
@@ -207,6 +225,153 @@
 }
 
 
+.cb-blockquote {
+  position: relative;
+  margin: 0 0 20px;
+
+  padding: 32px 0 0 32px;
+  border: 0;
+}
+
+.cb-blockquote--left {
+  float: left;
+  width: 50%;
+  margin: 0 30px 20px 0;
+}
+
+.cb-blockquote--right {
+  float: right;
+  width: 50%;
+  margin: 0 0 20px 30px;
+}
+
+.cb-blockquote__text {
+  margin: 0 0 16px;
+
+  line-height: 1.4;
+
+  color: rgba(0,0,0,.6);
+  font-family: sans-serif;
+  font-size: 22px;
+
+  &:before {
+    content: "\“";
+
+    position: absolute;
+    top: -8px;
+    left: 0;
+
+    display: block;
+    line-height: 1;
+
+    color: rgba(0,0,0,.2);
+    font-size: 80px;
+  }
+}
+
+.cb-blockquote__footer {
+  position: relative;
+  margin: 0;
+
+  padding-left: 24px;
+
+  color: rgba(0,0,0,.6);
+  font-family: sans-serif;
+  font-size: 16px;
+
+  &:before {
+    content: "\2014 \00A0";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: block;
+  }
+}
+
+.cb-relational {
+  margin: 0 0 20px;
+  padding-top: 5px;
+}
+
+.cb-relational--left {
+  float: left;
+  margin: 0 30px 25px 0;
+
+  width: 50%;
+}
+
+.cb-relational--right {
+  float: right;
+  margin: 0 0 25px 30px;
+
+  width: 50%;
+}
+
+.cb-relational__title {
+  margin: 0 0 15px;
+
+  line-height: 1;
+  padding-top: 8px;
+  border-top: solid 4px rgba(0,0,0,.1);
+
+  color: rgba(0,0,0,.3);
+  font-size: 16px;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.cb-relational__list {
+  margin: 0 0 0 40px;
+  padding: 0;
+  list-style: none;
+}
+
+.cb-relational__item {
+  position: relative;
+  padding: 20px 0;
+  border-bottom: solid 1px rgba(0,0,0,.1);
+}
+
+.cb-relational__caption {
+  margin: 0;
+
+  display: block;
+
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.cb-relational__btn {
+  position: absolute;
+  top: 14px;
+  right: 0;
+
+  display: block;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+
+  color: rgba(0,0,0,.8);
+  text-align: center;
+}
+
+.cb-search {
+  margin-bottom: 15px;
+
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: solid 1px #ccc;
+
+  outline: none;
+
+  &:focus {
+    border-color: #999;
+  }
+}
+
 .cb-loading {
   position: absolute;
   z-index: 200;
@@ -218,7 +383,6 @@
   background: image_url('cb-loading.svg') no-repeat center rgba(#fff, .95);
 }
 
-
 [contenteditable="true"] {
   outline: none;
 

data/app/controllers/rails_admin_content_builder/content_builder_controller.rb

@@ -1,8 +1,24 @@
 module RailsAdminContentBuilder
   class ContentBuilderController < ::ApplicationController
+    def search_content
+      @content_builder = RailsAdminContentBuilder::ContentBuilder.order('date_publish desc')
+                                                                 .limit(10)
+                                                                 .search(params[:term])
+      if @content_builder
+        render json: @content_builder.to_json(:include => {
+                                                :content_builder_category => {
+                                                  :only => [:name, :slug]
+                                                }
+                                              })
+      else
+        render json: @content_builder.errors
+      end
+    end
+
     def create_images
       @content_builder = ContentBuilder.find(params[:id])
-      @image = @content_builder.content_builder_images.create(image: params[:content_builder_image])
+      @image = @content_builder.content_builder_images
+                               .create(image: params[:content_builder_image])
       if @image
         render json: find_image(@image.id)
       else

data/app/models/rails_admin_content_builder/content_builder.rb

@@ -20,7 +20,7 @@ module RailsAdminContentBuilder
       white_list_sanitizer = Rails::Html::WhiteListSanitizer.new
       white_list_sanitizer.sanitize(
         self.content,
-        tags: %w(div b i a u p img figure figcaption a iframe),
+        tags: %w(div b i a u p img figure figcaption a iframe footer aside section blockquote ul ol li h1 h2 h3 h4 h5 h6),
         attributes: %w(src class alt href allowfullscreen frameborder height width)).try(:html_safe)
     end
   end