WpmuDev_HelpTooltips

The Membership 2 WpmuDev HelpTooltips class.

Defined (1)

The class is defined in the following location(s).

/app_old/membershipincludes/includes/class_wd_help_tooltips.php  
  1. class WpmuDev_HelpTooltips { 
  2.  
  3. /** 
  4. * Holds an array of inline tips: used as dependency inclusion switch. 
  5. */ 
  6. private $_inline_tips = array(); 
  7.  
  8. /** 
  9. * Holds an array of bound tips: used as dependency inclusion switch and bound tips buffer. 
  10. */ 
  11. private $_bound_tips = array(); 
  12.  
  13. /** 
  14. * Holds an array of bound tips selectors: used as bound tips selectors buffer. 
  15. */ 
  16. private $_bound_selectors = array(); 
  17.  
  18. /** 
  19. * Full URL to help icon, which is used as tip anchor 
  20. * and as notice background image. 
  21. */ 
  22. private $_icon_url; 
  23.  
  24. /** 
  25. * Flag that determines do we want to use notices 
  26. * (tips expanded on click). 
  27. * Defaults to true. 
  28. */ 
  29. private $_use_notice = true; 
  30.  
  31. /** 
  32. * Limits tip output to a screen (page). 
  33. * Optional. 
  34. * Works best with bind_tip() method. 
  35. */ 
  36. private $_screen_id = false; 
  37.  
  38. /** 
  39. * Bind to footer hooks when instantiated. 
  40. */ 
  41. public function __construct () { 
  42. global $wp_version; 
  43. $version = preg_replace('/-.*$/', '', $wp_version); 
  44.  
  45. if (version_compare($version, '3.3', '>=')) { 
  46. add_action('admin_footer', array($this, 'add_bound_tips'), 999); 
  47. add_action('admin_print_footer_scripts', array($this, 'initialize')); 
  48.  
  49. /** 
  50. * Sets icon URL. 
  51. * @param string $icon_url Full URL to help anchor icon 
  52. */ 
  53. public function set_icon_url ($icon_url) { 
  54. $this->_icon_url = $icon_url; 
  55.  
  56. /** 
  57. * Set show notices (tips expanded on click) flag. 
  58. * @param bool $use_notice True to use notices (default), false otherwise. 
  59. */ 
  60. public function set_use_notice ($use_notice=true) { 
  61. $this->_use_notice = $use_notice; 
  62.  
  63. /** 
  64. * Set screen limiting flag. 
  65. * @param $screen_id Screen ID that tips in this object apply to. 
  66. */ 
  67. public function set_screen_id ($screen_id) { 
  68. $this->_screen_id = $screen_id; 
  69.  
  70. /** 
  71. * Returns inline tip markup. 
  72. * Scenario: for echoing inline tips next to elements on the page. 
  73. * Usage example: 
  74. * <code> 
  75. * echo $tips->add_tip('My tip text here'); 
  76. * </code> 
  77. * @param string $tip Tip text 
  78. * @return string Inline tip markup 
  79. */ 
  80. public function add_tip ($tip) { 
  81. if (!$this->_check_screen()) return false; 
  82. $this->_inline_tips[] = $tip; 
  83. return $this->_get_tip_markup($tip); 
  84.  
  85. /** 
  86. * Binds a tip to selector. 
  87. * This is different from inline tips, as you don't have to output them yourself. 
  88. * Scenario: for adding help tips next to elements determined by the selector on page load time. 
  89. * Usage example: 
  90. * <code> 
  91. * $tips->bind_tip('My tip text here', '.icon32:first ~h2'); 
  92. * </code> 
  93. * @param string $tip Tip text 
  94. * @param string $selector jQuery selector of the element that tip is related to. 
  95. */ 
  96. public function bind_tip ($tip, $bind_to_selector) { 
  97. $tip_id = 'wpmudev-help-tip-for-' . md5($bind_to_selector); 
  98. $this->_bound_tips[$tip_id] = $tip; 
  99. $this->_bound_selectors[$tip_id] = $bind_to_selector; 
  100.  
  101. /** 
  102. * Bounded tips injection handler. 
  103. * Will queue up the bounded tips. 
  104. */ 
  105. function add_bound_tips () { 
  106. if (!$this->_check_screen()) return false; 
  107. if (!$this->_bound_tips) return false; 
  108.  
  109. foreach ($this->_bound_tips as $id => $tip) { 
  110. echo $this->_get_tip_markup($tip, 'id="' . $id . '" style=display:none'); 
  111.  
  112. /** 
  113. * Dependency injection handler. 
  114. * Will only add dependencies if there are actual tooltips to show. 
  115. */ 
  116. function initialize () { 
  117. if (!$this->_check_screen()) return false; 
  118. if (!$this->_inline_tips && !$this->_bound_tips) return false; 
  119.  
  120. $this->_print_styles(); 
  121. $this->_print_scripts(); 
  122.  
  123. /** 
  124. * Screen limitation check. 
  125. * @return bool True if we're good to go, false if we're on a wrong screen. 
  126. */ 
  127. private function _check_screen () { 
  128. if (!$this->_screen_id) return true; // No screen dependency 
  129.  
  130. $screen = get_current_screen(); 
  131. if (!is_object($screen)) return false; // Actually older then 3.3 
  132. if ($this->_screen_id != @$screen->id) return false; // Not for this screen 
  133.  
  134. return true; 
  135.  
  136. private function _get_tip_markup ($tip, $arg='') { 
  137. return "<span class='wpmudev-help' {$arg}>{$tip}</span>"; 
  138.  
  139. /** 
  140. * Private helper method that prints style dependencies. 
  141. */ 
  142. private function _print_styles () { 
  143. // Have we already done this? 
  144. if (!defined('WPMUDEV_TOOLTIPS_CSS_ADDED')) define('WPMUDEV_TOOLTIPS_CSS_ADDED', true); 
  145. else return false; 
  146.  
  147. ?> 
  148. <style type="text/css"> 
  149. .wpmudev-help { 
  150. display: block; 
  151. background-color: #ffffe0; 
  152. border: 1px solid #e6db55; 
  153. padding: 1em 1em; 
  154. -moz-border-radius:3px; 
  155. -khtml-border-radius:3px; 
  156. -webkit-border-radius:3px; 
  157. border-radius:3px; 
  158. <?php 
  159. if ($this->_icon_url) { 
  160. ?> 
  161. .wpmudev-help { 
  162. background: url(<?php echo $this->_icon_url; ?>) no-repeat scroll 10px center #ffffe0; 
  163. padding-left: 40px; 
  164. .wpmudev-help-trigger span { 
  165. display: block; 
  166. position: absolute; 
  167. left: -12000000px; 
  168. .wpmudev-help-trigger { 
  169. position: relative; 
  170. background: url(<?php echo $this->_icon_url; ?>) no-repeat scroll center bottom transparent; 
  171. padding: 1px 12px; 
  172. text-decoration: none; 
  173. <?php 
  174. ?> 
  175. #wpmudev-tooltip-source { 
  176. margin: 0 13px; 
  177. padding: 8px; 
  178.  
  179. background: #fff; 
  180. border-style: solid; 
  181. border-width: 1px; 
  182. /* Fallback for non-rgba-compliant browsers */ 
  183. border-color: #dfdfdf; 
  184. /* Use rgba to look better against non-white backgrounds. */ 
  185. border-color: rgba(0, 0, 0, .125); 
  186. -webkit-border-radius: 3px; 
  187. border-radius: 3px; 
  188.  
  189. -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, .19); 
  190. -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, .19); 
  191. box-shadow: 0 2px 4px rgba(0, 0, 0, .19); 
  192. .wpmudev-left_pointer { 
  193. float: left; 
  194. width: 14px; 
  195. height: 30px; 
  196. margin-top: 8px; 
  197. background: url(<?php echo site_url("/wp-includes/images/arrow-pointer-blue.png");?>) 0 -15px no-repeat; 
  198. .wpmudev-right_pointer { 
  199. float: right; 
  200. width: 14px; 
  201. height: 30px; 
  202. margin-top: 8px; 
  203. background: url(<?php echo site_url("/wp-includes/images/arrow-pointer-blue.png");?>) -16px -15px no-repeat; 
  204. </style> 
  205. <?php 
  206.  
  207. /** 
  208. * Private helper method that prints javascript dependencies. 
  209. */ 
  210. private function _print_scripts () { 
  211. // Have we already done this? 
  212. if (!defined('WPMUDEV_TOOLTIPS_JS_ADDED')) define('WPMUDEV_TOOLTIPS_JS_ADDED', true); 
  213. else return false; 
  214.  
  215. // Initialize bound selectors 
  216. $selectors = json_encode($this->_bound_selectors); 
  217.  
  218. ?> 
  219. <script type="text/javascript"> 
  220. (function ($) { 
  221.  
  222. /** 
  223. * Converts help text placeholders to tooltip items. 
  224. */ 
  225. function initialize_help_item ($me) { 
  226. var $prev = $me.prev(); 
  227. var help = ' <a class="wpmudev-help-trigger" href="#help"><span><?php _e('Help');?></span></a>'; 
  228. $prev = $prev.length ? 
  229. $prev.after(help) 
  230. $me.before(help) 
  231. $me.hide(); 
  232.  
  233. /** 
  234. * Finds a help block corresponding to trigger. 
  235. */ 
  236. function get_help_block ($me) { 
  237. var $parent = $me.parent(); 
  238. return $parent.find('.wpmudev-help'); 
  239.  
  240. /** 
  241. * Handles help block visibility. 
  242. */ 
  243. function show_help_block ($me) { 
  244. var $help = get_help_block($me); 
  245. if (!$help.length) return false; 
  246.  
  247. if ($("#wpmudev-tooltip").length) $("#wpmudev-tooltip").remove(); 
  248. if ($help.is(":visible")) $help.hide('fast'); 
  249. else $help.show('fast'); 
  250.  
  251. /** 
  252. * Pops tooltip open. 
  253. */ 
  254. function open_tooltip ($me) { 
  255. var $help = get_help_block($me); 
  256. if ($help.is(":visible")) return false; 
  257.  
  258. if ($("#wpmudev-tooltip").length) $("#wpmudev-tooltip").remove(); 
  259. if (!$("#wpmudev-tooltip").length) $("body").append('<div id="wpmudev-tooltip"><div class="wpmudev-pointer wpmudev-left_pointer"></div><div id="wpmudev-tooltip-source"></div></div>'); 
  260. var $tip = $("#wpmudev-tooltip"); 
  261. if (!$tip.length) return false; 
  262.  
  263. var width = 200; 
  264. var margin = 20; 
  265. var src_pos = $me.offset(); 
  266.  
  267. var top_pos = src_pos.top + ($me.height() / 2); 
  268. var left_pos = src_pos.left + margin; 
  269. var $pointer = $tip.find(".wpmudev-pointer"); 
  270.  
  271. // Setup left/right orientation 
  272. <?php if (!is_rtl()) { ?> 
  273. if ((left_pos+width+60) >= $(window).width()) { 
  274. left_pos = src_pos.left - ($me.outerWidth()+width+margin); 
  275. $pointer 
  276. .removeClass("wpmudev-left_pointer") 
  277. .addClass("wpmudev-right_pointer") 
  278. <?php } else { ?> 
  279. var min_left = left_pos - (width+60); 
  280. if (min_left > 0) { 
  281. left_pos = min_left; 
  282. $pointer 
  283. .removeClass("wpmudev-left_pointer") 
  284. .addClass("wpmudev-right_pointer") 
  285. <?php } ?> 
  286.  
  287. // IE safeguard 
  288. if ($.browser.msie) { 
  289. var $pointer_left = $tip.find(".wpmudev-left_pointer"); 
  290. if ($pointer_left.length) $pointer_left.css("position", "absolute"); 
  291.  
  292. $tip 
  293. // Populate tip text 
  294. .find("#wpmudev-tooltip-source") 
  295. .width(width) 
  296. .html($help.html()) 
  297. .end() 
  298. // Position tip 
  299. .css({ 
  300. "position": "absolute",  
  301. }) 
  302. .offset({ 
  303. "top": top_pos - ($tip.height()/2),  
  304. "left": left_pos 
  305. }) 
  306. // Vertically align pointer 
  307. .find(".wpmudev-pointer") 
  308. .css({ 
  309. "margin-top": ($tip.height() - 32) / 2 
  310. }) 
  311. .end() 
  312. // Show entire tip 
  313. .show() 
  314.  
  315. /** 
  316. * Closes tooltip. 
  317. */ 
  318. function close_tooltip () { 
  319. if (!$("#wpmudev-tooltip").length) return false; 
  320.  
  321. // IE conditional alternate removal 
  322. if ($.browser.msie) { 
  323. $("#wpmudev-tooltip").hide('fast'); 
  324. } else { 
  325. // Not IE, do regular transparency animation 
  326. $("#wpmudev-tooltip") 
  327. .animate({ 
  328. "opacity": 0 
  329. },  
  330. 'fast',  
  331. function () { 
  332. $(this).remove(); 
  333. ); 
  334.  
  335.  
  336. // Init 
  337. $(function () { 
  338.  
  339. // Populate and place bound tips 
  340. $.each($.parseJSON('<?php echo $selectors; ?>'), function (tip_id, selector) { 
  341. var $tip = $("#" + tip_id); 
  342. if (!$tip.length) return true; 
  343.  
  344. var $selector = $(selector); 
  345. if (!$selector.length) return true; 
  346.  
  347. $selector.append($tip); 
  348. }); 
  349.  
  350. // Initialize help and add handles 
  351. $(".wpmudev-help").each(function () { 
  352. initialize_help_item($(this)); 
  353.  
  354. }); 
  355.  
  356. // Handle help requests 
  357. $(".wpmudev-help-trigger") 
  358. .click(function (e) { 
  359. <?php if ($this->_use_notice) { ?> 
  360. show_help_block($(this)); 
  361. <?php } ?> 
  362. return false; 
  363. }) 
  364. .mouseover(function (e) { 
  365. open_tooltip($(this)); 
  366.  
  367. }) 
  368. .mouseout(close_tooltip) 
  369.  
  370.  
  371. }); 
  372. })(jQuery); 
  373. </script> 
  374. <?php