simple_sidebar 0.0.1.pre → 0.0.5.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8fad6bb78024f4558c3143f3f0c1f7b10fb9fdbd1a01ae95ab04ce9dd62e3319
-  data.tar.gz: e50593f52f64be048658dae81689eb3aad693d4168faf35fe81ea26ce13b9f24
+  metadata.gz: 2e7a64b43e41a0c5e8329c8a7ea796c2f48dd99ead237f91f3709ebd2b523aea
+  data.tar.gz: b53501cea0aeeceaa9715559dfb6359fed536e636662426aeb8b0f2d2340f618
 SHA512:
-  metadata.gz: ff9a4d0b9cdb66cf743837a76685d0ef8dc412b1f706aab2b0090e95c63f878938f86488771569671ab1515fecdae4730154863c368f795ed9a9aa381237e73b
-  data.tar.gz: d9186df087cbcfc44d9164c41b66dcef4d90aede982128895ca1d7fe0dc177bde3af34e5c69ae603f39fe0c364e7e9fdabe901952656f9488604520b82e9d12d
+  metadata.gz: 119cc66208ea5e6f7f4930fff4d69d10a8ac2cc2da9659682e3015e0ba7c136fc49de45e352423fc937d5ad45d0cb875e1a4abb76f6f121d6e17fa9ebf449156
+  data.tar.gz: c4461c81889535cac550f56f3d51757214e7b73939d862a14602497e5522c9293e6ba57e10278389bdbec93b4c0830dbfccfec8a4bc24b95513c0b8165b97d51

data/Rakefile

@@ -17,3 +17,5 @@ RDoc::Task.new(:rdoc) do |rdoc|
 end
 
 Bundler::GemHelper.install_tasks
+
+require 'rails/dummy/tasks'

data/app/assets/javascripts/simple_sidebar/application/core.js.coffee

@@ -9,12 +9,12 @@
 #         </button>
 #       </div>
 #       <aside
-#         id="example-sidebar">
+#         id="example-sidebar"
 #         data-sidebar-load="/de/backend/authentifizierung/user_sidebar.html"
 #         data-sidebar-mode="overlay"
 #         data-sidebar-position="right"
 #         data-sidebar-size="20rem"
-#         data-sidebar-state="closed"
+#         data-sidebar-state="closed">
 #         <h3>Hello from the example sidebar!</h3>
 #       </aside>
 #     </body>
@@ -28,77 +28,119 @@
 #     modal: Like overlay, but with a modal background.
 #  position: left|right|top|bottom
 #  size: size that the sidebar will take up (width for left and right, height for top and bottom). Pass any css size in px, rem or whatever you like.
+#  state: open|closed
 #
 $ ->
-  $('body').on 'click', '#sidebar-modal-background', ->
-    target = $("##{$(@).data('sidebar-target')}")
-    closeModal(target)
-
-  $('[data-sidebar-position]').each (_, e) ->
-    position = $(@).data('sidebar-position')
-    $(e).addClass("sidebar sidebar-#{position}")
-    if $(@).data('sidebar-state') == 'opened'
-      openModal($(@))
-
-  $('[data-sidebar-trigger]').on 'click', ->
-    target = $($(@).data('sidebar-trigger'))
-    state = target.data('sidebar-state')
-    
-    if state == 'closed'
-      openModal(target)
-    else
-      closeModal(target)
+  initializeSidebars = ->
+    $('[data-sidebar-position]').each (_, e) ->
+      # add css classes
+      position = $(@).data('sidebar-position')
+      mode = $(@).data('sidebar-mode')
+      size = $(@).data('sidebar-size')
+      state = $(@).data('sidebar-state')
+
+      $(e).addClass("sidebar sidebar-#{position} sidebar-#{mode}")
+
+      # set correct size
+      if position in ['top', 'bottom']
+        $(e).outerHeight(size)
+      else
+        $(e).outerWidth(size)
+
+      # position outside of viewport
+      outer_width = $(e).outerWidth()
+      $(e).css(position, "-#{outer_width}px")
 
-openModal = (target) ->
-  main_content = $('#main-content')
+      # display it
+      $(e).css("display", "inherit")
 
