rails_admin_content_builder_rails_6 1.0.0

data/app/assets/javascripts/rails_admin/helpers/action_sortable.js

@@ -0,0 +1,16 @@
+// sortable to relational
+function activeSortable() {
+  $('.cb-relational__list').sortable({
+    revert: true,
+    placeholder: 'ui-sortable-placeholder',
+    handle: '.cb-relational__btn--move',
+    cursor: 'move',
+  });
+
+  $('.cb-gallery').sortable({
+    revert: true,
+    placeholder: 'ui-sortable-placeholder--gallery',
+    handle: '.cb-gallery__btn--move',
+    cursor: 'move',
+  });
+}

data/app/assets/javascripts/rails_admin/helpers/add_event_to_input.js

@@ -0,0 +1,9 @@
+// add event on input file
+function addEventToInputFile(id) {
+  $('#' + id).on('change', fileSelectAndUpload);
+}
+
+// add event on input file
+function addEventToInputFileGallery(id) {
+  $('#' + id).on('change', fileSelectAndUploadGallery);
+}

data/app/assets/javascripts/rails_admin/helpers/autocomplete.js.erb

@@ -0,0 +1,32 @@
+function autocomplete(id) {
+  console.log(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;
+    },
+    create: function () {
+      $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
+        return $("<li>")
+          .append("<a>" + item.title + "</a>")
+          .appendTo(ul);
+      }
+    }
+  })
+}

data/app/assets/javascripts/rails_admin/helpers/file_select_and_upload.js

@@ -0,0 +1,31 @@
+// upload file via ajax
+function fileSelectAndUpload(evt) {
+  var file = evt.target.files[0];
+
+  if (file) {
+    var formData = new FormData();
+    formData.append('content_builder_image', file);
+
+    $.ajax({
+      url: 'create_images',
+      data: formData,
+      cache: false,
+      contentType: false,
+      processData: false,
+      type: 'PUT',
+      beforeSend: function () {
+        $('#' + evt.target.id).find('figure').append('<div class="cb-loading"></div>');
+        $('.cb-tools--center').addClass('cb-tools--disabled');
+      },
+      complete: function () {
+        $('.cb-loading').remove();
+        $('.cb-tools--center').removeClass('cb-tools--disabled');
+      }
+    }).done(function (e) {
+      var p = evt.target.getAttribute('data-position');
+      $('#' + evt.target.id).find('img').attr('src', getImageOfPosition(p, e));
+    }).fail(function (e) {
+      alert('error: ' + e);
+    });
+  }
+}

data/app/assets/javascripts/rails_admin/helpers/file_select_and_upload_gallery.js

@@ -0,0 +1,43 @@
+// Upload Gallery
+function fileSelectAndUploadGallery(evt) {
+  var files = evt.target.files;
+
+  for (i = 0; i < files.length; ++i) {
+    var formData = new FormData();
+    formData.append('content_builder_image', files[i]);
+
+    $.ajax({
+      url: 'create_images',
+      data: formData,
+      cache: false,
+      contentType: false,
+      processData: false,
+      type: 'PUT',
+      beforeSend: function () {
+        $('#' + evt.target.id).find('figure').append('<div class="cb-loading"></div>');
+        $('.cb-tools--center').addClass('cb-tools--disabled');
+      },
+      complete: function () {
+        $('.cb-loading').remove();
+        $('.cb-tools--center').removeClass('cb-tools--disabled');
+      }
+    }).done(function (e) {
+      var p = evt.target.getAttribute('data-position');
+      id = generateID();
+
+      element = '<div class="cb-gallery__item" id="' + id + '">';
+      element += '<div class="cb-tools cb-tools--center">';
+      element += '<a class="cb-tools__btn cb-gallery__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 += '<figure class="cb-gallery__figure">';
+      element += '<img class="cb-gallery__image" src="' + getImageOfPosition(p, e) + '">';
+      element += '</figure>';
+      element += '</div>';
+
+      $('#' + evt.target.id + ' .cb-gallery').append(element);
+    }).fail(function (e) {
+      alert('error: ' + e);
+    });
+  }
+}

data/app/assets/javascripts/rails_admin/helpers/generate_id.js

@@ -0,0 +1,4 @@
+// generate random id
+function generateID() {
+  return '_' + Math.random().toString(36).substr(2, 9);
+}

data/app/assets/javascripts/rails_admin/helpers/get_image_of_position.js

@@ -0,0 +1,11 @@
+// get image of position
+function getImageOfPosition(position, e) {
+  switch (position) {
+    case 'left':
+    case 'right':
+      return e.left_or_right.url;
+
+    case 'center':
+      return e.center.url;
+  }
+}

data/app/assets/javascripts/rails_admin/helpers/medium_editor.js

