general class for accout info toggler

diff --git a/application/views/scripts/idx/index.phtml b/application/views/scripts/idx/index.phtml
index f19dd4255ca0503c00b0718b8fb60fdcff11e5de..38de1516b78db1ba2a8d60ff807e25c509bcf485 100644 (file)
--- 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'));
             <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'));
                 ?>
                                       $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 f166dd512b42de6c543e364c3a93ca6ba9517d64..1360f7ebaf1fdf4b02e5bc817e21f0f862b1165b 100644 (file)
--- a/public/css/syj.css
+++ b/public/css/syj.css
@@ -109,12 +109,6 @@ body, html {
     background-color: #BBBBFF;
 }
 
     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);
 #other-language {
     opacity: 0.85;
     filter:alpha(opacity=85);

diff --git a/public/js/syj.js b/public/js/syj.js
index 0572fce71c7099bcad3f054c04690bf43d194803..39ecd4f90bdf86b8321054ead2e08f823a28612d 100644 (file)
--- a/public/js/syj.js
+++ b/public/js/syj.js
@@ -638,18 +638,7 @@ var SYJUserClass = Class.create(SYJModalClass, {
             }
         }.bindAsEventListener(this));
 
             }
         }.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() {
     },
 
     presubmit: function() {

diff --git a/public/js/utils.js b/public/js/utils.js
index d59a112736ce89d77e79b00c78b9de699c3f7e4c..f437d150d8f821000afa9adda7253547deb0c0eb 100644 (file)
--- 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);
 var Deck = Class.create({
     initialize: function(elt, options) {
         this.element = $(elt);