-  position = target.data('sidebar-position')
-  mode = target.data('sidebar-mode')
-  size_attribute = if position in ['top', 'bottom'] then 'height' else 'width'
-  size = target.data('sidebar-size')
+      # set initial state
+      if state == 'open'
+        openSidebar($(@), false)
 
-  target.css("display", "inherit")
-  target.css(size_attribute, size)
-  main_content.css("margin-#{position}", size) if mode == 'push'
 
+  initializeModalBackground = ->
+    $('body').on 'click', '#sidebar-modal-background', ->
+      target = $("##{$(@).data('sidebar-target')}")
+      closeSidebar(target)
 
-  # modal
-  if mode == 'modal'
-    $("body").append("<div id=\"sidebar-modal-background\" data-sidebar-target=\"#{target.attr('id')}\"></div>")
 
-  # load
-  if target.data('sidebar-load')
-    url = target.data('sidebar-load')
-    $.ajax
-      type: 'GET'
-      url: url
-      success: (response) ->
-        $(target).html(response)
-        return
+  initializeTriggers = ->
+    $('[data-sidebar-trigger]').on 'click', ->
+      target = $($(@).data('sidebar-trigger'))
+      state = target.data('sidebar-state')
 
-  # set state
-  target.data('sidebar-state', 'opened')
+      if state == 'closed'
+        openSidebar(target, true)
+      else
+        closeSidebar(target, true)
 
-closeModal = (target) ->
-  main_content = $('#main-content')
 
-  position = target.data('sidebar-position')
-  mode = target.data('sidebar-mode')
-  size_attribute = if position in ['top', 'bottom'] then 'height' else 'width'
-  size = target.data('sidebar-size')
-  
-  # push
-  if mode == 'push'
-    main_content.css("margin-#{position}", size)
+  openSidebar = (target, animate = false) ->
+    main_content = $('#main-content')
 
-  # modal
-  if mode == 'modal'
-    $("#sidebar-modal-background").remove()
+    position = target.data('sidebar-position')
+    mode = target.data('sidebar-mode')
+    size = target.data('sidebar-size')
+
+    # Move sidebar into viewport
+    if(animate == true)
+      target.animate({ "#{position}": 0 }, 500);
+    else
+      target.css(position, 0)
+
+    # Add margin equal to sidebar width/height to main content to make room
+    # for the sidebar if in push mode
+    if(animate == true)
+      main_content.animate({ "margin-#{position}": size }, 500);
+    else
+      main_content.css("margin-#{position}", size) if mode == 'push'
 
-  target.css(size_attribute, '0px')
+    # add modal if in modal mode
+    if mode == 'modal'
+      $("body").append("<div id=\"sidebar-modal-background\" data-sidebar-target=\"#{target.attr('id')}\"></div>")
+      $('#sidebar-modal-background').fadeIn()
+
+    # load content via ajay if the load option was given
+    if target.data('sidebar-load')
+      url = target.data('sidebar-load')
+      $.ajax
+        type: 'GET'
+        url: url
+        success: (response) ->
+          $(target).html(response)
+          return
+
+    # set state
+    target.data('sidebar-state', 'open')
+
+  closeSidebar = (target, animate = false) ->
+    main_content = $('#main-content')
+
+    position = target.data('sidebar-position')
+    mode = target.data('sidebar-mode')
+    size_attribute = if position in ['top', 'bottom'] then 'height' else 'width'
+    size = target.data('sidebar-size')
+    
+    # push
+    if mode == 'push'
+      if(animate == true)
+        main_content.animate({ 'marginLeft': 0 }, 500);
+      else
+        main_content.css("margin-#{position}", '0px')
+
+    # modal
+    if mode == 'modal'
+      $("#sidebar-modal-background").remove()
+
+    if(animate == true)
+     target.animate({ "#{position}": "-#{target.outerWidth()}px" }, 500);
+    else
+      target.css(position, "-#{target.outerWidth()}px")
 
-  if mode == 'push'
-    main_content.css("margin-#{position}", '0px')
+    # set state
+    target.data('sidebar-state', 'closed')
 
-  # set state
-  target.data('sidebar-state', 'closed')
+  initializeSidebars()
+  initializeModalBackground()
+  initializeTriggers()

data/app/assets/javascripts/simple_sidebar/application/core.js.coffee~

