spina-slider 1.0.0

data/app/assets/stylesheets/slider.scss

@@ -0,0 +1,68 @@
+.extras {
+  margin-bottom: 10px;
+} 
+
+.done {
+  display: none;
+}
+
+.slider-fields {
+  padding: 0px 10px 0px 10px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  ul.slider-todo {
+    margin: 5px;
+    background-color: rgb(240,240,240);
+    border: 0px rgb(100,100,100) solid;
+    border-radius: 10px;
+
+    li {
+      list-style-type: circle;
+      list-style-position: inside;
+      margin:10px;
+      font-size: 16px;
+      color: #6865b4;
+    }
+  }
+
+  .slider-preview {
+    width: 400px;
+    height: auto;
+    max-height: 400px;
+    padding: 5px;
+    margin: 10px 10px 10px 0px;
+    border: 1px rgb(100,100,100) solid;
+    border-radius: 10px;
+    background-color: rgb(240,240,240);
+    font-size: 10px;
+    overflow-y: scroll;
+
+    .image-slider {
+      font-weight: 700;
+    }
+  }
+
+  .slider-markup {
+    display: none;
+
+    .slider-show {
+      display: none;
+    }
+  }
+
+  .button-group {
+    margin-top: 10px;
+  }
+}
+
+.text-input{
+  figure{
+    &[data-trix-content-type=image-slider]{
+      max-height: 400px;
+      overflow: hidden;
+    } 
+  }
+}

data/app/assets/stylesheets/twentytwenty-no-compass.scss

