simple_sidebar 0.0.5.pre → 0.0.6.pre
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 12b49ad6da2f3a70f0ff42aae6693f2cb8c11068205d1c0d30feaf485a3ba06d
|
|
4
|
+
data.tar.gz: e565b066187ce8c22eff03e42a484aa15673d49965eec14fdf42bd0a6b6dd413
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ac369c508ef423b47c6a7ffa1156ebafc173bbf5f89e307f126fca91ab31a951c09c4cb3aaffd66cd81e877482b0ea607712d90f0e33e4e164fae77e3362e53f
|
|
7
|
+
data.tar.gz: eab0e4f47c56a41c33c25e021a4476219264986ed153b9c57a0bfd123fae02b21b75cdcb574c84bce52aa7ff087015953619c08b5292d2078dd7131529059a8a
|
|
@@ -91,17 +91,18 @@ $ ->
|
|
|
91
91
|
|
|
92
92
|
# Add margin equal to sidebar width/height to main content to make room
|
|
93
93
|
# for the sidebar if in push mode
|
|
94
|
-
if(
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
94
|
+
if(mode == 'push')
|
|
95
|
+
if(animate == true)
|
|
96
|
+
main_content.animate({ "margin-#{position}": size }, 500)
|
|
97
|
+
else
|
|
98
|
+
main_content.css("margin-#{position}", size)
|
|
98
99
|
|
|
99
100
|
# add modal if in modal mode
|
|
100
101
|
if mode == 'modal'
|
|
101
102
|
$("body").append("<div id=\"sidebar-modal-background\" data-sidebar-target=\"#{target.attr('id')}\"></div>")
|
|
102
103
|
$('#sidebar-modal-background').fadeIn()
|
|
103
104
|
|
|
104
|
-
# load content via
|
|
105
|
+
# load content via ajax if the load option was given
|
|
105
106
|
if target.data('sidebar-load')
|
|
106
107
|
url = target.data('sidebar-load')
|
|
107
108
|
$.ajax
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: simple_sidebar
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.0.
|
|
4
|
+
version: 0.0.6.pre
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Roberto Vasquez Angel
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2021-09-
|
|
11
|
+
date: 2021-09-22 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: rails
|
|
@@ -120,7 +120,6 @@ files:
|
|
|
120
120
|
- app/assets/javascripts/simple_sidebar.js
|
|
121
121
|
- app/assets/javascripts/simple_sidebar/application.js
|
|
122
122
|
- app/assets/javascripts/simple_sidebar/application/core.js.coffee
|
|
123
|
-
- app/assets/javascripts/simple_sidebar/application/core.js.coffee~
|
|
124
123
|
- app/assets/stylesheets/simple_sidebar.css
|
|
125
124
|
- app/assets/stylesheets/simple_sidebar/application.css
|
|
126
125
|
- app/assets/stylesheets/simple_sidebar/application/core.css
|
|
@@ -1,151 +0,0 @@
|
|
|
1
|
-
# Usage:
|
|
2
|
-
#
|
|
3
|
-
# 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.
|
|
4
|
-
#
|
|
5
|
-
# <body>
|
|
6
|
-
# <div id="main-content">
|
|
7
|
-
# <button data-sidebar-trigger="#example-sidebar">
|
|
8
|
-
# Toggle the example sidebar!
|
|
9
|
-
# </button>
|
|
10
|
-
# </div>
|
|
11
|
-
# <aside
|
|
12
|
-
# id="example-sidebar"
|
|
13
|
-
# data-sidebar-load="/de/backend/authentifizierung/user_sidebar.html"
|
|
14
|
-
# data-sidebar-mode="overlay"
|
|
15
|
-
# data-sidebar-position="right"
|
|
16
|
-
# data-sidebar-size="20rem"
|
|
17
|
-
# data-sidebar-state="closed">
|
|
18
|
-
# <h3>Hello from the example sidebar!</h3>
|
|
19
|
-
# </aside>
|
|
20
|
-
# </body>
|
|
21
|
-
#
|
|
22
|
-
# Options:
|
|
23
|
-
#
|
|
24
|
-
# load: Passing an url to load will load the content of the url via ajax and display it in the sidebar.
|
|
25
|
-
# mode:
|
|
26
|
-
# push: This will decrease the size of the main content, making room for the sidebar.
|
|
27
|
-
# overlay: This will show the sidebar on top of the content, without moving it.
|
|
28
|
-
# modal: Like overlay, but with a modal background.
|
|
29
|
-
# position: left|right|top|bottom
|
|
30
|
-
# 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.
|
|
31
|
-
#
|
|
32
|
-
$ ->
|
|
33
|
-
initializeSidebars = ->
|
|
34
|
-
$('[data-sidebar-position]').each (_, e) ->
|
|
35
|
-
# add css classes
|
|
36
|
-
position = $(@).data('sidebar-position')
|
|
37
|
-
mode = $(@).data('sidebar-mode')
|
|
38
|
-
size = $(@).data('sidebar-size')
|
|
39
|
-
state = $(@).data('sidebar-state')
|
|
40
|
-
console.log(state)
|
|
41
|
-
$(e).addClass("sidebar sidebar-#{position} sidebar-#{mode}")
|
|
42
|
-
|
|
43
|
-
# set correct size
|
|
44
|
-
if position in ['top', 'bottom']
|
|
45
|
-
$(e).outerHeight(size)
|
|
46
|
-
else
|
|
47
|
-
$(e).outerWidth(size)
|
|
48
|
-
|
|
49
|
-
# position outside of viewport
|
|
50
|
-
outer_width = $(e).outerWidth()
|
|
51
|
-
$(e).css(position, "-#{outer_width}px")
|
|
52
|
-
|
|
53
|
-
# display it
|
|
54
|
-
$(e).css("display", "inherit")
|
|
55
|
-
|
|
56
|
-
# set initial state
|
|
57
|
-
if state == 'opened'
|
|
58
|
-
openSidebar($(@), false)
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
initializeModalBackground = ->
|
|
62
|
-
$('body').on 'click', '#sidebar-modal-background', ->
|
|
63
|
-
target = $("##{$(@).data('sidebar-target')}")
|
|
64
|
-
closeSidebar(target)
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
initializeTriggers = ->
|
|
68
|
-
$('[data-sidebar-trigger]').on 'click', ->
|
|
69
|
-
target = $($(@).data('sidebar-trigger'))
|
|
70
|
-
state = target.data('sidebar-state')
|
|
71
|
-
|
|
72
|
-
if state == 'closed'
|
|
73
|
-
openSidebar(target)
|
|
74
|
-
else
|
|
75
|
-
closeSidebar(target)
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
openSidebar = (target, fadeIn = true) ->
|
|
79
|
-
main_content = $('#main-content')
|
|
80
|
-
|
|
81
|
-
position = target.data('sidebar-position')
|
|
82
|
-
mode = target.data('sidebar-mode')
|
|
83
|
-
size = target.data('sidebar-size')
|
|
84
|
-
|
|
85
|
-
# Add margin equal to sidebar width/height to main content to make room
|
|
86
|
-
# for the sidebar if in push mode
|
|
87
|
-
if(mode == 'push')
|
|
88
|
-
if(fadeIn == true)
|
|
89
|
-
# main_content.toggleClass('transition-none')
|
|
90
|
-
main_content.css("transition", "margin .5s")
|
|
91
|
-
|
|
92
|
-
# Move sidebar into viewport
|
|
93
|
-
target.css(position, 0)
|
|
94
|
-
|
|
95
|
-
main_content.css("margin-#{position}", size)
|
|
96
|
-
|
|
97
|
-
if(fadeIn == true)
|
|
98
|
-
main_content.offsetHeight;
|
|
99
|
-
target.offsetHeight;
|
|
100
|
-
# main_content.toggleClass('transition-none')
|
|
101
|
-
main_content.css("transition", "none")
|
|
102
|
-
else
|
|
103
|
-
# Move sidebar into viewport
|
|
104
|
-
target.css(position, 0)
|
|
105
|
-
|
|
106
|
-
# add modal if in modal mode
|
|
107
|
-
if mode == 'modal'
|
|
108
|
-
$("body").append("<div id=\"sidebar-modal-background\" data-sidebar-target=\"#{target.attr('id')}\"></div>")
|
|
109
|
-
if(fadeIn == true)
|
|
110
|
-
$('#sidebar-modal-background').fadeIn()
|
|
111
|
-
else
|
|
112
|
-
$('#sidebar-modal-background').show()
|
|
113
|
-
|
|
114
|
-
# load content via ajax if the load option was given
|
|
115
|
-
if target.data('sidebar-load')
|
|
116
|
-
url = target.data('sidebar-load')
|
|
117
|
-
$.ajax
|
|
118
|
-
type: 'GET'
|
|
119
|
-
url: url
|
|
120
|
-
success: (response) ->
|
|
121
|
-
$(target).html(response)
|
|
122
|
-
return
|
|
123
|
-
|
|
124
|
-
# set state
|
|
125
|
-
target.data('sidebar-state', 'opened')
|
|
126
|
-
|
|
127
|
-
closeSidebar = (target) ->
|
|
128
|
-
main_content = $('#main-content')
|
|
129
|
-
|
|
130
|
-
position = target.data('sidebar-position')
|
|
131
|
-
mode = target.data('sidebar-mode')
|
|
132
|
-
size_attribute = if position in ['top', 'bottom'] then 'height' else 'width'
|
|
133
|
-
size = target.data('sidebar-size')
|
|
134
|
-
|
|
135
|
-
# push
|
|
136
|
-
if mode == 'push'
|
|
137
|
-
# main_content.css("margin-#{position}", size)
|
|
138
|
-
main_content.css("margin-#{position}", '0px')
|
|
139
|
-
|
|
140
|
-
# modal
|
|
141
|
-
if mode == 'modal'
|
|
142
|
-
$("#sidebar-modal-background").remove()
|
|
143
|
-
|
|
144
|
-
target.css(position, "-#{target.outerWidth()}px")
|
|
145
|
-
|
|
146
|
-
# set state
|
|
147
|
-
target.data('sidebar-state', 'closed')
|
|
148
|
-
|
|
149
|
-
initializeSidebars()
|
|
150
|
-
initializeModalBackground()
|
|
151
|
-
initializeTriggers()
|