@@ -0,0 +1,151 @@
+# Usage:
+#
+# Put all the content that is not in the sidebar in a container with the id #main-content a trigger button and add a sidebar.
+#
+#     <body>
+#       <div id="main-content">
+#         <button data-sidebar-trigger="#example-sidebar">
+#           Toggle the example sidebar!  
+#         </button>
+#       </div>
+#       <aside
+#         id="example-sidebar"
+#         data-sidebar-load="/de/backend/authentifizierung/user_sidebar.html"
+#         data-sidebar-mode="overlay"
+#         data-sidebar-position="right"
+#         data-sidebar-size="20rem"
+#         data-sidebar-state="closed">
+#         <h3>Hello from the example sidebar!</h3>
+#       </aside>
+#     </body>
+#
+# Options:
+#
+#   load: Passing an url to load will load the content of the url via ajax and display it in the sidebar.
+#   mode:
+#     push: This will decrease the size of the main content, making room for the sidebar.
+#     overlay: This will show the sidebar on top of the content, without moving it.
+#     modal: Like overlay, but with a modal background.
+#  position: left|right|top|bottom
+#  size: size that the sidebar will take up (width for left and right, height for top and bottom). Pass any css size in px, rem or whatever you like.
+#
+$ ->
+  initializeSidebars = ->
+    $('[data-sidebar-position]').each (_, e) ->
+      # add css classes
+      position = $(@).data('sidebar-position')
+      mode = $(@).data('sidebar-mode')
+      size = $(@).data('sidebar-size')
+      state = $(@).data('sidebar-state')
+      console.log(state)
+      $(e).addClass("sidebar sidebar-#{position} sidebar-#{mode}")
+
+      # set correct size
+      if position in ['top', 'bottom']
+        $(e).outerHeight(size)
+      else
+        $(e).outerWidth(size)
+
+      # position outside of viewport
+      outer_width = $(e).outerWidth()
+      $(e).css(position, "-#{outer_width}px")
+
+      # display it
+      $(e).css("display", "inherit")
+
+      # set initial state
+      if state == 'opened'
+        openSidebar($(@), false)
+
+
+  initializeModalBackground = ->
+    $('body').on 'click', '#sidebar-modal-background', ->
+      target = $("##{$(@).data('sidebar-target')}")
+      closeSidebar(target)
+
+
+  initializeTriggers = ->
+    $('[data-sidebar-trigger]').on 'click', ->
+      target = $($(@).data('sidebar-trigger'))
+      state = target.data('sidebar-state')
+
+      if state == 'closed'
+        openSidebar(target)
+      else
+        closeSidebar(target)
+
+
+  openSidebar = (target, fadeIn = true) ->
+    main_content = $('#main-content')
+
+    position = target.data('sidebar-position')
+    mode = target.data('sidebar-mode')
+    size = target.data('sidebar-size')
+
+    # Add margin equal to sidebar width/height to main content to make room
+    # for the sidebar if in push mode
+    if(mode == 'push')
+      if(fadeIn == true)
+        # main_content.toggleClass('transition-none')
+        main_content.css("transition", "margin .5s")
+
+      # Move sidebar into viewport
+      target.css(position, 0)
+      
+      main_content.css("margin-#{position}", size)
+      
+      if(fadeIn == true)
+        main_content.offsetHeight;
+        target.offsetHeight;
+        # main_content.toggleClass('transition-none')
+        main_content.css("transition", "none")
+    else
+      # Move sidebar into viewport
+      target.css(position, 0)
+
+    # add modal if in modal mode
+    if mode == 'modal'
+      $("body").append("<div id=\"sidebar-modal-background\" data-sidebar-target=\"#{target.attr('id')}\"></div>")
+      if(fadeIn == true)
+        $('#sidebar-modal-background').fadeIn()
+      else
+        $('#sidebar-modal-background').show()
+
+    # load content via ajax if the load option was given
+    if target.data('sidebar-load')
+      url = target.data('sidebar-load')
+      $.ajax
+        type: 'GET'
+        url: url
+        success: (response) ->
+          $(target).html(response)
+          return
+
+    # set state
+    target.data('sidebar-state', 'opened')
+
+  closeSidebar = (target) ->
+    main_content = $('#main-content')
+
+    position = target.data('sidebar-position')
+    mode = target.data('sidebar-mode')
+    size_attribute = if position in ['top', 'bottom'] then 'height' else 'width'
+    size = target.data('sidebar-size')
+    
+    # push
+    if mode == 'push'
+      # main_content.css("margin-#{position}", size)
+      main_content.css("margin-#{position}", '0px')
+
+    # modal
+    if mode == 'modal'
+      $("#sidebar-modal-background").remove()
+
+    target.css(position, "-#{target.outerWidth()}px")
+
+    # set state
+    target.data('sidebar-state', 'closed')
+
+  initializeSidebars()
+  initializeModalBackground()
+  initializeTriggers()

