An Open Source library for multi-touch, WebGL powered applications.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

2193 lines
76 KiB

2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>iwmlib API Documentation</title>
  6. <meta name="description" content="The IWM Browser: One Browser for all apps." />
  7. <meta property="og:title" content="iwmlib API Documentation"/>
  8. <meta property="og:type" content="website"/>
  9. <meta property="og:image" content=""/>
  10. <meta property="og:url" content="https://www.iwm-tuebingen.de"/>
  11. <meta name="viewport" content="width=device-width, initial-scale=1">
  12. <script src="scripts/prettify/prettify.js"></script>
  13. <script src="scripts/prettify/lang-css.js"></script>
  14. <script src="scripts/jquery.min.js"></script>
  15. <!--[if lt IE 9]>
  16. <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  17. <![endif]-->
  18. <link href="https://fonts.googleapis.com/css?family=Libre+Franklin:400,700" rel="stylesheet">
  19. <link type="text/css" rel="stylesheet" href="styles/prettify-tomorrow.css">
  20. <link type="text/css" rel="stylesheet" href="styles/bootstrap.min.css">
  21. <link type="text/css" rel="stylesheet" href="styles/main.css">
  22. <script>
  23. var config = {"monospaceLinks":false,"cleverLinks":false,"applicationName":"iwmlib","disqus":"","googleAnalytics":"","openGraph":{"title":"iwmlib API Documentation","type":"website","image":"","site_name":"","url":"https://www.iwm-tuebingen.de"},"meta":{"title":"iwmlib API Documentation","description":"The IWM Browser: One Browser for all apps.","keyword":""},"linenums":true,"cleverlinks":true,"default":{"outputSourceFiles":true,"useLongnameInNav":false}};
  24. </script>
  25. </head>
  26. <body>
  27. <div id="wrap" class="clearfix">
  28. <div class="navigation">
  29. <h3 class="applicationName"><a href="index.html">iwmlib</a></h3>
  30. <button id="menuToggle" class="btn btn-link btn-lg menu-toggle">
  31. <span class="glyphicon glyphicon-menu-hamburger"></span>
  32. </button>
  33. <div class="search">
  34. <input id="search" type="text" class="form-control input-md" placeholder="Search...">
  35. </div>
  36. <ul class="list">
  37. <li class="item" data-name="global">
  38. <span class="title namespace ">
  39. <span class="namespaceTag">
  40. <span class="glyphicon glyphicon-globe"></span>
  41. </span>
  42. <a href="global.html">Global</a>
  43. </span>
  44. <ul class="members itemMembers">
  45. </ul>
  46. <ul class="typedefs itemMembers">
  47. <span class="subtitle">Typedefs</span>
  48. <li class="parent" data-name="actionActiveCallback"><a href="global.html#actionActiveCallback">actionActiveCallback</a></li>
  49. <li class="parent" data-name="actionCallback"><a href="global.html#actionCallback">actionCallback</a></li>
  50. <li class="parent" data-name="actionCallback"><a href="global.html#actionCallback">actionCallback</a></li>
  51. <li class="parent" data-name="afterActionCallback"><a href="global.html#afterActionCallback">afterActionCallback</a></li>
  52. <li class="parent" data-name="afterActionCallback"><a href="global.html#afterActionCallback">afterActionCallback</a></li>
  53. <li class="parent" data-name="beforeActionCallback"><a href="global.html#beforeActionCallback">beforeActionCallback</a></li>
  54. <li class="parent" data-name="beforeActionCallback"><a href="global.html#beforeActionCallback">beforeActionCallback</a></li>
  55. <li class="parent" data-name="onCompleteCallback"><a href="global.html#onCompleteCallback">onCompleteCallback</a></li>
  56. <li class="parent" data-name="onCompleteCallback"><a href="global.html#onCompleteCallback">onCompleteCallback</a></li>
  57. <li class="parent" data-name="onStartCallback"><a href="global.html#onStartCallback">onStartCallback</a></li>
  58. <li class="parent" data-name="onStartCallback"><a href="global.html#onStartCallback">onStartCallback</a></li>
  59. <li class="parent" data-name="onUpdateCallback"><a href="global.html#onUpdateCallback">onUpdateCallback</a></li>
  60. <li class="parent" data-name="onUpdateCallback"><a href="global.html#onUpdateCallback">onUpdateCallback</a></li>
  61. </ul>
  62. <ul class="typedefs itemMembers">
  63. </ul>
  64. <ul class="methods itemMembers">
  65. </ul>
  66. <ul class="events itemMembers">
  67. </ul>
  68. </li>
  69. <li class="item" data-name="AbstractPopup">
  70. <span class="title ">
  71. <a href="AbstractPopup.html">AbstractPopup</a>
  72. </span>
  73. <ul class="members itemMembers">
  74. <span class="subtitle">Members</span>
  75. <li class="parent " data-name="AbstractPopup#content"><a href="AbstractPopup.html#content">content</a></li>
  76. <li class="parent " data-name="AbstractPopup#header"><a href="AbstractPopup.html#header">header</a></li>
  77. </ul>
  78. <ul class="typedefs itemMembers">
  79. </ul>
  80. <ul class="typedefs itemMembers">
  81. </ul>
  82. <ul class="methods itemMembers">
  83. <span class="subtitle">Methods</span>
  84. <li class="parent " data-name="AbstractPopup#hide"><a href="AbstractPopup.html#hide">hide</a></li>
  85. <li class="parent " data-name="AbstractPopup#layout"><a href="AbstractPopup.html#layout">layout</a></li>
  86. <li class="parent " data-name="AbstractPopup#show"><a href="AbstractPopup.html#show">show</a></li>
  87. </ul>
  88. <ul class="events itemMembers">
  89. </ul>
  90. </li>
  91. <li class="item" data-name="Badge">
  92. <span class="title ">
  93. <a href="Badge.html">Badge</a>
  94. </span>
  95. <ul class="members itemMembers">
  96. <span class="subtitle">Members</span>
  97. <li class=" " data-name="Badge#content"><a href="Badge.html#content">content</a></li>
  98. <li class=" " data-name="Badge#header"><a href="Badge.html#header">header</a></li>
  99. </ul>
  100. <ul class="typedefs itemMembers">
  101. </ul>
  102. <ul class="typedefs itemMembers">
  103. </ul>
  104. <ul class="methods itemMembers">
  105. <span class="subtitle">Methods</span>
  106. <li class=" " data-name="Badge#hide"><a href="Badge.html#hide">hide</a></li>
  107. <li class=" " data-name="Badge#layout"><a href="Badge.html#layout">layout</a></li>
  108. <li class=" " data-name="Badge#show"><a href="Badge.html#show">show</a></li>
  109. </ul>
  110. <ul class="events itemMembers">
  111. </ul>
  112. </li>
  113. <li class="item" data-name="BlurFilter">
  114. <span class="title ">
  115. <a href="BlurFilter.html">BlurFilter</a>
  116. </span>
  117. <ul class="members itemMembers">
  118. <span class="subtitle">Members</span>
  119. <li class="parent " data-name="BlurFilter#blur"><a href="BlurFilter.html#blur">blur</a></li>
  120. <li class="parent " data-name="BlurFilter#shape"><a href="BlurFilter.html#shape">shape</a></li>
  121. </ul>
  122. <ul class="typedefs itemMembers">
  123. </ul>
  124. <ul class="typedefs itemMembers">
  125. </ul>
  126. <ul class="methods itemMembers">
  127. </ul>
  128. <ul class="events itemMembers">
  129. </ul>
  130. </li>
  131. <li class="item" data-name="Button">
  132. <span class="title ">
  133. <a href="Button.html">Button</a>
  134. </span>
  135. <ul class="members itemMembers">
  136. <span class="subtitle">Members</span>
  137. <li class="parent " data-name="Button#active"><a href="Button.html#active">active</a></li>
  138. <li class="parent " data-name="Button#disabled"><a href="Button.html#disabled">disabled</a></li>
  139. <li class="parent " data-name="Button#iconColor"><a href="Button.html#iconColor">iconColor</a></li>
  140. </ul>
  141. <ul class="typedefs itemMembers">
  142. </ul>
  143. <ul class="typedefs itemMembers">
  144. </ul>
  145. <ul class="methods itemMembers">
  146. <span class="subtitle">Methods</span>
  147. <li class="parent " data-name="Button#capture"><a href="Button.html#capture">capture</a></li>
  148. <li class="parent " data-name="Button#hide"><a href="Button.html#hide">hide</a></li>
  149. <li class="parent " data-name="Button#layout"><a href="Button.html#layout">layout</a></li>
  150. <li class="parent " data-name="Button#show"><a href="Button.html#show">show</a></li>
  151. </ul>
  152. <ul class="events itemMembers">
  153. </ul>
  154. </li>
  155. <li class="item" data-name="ButtonGroup">
  156. <span class="title ">
  157. <a href="ButtonGroup.html">ButtonGroup</a>
  158. </span>
  159. <ul class="members itemMembers">
  160. <span class="subtitle">Members</span>
  161. <li class="parent " data-name="ButtonGroup#disabled"><a href="ButtonGroup.html#disabled">disabled</a></li>
  162. </ul>
  163. <ul class="typedefs itemMembers">
  164. </ul>
  165. <ul class="typedefs itemMembers">
  166. </ul>
  167. <ul class="methods itemMembers">
  168. <span class="subtitle">Methods</span>
  169. <li class="parent " data-name="ButtonGroup#hide"><a href="ButtonGroup.html#hide">hide</a></li>
  170. <li class="parent " data-name="ButtonGroup#layout"><a href="ButtonGroup.html#layout">layout</a></li>
  171. <li class="parent " data-name="ButtonGroup#show"><a href="ButtonGroup.html#show">show</a></li>
  172. </ul>
  173. <ul class="events itemMembers">
  174. </ul>
  175. </li>
  176. <li class="item" data-name="DeepZoomImage">
  177. <span class="title ">
  178. <a href="DeepZoomImage.html">DeepZoomImage</a>
  179. </span>
  180. <ul class="members itemMembers">
  181. <span class="subtitle">Members</span>
  182. <li class="parent " data-name="DeepZoomImage#baseSize"><a href="DeepZoomImage.html#baseSize">baseSize</a></li>
  183. <li class="parent " data-name="DeepZoomImage#foreground"><a href="DeepZoomImage.html#foreground">foreground</a></li>
  184. <li class="parent " data-name="DeepZoomImage#height"><a href="DeepZoomImage.html#height">height</a></li>
  185. <li class="parent " data-name="DeepZoomImage#maxScale"><a href="DeepZoomImage.html#maxScale">maxScale</a></li>
  186. <li class="parent " data-name="DeepZoomImage#pixelSize"><a href="DeepZoomImage.html#pixelSize">pixelSize</a></li>
  187. <li class="parent " data-name="DeepZoomImage#width"><a href="DeepZoomImage.html#width">width</a></li>
  188. </ul>
  189. <ul class="typedefs itemMembers">
  190. </ul>
  191. <ul class="typedefs itemMembers">
  192. </ul>
  193. <ul class="methods itemMembers">
  194. <span class="subtitle">Methods</span>
  195. <li class="parent " data-name="DeepZoomImage#_calculateBounds"><a href="DeepZoomImage.html#_calculateBounds">_calculateBounds</a></li>
  196. <li class="parent " data-name="DeepZoomImage#_createTiles"><a href="DeepZoomImage.html#_createTiles">_createTiles</a></li>
  197. <li class="parent " data-name="DeepZoomImage#activate"><a href="DeepZoomImage.html#activate">activate</a></li>
  198. <li class="parent " data-name="DeepZoomImage#addTiles"><a href="DeepZoomImage.html#addTiles">addTiles</a></li>
  199. <li class="parent " data-name="DeepZoomImage#allTiles"><a href="DeepZoomImage.html#allTiles">allTiles</a></li>
  200. <li class="parent " data-name="DeepZoomImage#bringTilesToFront"><a href="DeepZoomImage.html#bringTilesToFront">bringTilesToFront</a></li>
  201. <li class="parent " data-name="DeepZoomImage#calculateBounds"><a href="DeepZoomImage.html#calculateBounds">calculateBounds</a></li>
  202. <li class="parent " data-name="DeepZoomImage#changedTiles"><a href="DeepZoomImage.html#changedTiles">changedTiles</a></li>
  203. <li class="parent " data-name="DeepZoomImage#deactivate"><a href="DeepZoomImage.html#deactivate">deactivate</a></li>
  204. <li class="parent " data-name="DeepZoomImage#destroyObsoleteTiles"><a href="DeepZoomImage.html#destroyObsoleteTiles">destroyObsoleteTiles</a></li>
  205. <li class="parent " data-name="DeepZoomImage#destroyTiles"><a href="DeepZoomImage.html#destroyTiles">destroyTiles</a></li>
  206. <li class="parent " data-name="DeepZoomImage#destroyTilesAboveLevel"><a href="DeepZoomImage.html#destroyTilesAboveLevel">destroyTilesAboveLevel</a></li>
  207. <li class="parent " data-name="DeepZoomImage#destroyUnneededTiles"><a href="DeepZoomImage.html#destroyUnneededTiles">destroyUnneededTiles</a></li>
  208. <li class="parent " data-name="DeepZoomImage#ensureAllTiles"><a href="DeepZoomImage.html#ensureAllTiles">ensureAllTiles</a></li>
  209. <li class="parent " data-name="DeepZoomImage#ensureTiles"><a href="DeepZoomImage.html#ensureTiles">ensureTiles</a></li>
  210. <li class="parent " data-name="DeepZoomImage#levelAndAlphaForScale"><a href="DeepZoomImage.html#levelAndAlphaForScale">levelAndAlphaForScale</a></li>
  211. <li class="parent " data-name="DeepZoomImage#levelForScale"><a href="DeepZoomImage.html#levelForScale">levelForScale</a></li>
  212. <li class="parent " data-name="DeepZoomImage#neededTiles"><a href="DeepZoomImage.html#neededTiles">neededTiles</a></li>
  213. <li class="parent " data-name="DeepZoomImage#populateAllTiles"><a href="DeepZoomImage.html#populateAllTiles">populateAllTiles</a></li>
  214. <li class="parent " data-name="DeepZoomImage#populateTiles"><a href="DeepZoomImage.html#populateTiles">populateTiles</a></li>
  215. <li class="parent " data-name="DeepZoomImage#setup"><a href="DeepZoomImage.html#setup">setup</a></li>
  216. <li class="parent " data-name="DeepZoomImage#setupTiles"><a href="DeepZoomImage.html#setupTiles">setupTiles</a></li>
  217. <li class="parent " data-name="DeepZoomImage#thumbnail"><a href="DeepZoomImage.html#thumbnail">thumbnail</a></li>
  218. <li class="parent " data-name="DeepZoomImage#tintObsoleteTiles"><a href="DeepZoomImage.html#tintObsoleteTiles">tintObsoleteTiles</a></li>
  219. <li class="parent " data-name="DeepZoomImage#transformed"><a href="DeepZoomImage.html#transformed">transformed</a></li>
  220. </ul>
  221. <ul class="events itemMembers">
  222. </ul>
  223. </li>
  224. <li class="item" data-name="DeepZoomInfo">
  225. <span class="title ">
  226. <a href="DeepZoomInfo.html">DeepZoomInfo</a>
  227. </span>
  228. <ul class="members itemMembers">
  229. </ul>
  230. <ul class="typedefs itemMembers">
  231. </ul>
  232. <ul class="typedefs itemMembers">
  233. </ul>
  234. <ul class="methods itemMembers">
  235. <span class="subtitle">Methods</span>
  236. <li class="parent " data-name="DeepZoomInfo#dimensions"><a href="DeepZoomInfo.html#dimensions">dimensions</a></li>
  237. <li class="parent " data-name="DeepZoomInfo#getDimensions"><a href="DeepZoomInfo.html#getDimensions">getDimensions</a></li>
  238. <li class="parent " data-name="DeepZoomInfo#getNumTiles"><a href="DeepZoomInfo.html#getNumTiles">getNumTiles</a></li>
  239. <li class="parent " data-name="DeepZoomInfo#getScale"><a href="DeepZoomInfo.html#getScale">getScale</a></li>
  240. <li class="parent " data-name="DeepZoomInfo#imageForURL"><a href="DeepZoomInfo.html#imageForURL">imageForURL</a></li>
  241. <li class="parent " data-name="DeepZoomInfo#urlForTile"><a href="DeepZoomInfo.html#urlForTile">urlForTile</a></li>
  242. </ul>
  243. <ul class="events itemMembers">
  244. </ul>
  245. </li>
  246. <li class="item" data-name="Flippable">
  247. <span class="title ">
  248. <a href="Flippable.html">Flippable</a>
  249. </span>
  250. <ul class="members itemMembers">
  251. <span class="subtitle">Members</span>
  252. <li class="parent " data-name="Flippable#flipped"><a href="Flippable.html#flipped">flipped</a></li>
  253. <li class="parent " data-name="Flippable#frontSideInFront"><a href="Flippable.html#frontSideInFront">frontSideInFront</a></li>
  254. </ul>
  255. <ul class="typedefs itemMembers">
  256. </ul>
  257. <ul class="typedefs itemMembers">
  258. </ul>
  259. <ul class="methods itemMembers">
  260. <span class="subtitle">Methods</span>
  261. <li class="parent " data-name="Flippable#layout"><a href="Flippable.html#layout">layout</a></li>
  262. </ul>
  263. <ul class="events itemMembers">
  264. </ul>
  265. </li>
  266. <li class="item" data-name="FontInfo">
  267. <span class="title ">
  268. <a href="FontInfo.html">FontInfo</a>
  269. </span>
  270. <ul class="members itemMembers">
  271. </ul>
  272. <ul class="typedefs itemMembers">
  273. </ul>
  274. <ul class="typedefs itemMembers">
  275. </ul>
  276. <ul class="methods itemMembers">
  277. </ul>
  278. <ul class="events itemMembers">
  279. </ul>
  280. </li>
  281. <li class="item" data-name="Hypenate">
  282. <span class="title ">
  283. <a href="Hypenate.html">Hypenate</a>
  284. </span>
  285. <ul class="members itemMembers">
  286. </ul>
  287. <ul class="typedefs itemMembers">
  288. </ul>
  289. <ul class="typedefs itemMembers">
  290. </ul>
  291. <ul class="methods itemMembers">
  292. <span class="subtitle">Methods</span>
  293. <li class="parent " data-name="Hypenate.splitLines"><a href="Hypenate.html#.splitLines">splitLines</a></li>
  294. </ul>
  295. <ul class="events itemMembers">
  296. </ul>
  297. </li>
  298. <li class="item" data-name="InteractivePopup">
  299. <span class="title ">
  300. <a href="InteractivePopup.html">InteractivePopup</a>
  301. </span>
  302. <ul class="members itemMembers">
  303. <span class="subtitle">Members</span>
  304. <li class=" " data-name="InteractivePopup#content"><a href="InteractivePopup.html#content">content</a></li>
  305. <li class=" " data-name="InteractivePopup#header"><a href="InteractivePopup.html#header">header</a></li>
  306. </ul>
  307. <ul class="typedefs itemMembers">
  308. </ul>
  309. <ul class="typedefs itemMembers">
  310. </ul>
  311. <ul class="methods itemMembers">
  312. <span class="subtitle">Methods</span>
  313. <li class=" " data-name="InteractivePopup#hide"><a href="InteractivePopup.html#hide">hide</a></li>
  314. <li class="parent " data-name="InteractivePopup#layout"><a href="InteractivePopup.html#layout">layout</a></li>
  315. <li class=" " data-name="InteractivePopup#show"><a href="InteractivePopup.html#show">show</a></li>
  316. </ul>
  317. <ul class="events itemMembers">
  318. </ul>
  319. </li>
  320. <li class="item" data-name="LabeledGraphics">
  321. <span class="title ">
  322. <a href="LabeledGraphics.html">LabeledGraphics</a>
  323. </span>
  324. <ul class="members itemMembers">
  325. </ul>
  326. <ul class="typedefs itemMembers">
  327. </ul>
  328. <ul class="typedefs itemMembers">
  329. </ul>
  330. <ul class="methods itemMembers">
  331. <span class="subtitle">Methods</span>
  332. <li class="parent " data-name="LabeledGraphics#clear"><a href="LabeledGraphics.html#clear">clear</a></li>
  333. <li class="parent " data-name="LabeledGraphics#debugInfos"><a href="LabeledGraphics.html#debugInfos">debugInfos</a></li>
  334. <li class="parent " data-name="LabeledGraphics#ensureLabel"><a href="LabeledGraphics.html#ensureLabel">ensureLabel</a></li>
  335. <li class="parent " data-name="LabeledGraphics#getLabel"><a href="LabeledGraphics.html#getLabel">getLabel</a></li>
  336. <li class="parent " data-name="LabeledGraphics#hideLabel"><a href="LabeledGraphics.html#hideLabel">hideLabel</a></li>
  337. <li class="parent " data-name="LabeledGraphics#removeLabel"><a href="LabeledGraphics.html#removeLabel">removeLabel</a></li>
  338. <li class="parent " data-name="LabeledGraphics#truncateLabel"><a href="LabeledGraphics.html#truncateLabel">truncateLabel</a></li>
  339. </ul>
  340. <ul class="events itemMembers">
  341. </ul>
  342. </li>
  343. <li class="item" data-name="LabeledGraphics.exports.LabeledGraphics">
  344. <span class="title ">
  345. <a href="LabeledGraphics.exports.LabeledGraphics.html">LabeledGraphics.exports.LabeledGraphics</a>
  346. </span>
  347. <ul class="members itemMembers">
  348. </ul>
  349. <ul class="typedefs itemMembers">
  350. </ul>
  351. <ul class="typedefs itemMembers">
  352. </ul>
  353. <ul class="methods itemMembers">
  354. </ul>
  355. <ul class="events itemMembers">
  356. </ul>
  357. </li>
  358. <li class="item" data-name="List">
  359. <span class="title ">
  360. <a href="List.html">List</a>
  361. </span>
  362. <ul class="members itemMembers">
  363. <span class="subtitle">Members</span>
  364. <li class="parent " data-name="List#innerHeight"><a href="List.html#innerHeight">innerHeight</a></li>
  365. <li class="parent " data-name="List#innerWidth"><a href="List.html#innerWidth">innerWidth</a></li>
  366. </ul>
  367. <ul class="typedefs itemMembers">
  368. </ul>
  369. <ul class="typedefs itemMembers">
  370. </ul>
  371. <ul class="methods itemMembers">
  372. <span class="subtitle">Methods</span>
  373. <li class="parent " data-name="List#capture"><a href="List.html#capture">capture</a></li>
  374. <li class="parent " data-name="List#layout"><a href="List.html#layout">layout</a></li>
  375. <li class="parent " data-name="List#resize"><a href="List.html#resize">resize</a></li>
  376. <li class="parent " data-name="List#setItems"><a href="List.html#setItems">setItems</a></li>
  377. </ul>
  378. <ul class="events itemMembers">
  379. </ul>
  380. </li>
  381. <li class="item" data-name="Message">
  382. <span class="title ">
  383. <a href="Message.html">Message</a>
  384. </span>
  385. <ul class="members itemMembers">
  386. <span class="subtitle">Members</span>
  387. <li class=" " data-name="Message#content"><a href="Message.html#content">content</a></li>
  388. <li class=" " data-name="Message#header"><a href="Message.html#header">header</a></li>
  389. </ul>
  390. <ul class="typedefs itemMembers">
  391. </ul>
  392. <ul class="typedefs itemMembers">
  393. </ul>
  394. <ul class="methods itemMembers">
  395. <span class="subtitle">Methods</span>
  396. <li class=" " data-name="Message#hide"><a href="Message.html#hide">hide</a></li>
  397. <li class="parent " data-name="Message#layout"><a href="Message.html#layout">layout</a></li>
  398. </ul>
  399. <ul class="events itemMembers">
  400. </ul>
  401. </li>
  402. <li class="item" data-name="MessageInteractivePopup">
  403. <span class="title ">
  404. <a href="MessageInteractivePopup.html">MessageInteractivePopup</a>
  405. </span>
  406. <ul class="members itemMembers">
  407. </ul>
  408. <ul class="typedefs itemMembers">
  409. </ul>
  410. <ul class="typedefs itemMembers">
  411. </ul>
  412. <ul class="methods itemMembers">
  413. </ul>
  414. <ul class="events itemMembers">
  415. </ul>
  416. </li>
  417. <li class="item" data-name="MessageMessageInteractivePopup">
  418. <span class="title ">
  419. <a href="MessageMessageInteractivePopup.html">MessageMessageInteractivePopup</a>
  420. </span>
  421. <ul class="members itemMembers">
  422. </ul>
  423. <ul class="typedefs itemMembers">
  424. </ul>
  425. <ul class="typedefs itemMembers">
  426. </ul>
  427. <ul class="methods itemMembers">
  428. </ul>
  429. <ul class="events itemMembers">
  430. </ul>
  431. </li>
  432. <li class="item" data-name="Modal">
  433. <span class="title ">
  434. <a href="Modal.html">Modal</a>
  435. </span>
  436. <ul class="members itemMembers">
  437. <span class="subtitle">Members</span>
  438. <li class="parent " data-name="Modal#content"><a href="Modal.html#content">content</a></li>
  439. <li class="parent " data-name="Modal#header"><a href="Modal.html#header">header</a></li>
  440. </ul>
  441. <ul class="typedefs itemMembers">
  442. </ul>
  443. <ul class="typedefs itemMembers">
  444. </ul>
  445. <ul class="methods itemMembers">
  446. <span class="subtitle">Methods</span>
  447. <li class="parent " data-name="Modal#hide"><a href="Modal.html#hide">hide</a></li>
  448. <li class="parent " data-name="Modal#layout"><a href="Modal.html#layout">layout</a></li>
  449. <li class="parent " data-name="Modal#show"><a href="Modal.html#show">show</a></li>
  450. </ul>
  451. <ul class="events itemMembers">
  452. </ul>
  453. </li>
  454. <li class="item" data-name="ModalInteractivePopup">
  455. <span class="title ">
  456. <a href="ModalInteractivePopup.html">ModalInteractivePopup</a>
  457. </span>
  458. <ul class="members itemMembers">
  459. </ul>
  460. <ul class="typedefs itemMembers">
  461. </ul>
  462. <ul class="typedefs itemMembers">
  463. </ul>
  464. <ul class="methods itemMembers">
  465. </ul>
  466. <ul class="events itemMembers">
  467. </ul>
  468. </li>
  469. <li class="item" data-name="ModalModalInteractivePopup">
  470. <span class="title ">
  471. <a href="ModalModalInteractivePopup.html">ModalModalInteractivePopup</a>
  472. </span>
  473. <ul class="members itemMembers">
  474. </ul>
  475. <ul class="typedefs itemMembers">
  476. </ul>
  477. <ul class="typedefs itemMembers">
  478. </ul>
  479. <ul class="methods itemMembers">
  480. </ul>
  481. <ul class="events itemMembers">
  482. </ul>
  483. </li>
  484. <li class="item" data-name="PIXIApp">
  485. <span class="title ">
  486. <a href="PIXIApp.html">PIXIApp</a>
  487. </span>
  488. <ul class="members itemMembers">
  489. <span class="subtitle">Members</span>
  490. <li class="parent " data-name="PIXIApp#center"><a href="PIXIApp.html#center">center</a></li>
  491. <li class="parent " data-name="PIXIApp#size"><a href="PIXIApp.html#size">size</a></li>
  492. </ul>
  493. <ul class="typedefs itemMembers">
  494. </ul>
  495. <ul class="typedefs itemMembers">
  496. </ul>
  497. <ul class="methods itemMembers">
  498. <span class="subtitle">Methods</span>
  499. <li class="parent " data-name="PIXIApp#addFpsDisplay"><a href="PIXIApp.html#addFpsDisplay">addFpsDisplay</a></li>
  500. <li class="parent " data-name="PIXIApp#checkOrientation"><a href="PIXIApp.html#checkOrientation">checkOrientation</a></li>
  501. <li class="parent " data-name="PIXIApp#convertPointFromNodeToPage"><a href="PIXIApp.html#convertPointFromNodeToPage">convertPointFromNodeToPage</a></li>
  502. <li class="parent " data-name="PIXIApp#convertPointFromPageToNode"><a href="PIXIApp.html#convertPointFromPageToNode">convertPointFromPageToNode</a></li>
  503. <li class="parent " data-name="PIXIApp#draw"><a href="PIXIApp.html#draw">draw</a></li>
  504. <li class="parent " data-name="PIXIApp#expandRenderer"><a href="PIXIApp.html#expandRenderer">expandRenderer</a></li>
  505. <li class="parent " data-name="PIXIApp#layout"><a href="PIXIApp.html#layout">layout</a></li>
  506. <li class="parent " data-name="PIXIApp#loadSprites"><a href="PIXIApp.html#loadSprites">loadSprites</a></li>
  507. <li class="parent " data-name="PIXIApp#loadTextures"><a href="PIXIApp.html#loadTextures">loadTextures</a></li>
  508. <li class="parent " data-name="PIXIApp#message"><a href="PIXIApp.html#message">message</a></li>
  509. <li class="parent " data-name="PIXIApp#modal"><a href="PIXIApp.html#modal">modal</a></li>
  510. <li class="parent " data-name="PIXIApp#mutate"><a href="PIXIApp.html#mutate">mutate</a></li>
  511. <li class="parent " data-name="PIXIApp#orientation"><a href="PIXIApp.html#orientation">orientation</a></li>
  512. <li class="parent " data-name="PIXIApp#orientationChanged"><a href="PIXIApp.html#orientationChanged">orientationChanged</a></li>
  513. <li class="parent " data-name="PIXIApp#progress"><a href="PIXIApp.html#progress">progress</a></li>
  514. <li class="parent " data-name="PIXIApp#query"><a href="PIXIApp.html#query">query</a></li>
  515. <li class="parent " data-name="PIXIApp#resize"><a href="PIXIApp.html#resize">resize</a></li>
  516. <li class="parent " data-name="PIXIApp#setup"><a href="PIXIApp.html#setup">setup</a></li>
  517. <li class="parent " data-name="PIXIApp#subscribe"><a href="PIXIApp.html#subscribe">subscribe</a></li>
  518. </ul>
  519. <ul class="events itemMembers">
  520. </ul>
  521. </li>
  522. <li class="item" data-name="Popup">
  523. <span class="title ">
  524. <a href="Popup.html">Popup</a>
  525. </span>
  526. <ul class="members itemMembers">
  527. <span class="subtitle">Members</span>
  528. <li class=" " data-name="Popup#content"><a href="Popup.html#content">content</a></li>
  529. <li class=" " data-name="Popup#header"><a href="Popup.html#header">header</a></li>
  530. </ul>
  531. <ul class="typedefs itemMembers">
  532. </ul>
  533. <ul class="typedefs itemMembers">
  534. </ul>
  535. <ul class="methods itemMembers">
  536. <span class="subtitle">Methods</span>
  537. <li class=" " data-name="Popup#hide"><a href="Popup.html#hide">hide</a></li>
  538. <li class=" " data-name="Popup#layout"><a href="Popup.html#layout">layout</a></li>
  539. <li class=" " data-name="Popup#show"><a href="Popup.html#show">show</a></li>
  540. </ul>
  541. <ul class="events itemMembers">
  542. </ul>
  543. </li>
  544. <li class="item" data-name="PopupInteractivePopup">
  545. <span class="title ">
  546. <a href="PopupInteractivePopup.html">PopupInteractivePopup</a>
  547. </span>
  548. <ul class="members itemMembers">
  549. </ul>
  550. <ul class="typedefs itemMembers">
  551. </ul>
  552. <ul class="typedefs itemMembers">
  553. </ul>
  554. <ul class="methods itemMembers">
  555. </ul>
  556. <ul class="events itemMembers">
  557. </ul>
  558. </li>
  559. <li class="item" data-name="PopupMenu">
  560. <span class="title ">
  561. <a href="PopupMenu.html">PopupMenu</a>
  562. </span>
  563. <ul class="members itemMembers">
  564. <span class="subtitle">Members</span>
  565. <li class=" " data-name="PopupMenu#content"><a href="PopupMenu.html#content">content</a></li>
  566. <li class=" " data-name="PopupMenu#header"><a href="PopupMenu.html#header">header</a></li>
  567. </ul>
  568. <ul class="typedefs itemMembers">
  569. </ul>
  570. <ul class="typedefs itemMembers">
  571. </ul>
  572. <ul class="methods itemMembers">
  573. <span class="subtitle">Methods</span>
  574. <li class=" " data-name="PopupMenu#hide"><a href="PopupMenu.html#hide">hide</a></li>
  575. <li class=" " data-name="PopupMenu#layout"><a href="PopupMenu.html#layout">layout</a></li>
  576. <li class=" " data-name="PopupMenu#show"><a href="PopupMenu.html#show">show</a></li>
  577. </ul>
  578. <ul class="events itemMembers">
  579. </ul>
  580. </li>
  581. <li class="item" data-name="PopupMenuPopupInteractivePopup">
  582. <span class="title ">
  583. <a href="PopupMenuPopupInteractivePopup.html">PopupMenuPopupInteractivePopup</a>
  584. </span>
  585. <ul class="members itemMembers">
  586. </ul>
  587. <ul class="typedefs itemMembers">
  588. </ul>
  589. <ul class="typedefs itemMembers">
  590. </ul>
  591. <ul class="methods itemMembers">
  592. </ul>
  593. <ul class="events itemMembers">
  594. </ul>
  595. </li>
  596. <li class="item" data-name="PopupMenuPopupMenuPopupInteractivePopup">
  597. <span class="title ">
  598. <a href="PopupMenuPopupMenuPopupInteractivePopup.html">PopupMenuPopupMenuPopupInteractivePopup</a>
  599. </span>
  600. <ul class="members itemMembers">
  601. </ul>
  602. <ul class="typedefs itemMembers">
  603. </ul>
  604. <ul class="typedefs itemMembers">
  605. </ul>
  606. <ul class="methods itemMembers">
  607. </ul>
  608. <ul class="events itemMembers">
  609. </ul>
  610. </li>
  611. <li class="item" data-name="PopupMenuPopupMenuPopupPopupInteractivePopup">
  612. <span class="title ">
  613. <a href="PopupMenuPopupMenuPopupPopupInteractivePopup.html">PopupMenuPopupMenuPopupPopupInteractivePopup</a>
  614. </span>
  615. <ul class="members itemMembers">
  616. </ul>
  617. <ul class="typedefs itemMembers">
  618. </ul>
  619. <ul class="typedefs itemMembers">
  620. </ul>
  621. <ul class="methods itemMembers">
  622. </ul>
  623. <ul class="events itemMembers">
  624. </ul>
  625. </li>
  626. <li class="item" data-name="PopupMenuPopupPopupInteractivePopup">
  627. <span class="title ">
  628. <a href="PopupMenuPopupPopupInteractivePopup.html">PopupMenuPopupPopupInteractivePopup</a>
  629. </span>
  630. <ul class="members itemMembers">
  631. </ul>
  632. <ul class="typedefs itemMembers">
  633. </ul>
  634. <ul class="typedefs itemMembers">
  635. </ul>
  636. <ul class="methods itemMembers">
  637. </ul>
  638. <ul class="events itemMembers">
  639. </ul>
  640. </li>
  641. <li class="item" data-name="PopupPopupInteractivePopup">
  642. <span class="title ">
  643. <a href="PopupPopupInteractivePopup.html">PopupPopupInteractivePopup</a>
  644. </span>
  645. <ul class="members itemMembers">
  646. </ul>
  647. <ul class="typedefs itemMembers">
  648. </ul>
  649. <ul class="typedefs itemMembers">
  650. </ul>
  651. <ul class="methods itemMembers">
  652. </ul>
  653. <ul class="events itemMembers">
  654. </ul>
  655. </li>
  656. <li class="item" data-name="Progress">
  657. <span class="title ">
  658. <a href="Progress.html">Progress</a>
  659. </span>
  660. <ul class="members itemMembers">
  661. <span class="subtitle">Members</span>
  662. <li class="parent " data-name="Progress#progress"><a href="Progress.html#progress">progress</a></li>
  663. </ul>
  664. <ul class="typedefs itemMembers">
  665. </ul>
  666. <ul class="typedefs itemMembers">
  667. </ul>
  668. <ul class="methods itemMembers">
  669. <span class="subtitle">Methods</span>
  670. <li class="parent " data-name="Progress#hide"><a href="Progress.html#hide">hide</a></li>
  671. <li class="parent " data-name="Progress#layout"><a href="Progress.html#layout">layout</a></li>
  672. <li class="parent " data-name="Progress#show"><a href="Progress.html#show">show</a></li>
  673. </ul>
  674. <ul class="events itemMembers">
  675. </ul>
  676. </li>
  677. <li class="item" data-name="Scrollview">
  678. <span class="title ">
  679. <a href="Scrollview.html">Scrollview</a>
  680. </span>
  681. <ul class="members itemMembers">
  682. </ul>
  683. <ul class="typedefs itemMembers">
  684. </ul>
  685. <ul class="typedefs itemMembers">
  686. </ul>
  687. <ul class="methods itemMembers">
  688. <span class="subtitle">Methods</span>
  689. <li class="parent " data-name="Scrollview#layout"><a href="Scrollview.html#layout">layout</a></li>
  690. </ul>
  691. <ul class="events itemMembers">
  692. </ul>
  693. </li>
  694. <li class="item" data-name="Slider">
  695. <span class="title ">
  696. <a href="Slider.html">Slider</a>
  697. </span>
  698. <ul class="members itemMembers">
  699. <span class="subtitle">Members</span>
  700. <li class="parent " data-name="Slider#disabled"><a href="Slider.html#disabled">disabled</a></li>
  701. <li class="parent " data-name="Slider#value"><a href="Slider.html#value">value</a></li>
  702. </ul>
  703. <ul class="typedefs itemMembers">
  704. </ul>
  705. <ul class="typedefs itemMembers">
  706. </ul>
  707. <ul class="methods itemMembers">
  708. <span class="subtitle">Methods</span>
  709. <li class="parent " data-name="Slider#hide"><a href="Slider.html#hide">hide</a></li>
  710. <li class="parent " data-name="Slider#layout"><a href="Slider.html#layout">layout</a></li>
  711. <li class="parent " data-name="Slider#show"><a href="Slider.html#show">show</a></li>
  712. </ul>
  713. <ul class="events itemMembers">
  714. </ul>
  715. </li>
  716. <li class="item" data-name="Switch">
  717. <span class="title ">
  718. <a href="Switch.html">Switch</a>
  719. </span>
  720. <ul class="members itemMembers">
  721. <span class="subtitle">Members</span>
  722. <li class="parent " data-name="Switch#active"><a href="Switch.html#active">active</a></li>
  723. <li class="parent " data-name="Switch#disabled"><a href="Switch.html#disabled">disabled</a></li>
  724. </ul>
  725. <ul class="typedefs itemMembers">
  726. </ul>
  727. <ul class="typedefs itemMembers">
  728. </ul>
  729. <ul class="methods itemMembers">
  730. <span class="subtitle">Methods</span>
  731. <li class="parent " data-name="Switch#hide"><a href="Switch.html#hide">hide</a></li>
  732. <li class="parent " data-name="Switch#layout"><a href="Switch.html#layout">layout</a></li>
  733. <li class="parent " data-name="Switch#show"><a href="Switch.html#show">show</a></li>
  734. </ul>
  735. <ul class="events itemMembers">
  736. </ul>
  737. </li>
  738. <li class="item" data-name="TextLabel.TextLabel">
  739. <span class="title ">
  740. <a href="TextLabel.TextLabel.html">TextLabel.TextLabel</a>
  741. </span>
  742. <ul class="members itemMembers">
  743. </ul>
  744. <ul class="typedefs itemMembers">
  745. </ul>
  746. <ul class="typedefs itemMembers">
  747. </ul>
  748. <ul class="methods itemMembers">
  749. </ul>
  750. <ul class="events itemMembers">
  751. </ul>
  752. </li>
  753. <li class="item" data-name="Theme">
  754. <span class="title ">
  755. <a href="Theme.html">Theme</a>
  756. </span>
  757. <ul class="members itemMembers">
  758. </ul>
  759. <ul class="typedefs itemMembers">
  760. </ul>
  761. <ul class="typedefs itemMembers">
  762. </ul>
  763. <ul class="methods itemMembers">
  764. <span class="subtitle">Methods</span>
  765. <li class="parent " data-name="Theme.fromString"><a href="Theme.html#.fromString">fromString</a></li>
  766. </ul>
  767. <ul class="events itemMembers">
  768. </ul>
  769. </li>
  770. <li class="item" data-name="ThemeDark">
  771. <span class="title ">
  772. <a href="ThemeDark.html">ThemeDark</a>
  773. </span>
  774. <ul class="members itemMembers">
  775. </ul>
  776. <ul class="typedefs itemMembers">
  777. </ul>
  778. <ul class="typedefs itemMembers">
  779. </ul>
  780. <ul class="methods itemMembers">
  781. </ul>
  782. <ul class="events itemMembers">
  783. </ul>
  784. </li>
  785. <li class="item" data-name="ThemeLight">
  786. <span class="title ">
  787. <a href="ThemeLight.html">ThemeLight</a>
  788. </span>
  789. <ul class="members itemMembers">
  790. </ul>
  791. <ul class="typedefs itemMembers">
  792. </ul>
  793. <ul class="typedefs itemMembers">
  794. </ul>
  795. <ul class="methods itemMembers">
  796. </ul>
  797. <ul class="events itemMembers">
  798. </ul>
  799. </li>
  800. <li class="item" data-name="ThemeRed">
  801. <span class="title ">
  802. <a href="ThemeRed.html">ThemeRed</a>
  803. </span>
  804. <ul class="members itemMembers">
  805. </ul>
  806. <ul class="typedefs itemMembers">
  807. </ul>
  808. <ul class="typedefs itemMembers">
  809. </ul>
  810. <ul class="methods itemMembers">
  811. </ul>
  812. <ul class="events itemMembers">
  813. </ul>
  814. </li>
  815. <li class="item" data-name="TileQuadNode">
  816. <span class="title ">
  817. <a href="TileQuadNode.html">TileQuadNode</a>
  818. </span>
  819. <ul class="members itemMembers">
  820. </ul>
  821. <ul class="typedefs itemMembers">
  822. </ul>
  823. <ul class="typedefs itemMembers">
  824. </ul>
  825. <ul class="methods itemMembers">
  826. <span class="subtitle">Methods</span>
  827. <li class="parent " data-name="TileQuadNode#link"><a href="TileQuadNode.html#link">link</a></li>
  828. <li class="parent " data-name="TileQuadNode#noQuads"><a href="TileQuadNode.html#noQuads">noQuads</a></li>
  829. <li class="parent " data-name="TileQuadNode#unlink"><a href="TileQuadNode.html#unlink">unlink</a></li>
  830. </ul>
  831. <ul class="events itemMembers">
  832. </ul>
  833. </li>
  834. <li class="item" data-name="Tooltip">
  835. <span class="title ">
  836. <a href="Tooltip.html">Tooltip</a>
  837. </span>
  838. <ul class="members itemMembers">
  839. <span class="subtitle">Members</span>
  840. <li class=" " data-name="Tooltip#content"><a href="Tooltip.html#content">content</a></li>
  841. <li class=" " data-name="Tooltip#header"><a href="Tooltip.html#header">header</a></li>
  842. </ul>
  843. <ul class="typedefs itemMembers">
  844. </ul>
  845. <ul class="typedefs itemMembers">
  846. </ul>
  847. <ul class="methods itemMembers">
  848. <span class="subtitle">Methods</span>
  849. <li class=" " data-name="Tooltip#hide"><a href="Tooltip.html#hide">hide</a></li>
  850. <li class=" " data-name="Tooltip#layout"><a href="Tooltip.html#layout">layout</a></li>
  851. <li class=" " data-name="Tooltip#show"><a href="Tooltip.html#show">show</a></li>
  852. </ul>
  853. <ul class="events itemMembers">
  854. </ul>
  855. </li>
  856. <li class="item" data-name="UITest">
  857. <span class="title ">
  858. <a href="UITest.html">UITest</a>
  859. </span>
  860. <ul class="members itemMembers">
  861. <span class="subtitle">Members</span>
  862. <li class="parent " data-name="UITest#timeline"><a href="UITest.html#timeline">timeline</a></li>
  863. </ul>
  864. <ul class="typedefs itemMembers">
  865. </ul>
  866. <ul class="typedefs itemMembers">
  867. </ul>
  868. <ul class="methods itemMembers">
  869. <span class="subtitle">Methods</span>
  870. <li class="parent " data-name="UITest#clear"><a href="UITest.html#clear">clear</a></li>
  871. <li class="parent " data-name="UITest#pan"><a href="UITest.html#pan">pan</a></li>
  872. <li class="parent " data-name="UITest#pinch"><a href="UITest.html#pinch">pinch</a></li>
  873. <li class="parent " data-name="UITest#restart"><a href="UITest.html#restart">restart</a></li>
  874. <li class="parent " data-name="UITest#start"><a href="UITest.html#start">start</a></li>
  875. <li class="parent " data-name="UITest#stop"><a href="UITest.html#stop">stop</a></li>
  876. <li class="parent " data-name="UITest#tap"><a href="UITest.html#tap">tap</a></li>
  877. </ul>
  878. <ul class="events itemMembers">
  879. </ul>
  880. </li>
  881. <li class="item" data-name="Volatile">
  882. <span class="title ">
  883. <a href="Volatile.html">Volatile</a>
  884. </span>
  885. <ul class="members itemMembers">
  886. </ul>
  887. <ul class="typedefs itemMembers">
  888. </ul>
  889. <ul class="typedefs itemMembers">
  890. </ul>
  891. <ul class="methods itemMembers">
  892. <span class="subtitle">Methods</span>
  893. <li class="parent " data-name="Volatile#layout"><a href="Volatile.html#layout">layout</a></li>
  894. </ul>
  895. <ul class="events itemMembers">
  896. </ul>
  897. </li>
  898. </ul>
  899. </div>
  900. <div class="main">
  901. <h1 class="page-title" data-filename="pixi_button.js.html">Source: pixi/button.js</h1>
  902. <section>
  903. <header>
  904. <div class="header content-size">
  905. <h2>pixi/button.js</h2>
  906. </div>
  907. </header>
  908. <article>
  909. <pre id="source-code" class="prettyprint source linenums"><code>/* global PIXI TweenLite */
  910. import Theme from './theme.js'
  911. import Tooltip from './tooltip.js'
  912. import Badge from './badge.js'
  913. import Events from '../events.js'
  914. /**
  915. * Callback for the button action.
  916. *
  917. * @callback actionCallback
  918. * @param {object} event - The event object.
  919. * @param {Button} button - A reference to the button (also this refers to the button).
  920. */
  921. /**
  922. * Callback for the button beforeAction.
  923. *
  924. * @callback beforeActionCallback
  925. * @param {object} event - The event object.
  926. * @param {Button} button - A reference to the button (also this refers to the button).
  927. */
  928. /**
  929. * Callback for the button afterAction.
  930. *
  931. * @callback afterActionCallback
  932. * @param {object} event - The event object.
  933. * @param {Button} button - A reference to the button (also this refers to the button).
  934. */
  935. /**
  936. * Class that represents a PixiJS Button.
  937. *
  938. * @example
  939. * // Create the button
  940. * const button = new Button({
  941. * label: 'My Button',
  942. * action: () => console.log('Button was clicked')
  943. * })
  944. *
  945. * // Add the button to a DisplayObject
  946. * app.scene.addChild(button)
  947. *
  948. * @class
  949. * @extends PIXI.Container
  950. * @see {@link http://pixijs.download/dev/docs/PIXI.Container.html|PIXI.Container}
  951. * @see {@link https://www.iwm-tuebingen.de/iwmbrowser/lib/pixi/button.html|DocTest}
  952. */
  953. export default class Button extends PIXI.Container {
  954. /**
  955. * Creates an instance of a Button.
  956. *
  957. * @constructor
  958. * @param {object} [opts] - An options object to specify to style and behaviour of the button.
  959. * @param {number} [opts.id=auto generated] - The id of the button.
  960. * @param {string} [opts.label] - The label of the button.
  961. * @param {number} [opts.x=0] - The x position of the button. Can be also set after creation with button.x = 0.
  962. * @param {number} [opts.y=0] - The y position of the button. Can be also set after creation with button.y = 0.
  963. * @param {string|Theme} [opts.theme=dark] - The theme to use for this button. Possible values are dark, light, red
  964. * or a Theme object.
  965. * @param {number} [opts.minWidth=44] - The minimum width of the button.
  966. * @param {number} [opts.minHeight=44] - The minimum height of the button.
  967. * @param {number} [opts.padding=Theme.padding] - The inner spacing (distance from icon and/or label) to the border.
  968. * @param {string|PIXI.DisplayObject} [opts.icon] - The icon of the button. Can be a predefined one, an URL or an PIXI.DisplayObject.
  969. * @param {string|PIXI.DisplayObject} [opts.iconActive=icon] - The icon of the button when activated. Can be a predefined one, an URL or an PIXI.DisplayObject.
  970. * @param {string} [opts.iconPosition=left] - The position of the icon in relation to the label. Can be left or right.
  971. * @param {number} [opts.iconColor=Theme.iconColor] - The color of the icon (set by the tint property) as a hex value.
  972. * @param {number} [opts.iconColorActive=Theme.iconColorActive] - The color of the icon when activated.
  973. * @param {number} [opts.fill=Theme.fill] - The color of the button background as a hex value.
  974. * @param {number} [opts.fillAlpha=Theme.fillAlpha] - The alpha value of the background.
  975. * @param {number} [opts.fillActive=Theme.fillActive] - The color of the button background when activated.
  976. * @param {number} [opts.fillActiveAlpha=Theme.fillActiveAlpha] - The alpha value of the background when activated.
  977. * @param {number} [opts.stroke=Theme.stroke] - The color of the border as a hex value.
  978. * @param {number} [opts.strokeWidth=Theme.strokeWidth] - The width of the border in pixel.
  979. * @param {number} [opts.strokeAlpha=Theme.strokeAlpha] - The alpha value of the border.
  980. * @param {number} [opts.strokeActive=Theme.strokeActive] - The color of the border when activated.
  981. * @param {number} [opts.strokeActiveWidth=Theme.strokeActiveWidth] - The width of the border in pixel when activated.
  982. * @param {number} [opts.strokeActiveAlpha=Theme.strokeActiveAlpha] - The alpha value of the border when activated.
  983. * @param {object} [opts.textStyle=Theme.textStyle] - A textstyle object for the styling of the label. See PIXI.TextStyle
  984. * for possible options.
  985. * @param {number} [opts.textStyleActive=Theme.textStyleActive] - A textstyle object for the styling of the label when the
  986. * button is activated. See PIXI.TextStyle for possible options.
  987. * @param {string} [opts.style=default] - A shortcut for styling options. Possible values are default, link.
  988. * @param {number} [opts.radius=Theme.radius] - The radius of the four corners of the button (which is a rounded rectangle).
  989. * @param {boolean} [opts.disabled=false] - Is the button disabled? When disabled, the button has a lower alpha value
  990. * and cannot be clicked (interactive is set to false).
  991. * @param {boolean} [opts.active=false] - Is the button initially active?
  992. * @param {actionCallback} [opts.action] - Executed when the button was triggered (by pointerup).
  993. * @param {beforeActionCallback} [opts.beforeAction] - Executed before the main action is triggered.
  994. * @param {afterActionCallback} [opts.afterAction] - Executed after the main action was triggered.
  995. * @param {string} [opts.type=default] - The type of the button. Can be default or checkbox. When the type is
  996. * checkbox, the active state is toggled automatically.
  997. * @param {string} [opts.align=center] - The horizontal position of the label and the icon. Possible values are
  998. * left, center and right. Only affects the style when the minWidth is bigger than the width of the icon and label.
  999. * @param {string} [opts.verticalAlign=middle] - The vertical position of the label and the icon. Possible values are
  1000. * top, middle and button. Only affects the style when the minHeight is bigger than the height of the icon and label.
  1001. * @param {string|object} [opts.tooltip] - A string for the label of the tooltip or an object to configure the tooltip
  1002. * to display.
  1003. * @param {string|object} [opts.badge] - A string for the label of the badge or an object to configure the badge to display.
  1004. * If the parameter is an object, all badge options can be set plus the following:
  1005. * @param {string} [opts.badge.align=right] - The horizontal alignment of the badge. Possible values: left, center, right
  1006. * @param {string} [opts.badge.verticalAlign=top] - The vertical alignment of the badge. Possible values: top, middle, bottom
  1007. * @param {number} [opts.badge.offsetLeft=0] - The horizontal shift of the badge.
  1008. * @param {number} [opts.badge.offsetTop=0] - The vertical shift of the badge.
  1009. * @param {boolean} [opts.visible=true] - Is the button initially visible (property visible)?
  1010. */
  1011. constructor(opts = {}) {
  1012. super()
  1013. const theme = Theme.fromString(opts.theme)
  1014. this.theme = theme
  1015. this.opts = Object.assign(
  1016. {},
  1017. {
  1018. id: PIXI.utils.uid(),
  1019. label: null,
  1020. x: 0,
  1021. y: 0,
  1022. minWidth: 44,
  1023. minHeight: 44,
  1024. padding: theme.padding,
  1025. icon: undefined,
  1026. iconActive: undefined,
  1027. iconPosition: 'left',
  1028. iconColor: theme.iconColor,
  1029. iconColorActive: theme.iconColorActive,
  1030. fill: theme.fill,
  1031. fillAlpha: theme.fillAlpha,
  1032. fillActive: theme.fillActive,
  1033. fillActiveAlpha: theme.fillActiveAlpha,
  1034. stroke: theme.stroke,
  1035. strokeWidth: theme.strokeWidth,
  1036. strokeAlpha: theme.strokeAlpha,
  1037. strokeActive: theme.strokeActive,
  1038. strokeActiveWidth: theme.strokeActiveWidth,
  1039. strokeActiveAlpha: theme.strokeActiveAlpha,
  1040. textStyle: theme.textStyle,
  1041. textStyleActive: theme.textStyleActive,
  1042. style: 'default',
  1043. radius: theme.radius,
  1044. disabled: false,
  1045. active: false,
  1046. action: null,
  1047. beforeAction: null,
  1048. afterAction: null,
  1049. type: 'default',
  1050. align: 'center',
  1051. verticalAlign: 'middle',
  1052. tooltip: null,
  1053. badge: null,
  1054. visible: true
  1055. },
  1056. opts
  1057. )
  1058. this.id = this.opts.id
  1059. if (
  1060. typeof this.opts.icon === 'undefined' &amp;&amp;
  1061. typeof this.opts.iconActive !== 'undefined'
  1062. ) {
  1063. this.opts.icon = this.opts.iconActive
  1064. } else if (
  1065. typeof this.opts.icon !== 'undefined' &amp;&amp;
  1066. typeof this.opts.iconActive === 'undefined'
  1067. ) {
  1068. this.opts.iconActive = this.opts.icon
  1069. }
  1070. if (this.opts.style === 'link') {
  1071. Object.assign(this.opts, {
  1072. strokeAlpha: 0,
  1073. strokeActiveAlpha: 0,
  1074. fillAlpha: 0,
  1075. fillActiveAlpha: 0
  1076. })
  1077. }
  1078. this._active = null
  1079. this._disabled = null
  1080. this.iconInactive = null
  1081. this.iconActive = null
  1082. this.text = null
  1083. this.button = null
  1084. this.content = null
  1085. this.tooltip = null
  1086. this.badge = null
  1087. this.visible = this.opts.visible
  1088. // setup
  1089. //-----------------
  1090. this.setup()
  1091. }
  1092. /**
  1093. * Captures an event to inform InteractionMapper about processed events.
  1094. *
  1095. * @param {event|PIXI.InteractionEvent} event - The PIXI event to capture.
  1096. */
  1097. capture(event) {
  1098. Events.capturedBy(event.data.originalEvent, this)
  1099. }
  1100. /**
  1101. * Creates children and instantiates everything.
  1102. *
  1103. * @private
  1104. * @return {Button} A reference to the button for chaining.
  1105. */
  1106. setup() {
  1107. // Button
  1108. //-----------------
  1109. let button = new PIXI.Graphics()
  1110. this.button = button
  1111. this.addChild(button)
  1112. // Content
  1113. //-----------------
  1114. let content = new PIXI.Container()
  1115. this.content = content
  1116. this.addChild(content)
  1117. // Text
  1118. //-----------------
  1119. if (this.opts.label) {
  1120. this.text = new PIXI.Text(this.opts.label, this.opts.textStyle)
  1121. }
  1122. // Icon
  1123. //-----------------
  1124. if (this.opts.icon) {
  1125. this.iconInactive = this.loadIcon(
  1126. this.opts.icon,
  1127. this.opts.iconColor
  1128. )
  1129. }
  1130. if (this.opts.iconActive) {
  1131. this.iconActive = this.loadIcon(
  1132. this.opts.iconActive,
  1133. this.opts.iconColorActive
  1134. )
  1135. }
  1136. // interaction
  1137. //-----------------
  1138. this.button.on('pointerover', e => {
  1139. this.capture(e)
  1140. TweenLite.to([this.button, this.content], this.theme.fast, {
  1141. alpha: 0.83,
  1142. overwrite: 'none'
  1143. })
  1144. })
  1145. this.button.on('pointermove', e => {
  1146. this.capture(e)
  1147. })
  1148. this.button.on('pointerout', e => {
  1149. this.capture(e)
  1150. TweenLite.to([this.button, this.content], this.theme.fast, {
  1151. alpha: 1,
  1152. overwrite: 'none'
  1153. })
  1154. })
  1155. // eslint-disable-next-line no-unused-vars
  1156. this.button.on('pointerdown', e => {
  1157. //this.capture(e)
  1158. TweenLite.to([this.button, this.content], this.theme.fast, {
  1159. alpha: 0.7,
  1160. overwrite: 'none'
  1161. })
  1162. })
  1163. this.button.on('pointerup', e => {
  1164. this.capture(e)
  1165. if (this.opts.beforeAction) {
  1166. this.opts.beforeAction.call(this, e, this)
  1167. }
  1168. if (this.opts.action) {
  1169. this.opts.action.call(this, e, this)
  1170. }
  1171. TweenLite.to([this.button, this.content], this.theme.fast, {
  1172. alpha: 0.83,
  1173. overwrite: 'none'
  1174. })
  1175. if (this.opts.type === 'checkbox') {
  1176. this.active = !this.active
  1177. }
  1178. if (this.opts.afterAction) {
  1179. this.opts.afterAction.call(this, e, this)
  1180. }
  1181. })
  1182. // disabled
  1183. //-----------------
  1184. this.disabled = this.opts.disabled
  1185. // active
  1186. //-----------------
  1187. this.active = this.opts.active // calls .layout()
  1188. // tooltip
  1189. //-----------------
  1190. if (this.opts.tooltip) {
  1191. if (typeof this.opts.tooltip === 'string') {
  1192. this.tooltip = new Tooltip({
  1193. object: this,
  1194. content: this.opts.tooltip
  1195. })
  1196. } else {
  1197. this.opts.tooltip = Object.assign(
  1198. {},
  1199. { object: this },
  1200. this.opts.tooltip
  1201. )
  1202. this.tooltip = new Tooltip(this.opts.tooltip)
  1203. }
  1204. }
  1205. // badge
  1206. //-----------------
  1207. if (this.opts.badge) {
  1208. let opts = Object.assign(
  1209. {},
  1210. {
  1211. align: 'right',
  1212. verticalAlign: 'top',
  1213. offsetLeft: 0,
  1214. offsetTop: 0
  1215. }
  1216. )
  1217. if (typeof this.opts.badge === 'string') {
  1218. opts = Object.assign(opts, { content: this.opts.badge })
  1219. } else {
  1220. opts = Object.assign(opts, this.opts.badge)
  1221. }
  1222. const badge = new Badge(opts)
  1223. switch (opts.align) {
  1224. case 'left':
  1225. badge.x = this.x - badge.width / 2 + opts.offsetLeft
  1226. break
  1227. case 'center':
  1228. badge.x =
  1229. this.x +
  1230. this.width / 2 -
  1231. badge.width / 2 +
  1232. opts.offsetLeft
  1233. break
  1234. case 'right':
  1235. badge.x =
  1236. this.x + this.width - badge.width / 2 + opts.offsetLeft
  1237. }
  1238. switch (opts.verticalAlign) {
  1239. case 'top':
  1240. badge.y = this.y - badge.height / 2 + opts.offsetTop
  1241. break
  1242. case 'middle':
  1243. badge.y =
  1244. this.y +
  1245. this.height / 2 -
  1246. badge.height / 2 +
  1247. opts.offsetTop
  1248. break
  1249. case 'bottom':
  1250. badge.y =
  1251. this.y + this.height - badge.height / 2 + opts.offsetTop
  1252. }
  1253. this.addChild(badge)
  1254. this.badge = badge
  1255. }
  1256. // set position
  1257. //-----------------
  1258. this.position.set(this.opts.x, this.opts.y)
  1259. return this
  1260. }
  1261. /**
  1262. * Should be called to refresh the layout of the button. Can be used after resizing.
  1263. *
  1264. * @return {Button} A reference to the button for chaining.
  1265. */
  1266. layout() {
  1267. // Clear content
  1268. //-----------------
  1269. this.removeChild(this.content)
  1270. this.content = new PIXI.Container()
  1271. this.addChild(this.content)
  1272. // Set the icon
  1273. //-----------------
  1274. let icon = null
  1275. if (!this.active &amp;&amp; this.iconInactive) {
  1276. icon = this.iconInactive
  1277. } else if (this.active &amp;&amp; this.iconActive) {
  1278. icon = this.iconActive
  1279. }
  1280. // Set the text
  1281. //-----------------
  1282. if (this.text) {
  1283. this.text.position.set(0, 0)
  1284. }
  1285. // Width and Height
  1286. //-----------------
  1287. let width = 0
  1288. if (icon &amp;&amp; this.text) {
  1289. width = icon.width + this.text.width + 3 * this.opts.padding
  1290. } else if (icon) {
  1291. width = icon.width + 2 * this.opts.padding
  1292. } else if (this.text) {
  1293. width = this.text.width + 2 * this.opts.padding
  1294. }
  1295. if (width &lt; this.opts.minWidth) {
  1296. width = this.opts.minWidth
  1297. }
  1298. let height = 0
  1299. if (icon) {
  1300. height = icon.height + 2 * this.opts.padding
  1301. } else if (this.text) {
  1302. height = this.text.height + 2 * this.opts.padding
  1303. }
  1304. if (height &lt; this.opts.minHeight) {
  1305. height = this.opts.minHeight
  1306. }
  1307. this._width = width
  1308. this._height = height
  1309. // Position icon and text
  1310. //-----------------
  1311. if (icon &amp;&amp; this.text) {
  1312. if (this.opts.iconPosition === 'right') {
  1313. icon.x = this.text.width + this.opts.padding
  1314. } else {
  1315. this.text.x = icon.width + this.opts.padding
  1316. }
  1317. this.content.addChild(icon, this.text)
  1318. } else if (icon) {
  1319. this.content.addChild(icon)
  1320. } else if (this.text) {
  1321. this.content.addChild(this.text)
  1322. }
  1323. this.layoutInnerContent()
  1324. this.layoutContent()
  1325. this.icon = icon
  1326. // draw
  1327. //-----------------
  1328. this.draw()
  1329. return this
  1330. }
  1331. /**
  1332. * Calculates the positions of the content children (icon and/or text).
  1333. *
  1334. * @private
  1335. * @return {Button} A reference to the button for chaining.
  1336. */
  1337. layoutInnerContent() {
  1338. for (let child of this.content.children) {
  1339. switch (this.opts.verticalAlign) {
  1340. case 'top':
  1341. child.y = 0
  1342. break
  1343. case 'middle':
  1344. child.y = this.content.height / 2 - child.height / 2
  1345. break
  1346. case 'bottom':
  1347. child.y = this.content.height - child.height
  1348. break
  1349. }
  1350. }
  1351. return this
  1352. }
  1353. /**
  1354. * Sets the horizontal and vertical position of the content.
  1355. * Uses the option keys "align" and "verticalAlign".
  1356. *
  1357. * @private
  1358. * @return {Button} A reference to the button for chaining.
  1359. */
  1360. layoutContent() {
  1361. switch (this.opts.align) {
  1362. case 'left':
  1363. this.content.x = this.opts.padding
  1364. break
  1365. case 'center':
  1366. this.content.x = (this._width - this.content.width) / 2
  1367. break
  1368. case 'right':
  1369. this.content.x =
  1370. this._width - this.opts.padding - this.content.width
  1371. break
  1372. }
  1373. switch (this.opts.verticalAlign) {
  1374. case 'top':
  1375. this.content.y = this.opts.padding
  1376. break
  1377. case 'middle':
  1378. this.content.y = (this._height - this.content.height) / 2
  1379. break
  1380. case 'bottom':
  1381. this.content.y =
  1382. this._height - this.opts.padding - this.content.height
  1383. break
  1384. }
  1385. return this
  1386. }
  1387. /**
  1388. * Draws the canvas.
  1389. *
  1390. * @private
  1391. * @return {Button} A reference to the button for chaining.
  1392. */
  1393. draw() {
  1394. this.button.clear()
  1395. if (this.active) {
  1396. this.button.lineStyle(
  1397. this.opts.strokeActiveWidth,
  1398. this.opts.strokeActive,
  1399. this.opts.strokeActiveAlpha
  1400. )
  1401. this.button.beginFill(
  1402. this.opts.fillActive,
  1403. this.opts.fillActiveAlpha
  1404. )
  1405. } else {
  1406. this.button.lineStyle(
  1407. this.opts.strokeWidth,
  1408. this.opts.stroke,
  1409. this.opts.strokeAlpha
  1410. )
  1411. this.button.beginFill(this.opts.fill, this.opts.fillAlpha)
  1412. }
  1413. this.button.drawRoundedRect(
  1414. 0,
  1415. 0,
  1416. this._width,
  1417. this._height,
  1418. this.opts.radius
  1419. )
  1420. this.button.endFill()
  1421. return this
  1422. }
  1423. /**
  1424. * Gets or sets the active state.
  1425. *
  1426. * @member {boolean}
  1427. */
  1428. get active() {
  1429. return this._active
  1430. }
  1431. set active(value) {
  1432. this._active = value
  1433. if (this._active) {
  1434. if (this.text) {
  1435. this.text.style = this.opts.textStyleActive
  1436. }
  1437. } else {
  1438. if (this.text) {
  1439. this.text.style = this.opts.textStyle
  1440. }
  1441. }
  1442. this.layout()
  1443. }
  1444. /**
  1445. * Gets or sets the disabled state. When disabled, the button cannot be clicked.
  1446. *
  1447. * @member {boolean}
  1448. */
  1449. get disabled() {
  1450. return this._disabled
  1451. }
  1452. set disabled(value) {
  1453. this._disabled = value
  1454. if (this._disabled) {
  1455. this.button.interactive = false
  1456. this.button.buttonMode = false
  1457. this.button.alpha = 0.5
  1458. if (this.icon) {
  1459. this.icon.alpha = 0.5
  1460. }
  1461. if (this.text) {
  1462. this.text.alpha = 0.5
  1463. }
  1464. } else {
  1465. this.button.interactive = true
  1466. this.button.buttonMode = true
  1467. this.button.alpha = 1
  1468. if (this.icon) {
  1469. this.icon.alpha = 1
  1470. }
  1471. if (this.text) {
  1472. this.text.alpha = 1
  1473. }
  1474. }
  1475. }
  1476. /**
  1477. * Shows the button (sets his alpha values to 1).
  1478. *
  1479. * @return {Button} A reference to the button for chaining.
  1480. */
  1481. show() {
  1482. this.opts.strokeAlpha = 1
  1483. this.opts.strokeActiveAlpha = 1
  1484. this.opts.fillAlpha = 1
  1485. this.opts.fillActiveAlpha = 1
  1486. this.layout()
  1487. return this
  1488. }
  1489. /**
  1490. * Hides the button (sets his alpha values to 0).
  1491. *
  1492. * @return {Button} A reference to the button for chaining.
  1493. */
  1494. hide() {
  1495. this.opts.strokeAlpha = 0
  1496. this.opts.strokeActiveAlpha = 0
  1497. this.opts.fillAlpha = 0
  1498. this.opts.fillActiveAlpha = 0
  1499. this.layout()
  1500. return this
  1501. }
  1502. /**
  1503. * Loads an icon
  1504. *
  1505. * @private
  1506. * @param {string|PIXI.DisplayObject} icon - The icon to load.
  1507. * @param {number} color - The color of the icon (if not an PIXI.DisplayObject).
  1508. * @return {PIXI.DisplayObject} Return the icon as an PIXI.DisplayObject.
  1509. */
  1510. loadIcon(icon, color) {
  1511. let displayObject = null
  1512. if (icon instanceof PIXI.DisplayObject) {
  1513. displayObject = icon
  1514. } else {
  1515. let size = 17
  1516. if (this.text) {
  1517. size = this.text.height
  1518. } else if (this.opts.minHeight) {
  1519. size = this.opts.minHeight - 2 * this.opts.padding
  1520. }
  1521. const url = Button.iconIsUrl(icon)
  1522. ? icon
  1523. : `../../assets/icons/${icon}.png`
  1524. const iconTexture = PIXI.Texture.fromImage(url, true)
  1525. const sprite = new PIXI.Sprite(iconTexture)
  1526. sprite.tint = color
  1527. sprite.width = size
  1528. sprite.height = size
  1529. displayObject = sprite
  1530. }
  1531. return displayObject
  1532. }
  1533. /**
  1534. * Tests if an icon string is an url.
  1535. *
  1536. * @private
  1537. * @static
  1538. * @param {string} url - The url to test.
  1539. * @return {boolean} true if the url is an url to an image.
  1540. */
  1541. static iconIsUrl(url) {
  1542. return /\.(png|svg|gif|jpg|jpeg|tif|tiff)$/i.test(url)
  1543. }
  1544. /**
  1545. * Gets or sets the color of the current icon (no matter how the status is). Changing the color, changes
  1546. * the tint property of the icon sprite.
  1547. *
  1548. * @member {number}
  1549. */
  1550. get iconColor() {
  1551. return this.icon ? this.icon.tint : null
  1552. }
  1553. set iconColor(value) {
  1554. if (this.icon) {
  1555. this.icon.tint = value
  1556. }
  1557. }
  1558. }
  1559. </code></pre>
  1560. </article>
  1561. </section>
  1562. <footer class="content-size">
  1563. <div class="footer">
  1564. Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.3</a> on Tue Jul 30 2019 10:48:36 GMT+0200 (Mitteleuropäische Sommerzeit)
  1565. </div>
  1566. </footer>
  1567. </div>
  1568. </div>
  1569. <script>prettyPrint();</script>
  1570. <script src="scripts/main.js"></script>
  1571. </body>
  1572. </html>