@@ -0,0 +1,302 @@
+// 20/20 Class Prefix
+$pluginPrefix: "twentytwenty" !default;
+
+// 20/20 Handle Styles
+$twenty20-handle-color: #fff !default;
+$twenty20-handle-stroke: 3px !default;
+$twenty20-handle-circle-width: 38px !default;
+$twenty20-handle-box-shadow: 0px 0px 12px rgba(#333,0.5) !default;
+$twenty20-handle-triangle-color: $twenty20-handle-color !default;
+$twenty20-handle-triangle-size: 6px !default;
+$twenty20-handle-triangle-position: 5px !default;
+$twenty20-handle-radius: 1000px !default;
+
+// 20/20 Overlay Styles
+$twenty20-overlay-bg: rgba(#000,0.5) !default;
+$twenty20-overlay-label-color: #fff !default;
+$twenty20-overlay-label-bg: rgba(#fff, .2) !default;
+$twenty20-overlay-label-height: 38px !default;
+$twenty20-overlay-label-width: 90px !default;
+$twenty20-overlay-label-padding: 20px !default;
+$twenty20-overlay-label-font-size: 13px !default;
+$twenty20-overlay-label-letter-spacing: 0.1em !default;
+$twenty20-label-radius: 2px !default;
+
+// 20/20 Placeholders
+%handle-content {
+  content: " ";
+  display: block;
+  background: $twenty20-handle-color;
+  position: absolute;
+  z-index: 30;
+  // @include box-shadow($twenty20-handle-box-shadow);
+}
+
+%handle-position-horizontal {
+  width: $twenty20-handle-stroke;
+  height: 9999px;
+  left: 50%;
+  margin-left: -($twenty20-handle-stroke / 2);
+}
+
+%handle-position-vertical {
+  width: 9999px;
+  height: $twenty20-handle-stroke;
+  top: 50%;
+  margin-top: -($twenty20-handle-stroke / 2);
+}
+
+%absolute-wh-position {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+%overlay-transition-duration {
+  transition-duration: 0.5s;
+}
+
+%label-transition-property {
+  transition-property: opacity;
+}
+
+%label-text {
+  color: $twenty20-overlay-label-color;
+  font-size: $twenty20-overlay-label-font-size;
+  letter-spacing: $twenty20-overlay-label-letter-spacing;
+}
+
+%label-structure {
+  position: absolute;
+  background: $twenty20-overlay-label-bg;
+  line-height: $twenty20-overlay-label-height;
+  padding: 0 $twenty20-overlay-label-padding;
+  border-radius: $twenty20-label-radius;
+}
+
+%label-position-horizontal {
+  top: 50%;
+  margin-top: -($twenty20-overlay-label-height / 2);
+}
+
+%label-position-vertical {
+  left: 50%;
+  margin-left: -($twenty20-overlay-label-width / 2);
+  text-align: center;
+  width: $twenty20-overlay-label-width;
+}
+
+%css-triangle {
+  width: 0;
+  height: 0;
+  border: $twenty20-handle-triangle-size inset transparent;
+  position: absolute;
+}
+
+%css-triangle-horizontal {
+  @extend %css-triangle;
+  top: 50%;
+  margin-top: -$twenty20-handle-triangle-size;
+}
+
+%css-triangle-vertical {
+  @extend %css-triangle;
+  left: 50%;
+  margin-left: -$twenty20-handle-triangle-size;
+}
+
+// 20/20 Container
+.#{$pluginPrefix}-container {
+  box-sizing: content-box;
+  z-index: 0;
+  overflow: hidden;
+  position: relative;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+
+  img {
+    max-width: 100%;
+    position: absolute;
+    top: 0;
+    display: block;
+  }
+
+  &.active .#{$pluginPrefix}-overlay,
+  &.active :hover.#{$pluginPrefix}-overlay { background: rgba(#000,0);
+
+    .#{$pluginPrefix}-before-label,
+    .#{$pluginPrefix}-after-label { opacity: 0; }
+  }
+  * {
+    box-sizing: content-box;
+  }
+}
+
+// 20/20 Before Label
+.#{$pluginPrefix}-before-label {
+  @extend %absolute-wh-position;
+  @extend %label-transition-property;
+  @extend %overlay-transition-duration;
+  opacity: 0;
+
+  &:before {
+    @extend %label-structure;
+    @extend %label-text;
+    content: attr(data-content);
+  }
+}
+
+// 20/20 After Label
+.#{$pluginPrefix}-after-label {
+  @extend %absolute-wh-position;
+  @extend %label-transition-property;
+  @extend %overlay-transition-duration;
+  opacity: 0;
+
+  &:before {
+    @extend %label-structure;
+    @extend %label-text;
+    content: attr(data-content);
+  }
+}
+
+// 20/20 Horizontal Labels
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-before-label {
+
+  &:before {
+     @extend %label-position-horizontal;
+     left: 10px;
+  }
+}
+
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-after-label {
+
+  &:before {
+     @extend %label-position-horizontal;
+     right: 10px;
+  }
+}
+
+// 20/20 Vertical Labels
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-before-label {
+
+  &:before {
+     @extend %label-position-vertical;
+     top: 10px;
+  }
+}
+
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-after-label {
+
+  &:before {
+     @extend %label-position-vertical;
+     bottom: 10px;
+  }
+}
+
+// 20/20 Overlay
+.#{$pluginPrefix}-overlay {
+  @extend %absolute-wh-position;
+  @extend %overlay-transition-duration;
+  transition-property: background;
+  background: rgba(#000,0);
+  z-index: 25;
+
+  &:hover { background: $twenty20-overlay-bg;
+
+    .#{$pluginPrefix}-after-label { opacity: 1; }
+    .#{$pluginPrefix}-before-label { opacity: 1; }
+  }
+}
+
+.#{$pluginPrefix}-before { z-index: 20; }
+.#{$pluginPrefix}-after { z-index: 10; }
+
+// 20/20 Handle Styles
+.#{$pluginPrefix}-handle {
+  height: $twenty20-handle-circle-width;
+  width: $twenty20-handle-circle-width;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  margin-left: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
+  margin-top: -($twenty20-handle-circle-width/2) - $twenty20-handle-stroke;
+  border: $twenty20-handle-stroke solid $twenty20-handle-color;
+  border-radius: $twenty20-handle-radius;
+  box-shadow: $twenty20-handle-box-shadow;
+  z-index: 40;
+  cursor: pointer;
+}
+
+// 20/20 Horizontal Handle Styles
+.#{$pluginPrefix}-horizontal .#{$pluginPrefix}-handle {
+
+  &:before {
+    @extend %handle-content;
+    @extend %handle-position-horizontal;
+    bottom: 50%;
+    margin-bottom: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: 0 $twenty20-handle-stroke 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+
+  &:after {
+    @extend %handle-content;
+    @extend %handle-position-horizontal;
+    top: 50%;
+    margin-top: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: 0 (-$twenty20-handle-stroke) 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+}
+
+// 20/20 Vertical Handle Styles
+.#{$pluginPrefix}-vertical .#{$pluginPrefix}-handle {
+
+  &:before {
+    @extend %handle-content;
+    @extend %handle-position-vertical;
+    left: 50%;
+    margin-left: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: $twenty20-handle-stroke 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+
+  &:after {
+    @extend %handle-content;
+    @extend %handle-position-vertical;
+    right: 50%;
+    margin-right: ($twenty20-handle-circle-width/2) + $twenty20-handle-stroke;
+    box-shadow: (-$twenty20-handle-stroke) 0 0 $twenty20-handle-color, $twenty20-handle-box-shadow;
+  }
+}
+
+// 20/20 Left Handle
+.#{$pluginPrefix}-left-arrow {
+  border-right: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  left: 50%;
+  margin-left: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-horizontal;
+}
+
+// 20/20 Right Handle
+.#{$pluginPrefix}-right-arrow {
+  border-left: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  right: 50%;
+  margin-right: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-horizontal;
+}
+
+// 20/20 Up Handle
+.#{$pluginPrefix}-up-arrow {
+  border-bottom: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  top: 50%;
+  margin-top: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-vertical;
+}
+
+// 20/20 Down Handle
+.#{$pluginPrefix}-down-arrow {
+  border-top: $twenty20-handle-triangle-size solid $twenty20-handle-triangle-color;
+  bottom: 50%;
+  margin-bottom: -($twenty20-handle-triangle-size * 2) - $twenty20-handle-triangle-position;
+  @extend %css-triangle-vertical;
+}

data/app/views/layouts/spina/admin/admin.html.haml

