Create Aside js class for handling all sidebars in UI for mobile devices

3 files changed, 19 insertions, 29 deletions

diff --git a/app/assets/javascripts/application.js.coffee b/app/assets/javascripts/application.js.coffee
index 9c97582e6dd..e9042b56416 100644
--- a/app/assets/javascripts/application.js.coffee
+++ b/app/assets/javascripts/application.js.coffee
@@ -32,7 +32,6 @@
 #= require nprogress
 #= require nprogress-turbolinks
 #= require dropzone
-#= require semantic-ui/sidebar
 #= require mousetrap
 #= require mousetrap/pause
 #= require shortcuts
@@ -115,7 +114,6 @@ if location.hash
 window.addEventListener "hashchange", shiftWindow
 
 $ ->
-
   # Click a .one_click_select field, select the contents
   $(".one_click_select").on 'click', -> $(@).select()
 
@@ -183,6 +181,8 @@ $ ->
     form = btn.closest("form")
     new ConfirmDangerModal(form, text)
 
+  new Aside()
+
 (($) ->
   # Disable an element and add the 'disabled' Bootstrap class
   $.fn.extend disable: ->
diff --git a/app/assets/javascripts/aside.js.coffee b/app/assets/javascripts/aside.js.coffee
new file mode 100644
index 00000000000..85473101944
--- /dev/null
+++ b/app/assets/javascripts/aside.js.coffee
@@ -0,0 +1,17 @@
+class @Aside
+  constructor: ->
+    $(document).off "click", "a.show-aside"
+    $(document).on "click", 'a.show-aside', (e) ->
+      e.preventDefault()
+      btn = $(e.currentTarget)
+      icon = btn.find('i')
+      console.log('1')
+
+      if icon.hasClass('fa-angle-left')
+        btn.parent().find('section').hide()
+        btn.parent().find('aside').fadeIn()
+        icon.removeClass('fa-angle-left').addClass('fa-angle-right')
+      else
+        btn.parent().find('aside').hide()
+        btn.parent().find('section').fadeIn()
+        icon.removeClass('fa-angle-right').addClass('fa-angle-left')
diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee
index 5013bcdacd0..7febcba0e94 100644
--- a/app/assets/javascripts/sidebar.js.coffee
+++ b/app/assets/javascripts/sidebar.js.coffee
@@ -1,30 +1,3 @@
-responsive_resize = ->
-  current_width = $(window).width()
-  if current_width < 985
-    $('.responsive-side').addClass("ui right wide sidebar")
-  else
-    $('.responsive-side').removeClass("ui right wide sidebar")
-
-$ ->
-  # Depending on window size, set the sidebar offscreen.
-  responsive_resize()
-
-  $('.sidebar-expand-button').click ->
-    $('.ui.sidebar')
-      .sidebar({overlay: true})
-      .sidebar('toggle')
-
-  # Hide sidebar on click outside of sidebar
-  $(document).mouseup (e) ->
-    container = $(".ui.sidebar")
-    container.sidebar "hide"  if not container.is(e.target) and container.has(e.target).length is 0
-    return
-
-# On resize, check if sidebar should be offscreen.
-$(window).resize ->
-  responsive_resize()
-  return
-
 $(document).on("click", '.toggle-nav-collapse', (e) ->
   e.preventDefault()
   collapsed = 'page-sidebar-collapsed'