UpgradeBar.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227
  1. // wrapped by build app
  2. define("dojox/widget/UpgradeBar", ["dijit","dojo","dojox","dojo/require!dojo/window,dojo/fx,dojo/cookie,dijit/_Widget,dijit/_Templated"], function(dijit,dojo,dojox){
  3. dojo.provide("dojox.widget.UpgradeBar");
  4. dojo.require("dojo.window");
  5. dojo.require("dojo.fx");
  6. dojo.require("dojo.cookie");
  7. dojo.require("dijit._Widget");
  8. dojo.require("dijit._Templated");
  9. dojo.experimental("dojox.widget.UpgradeBar");
  10. dojo.declare("dojox.widget.UpgradeBar", [dijit._Widget, dijit._Templated], {
  11. // summary:
  12. // Shows a bar at the top of the screen when the user is to
  13. // be notified that they should upgrade their browser or a
  14. // plugin.
  15. //
  16. // description:
  17. // You can insert custom validations to trigger the UpgradeBar
  18. // to display. An evaluation of 'true' shows the bar (as this
  19. // version *is* less than it should be). Multiple validations
  20. // may be checked, although only the first in the list will be
  21. // displayed.
  22. // Markup and programmatic are supported. Markup is a little
  23. // cleaner, since a majority of the parameters are the HTML
  24. // snippets to be displayed. In markup, the validate code should
  25. // be an expression that will evaluate to true or false. This
  26. // expression is wrapped in a try/catch, so if it blows up, it
  27. // is assumed to be true and trigger the bar.
  28. // In programmtic, a function should be used that returns true
  29. // or false. You would need to use your own try/catch in that.
  30. //
  31. // example: See tests for examples.
  32. //
  33. // notifications: Array
  34. // An array of objects that hold the criteria for upgrades.
  35. // message: String
  36. // The message to display in the bar. Can be HTML.
  37. // validate:Function
  38. // The expression to evaluate to determine if the
  39. // bar should show or not. Should be a simple expression
  40. // if used in HTML:
  41. // | <div validate="!google.gears">
  42. // | <div validate="dojo.isIE<8">
  43. notifications:[],
  44. //
  45. // buttonCancel:String
  46. // The HTML tip show when hovering over the close button.
  47. buttonCancel:"Close for now",
  48. //
  49. // noRemindButton:String
  50. // The text link shown that when clicked, permanently dismisses
  51. // the message (sets a cookie). If this string is blank, this
  52. // link is not displayed.
  53. noRemindButton:"Don't Remind Me Again",
  54. templateString: dojo.cache("dojox.widget", "UpgradeBar/UpgradeBar.html", "<div class=\"dojoxUpgradeBar\">\n\t<div class=\"dojoxUpgradeBarMessage\" dojoAttachPoint=\"messageNode\">message</div>\n\t<div class=\"dojoxUpgradeBarReminderButton\" dojoAttachPoint=\"dontRemindButtonNode\" dojoAttachEvent=\"onclick:_onDontRemindClick\">${noRemindButton}</div>\n\t<span dojoAttachPoint=\"closeButtonNode\" class=\"dojoxUpgradeBarCloseIcon\" dojoAttachEvent=\"onclick: hide, onmouseenter: _onCloseEnter, onmouseleave: _onCloseLeave\" title=\"${buttonCancel}\"></span>\n</div>"),
  55. constructor: function(props, node){
  56. if(!props.notifications && node){
  57. // From markup. Create the notifications Array from the
  58. // srcRefNode children.
  59. dojo.forEach(node.childNodes, function(n){
  60. if(n.nodeType==1){
  61. var val = dojo.attr(n, "validate");
  62. this.notifications.push({
  63. message:n.innerHTML,
  64. validate:function(){
  65. // the function that fires to determine if the
  66. // bar shows or not.
  67. var evals = true;
  68. try{
  69. evals = dojo.eval(val);
  70. }catch(e){ /* squelch. it's true.*/ }
  71. return evals;
  72. }
  73. });
  74. }
  75. }, this);
  76. }
  77. },
  78. checkNotifications: function(){
  79. // summary:
  80. // Internal. Go through the notifications Array
  81. // and check for any that evaluate to true.
  82. // tags:
  83. // private
  84. //
  85. if(!this.notifications.length){
  86. // odd. why use the bar but not set any notifications?
  87. return;
  88. }
  89. for(var i=0;i<this.notifications.length;i++){
  90. var evals = this.notifications[i].validate();
  91. if(evals){
  92. this.notify(this.notifications[i].message);
  93. // Validation resulted in true, meaning a feature is missing
  94. // Don't check any other messages. One at a time.
  95. break;
  96. }
  97. }
  98. },
  99. postCreate: function(){
  100. this.inherited(arguments);
  101. if(this.domNode.parentNode){
  102. dojo.style(this.domNode, "display", "none");
  103. }
  104. dojo.mixin(this.attributeMap, {
  105. message:{ node:"messageNode", type:"innerHTML" }
  106. });
  107. if(!this.noRemindButton){
  108. dojo.destroy(this.dontRemindButtonNode)
  109. }
  110. if(dojo.isIE==6){
  111. // IE6 is challenged when it comes to 100% width.
  112. // It thinks the body has more padding and more
  113. // margin than it really does. It would work to
  114. // set the body pad and margin to 0, but we can't
  115. // set that and disturb a potential layout.
  116. //
  117. var self = this;
  118. var setWidth = function(){
  119. var v = dojo.window.getBox();
  120. dojo.style(self.domNode, "width", v.w+"px");
  121. }
  122. this.connect(window, "resize", function(){
  123. setWidth();
  124. });
  125. setWidth();
  126. }
  127. dojo.addOnLoad(this, "checkNotifications");
  128. //this.checkNotifications();
  129. },
  130. notify: function(msg){
  131. // summary:
  132. // Triggers the bar to display. An internal function,
  133. // but could ne called externally for fun.
  134. // tags:
  135. // protected
  136. //
  137. if(dojo.cookie("disableUpgradeReminders")){
  138. return;
  139. }
  140. if(!this.domNode.parentNode || !this.domNode.parentNode.innerHTML){
  141. document.body.appendChild(this.domNode);
  142. }
  143. dojo.style(this.domNode, "display", "");
  144. if(msg){
  145. this.set("message", msg);
  146. }
  147. },
  148. show: function(){
  149. // summary:
  150. // Internal. Shows the bar. Do not call directly.
  151. // Use notify();
  152. // tags:
  153. // private
  154. //
  155. this._bodyMarginTop = dojo.style(dojo.body(), "marginTop");
  156. this._size = dojo.contentBox(this.domNode).h;
  157. dojo.style(this.domNode, { display:"block", height:0, opacity:0 });
  158. if(!this._showAnim){
  159. this._showAnim = dojo.fx.combine([
  160. dojo.animateProperty({ node:dojo.body(), duration:500, properties:{ marginTop:this._bodyMarginTop+this._size } }),
  161. dojo.animateProperty({ node:this.domNode, duration:500, properties:{ height:this._size, opacity:1 } })
  162. ]);
  163. }
  164. this._showAnim.play();
  165. },
  166. hide: function(){
  167. // summary:
  168. // Hides the bar. May be called externally.
  169. //
  170. if(!this._hideAnim){
  171. this._hideAnim = dojo.fx.combine([
  172. dojo.animateProperty({ node:dojo.body(), duration:500, properties:{ marginTop:this._bodyMarginTop } }),
  173. dojo.animateProperty({ node:this.domNode, duration:500, properties:{ height:0, opacity:0 } })
  174. ]);
  175. dojo.connect(this._hideAnim, "onEnd", this, function(){
  176. dojo.style(this.domNode, "display", "none");
  177. });
  178. }
  179. this._hideAnim.play();
  180. },
  181. _onDontRemindClick: function(){
  182. // summary:
  183. // Called when user clicks the "do not remind" link.
  184. // tags:
  185. // private
  186. dojo.cookie("disableUpgradeReminders", true, { expires:3650 });
  187. this.hide();
  188. },
  189. _onCloseEnter: function(){
  190. // summary:
  191. // Called when user hovers over close icon
  192. // tags:
  193. // private
  194. dojo.addClass(this.closeButtonNode, "dojoxUpgradeBarCloseIcon-hover");
  195. },
  196. _onCloseLeave: function(){
  197. // summary:
  198. // Called when user stops hovering over close icon
  199. // tags:
  200. // private
  201. dojo.removeClass(this.closeButtonNode, "dojoxUpgradeBarCloseIcon-hover");
  202. }
  203. });
  204. });