@@ -0,0 +1,40 @@
+!!!
+%html{lang: I18n.locale}
+  %head
+    %meta{charset: 'utf-8'}
+    %meta{name: 'viewport', content: 'initial-scale=1.0'}
+    = csrf_meta_tags
+    %meta{name: 'turbolinks-cache-control', content: 'no-preview'}
+
+    %title Spina
+
+    / Stylesheet
+    = stylesheet_link_tag 'spina/admin/application', data: {turbolinks_track: true}
+    = stylesheet_link_tag 'twentytwenty-no-compass'
+    = stylesheet_link_tag 'slider'
+
+    /[if lt IE 9]
+      = javascript_include_tag '//html5shiv.googlecode.com/svn/trunk/html5.js', data: {turbolinks_track: true}
+
+    / JavaScript
+    = javascript_include_tag 'spina/admin/application', data: {turbolinks_track: true}
+    = javascript_include_tag 'slider'
+    = yield(:plugin_stylesheets)
+
+    / Plugins
+    - Spina::Plugin.all.each do |plugin|
+      - if current_theme.plugins.include? plugin.name
+        - if lookup_context.exists? "spina/admin/hooks/#{ plugin.namespace }/_head"
+          = render "spina/admin/hooks/#{ plugin.namespace }/head"
+  %body
+    = render 'spina/admin/shared/primary_navigation'
+
+    %section#main
+      = yield(:permanent_notice)
+
+      = render 'spina/admin/shared/notifications'
+
+      = content_for?(:application) ? yield(:application) : yield
+
+      = link_to 'http://www.spinacms.com', class: 'spina-logo', target: :blank do
+        = image_tag('spina/spina.svg', width: 32, height: 24)

data/app/views/spina/admin/media_picker/_modal.html.haml

@@ -0,0 +1,58 @@
+.modal.modal-large
+  %section{style: "display: flex"}
+    .gallery-select-container{data: {controller: "gallery-select"}}
+      .gallery-select.gallery.gallery-prepend-image{data: {multiselect: defined?(multiple) && multiple}}
+        .item.item-small.item-uploader.new-image-form
+          = render partial: 'spina/admin/images/form'
+        - if @media_folder.present?
+          = link_to spina.admin_media_picker_path(request.query_parameters.merge(media_folder_id: nil)), class: 'item media-folder', data: {remote: true} do
+            .media-folder-thumbnail
+              = image_tag 'spina/media_folder_placeholder.svg'
+              .media-folder-shadow
+            .media-folder-name=t "spina.images.back"
+        - else
+          - @media_folders.each do |media_folder|
+            = link_to spina.admin_media_picker_path({media_folder_id: media_folder.id}.merge(request.query_parameters)), class: 'item media-folder', data: {remote: true} do
+              .media-folder-thumbnail{data: {badge: media_folder.images.count}}
+                - if media_folder.images.any?
+                  = image_tag variant(media_folder.images.last.file, resize: '144x144^', crop: "144x144+0+0")
+                - else
+                  = image_tag 'spina/media_folder_placeholder.svg'
+                .media-folder-shadow
+              .media-folder-name= media_folder.name
+        .infinite-scroll
+          = render partial: 'spina/admin/images/image', collection: @images
+        .infinite-pagination{data: { controller: 'infinite-scroll' } }
+          = link_to_next_page @images, 'Next', params: params, remote: true,
+            data: { target: 'infinite-scroll.link' }
+          %span{ data: { target: 'infinite-scroll.link' } }
+      .gallery-select-sidebar
+        = form_with url: admin_media_picker_path, html: {'data-remote': true} do
+          .gallery-select-form-fields
+            = hidden_field_tag :image_id, params[:selected_ids]&.first, data: {target: 'gallery-select.singleImage'}
+            = hidden_field_tag :image_ids, params[:selected_ids]&.join("-"), data: {target: 'gallery-select.multipleImages'}
+            = hidden_field_tag :hidden_field_id, params[:hidden_field_id]
+            = hidden_field_tag :trix_toolbar_id, params[:trix_toolbar_id]
+            = hidden_field_tag :slider, params[:slider]
+            = check_box_tag :multiple, true, defined?(multiple) && multiple, style: 'display: none', data: {target: 'gallery-select.multiple'}
+            - if params[:trix_toolbar_id].present?
+              .form-group
+                .form-label Alt text
+                .form-control= text_field_tag :alt, nil, placeholder: "Alt"
+              .form-group
+                .form-label Link to URL
+                .form-control= text_field_tag :link_to_url, nil, placeholder: "URL"
+          .gallery-select-action-bar
+            = link_to t('spina.cancel'), "#", class: 'button button-link', data: {dismiss: 'modal'}
+            = button_tag type: 'submit', class: 'button button-primary button-large', style: 'margin-bottom: 0px' do
+
+              - if defined?(multiple) && multiple
+                = icon('plus')
+                = t('spina.images.choose_images')
+                %span.gallery-select-counter{data: {target: "gallery-select.counter"}}
+                  - if params[:selected_ids].try(:any?)
+                    (#{ params[:selected_ids].count })
+              - else
+                = icon('check')
+                =t 'spina.images.choose_image'
+