[Topic, 1, Toggler] Dojo-interest Digest, Vol 150, Issue 1

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

[Topic, 1, Toggler] Dojo-interest Digest, Vol 150, Issue 1

Jason A. Griffin
I scrapped Toggler and went directly to dojo/_base/fx  fx.animateProperty works perfectly.

require(["dojo/dom-style", "dojo/on", "dojo/dom", "dojo/query", "dojo/_base/fx", "dojo/domReady!"], function(domStyle, on, dom, query, fx) {
    tocButtonClicked = false;
    on(dom.byId("tocButton"), "click", function(evt) {
      if (tocButtonClicked === false) {
        domStyle.set("toc", "visibility", "visible");
        fx.animateProperty({
          node: dom.byId("toc"),
          duration: 50,
          properties: {
            opacity: {
              start: 0,
              end: 1
            }
          }
        }).play();
        tocButtonClicked = true;
      } else {
        fx.animateProperty({
          node: dom.byId("toc"),
          duration: 50,
          properties: {
            opacity: {
              start: 1,
              end: 0
            }
          },
          onEnd: function(evt) {
            domStyle.set("toc", "visibility", "hidden");
          }
        }).play();
        tocButtonClicked = false;
      }
    });
    on(query("#toc .titleButton.close"), "click", function(evt) {
      fx.animateProperty({
        node: dom.byId("toc"),
        duration: 50,
        properties: {
          opacity: {
            start: 1,
            end: 0
          }
        },
        onEnd: function(evt) {
          domStyle.set("toc", "visibility", "hidden");
        }
      }).play();
      tocButtonClicked = false;
    });
  });

On 6/1/2017 at 12:00 PM, [hidden email] wrote:
Send Dojo-interest mailing list submissions to
[hidden email]

To subscribe or unsubscribe via the World Wide Web, visit
http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest
or, via email, send a message with subject or body 'help' to
[hidden email]

You can reach the person managing the list at
[hidden email]

When replying, please edit your Subject line so it is more specific
than "Re: Contents of Dojo-interest digest..."


Today's Topics:

1. dojo.fx.Toggler (Jason A. Griffin)
2. Re: VisionMobile and JS Foundation Developer Ergonomics
survey (Dylan Schiemann)


----------------------------------------------------------------------

Message: 1
Date: Wed, 31 May 2017 17:12:33 -0400
From: "Jason A. Griffin" <[hidden email]>
Subject: [Dojo-interest] dojo.fx.Toggler
To: [hidden email]
Message-ID: <[hidden email]>
Content-Type: text/plain; charset="utf-8"

https://dojotoolkit.org/reference-guide/1.10/dojo/fx/Toggler.html
I need to set my div's Visibility Style to Hidden immediately after
the .Hide() animation completes, otherwise, the animation gets clipped
early and portions of the div linger on the screen longer than others.
Fortunately, I can set the Visibility to Visible before I run the
.Show() animation without worrying about timing issues.
I couldn't track down any events using dojo.on so I turned my
attention to dojo.Stateful to watch the opacity style value of my div
but I couldn't seem to get it reporting the value change. Now I did
see in the documentation that there is a parameter which should be
callable in order to pause/resume/status track the animation but I
couldn't connect the dots when digging through the objects parameters
in my browser's console...
Any help is appreciated, sincerely, Jason.
require(["dojo/dom-style", "dojo/on", "dojo/dom", "dojo/query",
"dojo/fx/Toggler", "dojo/domReady!"], function(domStyle, on, dom,
query, Toggler) { tocToggler = new Toggler({ node: "toc",
showDuration: 500, hideDuration: 250 }); tocButtonClicked =
false; on(dom.byId("tocButton"), "click", function(evt) { if
(tocButtonClicked === false) { domStyle.set("toc",
"visibility", "visible"); tocToggler.show();
tocButtonClicked = true; } else { tocToggler.hide();
tocButtonClicked = false; domStyle.set("toc", "visibility",
"hidden"); } }); on(query("#toc .titleButton.close"),
"click", function(evt) { tocToggler.hide(); tocButtonClicked
= false; domStyle.set("toc", "visibility", "hidden"); }); });
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-interest/attachments/20170531/b64a83e1/attachment.html

------------------------------

Message: 2
Date: Thu, 01 Jun 2017 05:13:52 -0700
From: Dylan Schiemann <[hidden email]>
Subject: Re: [Dojo-interest] VisionMobile and JS Foundation Developer
Ergonomics survey
To: [hidden email], "dojo dev."
<[hidden email]>
Message-ID: <[hidden email]>
Content-Type: text/plain; charset=ISO-8859-1

A quick reminder that there's two more weeks to help out with this
survey. After the main set of questions, there's a module that's more
specific to front-end and JS that should be filled out if you have 5-10
minutes. Thanks!

Regards,
-Dylan

on 4/27/17, 05:09 (GMT-07:00) Dylan Schiemann said the following:

> The JS Foundation is participating in VisionMobile's latest developer
> economics survey and it would be great if you could complete the survey
> in the link below. VisionMobile does really great research and in this
> case, they're doing a study around developer ergonomics.
>
> http://vmob.me/DE3Q17js.foundation
>
> Regards,
> -Dylan
>


------------------------------

________________
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/
Reference Guide: http://dojotoolkit.org/reference-guide
API Documentation: http://dojotoolkit.org/api

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest



End of Dojo-interest Digest, Vol 150, Issue 1
*********************************************

--
Dojo Toolkit: http://dojotoolkit.org/
Tutorials: http://dojotoolkit.org/documentation/

[hidden email]
To unsubscribe, visit: http://mail.dojotoolkit.org/mailman/listinfo/dojo-interest