data/app/assets/stylesheets/simple_sidebar/application/core.css

@@ -1,51 +1,45 @@
-.sidebar {
+.sidebar, [data-sidebar-position] {
   position: fixed;
+  display: none;
   z-index: 3000;
-  overflow-x: hidden;
-  transition: 0.5s;
 }
+.sidebar {}
+
+.sidebar-push {}
+.sidebar-overlay {}
+.sidebar-modal {}
+
+.sidebar-closed {}
+.sidebar-opened {}
 
 .sidebar-left {
   height: 100%;
-  width: 0;
   top: 0;
-  left: 0;
+  overflow-y: auto;
 }
 .sidebar-right {
   height: 100%;
-  width: 0;
   top: 0;
-  right: 0;
+  overflow-y: auto;
 }
 .sidebar-top {
   width: 100%;
-  height: 0;
   left: 0;
-  top: 0;
 }
 .sidebar-bottom {
   width: 100%;
-  height: 0;
   left: 0;
-  bottom: 0;
 }
 
+#main-content {}
+
 #sidebar-modal-background {
+  display: none;
   position: fixed;
   z-index: 2000;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
-  background-color: rgb(0,0,0);
-  background-color: rgba(0,0,0,0.4);
-}
-
-#main-content {
-  transition: margin .5s;
+  background: rgba(0,0,0,0.4);
 }
-
-/* @media screen and (max-height: 450px) {
-  .sidebar {padding-top: 15px;}
-  .sidebar a {font-size: 18px;}
-} */

data/app/assets/stylesheets/simple_sidebar/default_theme.css

@@ -0,0 +1,4 @@
+.sidebar {
+  background-color: lightgrey;
+  padding: 1rem;
+}

data/app/view_helpers/simple_sidebar/application_view_helper.rb

@@ -0,0 +1,71 @@
+module SimpleSidebar
+  # Usage:
+  #
+  #     # app/controllers/application_controller.rb
+  #     class ApplicationController < AcitonController::Base
+  #       view_helper SimpleSidebar::ApplicationViewHelper, as: :simple_sidebar_helper
+  #     end
+  #
+  class ApplicationViewHelper < Rao::ViewHelper::Base
+    # Usage
+    #
+    # Adding a sidebar:
+    #
+    #
+    # This will add a sidebar on the left in push mode and add some custom html to the
+    # sidebar container:
+    #
+    #     <div id="main-content">
+    #       <button data-sidebar-trigger="#sidebar1">Sidebar 1</button>
+    #     </div>
+    #
+    #     <%= simple_sidebar_helper(self).render_sidebar(:sidebar1, position: :left, mode: :push, container_html: { style: 'padding: 20px; overflow: scroll;'}) do %>
+    #       <h3>This is sidebar 1</h3>
+    #       <button data-sidebar-trigger="#sidebar1">Close me</button>
+    #     <% end %>
+    #
+    # This will add a sidebar to the right in default mode (overlay):
+    #
+    #     <div id="main-content">
+    #       <button data-sidebar-trigger="#sidebar2">Sidebar 2</button>
+    #     </div>
+    #     <%= simple_sidebar_helper(self).render_sidebar(:sidebar2, position: :right) do %>
+    #       <h3>This is sidebar 2</h3>
+    #       <button data-sidebar-trigger="#sidebar2">Close me</button>
+    #     <% end %>
+    # 
+    # This will add a sidebar to the top, loading custom content into the sidebar via ajax:
+    # 
+    #     <div id="main-content">
+    #       <button data-sidebar-trigger="#sidebar3">Sidebar 3</button>
+    #     </div>
+    #     <%= simple_sidebar_helper(self).render_sidebar(:sidebar3, position: :top, load: '/current_user_profile') do %>
+    #       <h3>This is sidebar 3</h3>
+    #       <button data-sidebar-trigger="#sidebar3">Close me</button>
+    #     <% end %>
+    # 
+    # If you want to load content from external urls you will have to add the correct policies to the cors settings.
+    # 
+    # This will render a sidebar to the bottom in modal mode:
+    # 
+    #     <div id="main-content">
+    #       <button data-sidebar-trigger="#sidebar4">Sidebar 4</button>
+    #     </div>
+    #     <%= simple_sidebar_helper(self).render_sidebar(:sidebar4, position: :bottom, mode: :modal) do %>
+    #       <h3>This is sidebar 4</h3>
+    #       <button data-sidebar-trigger="#sidebar4">Close me</button>
+    #     <% end %>
+    #
+    def render_sidebar(name, options = {}, &block)
+      options.reverse_merge!(
+        load: nil,
+        mode: :overlay,
+        position: :left,
+        size: '25rem',
+        state: :closed,
+        container_html: {}
+      )
+      c.render partial: '/simple_sidebar/application_view_helper/render_sidebar', locals: { name: name, options: options, block: block }
+    end
+  end
+end

