links.Timeline.Step.html 20 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  4. <head>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <meta name="generator" content="JsDoc Toolkit" />
  7. <title>JsDoc Reference - links.Timeline.Step</title>
  8. <style type="text/css">
  9. /* default.css */
  10. body
  11. {
  12. font: 12px "Lucida Grande", Tahoma, Arial, Helvetica, sans-serif;
  13. width: 800px;
  14. }
  15. .header
  16. {
  17. clear: both;
  18. background-color: #ccc;
  19. padding: 8px;
  20. }
  21. h1
  22. {
  23. font-size: 150%;
  24. font-weight: bold;
  25. padding: 0;
  26. margin: 1em 0 0 .3em;
  27. }
  28. hr
  29. {
  30. border: none 0;
  31. border-top: 1px solid #7F8FB1;
  32. height: 1px;
  33. }
  34. pre.code
  35. {
  36. display: block;
  37. padding: 8px;
  38. border: 1px dashed #ccc;
  39. }
  40. #index
  41. {
  42. margin-top: 24px;
  43. float: left;
  44. width: 160px;
  45. position: absolute;
  46. left: 8px;
  47. background-color: #F3F3F3;
  48. padding: 8px;
  49. }
  50. #content
  51. {
  52. margin-left: 190px;
  53. width: 600px;
  54. }
  55. .classList
  56. {
  57. list-style-type: none;
  58. padding: 0;
  59. margin: 0 0 0 8px;
  60. font-family: arial, sans-serif;
  61. font-size: 1em;
  62. overflow: auto;
  63. }
  64. .classList li
  65. {
  66. padding: 0;
  67. margin: 0 0 8px 0;
  68. }
  69. .summaryTable { width: 100%; }
  70. h1.classTitle
  71. {
  72. font-size:170%;
  73. line-height:130%;
  74. }
  75. h2 { font-size: 110%; }
  76. caption, div.sectionTitle
  77. {
  78. background-color: #7F8FB1;
  79. color: #fff;
  80. font-size:130%;
  81. text-align: left;
  82. padding: 2px 6px 2px 6px;
  83. border: 1px #7F8FB1 solid;
  84. }
  85. div.sectionTitle { margin-bottom: 8px; }
  86. .summaryTable thead { display: none; }
  87. .summaryTable td
  88. {
  89. vertical-align: top;
  90. padding: 4px;
  91. border-bottom: 1px #7F8FB1 solid;
  92. border-right: 1px #7F8FB1 solid;
  93. }
  94. /*col#summaryAttributes {}*/
  95. .summaryTable td.attributes
  96. {
  97. border-left: 1px #7F8FB1 solid;
  98. width: 140px;
  99. text-align: right;
  100. }
  101. td.attributes, .fixedFont
  102. {
  103. line-height: 15px;
  104. color: #002EBE;
  105. font-family: "Courier New",Courier,monospace;
  106. font-size: 13px;
  107. }
  108. .summaryTable td.nameDescription
  109. {
  110. text-align: left;
  111. font-size: 13px;
  112. line-height: 15px;
  113. }
  114. .summaryTable td.nameDescription, .description
  115. {
  116. line-height: 15px;
  117. padding: 4px;
  118. padding-left: 4px;
  119. }
  120. .summaryTable { margin-bottom: 8px; }
  121. ul.inheritsList
  122. {
  123. list-style: square;
  124. margin-left: 20px;
  125. padding-left: 0;
  126. }
  127. .detailList {
  128. margin-left: 20px;
  129. line-height: 15px;
  130. }
  131. .detailList dt { margin-left: 20px; }
  132. .detailList .heading
  133. {
  134. font-weight: bold;
  135. padding-bottom: 6px;
  136. margin-left: 0;
  137. }
  138. .light, td.attributes, .light a:link, .light a:visited
  139. {
  140. color: #777;
  141. font-style: italic;
  142. }
  143. .fineprint
  144. {
  145. text-align: right;
  146. font-size: 10px;
  147. }
  148. </style>
  149. </head>
  150. <body>
  151. <!-- ============================== header ================================= -->
  152. <!-- begin static/header.html -->
  153. <div id="header">
  154. </div>
  155. <!-- end static/header.html -->
  156. <!-- ============================== classes index ============================ -->
  157. <div id="index">
  158. <!-- begin publish.classesIndex -->
  159. <div align="center"><a href="../index.html">Class Index</a>
  160. | <a href="../files.html">File Index</a></div>
  161. <hr />
  162. <h2>Classes</h2>
  163. <ul class="classList">
  164. <li><i><a href="../symbols/_global_.html">_global_</a></i></li>
  165. <li><a href="../symbols/links.Timeline.html">links.Timeline</a></li>
  166. <li><a href="../symbols/links.Timeline.Step.html">links.Timeline.Step</a></li>
  167. </ul>
  168. <hr />
  169. <!-- end publish.classesIndex -->
  170. </div>
  171. <div id="content">
  172. <!-- ============================== class title ============================ -->
  173. <h1 class="classTitle">
  174. Class links.Timeline.Step
  175. </h1>
  176. <!-- ============================== class summary ========================== -->
  177. <p class="description">
  178. Step
  179. The class step is an iterator for dates. You provide a start date and an end
  180. date. The class itself determines the best scale (step size) based on the
  181. provided start Date, end Date, and bestStepNum. For example if you want to have
  182. a label each 100px (you may reckon with the text size), and the width of
  183. your timeline is 1000px, then you can provide bestStepNum=10.
  184. Alternatively, you can set a scale by hand.
  185. After creation, you can initialize the class by executing begin(). Then you
  186. can iterate from the start date to the end date via next(). You can check if
  187. the end date is reached with the function end(). After each step, you can
  188. retrieve the current date via get().
  189. The class step has scales ranging from milliseconds, seconds, minutes, hours,
  190. days, to years.
  191. <br /><i>Defined in: </i> <a href="../symbols/src/timeline.js.html">timeline.js</a>.
  192. </p>
  193. <!-- ============================== constructor summary ==================== -->
  194. <table class="summaryTable" cellspacing="0" summary="A summary of the constructor documented in the class links.Timeline.Step.">
  195. <caption>Class Summary</caption>
  196. <thead>
  197. <tr>
  198. <th scope="col">Constructor Attributes</th>
  199. <th scope="col">Constructor Name and Description</th>
  200. </tr>
  201. </thead>
  202. <tbody>
  203. <tr>
  204. <td class="attributes">&nbsp;</td>
  205. <td class="nameDescription" >
  206. <div class="fixedFont">
  207. <b><a href="../symbols/links.Timeline.Step.html#constructor">links.Timeline.Step</a></b>(start, end, bestStepNum)
  208. </div>
  209. <div class="description"></div>
  210. </td>
  211. </tr>
  212. </tbody>
  213. </table>
  214. <!-- ============================== properties summary ===================== -->
  215. <!-- ============================== methods summary ======================== -->
  216. <table class="summaryTable" cellspacing="0" summary="A summary of the methods documented in the class links.Timeline.Step.">
  217. <caption>Method Summary</caption>
  218. <thead>
  219. <tr>
  220. <th scope="col">Method Attributes</th>
  221. <th scope="col">Method Name and Description</th>
  222. </tr>
  223. </thead>
  224. <tbody>
  225. <tr>
  226. <td class="attributes">&nbsp;</td>
  227. <td class="nameDescription">
  228. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#addZeros">addZeros</a></b>(value, len)
  229. </div>
  230. <div class="description">Add</div>
  231. </td>
  232. </tr>
  233. <tr>
  234. <td class="attributes">&nbsp;</td>
  235. <td class="nameDescription">
  236. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#begin">begin</a></b>()
  237. </div>
  238. <div class="description">Set the step iterator to the start date.</div>
  239. </td>
  240. </tr>
  241. <tr>
  242. <td class="attributes">&nbsp;</td>
  243. <td class="nameDescription">
  244. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#doAutoScale">doAutoScale</a></b>()
  245. </div>
  246. <div class="description">Automatically determine the best scale and step, based on the
  247. start Date and end Date</div>
  248. </td>
  249. </tr>
  250. <tr>
  251. <td class="attributes">&nbsp;</td>
  252. <td class="nameDescription">
  253. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#end">end</a></b>()
  254. </div>
  255. <div class="description">Check if the end date is reached</div>
  256. </td>
  257. </tr>
  258. <tr>
  259. <td class="attributes">&nbsp;</td>
  260. <td class="nameDescription">
  261. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#getDate">getDate</a></b>()
  262. </div>
  263. <div class="description">Get the current datetime</div>
  264. </td>
  265. </tr>
  266. <tr>
  267. <td class="attributes">&nbsp;</td>
  268. <td class="nameDescription">
  269. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#getLabelMajor">getLabelMajor</a></b>()
  270. </div>
  271. <div class="description">Returns formatted text for the major axislabel, depending on the current
  272. date and the scale.</div>
  273. </td>
  274. </tr>
  275. <tr>
  276. <td class="attributes">&nbsp;</td>
  277. <td class="nameDescription">
  278. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#getLabelMinor">getLabelMinor</a></b>()
  279. </div>
  280. <div class="description">Returns formatted text for the minor axislabel, depending on the current
  281. date and the scale.</div>
  282. </td>
  283. </tr>
  284. <tr>
  285. <td class="attributes">&nbsp;</td>
  286. <td class="nameDescription">
  287. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#isMajor">isMajor</a></b>()
  288. </div>
  289. <div class="description">Check if the current step is a major step (for example when the step
  290. is DAY, a major step is each first day of the MONTH)</div>
  291. </td>
  292. </tr>
  293. <tr>
  294. <td class="attributes">&nbsp;</td>
  295. <td class="nameDescription">
  296. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#next">next</a></b>()
  297. </div>
  298. <div class="description">Do the next step</div>
  299. </td>
  300. </tr>
  301. <tr>
  302. <td class="attributes">&nbsp;</td>
  303. <td class="nameDescription">
  304. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#roundToMinor">roundToMinor</a></b>()
  305. </div>
  306. <div class="description">Round the current date to the first minor date value
  307. This must be executed once when the current date is set to start Date</div>
  308. </td>
  309. </tr>
  310. <tr>
  311. <td class="attributes">&nbsp;</td>
  312. <td class="nameDescription">
  313. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#setAutoScale">setAutoScale</a></b>(enable)
  314. </div>
  315. <div class="description">Enable or disable autoscaling</div>
  316. </td>
  317. </tr>
  318. <tr>
  319. <td class="attributes">&nbsp;</td>
  320. <td class="nameDescription">
  321. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#setRange">setRange</a></b>(start, end, bestStepNum)
  322. </div>
  323. <div class="description">Set a new range
  324. The scale is determined based on the difference in time and the bestStepNum.</div>
  325. </td>
  326. </tr>
  327. <tr>
  328. <td class="attributes">&nbsp;</td>
  329. <td class="nameDescription">
  330. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#setScale">setScale</a></b>(newScale, newStep)
  331. </div>
  332. <div class="description">Set a custom scale.</div>
  333. </td>
  334. </tr>
  335. <tr>
  336. <td class="attributes">&nbsp;</td>
  337. <td class="nameDescription">
  338. <div class="fixedFont"><b><a href="../symbols/links.Timeline.Step.html#snap">snap</a></b>(date)
  339. </div>
  340. <div class="description">Snap a date to a rounded value.</div>
  341. </td>
  342. </tr>
  343. </tbody>
  344. </table>
  345. <!-- ============================== events summary ======================== -->
  346. <!-- ============================== constructor details ==================== -->
  347. <div class="details"><a name="constructor"> </a>
  348. <div class="sectionTitle">
  349. Class Detail
  350. </div>
  351. <div class="fixedFont">
  352. <b>links.Timeline.Step</b>(start, end, bestStepNum)
  353. </div>
  354. <div class="description">
  355. </div>
  356. <dl class="detailList">
  357. <dt class="heading">Parameters:</dt>
  358. <dt>
  359. <span class="light fixedFont">{Date}</span> <b>start</b>
  360. </dt>
  361. <dd>The start date, for example new Date(2010,09,21)
  362. or new Date(2010,09,21,23,45,00)</dd>
  363. <dt>
  364. <span class="light fixedFont">{Date}</span> <b>end</b>
  365. </dt>
  366. <dd>The end date</dd>
  367. <dt>
  368. <span class="light fixedFont">{int}</span> <b>bestStepNum</b>
  369. </dt>
  370. <dd>Optional. The most ideal number of steps, labels.</dd>
  371. </dl>
  372. </div>
  373. <!-- ============================== field details ========================== -->
  374. <!-- ============================== method details ========================= -->
  375. <div class="sectionTitle">
  376. Method Detail
  377. </div>
  378. <a name="addZeros"> </a>
  379. <div class="fixedFont">
  380. <b>addZeros</b>(value, len)
  381. </div>
  382. <div class="description">
  383. Add
  384. </div>
  385. <dl class="detailList">
  386. <dt class="heading">Parameters:</dt>
  387. <dt>
  388. <b>value</b>
  389. </dt>
  390. <dd></dd>
  391. <dt>
  392. <b>len</b>
  393. </dt>
  394. <dd></dd>
  395. </dl>
  396. <hr />
  397. <a name="begin"> </a>
  398. <div class="fixedFont">
  399. <b>begin</b>()
  400. </div>
  401. <div class="description">
  402. Set the step iterator to the start date.
  403. </div>
  404. <hr />
  405. <a name="doAutoScale"> </a>
  406. <div class="fixedFont">
  407. <b>doAutoScale</b>()
  408. </div>
  409. <div class="description">
  410. Automatically determine the best scale and step, based on the
  411. start Date and end Date
  412. </div>
  413. <hr />
  414. <a name="end"> </a>
  415. <div class="fixedFont">
  416. <span class="light">{boolean}</span>
  417. <b>end</b>()
  418. </div>
  419. <div class="description">
  420. Check if the end date is reached
  421. </div>
  422. <dl class="detailList">
  423. <dt class="heading">Returns:</dt>
  424. <dd><span class="light fixedFont">{boolean}</span> true if the current date has passed the end date</dd>
  425. </dl>
  426. <hr />
  427. <a name="getDate"> </a>
  428. <div class="fixedFont">
  429. <span class="light">{Date}</span>
  430. <b>getDate</b>()
  431. </div>
  432. <div class="description">
  433. Get the current datetime
  434. </div>
  435. <dl class="detailList">
  436. <dt class="heading">Returns:</dt>
  437. <dd><span class="light fixedFont">{Date}</span> current The current date</dd>
  438. </dl>
  439. <hr />
  440. <a name="getLabelMajor"> </a>
  441. <div class="fixedFont">
  442. <span class="light">{string}</span>
  443. <b>getLabelMajor</b>()
  444. </div>
  445. <div class="description">
  446. Returns formatted text for the major axislabel, depending on the current
  447. date and the scale. For example when scale is MINUTE, the major scale is
  448. hours, and the hour will be formatted as "hh".
  449. </div>
  450. <dl class="detailList">
  451. <dt class="heading">Returns:</dt>
  452. <dd><span class="light fixedFont">{string}</span> major axislabel</dd>
  453. </dl>
  454. <hr />
  455. <a name="getLabelMinor"> </a>
  456. <div class="fixedFont">
  457. <span class="light">{string}</span>
  458. <b>getLabelMinor</b>()
  459. </div>
  460. <div class="description">
  461. Returns formatted text for the minor axislabel, depending on the current
  462. date and the scale. For example when scale is MINUTE, the current time is
  463. formatted as "hh::mm".
  464. </div>
  465. <dl class="detailList">
  466. <dt class="heading">Returns:</dt>
  467. <dd><span class="light fixedFont">{string}</span> minor axislabel</dd>
  468. </dl>
  469. <hr />
  470. <a name="isMajor"> </a>
  471. <div class="fixedFont">
  472. <b>isMajor</b>()
  473. </div>
  474. <div class="description">
  475. Check if the current step is a major step (for example when the step
  476. is DAY, a major step is each first day of the MONTH)
  477. </div>
  478. <dl class="detailList">
  479. <dt class="heading">Returns:</dt>
  480. <dd>true if current date is major, else false.</dd>
  481. </dl>
  482. <hr />
  483. <a name="next"> </a>
  484. <div class="fixedFont">
  485. <b>next</b>()
  486. </div>
  487. <div class="description">
  488. Do the next step
  489. </div>
  490. <hr />
  491. <a name="roundToMinor"> </a>
  492. <div class="fixedFont">
  493. <b>roundToMinor</b>()
  494. </div>
  495. <div class="description">
  496. Round the current date to the first minor date value
  497. This must be executed once when the current date is set to start Date
  498. </div>
  499. <hr />
  500. <a name="setAutoScale"> </a>
  501. <div class="fixedFont">
  502. <b>setAutoScale</b>(enable)
  503. </div>
  504. <div class="description">
  505. Enable or disable autoscaling
  506. </div>
  507. <dl class="detailList">
  508. <dt class="heading">Parameters:</dt>
  509. <dt>
  510. <span class="light fixedFont">{boolean}</span> <b>enable</b>
  511. </dt>
  512. <dd>If true or not defined, autoscaling is enabled.
  513. If false, autoscaling is disabled.</dd>
  514. </dl>
  515. <hr />
  516. <a name="setRange"> </a>
  517. <div class="fixedFont">
  518. <b>setRange</b>(start, end, bestStepNum)
  519. </div>
  520. <div class="description">
  521. Set a new range
  522. The scale is determined based on the difference in time and the bestStepNum.
  523. For example if you want to have a label each 100px (you may reckon with the
  524. text size), and the width of your timeline is 1000px, then you can provide
  525. bestStepNum=10.
  526. Alternatively, you can set a scale by hand.
  527. </div>
  528. <dl class="detailList">
  529. <dt class="heading">Parameters:</dt>
  530. <dt>
  531. <span class="light fixedFont">{Date}</span> <b>start</b>
  532. </dt>
  533. <dd>The start date and time.</dd>
  534. <dt>
  535. <span class="light fixedFont">{Date}</span> <b>end</b>
  536. </dt>
  537. <dd>The end date and time.</dd>
  538. <dt>
  539. <span class="light fixedFont">{int}</span> <b>bestStepNum</b>
  540. </dt>
  541. <dd>Optional. The most ideal number of steps, labels.</dd>
  542. </dl>
  543. <hr />
  544. <a name="setScale"> </a>
  545. <div class="fixedFont">
  546. <b>setScale</b>(newScale, newStep)
  547. </div>
  548. <div class="description">
  549. Set a custom scale. Autoscaling will be disabled.
  550. For example setScale(SCALE.MINUTES, 5) will result
  551. in minor steps of 5 minutes, and major steps of an hour.
  552. </div>
  553. <dl class="detailList">
  554. <dt class="heading">Parameters:</dt>
  555. <dt>
  556. <span class="light fixedFont">{Step.SCALE}</span> <b>newScale</b>
  557. </dt>
  558. <dd>A scale. Choose from SCALE.MILLISECOND,
  559. SCALE.SECOND, SCALE.MINUTE, SCALE.HOUR,
  560. SCALE.DAY, SCALE.MONTH, SCALE.YEAR.</dd>
  561. <dt>
  562. <span class="light fixedFont">{int}</span> <b>newStep</b>
  563. </dt>
  564. <dd>A step size, by default 1. Choose for
  565. example 1, 2, 5, or 10.</dd>
  566. </dl>
  567. <hr />
  568. <a name="snap"> </a>
  569. <div class="fixedFont">
  570. <b>snap</b>(date)
  571. </div>
  572. <div class="description">
  573. Snap a date to a rounded value. The snap intervals are dependent on the
  574. current scale and step.
  575. </div>
  576. <dl class="detailList">
  577. <dt class="heading">Parameters:</dt>
  578. <dt>
  579. <span class="light fixedFont">{Date}</span> <b>date</b>
  580. </dt>
  581. <dd>the date to be snapped</dd>
  582. </dl>
  583. <!-- ============================== event details ========================= -->
  584. <hr />
  585. </div>
  586. <!-- ============================== footer ================================= -->
  587. <div class="fineprint" style="clear:both">
  588. Documentation generated by <a href="http://code.google.com/p/jsdoc-toolkit/" target="_blank">JsDoc Toolkit</a> 2.3.2 on Wed Oct 13 2010 15:20:31 GMT+0200 (CEST)
  589. </div>
  590. </body>
  591. </html>