simple_sidebar 0.0.4.pre → 0.0.5.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aebaac8e3e6cc1e73ae62d30e4e6c46bf2ac854864b3e2fb4d7806a87af13cb0
-  data.tar.gz: 528927b63e00292f69bd2cbd126bcdcd2a80c6df66c344ab10a214f4066b973a
+  metadata.gz: 2e7a64b43e41a0c5e8329c8a7ea796c2f48dd99ead237f91f3709ebd2b523aea
+  data.tar.gz: b53501cea0aeeceaa9715559dfb6359fed536e636662426aeb8b0f2d2340f618
 SHA512:
-  metadata.gz: 6ceeba101cfee8f105bd7f5eed55272c92e60274ac744d8ec0465b19934e1bf784b320504681aecd7c4c66e81c16fa3ff124a33d9b684787dacab2a5b681061d
-  data.tar.gz: 9f6767bfc1a85b18143be4ba06b469afc10bac76e27b4fca8f59a833525a19deb49e81c1837e868e7c593654bd5cda02e10b13d292709dd891c4eb8cdbcc890b
+  metadata.gz: 119cc66208ea5e6f7f4930fff4d69d10a8ac2cc2da9659682e3015e0ba7c136fc49de45e352423fc937d5ad45d0cb875e1a4abb76f6f121d6e17fa9ebf449156
+  data.tar.gz: c4461c81889535cac550f56f3d51757214e7b73939d862a14602497e5522c9293e6ba57e10278389bdbec93b4c0830dbfccfec8a4bc24b95513c0b8165b97d51

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

@@ -28,6 +28,7 @@
 #     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
 #
 $ ->
   initializeSidebars = ->
@@ -36,6 +37,8 @@ $ ->
       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
@@ -51,14 +54,16 @@ $ ->
       # display it
       $(e).css("display", "inherit")
 
-  initializeSidebars()
+      # set initial state
+      if state == 'open'
+        openSidebar($(@), false)
+
 
   initializeModalBackground = ->
     $('body').on 'click', '#sidebar-modal-background', ->
       target = $("##{$(@).data('sidebar-target')}")
       closeSidebar(target)
 
-  initializeModalBackground()
 
   initializeTriggers = ->
     $('[data-sidebar-trigger]').on 'click', ->
@@ -66,13 +71,12 @@ $ ->
       state = target.data('sidebar-state')
 
       if state == 'closed'
-        openSidebar(target)
+        openSidebar(target, true)
       else
-        closeSidebar(target)
+        closeSidebar(target, true)
 
-  initializeTriggers()
 
-  openSidebar = (target) ->
+  openSidebar = (target, animate = false) ->
     main_content = $('#main-content')
 
     position = target.data('sidebar-position')
@@ -80,12 +84,17 @@ $ ->
     size = target.data('sidebar-size')
 
     # Move sidebar into viewport
-    target.css(position, 0)
+    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
-    main_content.css("margin-#{position}", size) if mode == 'push'
-
+    if(animate == true)
+      main_content.animate({ "margin-#{position}": size }, 500);
+    else
+      main_content.css("margin-#{position}", size) if mode == 'push'
 
     # add modal if in modal mode
     if mode == 'modal'
@@ -103,9 +112,9 @@ $ ->
           return
 
     # set state
-    target.data('sidebar-state', 'opened')
+    target.data('sidebar-state', 'open')
 
-  closeSidebar = (target) ->
+  closeSidebar = (target, animate = false) ->
     main_content = $('#main-content')
 
     position = target.data('sidebar-position')
@@ -115,14 +124,23 @@ $ ->
     
     # push
     if mode == 'push'
-      # main_content.css("margin-#{position}", size)
-      main_content.css("margin-#{position}", '0px')
+      if(animate == true)
+        main_content.animate({ 'marginLeft': 0 }, 500);
+      else
+        main_content.css("margin-#{position}", '0px')
 
     # modal
     if mode == 'modal'
       $("#sidebar-modal-background").remove()
 
-    target.css(position, "-#{target.outerWidth()}px")
+    if(animate == true)
+     target.animate({ "#{position}": "-#{target.outerWidth()}px" }, 500);
+    else
+      target.css(position, "-#{target.outerWidth()}px")
 
     # 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

@@ -15,29 +15,23 @@
 .sidebar-left {
   height: 100%;
   top: 0;
-  transition: left .5s;
   overflow-y: auto;
 }
 .sidebar-right {
   height: 100%;
   top: 0;
-  transition: right .5s;
   overflow-y: auto;
 }
 .sidebar-top {
   width: 100%;
   left: 0;
-  transition: top .5s;
 }
 .sidebar-bottom {
   width: 100%;
   left: 0;
-  transition: bottom .5s;
 }
 
-#main-content {
-  transition: margin .5s;
-}
+#main-content {}
 
 #sidebar-modal-background {
   display: none;

data/lib/simple_sidebar/version.rb

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

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: simple_sidebar
 version: !ruby/object:Gem::Version
-  version: 0.0.4.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
+date: 2021-09-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -120,6 +120,7 @@ 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
@@ -149,7 +150,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: 1.3.1
 requirements: []
-rubygems_version: 3.0.3
+rubygems_version: 3.0.8
 signing_key: 
 specification_version: 4
 summary: Simple sidebar.