refactor flash

* make unobtrusive js * convert js to coffee

refactor flash
* make unobtrusive js * convert js to coffee
Cyril
1 parent c177593e
Showing 4 changed files with 12 additions and 19 deletions Show diff stats
app/assets/javascripts/main.js.coffee
app/assets/stylesheets/common.scss
app/views/layouts/_flash.html.haml
app/views/layouts/devise.html.haml
@@ -33,6 +33,11 @@ $ -&gt;
   # Bottom tooltip
   $('.has_bottom_tooltip').tooltip(placement: 'bottom')
  
+  # Flash
+  if (flash = $("#flash-container")).length > 0
+    flash.click -> $(@).slideUp("slow")
+    flash.slideDown "slow"
+    setTimeout (-> flash.slideUp("slow")), 3000
  
   # Disable form buttons while a form is submitting
   $('body').on 'ajax:complete, ajax:beforeSend, submit', 'form', (e) ->
@@ -68,7 +68,7 @@ table a code {
 }
  
 /** FLASH message **/
-#flash_container {
+#flash-container {
   height: 50px;
   position: fixed;
   z-index: 10001;
@@ -79,6 +79,8 @@ table a code {
   background: white;
   cursor: pointer;
   border-bottom: 1px solid #ccc;
+  text-align: center;
+  display: none;
  
   h4 {
     color: #666;
-- if alert || notice
-  - text = alert || notice
-  %div{style: "display:none", id: "flash_container"}
-    %center
-      %h4= text
-  :javascript
-    $(function(){
-      $("#flash_container").slideDown("slow");
-      $("#flash_container").click(function(){
-        $(this).slideUp("slow");
-      });
-      setTimeout("hideFlash()",3000);
-    });
-
-    function hideFlash(){
-      $("#flash_container").slideUp("slow");
-    }
+- if text = alert || notice
+  #flash-container
+    %h4= text
@@ -2,5 +2,5 @@
 %html{ lang: "en"}
   = render "layouts/head"
   %body.ui_basic.login-page
-    = render partial: "layouts/flash"
+    = render "layouts/flash"
     .container= yield
...	...	@@ -33,6 +33,11 @@ $ ->
33	33	# Bottom tooltip
34	34	$('.has_bottom_tooltip').tooltip(placement: 'bottom')
35	35
	36	+ # Flash
	37	+ if (flash = $("#flash-container")).length > 0
	38	+ flash.click -> $(@).slideUp("slow")
	39	+ flash.slideDown "slow"
	40	+ setTimeout (-> flash.slideUp("slow")), 3000
36	41
37	42	# Disable form buttons while a form is submitting
38	43	$('body').on 'ajax:complete, ajax:beforeSend, submit', 'form', (e) ->
...	...
...	...	@@ -68,7 +68,7 @@ table a code {
68	68	}
69	69
70	70	/ FLASH message /
71		-#flash_container {
	71	+#flash-container {
72	72	height: 50px;
73	73	position: fixed;
74	74	z-index: 10001;
...	...	@@ -79,6 +79,8 @@ table a code {
79	79	background: white;
80	80	cursor: pointer;
81	81	border-bottom: 1px solid #ccc;
	82	+ text-align: center;
	83	+ display: none;
82	84
83	85	h4 {
84	86	color: #666;
...	...
1		-- if alert \|\| notice
2		- - text = alert \|\| notice
3		- %div{style: "display:none", id: "flash_container"}
4		- %center
5		- %h4= text
6		- :javascript
7		- $(function(){
8		- $("#flash_container").slideDown("slow");
9		- $("#flash_container").click(function(){
10		- $(this).slideUp("slow");
11		- });
12		- setTimeout("hideFlash()",3000);
13		- });
14		-
15		- function hideFlash(){
16		- $("#flash_container").slideUp("slow");
17		- }
	1	+- if text = alert \|\| notice
	2	+ #flash-container
	3	+ %h4= text
...	...
...	...	@@ -2,5 +2,5 @@
2	2	%html{ lang: "en"}
3	3	= render "layouts/head"
4	4	%body.ui_basic.login-page
5		- = render partial: "layouts/flash"
	5	+ = render "layouts/flash"
6	6	.container= yield
...	...