Permalink
Browse files

Major docs update

  • Loading branch information...
1 parent 2d6d85c commit d24a61385f7dffe4d8c59427e85f1ba865c3480d @MohammadYounes committed Nov 22, 2015
Showing with 4,696 additions and 349 deletions.
  1. +39 −9 docpad.coffee
  2. +1 −1 docpad/data/alert.json
  3. +22 −3 docpad/data/dialog.json
  4. +2 −1 docpad/data/notifier.json
  5. +8 −57 docpad/documents/alert.html.eco
  6. +37 −0 docpad/documents/alert/autoReset.html.eco
  7. +37 −0 docpad/documents/alert/basic.html.eco
  8. +37 −0 docpad/documents/alert/bringToFront.html.eco
  9. +37 −0 docpad/documents/alert/closable.html.eco
  10. +37 −0 docpad/documents/alert/closableByDimmer.html.eco
  11. +37 −0 docpad/documents/alert/closeOthers.html.eco
  12. +37 −0 docpad/documents/alert/destroy.html.eco
  13. +37 −0 docpad/documents/alert/frameless.html.eco
  14. +37 −0 docpad/documents/alert/isMaximized.html.eco
  15. +37 −0 docpad/documents/alert/isModal.html.eco
  16. +37 −0 docpad/documents/alert/isOpen.html.eco
  17. +37 −0 docpad/documents/alert/isPinned.html.eco
  18. +37 −0 docpad/documents/alert/label.html.eco
  19. +37 −0 docpad/documents/alert/maximizable.html.eco
  20. +37 −0 docpad/documents/alert/maximize.html.eco
  21. +37 −0 docpad/documents/alert/message.html.eco
  22. +37 −0 docpad/documents/alert/modal.html.eco
  23. +37 −0 docpad/documents/alert/movable.html.eco
  24. +37 −0 docpad/documents/alert/moveBounded.html.eco
  25. +37 −0 docpad/documents/alert/moveTo.html.eco
  26. +37 −0 docpad/documents/alert/onclose.html.eco
  27. +37 −0 docpad/documents/alert/onfocus.html.eco
  28. +37 −0 docpad/documents/alert/onok.html.eco
  29. +37 −0 docpad/documents/alert/onshow.html.eco
  30. +37 −0 docpad/documents/alert/overflow.html.eco
  31. +37 −0 docpad/documents/alert/padding.html.eco
  32. +37 −0 docpad/documents/alert/pin.html.eco
  33. +37 −0 docpad/documents/alert/pinnable.html.eco
  34. +37 −0 docpad/documents/alert/resizable.html.eco
  35. +37 −0 docpad/documents/alert/resizeTo.html.eco
  36. +37 −0 docpad/documents/alert/restore.html.eco
  37. +37 −0 docpad/documents/alert/startMaximized.html.eco
  38. +37 −0 docpad/documents/alert/transition.html.eco
  39. +37 −0 docpad/documents/alert/unpin.html.eco
  40. +4 −64 docpad/documents/confirm.html.eco
  41. +34 −0 docpad/documents/confirm/autoCancel.html.eco
  42. +34 −0 docpad/documents/confirm/autoOk.html.eco
  43. +34 −0 docpad/documents/confirm/autoReset.html.eco
  44. +34 −0 docpad/documents/confirm/basic.html.eco
  45. +34 −0 docpad/documents/confirm/bringToFront.html.eco
  46. +34 −0 docpad/documents/confirm/closable.html.eco
  47. +34 −0 docpad/documents/confirm/closableByDimmer.html.eco
  48. +34 −0 docpad/documents/confirm/closeOthers.html.eco
  49. +34 −0 docpad/documents/confirm/defaultFocus.html.eco
  50. +34 −0 docpad/documents/confirm/destroy.html.eco
  51. +34 −0 docpad/documents/confirm/frameless.html.eco
  52. +34 −0 docpad/documents/confirm/isMaximized.html.eco
  53. +34 −0 docpad/documents/confirm/isModal.html.eco
  54. +34 −0 docpad/documents/confirm/isOpen.html.eco
  55. +34 −0 docpad/documents/confirm/isPinned.html.eco
  56. +34 −0 docpad/documents/confirm/labels.html.eco
  57. +34 −0 docpad/documents/confirm/maximizable.html.eco
  58. +34 −0 docpad/documents/confirm/maximize.html.eco
  59. +34 −0 docpad/documents/confirm/message.html.eco
  60. +34 −0 docpad/documents/confirm/modal.html.eco
  61. +34 −0 docpad/documents/confirm/movable.html.eco
  62. +34 −0 docpad/documents/confirm/moveBounded.html.eco
  63. +34 −0 docpad/documents/confirm/moveTo.html.eco
  64. +34 −0 docpad/documents/confirm/oncancel.html.eco
  65. +34 −0 docpad/documents/confirm/onclose.html.eco
  66. +34 −0 docpad/documents/confirm/onfocus.html.eco
  67. +34 −0 docpad/documents/confirm/onok.html.eco
  68. +34 −0 docpad/documents/confirm/onshow.html.eco
  69. +34 −0 docpad/documents/confirm/overflow.html.eco
  70. +34 −0 docpad/documents/confirm/padding.html.eco
  71. +34 −0 docpad/documents/confirm/pin.html.eco
  72. +34 −0 docpad/documents/confirm/pinnable.html.eco
  73. +34 −0 docpad/documents/confirm/resizable.html.eco
  74. +34 −0 docpad/documents/confirm/resizeTo.html.eco
  75. +34 −0 docpad/documents/confirm/restore.html.eco
  76. +34 −0 docpad/documents/confirm/reverseButtons.html.eco
  77. +34 −0 docpad/documents/confirm/startMaximized.html.eco
  78. +34 −0 docpad/documents/confirm/transition.html.eco
  79. +34 −0 docpad/documents/confirm/unpin.html.eco
  80. +1 −0 docpad/documents/index.html.eco
  81. +35 −0 docpad/documents/notification/callback.html.eco
  82. +35 −0 docpad/documents/notification/delay.html.eco
  83. +35 −0 docpad/documents/notification/dismiss.html.eco
  84. +35 −0 docpad/documents/notification/dismissOthers.html.eco
  85. +35 −0 docpad/documents/notification/ondismiss.html.eco
  86. +35 −0 docpad/documents/notification/push.html.eco
  87. +35 −0 docpad/documents/notification/setContent.html.eco
  88. +4 −58 docpad/documents/notifier.html.eco
  89. +33 −0 docpad/documents/notifier/delay.html.eco
  90. +33 −0 docpad/documents/notifier/dismissAll.html.eco
  91. +33 −0 docpad/documents/notifier/error.html.eco
  92. +33 −0 docpad/documents/notifier/message.html.eco
  93. +33 −0 docpad/documents/notifier/notify.html.eco
  94. +33 −0 docpad/documents/notifier/position.html.eco
  95. +33 −0 docpad/documents/notifier/success.html.eco
  96. +33 −0 docpad/documents/notifier/warning.html.eco
  97. +5 −63 docpad/documents/prompt.html.eco
  98. +34 −0 docpad/documents/prompt/autoReset.html.eco
  99. +34 −0 docpad/documents/prompt/basic.html.eco
  100. +34 −0 docpad/documents/prompt/bringToFront.html.eco
  101. +34 −0 docpad/documents/prompt/closable.html.eco
  102. +34 −0 docpad/documents/prompt/closableByDimmer.html.eco
  103. +34 −0 docpad/documents/prompt/closeOthers.html.eco
  104. +34 −0 docpad/documents/prompt/destroy.html.eco
  105. +34 −0 docpad/documents/prompt/frameless.html.eco
  106. +34 −0 docpad/documents/prompt/isMaximized.html.eco
  107. +34 −0 docpad/documents/prompt/isModal.html.eco
  108. +34 −0 docpad/documents/prompt/isOpen.html.eco
  109. +34 −0 docpad/documents/prompt/isPinned.html.eco
  110. +34 −0 docpad/documents/prompt/labels.html.eco
  111. +34 −0 docpad/documents/prompt/maximizable.html.eco
  112. +34 −0 docpad/documents/prompt/maximize.html.eco
  113. +34 −0 docpad/documents/prompt/message.html.eco
  114. +34 −0 docpad/documents/prompt/modal.html.eco
  115. +34 −0 docpad/documents/prompt/movable.html.eco
  116. +34 −0 docpad/documents/prompt/moveBounded.html.eco
  117. +34 −0 docpad/documents/prompt/moveTo.html.eco
  118. +34 −0 docpad/documents/prompt/oncancel.html.eco
  119. +34 −0 docpad/documents/prompt/onclose.html.eco
  120. +34 −0 docpad/documents/prompt/onfocus.html.eco
  121. +34 −0 docpad/documents/prompt/onok.html.eco
  122. +34 −0 docpad/documents/prompt/onshow.html.eco
  123. +34 −0 docpad/documents/prompt/overflow.html.eco
  124. +34 −0 docpad/documents/prompt/padding.html.eco
  125. +34 −0 docpad/documents/prompt/pin.html.eco
  126. +34 −0 docpad/documents/prompt/pinnable.html.eco
  127. +34 −0 docpad/documents/prompt/resizable.html.eco
  128. +34 −0 docpad/documents/prompt/resizeTo.html.eco
  129. +34 −0 docpad/documents/prompt/restore.html.eco
  130. +34 −0 docpad/documents/prompt/reverseButtons.html.eco
  131. +34 −0 docpad/documents/prompt/startMaximized.html.eco
  132. +34 −0 docpad/documents/prompt/transition.html.eco
  133. +34 −0 docpad/documents/prompt/type.html.eco
  134. +34 −0 docpad/documents/prompt/unpin.html.eco
  135. +1 −3 docpad/documents/semantic.html
  136. +135 −63 docpad/files/build/alertify.js
  137. +2 −2 docpad/files/build/alertify.min.js
  138. BIN docpad/files/build/alertifyjs.zip
  139. +1 −1 docpad/files/css/semantic.min.css
  140. +1 −1 docpad/files/css/site.min.css
  141. +2 −1 docpad/files/js/semantic.min.js
  142. +8 −8 docpad/layouts/default.html.eco
  143. +1 −0 docpad/partials/ad.html.eco
  144. +56 −0 docpad/partials/menu.html.eco
  145. +52 −14 docpad/partials/segment.html.eco
