rails_admin_featured_content_rails_6 1.0.4

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

@@ -0,0 +1,21 @@
+function autocomplete(id) {
+  $('#' + id + ' input:text').autocomplete({
+    source: "search_content",
+    minLength: 5,
+    select: function(event, ui) {
+      console.log(ui.item);
+      $("#" + id + ' .fc-title').text(ui.item.title);
+      $("#" + id + ' .fc-text').text(ui.item.summary);
+      $("#" + id + ' .fc-caption').text(ui.item.content_builder_category.name);
+      $("#" + id + ' .fc-link').attr('href', '/noticias/'+ ui.item.content_builder_category.slug +'/' + ui.item.slug);
+      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/events.js

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

data/app/assets/javascripts/rails_admin/helpers/generate_radom_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/slide.js.erb

@@ -0,0 +1,77 @@
+// slide active
+function slideActive(container) {
+  if(container) {
+    container.owlCarousel({
+      singleItem: true,
+      slideSpeed: 500,
+      autoPlay: false,
+      stopOnHover: true,
+      paginationSpeed: 500,
+      rewindSpeed: 1000,
+      navigation: true,
+      touchDrag: false,
+      mouseDrag: false,
+      navigationText: ['‹','›']
+    });
+  }
+};
+
+// slide add
+function slideAdd(row_id, reference) {
+  section_id = generateID();
+
+  var element = '<div class="fc-item fc-slide__owl" id="'+ section_id +'">';
+  element += '<input class="fc-search" type="text" name="search" placeholder="<%= I18n.t('admin.actions.featured_content.snippet.search_news') %>">';
+  element += '<div class="fc-slide__item">';
+  element += '<div class="fc-tools fc-tools--center">';
+  element += '<a class="fc-tools__btn fc-tools__btn--upload fa fa-camera" href="#'+ section_id + '"></a>';
+  element += '<a class="fc-tools__btn fc-tools__btn--slide-add fa fa-plus" data-row="'+ row_id +'" href="#'+ section_id +'"></a>';
+  element += '<a class="fc-tools__btn fc-tools__btn--slide-remove fa fa-trash" data-row="'+ row_id +'" href="#'+ section_id +'"></a>';
+  element += '</div>';
+  element += '<a href="#" class="fc-link fc-slide__link"></a>';
+  element += '<h2 class="fc-caption fc-slide__caption"></h2>';
+  element += '<figure class="fc-slide__figure">';
+  element += '<img class="fc-slide__image" src="<%= image_url'cb-image-default.jpg' %>">';
+  element += '<input class="fc-tools__input fc-tools__input--upload" type="file" name="image" id="'+ section_id +'">';
+  element += '</figure>';
+  element += '<div class="fc-slide__content">';
+  element += '<h1 class="fc-title fc-slide__title"></h1>';
+  element += '<p class="fc-text fc-slide__text"></p>';
+  element += '</div>';
+  element += '</section>';
+  element += '</div>';
+  element += '</div>';
+
+  var container = $('#'+ row_id +'  .fc-slide');
+
+  container.data('owlCarousel').addItem(element, [0]);
+  container.data('owlCarousel').jumpTo(0);
+
+  autocomplete(section_id);
+  addEventToInputFile(section_id);
+  editable();
+}
+
+// slide destroy
+function slideDestroy(container) {
+  if(container.length) {
+    for(var i = 0; i < container.length; i++) {
+      $(container[i]).data('owlCarousel').destroy();
+    }
+  }
+}
+
+// slide remove
+function slideRemove(row_id, reference) {
+  var container = $('#'+ row_id +'  .fc-slide');
+  var items = $('#'+ row_id +'  .fc-slide__owl');
+
+  for(i = 0; i < items.length; i++) {
+    if('#' + items[i].id == reference.attr('href')) {
+      container.data('owlCarousel').removeItem(i);
+      container.data('owlCarousel').jumpTo(i);
+
+      break;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,661 @@
+/*
+ *= require owl.carousel
+ *= require owl.theme
+ */
+
+@import 'medium-editor/medium-editor';
+@import 'medium-editor/themes/bootstrap';
+
+.fc-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;
+}
+
+.fc-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);
+  }
+}
+
+.fc-snippet__caption {
+  display: none;
+  padding: 5px;
+
+  color: rgba(0,0,0,.6);
+  font-size: 10px;
+}
+
+.fc-snippet__image {
+  width: 100%;
+}
+
+.fc-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;
+  }
+}
+
+.fc-tools {
+  margin-bottom: 10px;
+
+  border-radius: .4rem;
+  background: darken(#fff, 7%);
+  overflow: hidden;
+
+  text-align: right;
+}
+
+.fc-tools--center {
+  position: absolute;
+  z-index: 300;
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-50%);
+}
+
+.fc-tools--disabled {
+  z-index: 100;
+}
+
+.fc-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;
+  }
+}
+
+.fc-tools__btn--delete {
+  float: left;
+}
+
+.fc-tools__input {
+
+}
+
+.fc-tools__input--upload {
+  display: none !important;
+}
+
+.fc-container {
+  box-sizing: border-box;
+  padding: 0 0 300px 0;
+
+  font-family: 'Open Sans', sans-serif;
+}
+
+.fc-content {
+  position: relative;
+  max-width: 100%;
+  height: auto !important;
+
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.fc-row {
+  position: relative;
+}
+
+.fc-loading {
+  position: absolute;
+  z-index: 400;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 100%;
+  background: image_url('fc-loading.svg') no-repeat center rgba(#fff, .95);
+}
+
+.fc-search {
+  margin-bottom: 10px;
+
+  width: 100%;
+  padding: 8px;
+  border-radius: 4px;
+  border: solid 1px #ccc;
+
+  outline: none;
+
+  &:focus {
+    border-color: #999;
+  }
+}
+
+
+[contenteditable="true"] {
+  outline: none;
+  min-height: 15px;
+
+  &:focus {
+    box-shadow: 0 0 0 1px rgba(0,0,0,.2);
+  }
+
+  &:empty {
+    background: rgba(#000, .1);
+  }
+}
+
+.ui-sortable-placeholder {
+  margin: 20px 0;
+  height: 80px;
+
+  background: rgba(0,0,0,.05);
+  border: dashed 2px rgba(0,0,0,.05);
+}
+
+
+.fc-content {
+  line-height: 1.6;
+
+  color: rgba(0,0,0,.7);
+  font-family: arial, sans-serif;
+  font-size: 16px;
+
+  margin-bottom: 30px;
+}
+
+
+.fc-row {
+  position: relative;
+
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.fc-date {
+  color: lighten(#111, 50%);
+  font-size: 12px;
+
+  margin-bottom: 16px;
+  padding-bottom: 16px;
+
+  border-bottom: solid 1px rgba(#111, .06);
+}
+
+.fc-item {
+  position: relative;
+
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
+}
+
+.fc-item--border {
+  margin-bottom: 24px;
+  padding-bottom: 24px;
+
+  border-bottom: solid 1px rgba(#111, .06);
+}
+
+.fc-link {
+  display: none;
+}
+
+.fc-figure {
+  position: relative;
+
+  float: left;
+  margin: 0 1rem 0 0;
+
+  width: 150px;
+  height: 100px;
+  border-radius: 4px;
+
+  overflow: hidden;
+}
+
+.fc-figure--small {
+  width: 90px;
+  height: 60px;
+}
+
+.fc-figure--large {
+  width: 150px;
+  height: 100px;
+}
+
+.fc-image {
+  margin-bottom: -7px;
+
+  height: 100%;
+  border-radius: 4px;
+}
+
+.fc-content {
+  height: 144px;
+  overflow: hidden;
+}
+
+.fc-time {
+  line-height: 1.6;
+
+  float: right;
+  color: darken(#fff, 40%);
+  font-size: 14px;
+}
+
+.fc-caption {
+  margin: 0 0 8px;
+
+  color: lighten(#111, 40%);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.fc-title {
+  margin: 0;
+
+  display: block;
+  width: 100%;
+  line-height: 1.4;
+
+  color: lighten(#111, 23%) !important;
+  font-size: 15px;
+  font-weight: 600;
+  letter-spacing: -.04em;
+
+  + .fc-figure {
+    margin-top: 8px;
+  }
+}
+
+.fc-title--highlight {
+  margin: 0;
+
+  padding: 8px;
+  background: #333;
+  border-radius: 4px;
+
+  color: #fff !important;
+  font-size: 17px !important;
+}
+
+.fc-text {
+  margin: 8px 0 0;
+
+  line-height: 1.4;
+  overflow: hidden;
+
+  color: lighten(#111, 50%);
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+}
+
+@media screen and (min-width: 460px) {
+  .fc-snippet__caption {
+    display: block;
+  }
+
+  .fc-caption {
+    font-size: 13px;
+  }
+
+  .fc-title {
+    line-height: 1.4;
+    font-size: 19px;
+  }
+
+  .fc-title--small {
+    font-size: 16px;
+  }
+
+  .fc-title--large {
+    line-height: 1.3;
+    font-size: 22px;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .fc-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%);
+  }
+
+  .fc-snippet__btn {
+    margin-bottom: 20px;
+
+    display: block;
+    width: 100%;
+    padding: 0;
+  }
+
+  .fc-tools {
+    position: absolute;
+    z-index: 300;
+    top: 0;
+    left: -40px;
+  }
+
+  .fc-tools__btn {
+    display: block;
+  }
+
+  .fc-tools--center {
+    position: absolute;
+    z-index: 300;
+    top: 50%;
+    left: 50%;
+
+    .fc-tools__btn {
+      display: inline-block;
+    }
+  }
+
+  .fc-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;
+    }
+  }
+
+  .fc-container {
+    box-sizing: border-box;
+    padding: 30px 160px 100px 40px;
+    width: 75%;
+    margin: 0 auto;
+  }
+
+  .fc-row--flex {
+    display: flex;
+  }
+
+  .fc-item--two {
+    float: left;
+    display: block;
+    margin-right: 3.57866%;
+    width: 48.21067%;
+
+    &:nth-child(2n+1) {
+      clear: left;
+    }
+
+    &:nth-child(2n) {
+      margin-right: 0;
+    }
+  }
+
+  .fc-item--three {
+    float: left;
+    display: block;
+    margin-right: 3.16844%;
+    width: 31.22104%;
+
+    &:nth-child(3n+1) {
+      clear: left;
+    }
+
+    &:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  .fc-item--four {
+    float: left;
+    display: block;
+    margin-right: 3.57866%;
+    width: 22.316%;
+
+    &:nth-child(4n+1) {
+      clear: left;
+    }
+
+    &:nth-child(4n) {
+      margin-right: 0;
+    }
+  }
+
+  .fc-date {
+    font-size: 14px;
+  }
+
+  .fc-title--highlight {
+    padding: 8px 14px;
+  }
+
+  .fc-figure--block {
+    position: relative;
+    float: none;
+    margin: 0 1rem .5rem 0;
+
+    width: 100%;
+    height: 0;
+    padding-bottom: 50%;
+
+    .fc-image {
+      position: absolute;
+      top: 50%;
+      left: 0;
+
+      width: 100%;
+      height: auto;
+
+      -webkit-transform: translateY(-50%);
+      -moz-transform: translateY(-50%);
+      transform: translateY(-50%);
+    }
+  }
+}
+
+// slide
+
+.fc-slide {
+  position: relative;
+
+  overflow: hidden;
+
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+
+  .owl-controls {
+    margin: 0;
+
+    .owl-buttons {
+      display: none;
+    }
+
+    .owl-pagination {
+      margin-top: .5em;
+      text-align: center;
+    }
+
+    .owl-page {
+      display: inline-block;
+      opacity: .6;
+
+      span {
+        display: block;
+
+        width: 10px;
+        height: 10px;
+        margin: 0 4px;
+        background: #999;
+        border-radius: 100%;
+      }
+
+      &:hover,
+      &:focus {
+        opacity: 1;
+      }
+    }
+
+    .owl-page.active {
+      opacity: 1;
+    }
+  }
+}
+
+.fc-slide__item {
+  position: relative;
+  overflow: hidden;
+}
+
+.fc-slide__link {
+
+}
+
+.fc-slide__figure {
+  position: relative;
+  z-index: -1;
+  margin: 0 0 .5rem;
+
+  width: 100%;
+  height: 0;
+  padding-bottom: 60%;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.fc-slide__image {
+  position: absolute;
+
+  display: block;
+  width: 100%;
+  min-height: 100%;
+}
+
+@media screen and (min-width: 768px) {
+  .fc-slide__text {
+    max-height: none;
+  }
+}
+
+@media screen and (min-width: 990px) {
+  .fc-slide {
+    .owl-controls {
+      .owl-buttons {
+        position: absolute;
+        top: 70px;
+        right: 0;
+
+        display: block;
+
+        div {
+          margin: 0;
+
+          display: inline-block;
+          opacity: 1;
+          width: 48px;
+          height: 48px;
+          line-height: 48px;
+          padding: 0;
+          background: none;
+          border-radius: 0;
+
+          color: #fff;
+          font-size: 32px;
+          text-align: center;
+
+          &:hover,
+          &:focus {
+            opacity: .7 !important;
+          }
+        }
+      }
+    }
+  }
+}