@@ -0,0 +1,44 @@
+// active medium editor plugin
+function activeMediumEditor() {
+  var text = new MediumEditor('.cb-text', {
+    placeholder: {
+      text: '',
+      hideOnClick: true
+    },
+
+    toolbar: {
+      buttons: ['bold', 'italic', 'underline', 'anchor']
+    },
+
+    anchor: {
+      placeholderText: 'Ex: http://site.com'
+    },
+
+    anchorPreview: false,
+
+    paste: {
+      forcePlainText: true,
+      cleanPastedHTML: false,
+      cleanReplacements: [],
+      cleanAttrs: ['class', 'style', 'dir'],
+      cleanTags: ['meta'],
+      unwrapTags: []
+    }
+  });
+
+  var editable = 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: []
+    }
+  });
+}

data/app/assets/javascripts/rails_admin/helpers/scrool_to.js

@@ -0,0 +1,8 @@
+// scroll to
+function scrollTo(id) {
+  if (id) {
+    $('html, body').animate({
+      scrollTop: $('#' + id).offset().top
+    }, 400);
+  }
+}

data/app/assets/javascripts/rails_admin/helpers/youtube_parse.js.erb

@@ -0,0 +1,11 @@
+// parse url by youtube using expression regular
+function youtubeParser(url) {
+  var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
+  var match = url.match(regExp);
+
+  if (match && match[7].length == 11) {
+    return b = match[7];
+  } else {
+    alert('<%= I18n.t('admin.actions.content_builder.invalid_url')%>');
+  }
+}

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

