simple_sidebar 0.0.1.pre → 0.0.2.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8fad6bb78024f4558c3143f3f0c1f7b10fb9fdbd1a01ae95ab04ce9dd62e3319
-  data.tar.gz: e50593f52f64be048658dae81689eb3aad693d4168faf35fe81ea26ce13b9f24
+  metadata.gz: b6c8cfb26fe5f3067b7f90aa1877e35310286ec547953b8fe105b0347b872d53
+  data.tar.gz: e7cf4ec723265a31cae6b8a0a70e12fb2958fd1bde1b599b881c6d44e45b7b63
 SHA512:
-  metadata.gz: ff9a4d0b9cdb66cf743837a76685d0ef8dc412b1f706aab2b0090e95c63f878938f86488771569671ab1515fecdae4730154863c368f795ed9a9aa381237e73b
-  data.tar.gz: d9186df087cbcfc44d9164c41b66dcef4d90aede982128895ca1d7fe0dc177bde3af34e5c69ae603f39fe0c364e7e9fdabe901952656f9488604520b82e9d12d
+  metadata.gz: 86a5a613c1c626c439e518f2e1c5b0b2aaa60e9e6ece42999b9f13b86dca8047eea533d48a6ac69fee2ae74b25631293f0a3df478fe9d1b014f3c6c41ca19790
+  data.tar.gz: 3d7d44cec8e331f42cb22da8baf120d486860db960edb355de5f4c07fefc4a36a1ba9faa4750de4e20b7d5e44a65970ef4442a927d064bbd93ea90e612ce8f3e

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>
@@ -30,75 +30,99 @@
 #  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.
 #
 $ ->
-  $('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')
+  initializeSidebars = ->
+    $('[data-sidebar-position]').each (_, e) ->
+      # add css classes
+      position = $(@).data('sidebar-position')
+      mode = $(@).data('sidebar-mode')
+      size = $(@).data('sidebar-size')
+      $(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")
+
+  initializeSidebars()
+
+  initializeModalBackground = ->
+    $('body').on 'click', '#sidebar-modal-background', ->
+      target = $("##{$(@).data('sidebar-target')}")
+      closeSidebar(target)
+
+  initializeModalBackground()
+
+  initializeTriggers = ->
+    $('[data-sidebar-trigger]').on 'click', ->
+      target = $($(@).data('sidebar-trigger'))
+      state = target.data('sidebar-state')
+
+      if state == 'closed'
+        openSidebar(target)
+      else
+        closeSidebar(target)
+
+  initializeTriggers()
+
+  openSidebar = (target) ->
+    main_content = $('#main-content')
+
+    position = target.data('sidebar-position')
+    mode = target.data('sidebar-mode')
+    size = target.data('sidebar-size')
+
+    # Move sidebar into viewport
+    target.css(position, 0)
+
+    # Add margin equal to sidebar width/height to main content to make room
+    # for the sidebar if in push mode
+    main_content.css("margin-#{position}", size) if mode == 'push'
+
+
+    # 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', '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')
     
-    if state == 'closed'
-      openModal(target)
-    else
-      closeModal(target)
-
-openModal = (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')
-
-  target.css("display", "inherit")
-  target.css(size_attribute, size)
-  main_content.css("margin-#{position}", size) if mode == 'push'
-
-
-  # 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
-
-  # set state
-  target.data('sidebar-state', 'opened')
-
-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)
-
-  # modal
-  if mode == 'modal'
-    $("#sidebar-modal-background").remove()
-
-  target.css(size_attribute, '0px')
-
-  if mode == 'push'
-    main_content.css("margin-#{position}", '0px')
-
-  # set state
-  target.data('sidebar-state', 'closed')
+    # 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')

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

@@ -1,51 +1,49 @@
-.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;
+  transition: left .5s;
 }
 .sidebar-right {
   height: 100%;
-  width: 0;
   top: 0;
-  right: 0;
+  transition: right .5s;
 }
 .sidebar-top {
   width: 100%;
-  height: 0;
   left: 0;
-  top: 0;
+  transition: top .5s;
 }
 .sidebar-bottom {
   width: 100%;
-  height: 0;
   left: 0;
-  bottom: 0;
+  transition: bottom .5s;
+}
+
+#main-content {
+  transition: margin .5s;
 }
 
 #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.2.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,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: simple_sidebar
 version: !ruby/object:Gem::Version
-  version: 0.0.1.pre
+  version: 0.0.2.pre
 platform: ruby
 authors:
 - Roberto Vasquez Angel
@@ -9,7 +9,105 @@ autorequire:
 bindir: bin
 cert_chain: []
 date: 2019-04-03 00:00:00.000000000 Z
-dependencies: []
+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
@@ -25,6 +123,9 @@ files:
 - 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,7 +142,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 2.5.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">"
@@ -49,7 +150,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: 1.3.1
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.7.7
+rubygems_version: 2.7.6
 signing_key: 
 specification_version: 4
 summary: Simple sidebar.