Add JS behaviors

Riyad Preukschas
1 parent a5838524
Showing 4 changed files with 29 additions and 0 deletions Show diff stats
app/assets/javascripts/behaviours/details_behavior.coffee
app/assets/javascripts/behaviours/toggler_behaviour.coffee
app/assets/stylesheets/behaviors.scss
app/assets/stylesheets/main.scss
@@ -0,0 +1,5 @@
+$ ->
+  $("body").on "click", ".js-details-target", ->
+    container = $(@).closest ".js-details-container"
+
+    container.toggleClass "open"
@@ -0,0 +1,5 @@
+$ ->
+  $("body").on "click", ".js-toggler-target", ->
+    container = $(@).closest ".js-toggler-container"
+
+    container.toggleClass "on"
@@ -0,0 +1,14 @@
+// Details
+//--------
+.js-details-container .content { display: none; }
+.js-details-container .content.hide { display: block; }
+.js-details-container.open .content { display: block; }
+.js-details-container.open .content.hide { display: none; }
+
+
+// Toggler
+//--------
+.js-toggler-container .turn-on  { display: inline-block; }
+.js-toggler-container .turn-off { display: none; }
+.js-toggler-container.on .turn-on  { display: none; }
+.js-toggler-container.on .turn-off { display: inline-block; }
@@ -84,6 +84,11 @@ $baseLineHeight: 18px !default;
 @import "common.scss";
 /**
+ * Styles necessary to support JS behaviours.
+ */
+@import "behaviors.scss";
+
+/**
  * Styles related to specific part of app
  */
 @import "sections/commits.scss";
@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
	1	+$ ->
	2	+ $("body").on "click", ".js-details-target", ->
	3	+ container = $(@).closest ".js-details-container"
	4	+
	5	+ container.toggleClass "open"
@@ -0,0 +1,14 @@		@@ -0,0 +1,14 @@
	1	+// Details
	2	+//--------
	3	+.js-details-container .content { display: none; }
	4	+.js-details-container .content.hide { display: block; }
	5	+.js-details-container.open .content { display: block; }
	6	+.js-details-container.open .content.hide { display: none; }
	7	+
	8	+
	9	+// Toggler
	10	+//--------
	11	+.js-toggler-container .turn-on { display: inline-block; }
	12	+.js-toggler-container .turn-off { display: none; }
	13	+.js-toggler-container.on .turn-on { display: none; }
	14	+.js-toggler-container.on .turn-off { display: inline-block; }