create-page.html 8.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. <!DOCTYPE html>
  2. <html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout/layout}">
  3. <head>
  4. <title>Create New Store Page</title>
  5. <script src="/js/create-page.js" defer></script>
  6. </head>
  7. <body>
  8. <div layout:fragment="content" class="ui container">
  9. <br />
  10. <h1 class="ui header">Create New Store Page</h1>
  11. <p>
  12. Creating a store page starts with a draft. Submitting your asset page at this time will <b>not</b> put your asset page on the asset store. Your
  13. page will be saved and allow you to make changes until you are ready to submit it for pageReview. When you are sure your page is complete you
  14. may then <b>Submit Your Asset for Review</b>. Once your asset has been reviewed you will recieve an email notifying you of the outcome. If your
  15. submission is successful it will become a live page on the store available for the public to view.
  16. </p>
  17. <p>The process is as follows:</p>
  18. <div class="ui list">
  19. <div class="item">
  20. <i class="green check icon"></i>
  21. <div class="content">Create a draft page (you are here).</div>
  22. </div>
  23. <div class="item">
  24. <i class="blue angle right icon"></i>
  25. <div class="content">Spend as much time as you like editing the page until you feel the page is ready to be reviewed.</div>
  26. </div>
  27. <div class="item">
  28. <i class="blue angle right icon"></i>
  29. <div class="content">
  30. Submit your page for pageReview.
  31. <div class="list">
  32. <div class="item">
  33. <i class="blue angle right icon"></i>
  34. <div class="content">If your page is approved it will become live on the store and visible to everybody.</div>
  35. </div>
  36. <div class="item">
  37. <i class="blue angle right icon"></i>
  38. <div class="content">
  39. If your page is rejected you will be emailed notifying you of the reason(s) and information on how to resolve the problems.
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. <form class="ui form" id="newAssetForm">
  47. <div class="ui divider"></div>
  48. <h3>Software Title</h3>
  49. <p>Choose a title for your software. Use Title Case text formatting.</p>
  50. <div class="field">
  51. <div class="ui right labeled input">
  52. <input id="titleField" type="text" placeholder="My Awesome Software" name="title" maxlength="64" />
  53. <div id="titleCharCount" class="ui label">
  54. 0 / 64
  55. </div>
  56. </div>
  57. </div>
  58. <div class="ui divider"></div>
  59. <!-- Asset Type -->
  60. <div>
  61. <h3>Software Type</h3>
  62. <p>
  63. There are three types of software you may publish to the store. Once you have chosen a type you <b>cannot change</b>
  64. it in the future.
  65. </p>
  66. <div class="ui bulleted list">
  67. <div class="item">
  68. <div class="content">
  69. <div class="header">Open Source</div>
  70. Open source software is freely available to anybody, usually under a permissive license that allows others to use your code
  71. commercially.
  72. </div>
  73. </div>
  74. <div class="item">
  75. <div class="content">
  76. <div class="header">Sponsored</div>
  77. Sponsored software is open source, but allow others to pay one-time payments to support the developer if they wish. Payments are
  78. not mandatory to use the software, and no restrictions apply if no payment is given. Payments are completely optional and at the
  79. discretion of the user.
  80. </div>
  81. </div>
  82. <div class="item">
  83. <div class="content">
  84. <div class="header">Paid</div>
  85. Paid software is sold for a fixed price and must be purchased in order to obtain and use it.
  86. </div>
  87. </div>
  88. </div>
  89. <div class="grouped fields">
  90. <label for="assetType">Please select the type of asset you wish to publish:</label>
  91. <div class="field">
  92. <div class="ui radio checkbox softwareType">
  93. <input type="radio" name="softwareType" value="opensource" checked="checked" tabindex="0" class="hidden" />
  94. <label>Open Source</label>
  95. </div>
  96. </div>
  97. <div class="field">
  98. <div class="ui radio checkbox softwareType">
  99. <input type="radio" name="softwareType" value="sponsored" tabindex="1" class="hidden" th:disabled="${!user.administrator}" />
  100. <label>Sponsored</label>
  101. </div>
  102. </div>
  103. <div class="field">
  104. <div class="ui radio checkbox softwareType">
  105. <input type="radio" name="softwareType" value="paid" tabindex="2" class="hidden" th:disabled="${!user.administrator}" />
  106. <label>Paid</label>
  107. </div>
  108. </div>
  109. </div>
  110. <div class="ui icon message">
  111. <i class="info circle icon"></i>
  112. <div class="content">
  113. <div class="header">
  114. Information
  115. </div>
  116. <p>
  117. Sponsored and Paid software pages are currently unavailable. We are working toward providing these features in the near future.
  118. </p>
  119. </div>
  120. </div>
  121. </div>
  122. <!-- END Asset Type -->
  123. <div class="ui divider"></div>
  124. <!-- Git Repository data -->
  125. <div id="git-repository-data">
  126. <!-- Git Repository -->
  127. <h3>Git Repository</h3>
  128. <p>
  129. Specify the git repository that contains the source code of your work. Your repository must be hosted on either
  130. <i class="github icon"></i><a href="https://github.com" target="_blank">GitHub</a>, <i class="bitbucket icon"></i><a href="https://bitbucket.org" target="_blank">BitBucket</a> or <i class="gitlab icon"></i><a href="https://gitlab.com"
  131. target="_blank">GitLab</a>.
  132. </p>
  133. <div class="field">
  134. <div class="ui input">
  135. <input type="text" name="gitRepo" placeholder="e.g. https://github.com/jMonkeyEngine/jmonkeyengine" />
  136. </div>
  137. </div>
  138. <!-- END Git Repository -->
  139. <div class="ui divider"></div>
  140. <!-- Forked Work - Open Source Assets -->
  141. <h3>Forked Repositories</h3>
  142. <p>
  143. If your software is a fork of another repository your project will appear in searches and the "forks" section of other assets that have
  144. forked this repository.
  145. <b>If your project is a fork you MUST specify it as such, even if the original repository or other forks are not listed on the asset
  146. store.</b>
  147. </p>
  148. <div class="field">
  149. <div class="ui checkbox" id="forkedCheckBox">
  150. <input type="checkbox" name="forked" />
  151. <label>This project is a fork of another project</label>
  152. </div>
  153. </div>
  154. <div class="field hidden" id="parentRepoInput">
  155. <label>Original repository url</label>
  156. <div class="ui input">
  157. <input type="text" name="forkedRepo" placeholder="e.g. https://github.com/jMonkeyEngine/jmonkeyengine" />
  158. </div>
  159. </div>
  160. <!-- END: Forked Work - Open Source Assets -->
  161. <div class="ui divider"></div>
  162. </div>
  163. <!-- END Git Repository data -->
  164. <!-- Terms and Conditions -->
  165. <div>
  166. <h3>Terms and Conditions</h3>
  167. <p>Please ensure you fully read and understand the <a href="/legal/terms/">Terms and Conditions</a>.</p>
  168. <div class="required field">
  169. <div class="ui checkbox">
  170. <input type="checkbox" name="termsAccepted" />
  171. <label>I agree to the Terms and Conditions</label>
  172. </div>
  173. </div>
  174. </div>
  175. <!-- END: Terms and Conditions -->
  176. <div class="ui divider"></div>
  177. <div class="ui green button" id="submitAssetButton"><i class="plus icon"></i>Create New Draft</div>
  178. </form>
  179. <br />
  180. <br />
  181. <script type="text/javascript">
  182. let titleLength = 0;
  183. let titleMax = 64;
  184. $("#titleField").keyup(function(event) {
  185. titleLength = $(this).val().length;
  186. $("#titleCharCount").html(titleLength + " / 64");
  187. });
  188. $("#titleField").keypress(function(event) {
  189. if (titleLength > titleMax) {
  190. event.preventDefault();
  191. }
  192. });
  193. let contentLength = 0;
  194. let contentMax = 10000;
  195. $("#descriptionTextArea").keyup(function(event) {
  196. contentLength = $(this).val().length;
  197. $("#descriptionCounter").html(numberWithCommas(contentLength) + " / " + numberWithCommas(contentMax));
  198. });
  199. $("#descriptionTextArea").keypress(function(event) {
  200. if (contentLength > contentMax) {
  201. event.preventDefault();
  202. trimDescription();
  203. }
  204. });
  205. // prevent paste
  206. $("#descriptionTextArea").bind("paste", function(event) {
  207. if (contentLength > contentMax) {
  208. event.preventDefault();
  209. trimDescription();
  210. }
  211. });
  212. function trimDescription() {
  213. var text = $("#descriptionTextArea").val();
  214. text = text.substr(0, contentMax);
  215. $("#descriptionTextArea").val(text);
  216. }
  217. // https://stackoverflow.com/a/2901298
  218. function numberWithCommas(x) {
  219. return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  220. }
  221. </script>
  222. </div>
  223. </body>
  224. </html>