From: arno <arno@renevier.net>
Date: Thu, 19 Aug 2010 18:00:58 +0000 (+0200)
Subject: general class for accout info toggler
X-Git-Tag: v0.2~32
X-Git-Url: https://dev.renevier.net/?p=syj.git;a=commitdiff_plain;h=6cc4b3cd4538430770c935bd3192f1f72d75d96b

general class for accout info toggler
---

diff --git a/application/views/scripts/idx/index.phtml b/application/views/scripts/idx/index.phtml
index f19dd42..38de151 100644
--- a/application/views/scripts/idx/index.phtml
+++ b/application/views/scripts/idx/index.phtml
@@ -30,7 +30,7 @@
             <div class="login-anchor">
             <?php
                 echo $this->anchor('login', $this->translate('login'), array('id' => 'login_control_anchor'));
-                $anchortext = sprintf("%s<img id=\"account-info-bullet\" src=\"icons/bullet_arrow_right.png\"><span id=\"account-info\"><br>%s</span>",
+                $anchortext = sprintf("<span id=\"account-create-anchor\">%s</span><span id=\"account-info\"><br>%s</span>",
                                       $this->translate('create an account'),
                                       $this->translate('Whith an account, you can manage and modify your routes'));
                 ?>
diff --git a/public/css/syj.css b/public/css/syj.css
index f166dd5..1360f7e 100644
--- a/public/css/syj.css
+++ b/public/css/syj.css
@@ -109,12 +109,6 @@ body, html {
     background-color: #BBBBFF;
 }
 
-#account-info-bullet {
-    /* in firefox, in image inside an anchor has a border */
-    border: none;
-    vertical-align: middle;
-}
-
 #other-language {
     opacity: 0.85;
     filter:alpha(opacity=85);
diff --git a/public/js/syj.js b/public/js/syj.js
index 0572fce..39ecd4f 100644
--- a/public/js/syj.js
+++ b/public/js/syj.js
@@ -638,18 +638,7 @@ var SYJUserClass = Class.create(SYJModalClass, {
             }
         }.bindAsEventListener(this));
 
-        $("account-info").hide();
-        $("account-info-bullet").observe('click', function(evt) {
-            var elt = $("account-info");
-            if (elt.visible()) {
-                evt.target.src = "icons/bullet_arrow_right.png";
-                elt.hide();
-            } else {
-                evt.target.src = "icons/bullet_arrow_down.png";
-                elt.show();
-            }
-            evt.stop();
-        });
+        $('account-create-anchor').insert({after: new Toggler('account-info').element});
     },
 
     presubmit: function() {
diff --git a/public/js/utils.js b/public/js/utils.js
index d59a112..f437d15 100644
--- a/public/js/utils.js
+++ b/public/js/utils.js
@@ -30,6 +30,36 @@ var CloseBtn = Class.create({
     }
 });
 
+var Toggler = Class.create({
+    initialize: function(target, options) {
+        options = Object.extend({}, options);
+        target = $(target).hide();
+
+        var openIcn = options.openIcn || 'icons/bullet_arrow_right.png',
+            closeIcn = options.closeIcn || 'icons/bullet_arrow_down.png';
+
+        this.element = new Element("img", { src: openIcn })
+                              .setStyle({ border: 'none',  // in firefox, in image inside an anchor has a border
+                                        verticalAlign: "middle"});
+
+        this.element.observe('click', function(evt) {
+            if (target.visible()) {
+                evt.target.src = openIcn;
+                target.hide();
+            } else {
+                evt.target.src = closeIcn;
+                target.show();
+            }
+            evt.stop();
+        });
+
+        if (options.initialShow) {
+            target.show();
+            this.element.src = closeIcn;
+        }
+    }
+});
+
 var Deck = Class.create({
     initialize: function(elt, options) {
         this.element = $(elt);