View
@@ -42,12 +42,12 @@ docpadConfig = {
'/build/css/alertify.css'
'/build/css/themes/default.css'
'/css/normalize.min.css'
- '/css/font-awesome.min.css'
+ 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'
'/css/semantic.min.css'
'http://fonts.googleapis.com/earlyaccess/droidarabickufi.css'
'http://fonts.googleapis.com/css?family=Droid+Sans:400,700'
'/css/site.min.css',
- 'styles/style.css'
+ '/styles/style.css'
]
# The website's scripts
@@ -80,20 +80,50 @@ docpadConfig = {
items = items.sort (a,b) ->
if (a.name > b.name)
1
- else if (a.name < b.name || a.type == 'm')
+ else if (a.name < b.name) # || a.type == 'm')
-1
else
0
# sort by type
- .sort (a,b) ->
- if (a.type > b.type)
- -1
- else if (a.type < b.type)
+ # .sort (a,b) ->
+ # if (a.type > b.type)
+ # -1
+ # else if (a.type < b.type)
+ # 1
+ # else
+ # 0
+ items
+
+ # Get the documentation data
+ getData: (name,type) ->
+ items = this.getDocData(name,null,false)
+
+ if name.indexOf('notifi') < 0
+ items = items.concat(this.getDocData('dialog',name,false))
+
+ items = (item for item in items when item.type == type)
+
+ items.sort (a,b) ->
+ if (a.name > b.name)
1
+ else if (a.name < b.name) # || a.type == 'm')
+ -1
else
0
- items
-
+
+ # Get the documentation of single prop
+ getDataItem: (name,prop) ->
+ items = this.getDocData(name,null,false)
+ isDialog = name.indexOf('notifi') < 0
+ if isDialog
+ items = items.concat(this.getDocData('dialog',name,false))
+
+ items = (item for item in items when item.name == prop)
+
+ items[0].isDialog = isDialog
+
+ items[0]
+
# Get the prepared site/document title
# Often we would like to specify particular formatting to our page's title
# we can apply that formatting here
@@ -18,7 +18,7 @@
},
{
- "type": "p",
+ "type": "e",
"name": "onok",
"label": "{ Function }",
"desc": "Gets or sets a callback function to be invoked when the user clicks 'Ok' button or closes the dialog.",
@@ -38,6 +38,15 @@
"script": "alertify.{component}('Movable: false').set('movable', false);",
"toggle": { "value": false }
},
+
+ {
+ "type": "p",
+ "name": "moveBounded",
+ "label": "{Boolean}",
+ "desc": "Gets or sets a value indicating whether a movable dialog is allowed to go off-screen or not.",
+ "defaultValue": "false",
+ "script": "alertify.{component}('Try moving this off the screen').set({'movable':true, 'moveBounded': true});"
+ },
{
"type": "p",
@@ -113,7 +122,7 @@
},
{
- "type": "p",
+ "type": "e",
"name": "onshow",
"label": "{Function}",
"desc": "Gets or sets a function to invoke when the dialog is shown",
@@ -125,7 +134,7 @@
},
{
- "type": "p",
+ "type": "e",
"name": "onclose",
"label": "{Function}",
"desc": "Gets or sets a function to invoke when the dialog is closed",
@@ -135,7 +144,7 @@
},
{
- "type": "p",
+ "type": "e",
"name": "onfocus",
"label": "{Function}",
"desc": "Gets or sets a function to invoke when the dialog is focused for the first time.",
@@ -303,6 +312,16 @@
"exec": true,
"remark": "The dialog must be <b>resizable</b> and it can be resized to a <b>minimum width</b> equal to the initial display width and a <b>minimum height</b> equal to the sum of header and footer heights. <br/> You can also pass a percent of the document <code>clientWidth</code>/<code>clientHeight</code>."
},
+
+ {
+ "type": "m",
+ "name": "bringToFront",
+ "label": "chainable",
+ "desc": "Brings the dialog to front of other dialogs (Will do nothing if the dialog is behind an open modal).",
+ "params": [ ],
+ "script": "alertify.{component}().bringToFront();",
+ "exec": false
+ },
{
"type": "m",
@@ -110,6 +110,7 @@
"label": "",
"desc": "Dismisses all open notifications.",
"params": [],
- "script": ["alertify.dismissAll();"]
+ "script": ["alertify.dismissAll();"],
+ "remark": "To distinguish between an auto-dismiss event or a click event, the callback is passed a boolean flag indicating if the message was clicked."
}
]
@@ -2,7 +2,11 @@
layout: 'default'
hljs: 'light'
component: 'alert'
+title: 'Alert Dialog'
+prop: '#prop#'
+propType: '#type#'
---
+
<section class="blue">
<div class="content">
<div class="grid two">
@@ -21,8 +25,8 @@ component: 'alert'
<section class="dark">
<div class="content">
<!--Defult usage-->
- <div class="segment">
- <h1><i class="fa fa-flash"></i> Default usage</h1>
+ <div class="segment has-menu">
+ <h1><i class="fa fa-book"></i> Default usage</h1>
<hr />
<p>You create an alert dialog by invoking <code> alertify.alert(...)</code></p>
@@ -64,65 +68,12 @@ alertify.alert('This is an alert message!');
</div>
</div>
- <!--Settings-->
- <div class="segment">
-
- <h1><i class="fa fa-book"></i> API reference </h1>
- <hr />
-
- <%for segment in @getDocData(@document.component):%>
- <%- @partial('segment',false, segment) %>
- <%end%>
-
- <br /><br />
+<%- @partial('menu', true) %>
- <div class="segment">
- <div class="ui small info message">
- <div class="content">
- <p>
- <i class="fa fa-info-circle"></i>
- You can use the <code>.setting()</code> method to set multiple values at once, Also works as a getter. Or use <code>.get()</code> and <code>.set()</code> aliases.
- </p>
- </div>
- </div>
- <div>
-<pre>
-<code class="lang-javascript">
-//get the closable setting value.
-var closable = alertify.alert().setting('closable');
-//grab the dialog instance using its parameter-less constructor then set multiple settings at once.
-alertify.alert()
- .setting({
- 'label':'Agree',
- 'message': 'This dialog is : ' + (closable ? ' ' : ' not ') + 'closable.' ,
- 'onok': function(){ alertify.success('Great');}
- }).show();
-</code>
-</pre>
- <div class="RIGHT">
- <a class="button example" href="javascript:void(0);">
- <span> Run </span>
- </a>
- </div>
- </div>
- </div>
- </div><!--//Settings-->
- <!--Common Settings-->
- <div class="segment">
- <h1><i class="fa fa-book"></i> API reference (Common)</h1>
- <hr />
- <p>This refers to settings/methods that are common to all dialogs.</p>
-
- <%for segment in @getDocData('dialog', @document.component):%>
- <%- @partial('segment', false, segment) %>
- <%end%>
- </div><!--//Common Settings-->
-
- <br/>
- <br/>
+
</div>
</section>
@@ -0,0 +1,37 @@
+---
+layout: 'default'
+hljs: 'light'
+component: 'alert'
+prop: 'autoReset'
+propType: 'p'
+label: '{Boolean}'
+---
+
+<section class="blue">
+ <div class="content">
+ <div class="grid two">
+ <div class="column">
+ <h1> Alert Dialog</h1>
+ An alert dialog is often used if you want to make sure information comes through to the user.
+ When an alert dialog pops up, the user will have to click "OK" to proceed.
+ </div>
+ <div class="right column">
+ <%- @partial('ad') %>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="dark">
+ <div class="content">
+ <!--Settings-->
+ <div class="segment has-menu">
+ <%- @partial('segment',false, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+ <!--//Settings-->
+ <%- @partial('menu', true, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+</section>
+
+
+
@@ -0,0 +1,37 @@
+---
+layout: 'default'
+hljs: 'light'
+component: 'alert'
+prop: 'basic'
+propType: 'p'
+label: '{Boolean}'
+---
+
+<section class="blue">
+ <div class="content">
+ <div class="grid two">
+ <div class="column">
+ <h1> Alert Dialog</h1>
+ An alert dialog is often used if you want to make sure information comes through to the user.
+ When an alert dialog pops up, the user will have to click "OK" to proceed.
+ </div>
+ <div class="right column">
+ <%- @partial('ad') %>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="dark">
+ <div class="content">
+ <!--Settings-->
+ <div class="segment has-menu">
+ <%- @partial('segment',false, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+ <!--//Settings-->
+ <%- @partial('menu', true, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+</section>
+
+
+
@@ -0,0 +1,37 @@
+---
+layout: 'default'
+hljs: 'light'
+component: 'alert'
+prop: 'bringToFront'
+propType: 'm'
+label: 'chainable'
+---
+
+<section class="blue">
+ <div class="content">
+ <div class="grid two">
+ <div class="column">
+ <h1> Alert Dialog</h1>
+ An alert dialog is often used if you want to make sure information comes through to the user.
+ When an alert dialog pops up, the user will have to click "OK" to proceed.
+ </div>
+ <div class="right column">
+ <%- @partial('ad') %>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="dark">
+ <div class="content">
+ <!--Settings-->
+ <div class="segment has-menu">
+ <%- @partial('segment',false, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+ <!--//Settings-->
+ <%- @partial('menu', true, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+</section>
+
+
+
@@ -0,0 +1,37 @@
+---
+layout: 'default'
+hljs: 'light'
+component: 'alert'
+prop: 'closable'
+propType: 'p'
+label: '{Boolean}'
+---
+
+<section class="blue">
+ <div class="content">
+ <div class="grid two">
+ <div class="column">
+ <h1> Alert Dialog</h1>
+ An alert dialog is often used if you want to make sure information comes through to the user.
+ When an alert dialog pops up, the user will have to click "OK" to proceed.
+ </div>
+ <div class="right column">
+ <%- @partial('ad') %>
+ </div>
+ </div>
+ </div>
+</section>
+
+<section class="dark">
+ <div class="content">
+ <!--Settings-->
+ <div class="segment has-menu">
+ <%- @partial('segment',false, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+ <!--//Settings-->
+ <%- @partial('menu', true, @getDataItem(@document.component, @document.prop)) %>
+ </div>
+</section>
+
+
+
Oops, something went wrong.

0 comments on commit d24a613

Please sign in to comment.