@@ -0,0 +1,534 @@
+@import "medium-editor/medium-editor";
+@import "medium-editor/themes/bootstrap";
+
+.cb-snippet {
+  position: fixed;
+  z-index: 400;
+  bottom: 54px;
+  left: 0;
+  right: 0;
+
+  width: 100%;
+  height: 100px;
+  padding: 10px 0;
+  background: #f8f8f8;
+  border-top: solid 1px rgba(0,0,0,.1);
+  overflow-y: scroll;
+}
+
+.cb-snippet__btn {
+  box-sizing: border-box;
+  float: left;
+  width: 25%;
+  padding: 10px;
+
+  text-align: center;
+  text-decoration: none;
+
+  transition: box-shadow .1s ease;
+
+  &:hover {
+    text-decoration: none;
+    box-shadow: 0 0 0 2px rgba(0,0,0,.1);
+  }
+}
+
+.cb-snippet__caption {
+  display: none;
+  padding: 5px;
+
+  color: rgba(0,0,0,.6);
+  font-size: 10px;
+}
+
+.cb-snippet__image {
+  width: 100%;
+}
+
+.cb-controls {
+  position: fixed;
+  z-index: 400;
+  bottom: 0;
+  right: 0;
+
+  width: 100%;
+
+  padding: 10px;
+
+  background: #f8f8f8;
+  border-top: solid 1px rgba(0,0,0,.1);
+  border-left: solid 1px rgba(0,0,0,.1);
+
+  .btn-block {
+    margin-top: 0;
+    width: auto !important;
+  }
+
+  .btn-right {
+    float: right;
+  }
+
+  .btn-left {
+    float: left;
+  }
+}
+
+.cb-tools {
+  margin-bottom: 10px;
+
+  border-radius: .4rem;
+  background: darken(#fff, 7%);
+  overflow: hidden;
+
+  text-align: right;
+}
+
+.cb-tools--center {
+  position: absolute;
+  z-index: 300;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.cb-tools--disabled {
+  z-index: 100;
+}
+
+.cb-tools__btn {
+  display: inline-block;
+
+  font-size: 12px;
+  text-align: center;
+  text-transform: uppercase;
+
+  padding: 10px;
+
+  &:hover,
+  &:focus {
+    background: rgba(0,0,0,.05);
+    text-decoration: none;
+  }
+}
+
+.cb-tools__btn--small {
+  font-size: 9px;
+  padding: 8px;
+}
+
+.cb-tools__input {
+
+}
+
+.cb-tools__input--upload {
+  display: none !important;
+}
+
+
+#cb-container {
+  box-sizing: border-box;
+  padding: 0 0 300px 0;
+}
+
+.cb-content {
+  position: relative;
+  max-width: 100%;
+  height: auto !important;
+
+  &:after {
+    clear: both;
+    content: "";
+    display: block;
+    font-size: 0;
+    height: 0;
+    visibility: hidden;
+  }
+}
+
+.cb-text {
+  line-height: 1.6;
+
+  color: rgba(0,0,0,.7);
+  font-family: sans-serif;
+  font-size: 16px;
+
+  margin-bottom: 30px;
+
+  p {
+    margin: 0 0 20px;
+
+    &:last-of-type {
+      margin: 0;
+    }
+  }
+}
+
+.cb-figure {
+  position: relative;
+  margin: 0 0 20px;
+
+  img {
+    width: 100%;
+  }
+}
+
+.cb-figure--center {
+  margin: 0 0 20px;
+}
+
+.cb-figure__clip {
+  position: relative;
+}
+
+.cb-figcaption {
+  margin: 6px 0 0;
+
+  color: rgba(0,0,0,.6);
+  font-size: 14px;
+
+  line-height: 1.4;
+  padding: 8px 14px;
+  background: rgba(0,0,0,.05);
+
+  p {
+    margin: 0;
+  }
+}
+
+.cb-video {
+  position: relative;
+  height: 0;
+  overflow: hidden;
+  padding-bottom: 56.25%;
+  background: image-url("cb-video-default.jpg") no-repeat center #e4e4e4;
+
+  iframe {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+  }
+}
+
+.cb-video--center {
+  margin-bottom: 30px;
+}
+
+.cb-blockquote {
+  position: relative;
+  margin: 0 0 20px;
+
+  padding: 25px 0 0 25px;
+  border: 0;
+}
+
+.cb-blockquote__text {
+  margin: 0 0 8px;
+
+  line-height: 1.4;
+
+  color: rgba(0,0,0,.6);
+  font-family: sans-serif;
+  font-size: 18px;
+
+  &:before {
+    content: "\“";
+
+    position: absolute;
+    top: -8px;
+    left: 0;
+
+    display: block;
+    line-height: 1;
+
+    color: rgba(0,0,0,.2);
+    font-size: 70px;
+  }
+}
+
+.cb-blockquote__footer {
+  position: relative;
+  margin: 0;
+
+  padding-left: 24px;
+
+  color: rgba(0,0,0,.6);
+  font-family: sans-serif;
+  font-size: 14px;
+
+  &:before {
+    content: "\2014 \00A0";
+
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    display: block;
+  }
+}
+
+.cb-relational {
+  margin: 0 0 20px;
+  padding-top: 5px;
+}
+
+.cb-relational__title {
+  margin: 0 0 15px;
+
+  padding-top: 8px;
+  border-top: solid 4px rgba(0,0,0,.1);
+
+  color: rgba(0,0,0,.6) !important;
+  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;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  background: image-url("cb-loading.svg") no-repeat rgba(255,255,255,.95);
+  background-position: 98% 10px;
+}
+
+.cb-content-gallery {
+  @extend .cb-content;
+  margin-bottom: 30px;
+}
+
+.cb-gallery {
+  min-height: 100px;
+
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.cb-gallery__item,
+.ui-sortable-placeholder--gallery {
+  position: relative;
+  float: left;
+  margin-bottom: 5px;
+
+  box-sizing: border-box;
+  width: 25%;
+  height: 150px;
+  padding: 0 5px;
+  overflow: hidden;
+}
+
+.cb-gallery__item {
+  background: image-url("cb-loading.svg") no-repeat;
+  background-position: 98% 10px;
+}
+
+.cb-gallery__image {
+  position: absolute;
+  display: block;
+  height: 100%;
+}
+
+[contenteditable="true"] {
+  outline: none;
+
+  &:hover,
+  &:focus {
+    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
+  }
+}
+
+.ui-sortable-placeholder {
+  margin: 20px 0;
+  height: 80px;
+
+  background: rgba(0,0,0,.05);
+  border: dashed 2px rgba(0,0,0,.05);
+}
+
+@media screen and (min-width: 460px) {
+  .cb-snippet__caption {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .cb-snippet {
+    top: 50px;
+    right: 0;
+    bottom: 112px;
+    left: auto;
+
+    width: 150px;
+    height: auto;
+    padding: 20px;
+    border: 0;
+    border-left: solid 1px rgba(0,0,0,.1);
+
+    -webkit-transform: translateX(0%);
+    -moz-transform: translateX(0%);
+    transform: translateX(0%);
+  }
+
+  .cb-snippet__btn {
+    margin-bottom: 20px;
+
+    display: block;
+    width: 100%;
+    padding: 0;
+  }
+
+  .cb-controls {
+    position: fixed;
+    z-index: 100;
+    bottom: 0;
+    right: 0;
+
+    width: 150px;
+
+    padding: 20px;
+
+    background: #f8f8f8;
+    border-top: solid 1px rgba(0,0,0,.1);
+    border-left: solid 1px rgba(0,0,0,.1);
+
+    .btn-block {
+      width: 100% !important;
+    }
+
+    .btn-block + .btn-block {
+      margin-top: 5px;
+    }
+
+    .btn-left,
+    .btn-right {
+      float: none;
+    }
+  }
+
+  #cb-container {
+    box-sizing: border-box;
+    padding: 30px 160px 100px 40px;
+    width: 80%;
+    margin: 0 auto;
+  }
+
+  .cb-tools {
+    position: absolute;
+    z-index: 300;
+    top: 0;
+    left: -40px;
+  }
+
+  .cb-tools__btn {
+    display: block;
+  }
+
+  .cb-tools--center {
+    position: absolute;
+    z-index: 300;
+    top: 50%;
+    left: 50%;
+
+    .cb-tools__btn {
+      display: inline-block;
+    }
+  }
+
+  .cb-figure--left {
+    float: left;
+    width: 50%;
+    margin: 0 30px 20px 0;
+  }
+
+  .cb-figure--right {
+    float: right;
+    width: 50%;
+    margin: 0 0 20px 30px;
+  }
+
+  .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-relational--left {
+    float: left;
+    margin: 0 30px 25px 0;
+
+    width: 50%;
+  }
+
+  .cb-relational--right {
+    float: right;
+    margin: 0 0 25px 30px;
+
+    width: 50%;
+  }
+}