data/app/views/simple_sidebar/application_view_helper/_render_sidebar.html.erb

@@ -0,0 +1,9 @@
+<aside
+  id="<%= name %>"
+  data-sidebar-load="<%= options[:load] %>"
+  data-sidebar-mode="<%= options[:mode] %>"
+  data-sidebar-position="<%= options[:position] %>"
+  data-sidebar-size="<%= options[:size] %>"
+  data-sidebar-state="<%= options[:state] %>" <%= options[:container_html].collect { |k,v| "#{k}=\"#{v}\"" }.join(' ').html_safe %>>
+  <%= capture(&block) %>
+</aside>

data/config/initializers/assets.rb

@@ -1,4 +1,4 @@
 # frozen_string_literal: true
 
-Rails.application.config.assets.precompile += %w( simple_sidebar.css )
+Rails.application.config.assets.precompile += %w( simple_sidebar.css simple_sidebar/default_theme.css )
 Rails.application.config.assets.precompile += %w( simple_sidebar.js )

data/lib/simple_sidebar/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module SimpleSidebar
-  VERSION = "0.0.1.pre".freeze
+  VERSION = "0.0.5.pre".freeze
 end

data/lib/simple_sidebar.rb

@@ -1,3 +1,6 @@
+require "coffee-rails"
+require "rao-view_helper"
+
 require "simple_sidebar/engine"
 
 module SimpleSidebar

metadata

@@ -1,15 +1,113 @@
 --- !ruby/object:Gem::Specification
 name: simple_sidebar
 version: !ruby/object:Gem::Version
-  version: 0.0.1.pre
+  version: 0.0.5.pre
 platform: ruby
 authors:
 - Roberto Vasquez Angel
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-04-03 00:00:00.000000000 Z
-dependencies: []
+date: 2021-09-15 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 5.0.0
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rao-view_helper
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.0.17.pre
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: 0.0.17.pre
+- !ruby/object:Gem::Dependency
+  name: sqlite3
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.6
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.3.6
+- !ruby/object:Gem::Dependency
+  name: guard-rspec
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rails-dummy
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: rspec-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: 
 email:
 - roberto@vasquez-angel.de
@@ -22,9 +120,13 @@ files:
 - app/assets/javascripts/simple_sidebar.js
 - app/assets/javascripts/simple_sidebar/application.js
 - app/assets/javascripts/simple_sidebar/application/core.js.coffee
+- app/assets/javascripts/simple_sidebar/application/core.js.coffee~
 - app/assets/stylesheets/simple_sidebar.css
 - app/assets/stylesheets/simple_sidebar/application.css
 - app/assets/stylesheets/simple_sidebar/application/core.css
+- app/assets/stylesheets/simple_sidebar/default_theme.css
+- app/view_helpers/simple_sidebar/application_view_helper.rb
+- app/views/simple_sidebar/application_view_helper/_render_sidebar.html.erb
 - config/initializers/assets.rb
 - lib/simple_sidebar.rb
 - lib/simple_sidebar/engine.rb
@@ -41,15 +143,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.4.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">"
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.7.7
+rubygems_version: 3.0.8
 signing_key: 
 specification_version: 4
 summary: Simple sidebar.