view-page.js 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398
  1. var app = new Vue({
  2. el: "#app",
  3. data: {
  4. userId: "",
  5. pageId: "",
  6. pageState: "",
  7. preview: false,
  8. page: {},
  9. reviewData: [],
  10. // dependencyPages: [],
  11. // forks: [],
  12. // addons: [],
  13. authorStats: {
  14. userProfile: {},
  15. registerDuration: 0,
  16. pageCount: 0,
  17. reviewCount: 0,
  18. averateRating: 0.0
  19. },
  20. pageData: {
  21. dependsOn: [], // store pages this software depends on.
  22. addons: [], // store pages that use this software.
  23. forks: [] // forks of the same github repository.
  24. }
  25. },
  26. mounted: function() {
  27. this.userId = $("#userId").val();
  28. this.pageId = $("#pageId").val();
  29. this.pageState = $("#pageState").val();
  30. this.preview =
  31. $("#preview")
  32. .val()
  33. .toLowerCase() == "true";
  34. this.getPage();
  35. this.fetchReviews();
  36. },
  37. updated: function() {
  38. $(".tooltip")
  39. .popup("destroy")
  40. .popup();
  41. $(".ui.accordion")
  42. .accordion("destroy")
  43. .accordion();
  44. mountCarousel();
  45. mountMarkdown(this.page.details.description);
  46. },
  47. methods: {
  48. getPage: function() {
  49. let pageUrl = "/api/page/";
  50. if (this.pageState.length > 0) {
  51. switch (this.pageState) {
  52. case "Draft":
  53. pageUrl += "draft/";
  54. break;
  55. case "Amendment":
  56. pageUrl += "amendment/";
  57. break;
  58. }
  59. }
  60. $.ajax({
  61. url: pageUrl + this.pageId,
  62. method: "GET",
  63. success: function(data) {
  64. app.page = data;
  65. if (!app.preview) {
  66. app.getPageData();
  67. app.getAuthorStats();
  68. }
  69. },
  70. error: toast.defaultAjaxError,
  71. complete: function(jqXHR, textStatus) {
  72. $("#pageLoader").removeClass("active");
  73. }
  74. });
  75. },
  76. getPageData: function() {
  77. // gets additional data about this page: forks, addons, etc.
  78. $.ajax({
  79. url: "/api/page/data/" + this.pageId,
  80. method: "GET",
  81. success: function(data) {
  82. app.pageData = data;
  83. },
  84. error: toast.defaultAjaxError
  85. });
  86. },
  87. getAuthorStats: function() {
  88. let userId = app.page.owner.id;
  89. $.ajax({
  90. url: "/api/page/stats/" + userId,
  91. method: "GET",
  92. success: function(data) {
  93. app.authorStats = data;
  94. app.getRegisteredDuration(data.userProfile.registerDate);
  95. },
  96. error: toast.defaultAjaxError
  97. });
  98. },
  99. getRegisteredDuration: function(registerDate) {
  100. let now = moment(new Date().getTime());
  101. let registered = moment(registerDate);
  102. let diff = now.diff(registered, "days");
  103. this.registerDuration = diff;
  104. },
  105. getBackgroundImageStyle: function() {
  106. var backgroundIndex = app.page.mediaLinks.backgroundImageIndex;
  107. if (backgroundIndex == -1) {
  108. return "";
  109. }
  110. var imageCount = app.page.mediaLinks.imageIds.split(',').length;
  111. if (backgroundIndex >= imageCount) {
  112. return "";
  113. }
  114. var style = "background-image: linear-gradient(to bottom, rgba(255,255,255,0.7) 0%,rgba(255,255,255,0.7) 100%), url(/image/" + app.page.mediaLinks.imageIds.split(',')[backgroundIndex] + ");";
  115. style += "background-size: cover;";
  116. style += "background-attachment: fixed;";
  117. style += "background-position: center;";
  118. return style;
  119. },
  120. /*
  121. getDependencyPages: function() {
  122. let storeIds = app.page.buildData.storeDependencies.split(",");
  123. for (let i = 0; i < storeIds.length; i++) {
  124. $.ajax({
  125. url: "/api/page/" + storeIds[i],
  126. method: "GET",
  127. success: function(data) {
  128. // app.dependencyPages = data;
  129. app.dependencyPages.push(data);
  130. },
  131. error: function(xhr, status, error) {},
  132. complete: function(jqXHR, textStatus) {}
  133. });
  134. }
  135. },
  136. getPageAddons: function() {
  137. $.ajax({
  138. url: "/api/page/dependencies/" + app.page.id,
  139. method: "GET",
  140. success: function(data) {
  141. app.addons = data;
  142. },
  143. error: toast.defaultAjaxError
  144. });
  145. },
  146. getForks: function() {
  147. $.ajax({
  148. url: "/api/asset/forks/" + assetId,
  149. method: "GET",
  150. success: function(data) {
  151. app.forks = data;
  152. },
  153. error: toast.defaultAjaxError,
  154. complete(jqXHR, textStatus) {}
  155. });
  156. },
  157. */
  158. showWriteReviewModal() {
  159. $("#reviewRating").rating({
  160. initialRating: 1,
  161. maxRating: 5,
  162. onRate: function(rating) {
  163. $("#reviewRatingVal").val("" + rating);
  164. }
  165. });
  166. $("#writeReviewModal")
  167. .modal("destroy")
  168. .modal({
  169. onApprove: function() {
  170. let jsonData = {
  171. pageId: app.pageId,
  172. reviewContent: $("#newReviewContent").val(),
  173. rating: $("#reviewRatingVal").val()
  174. };
  175. jsonData = JSON.stringify(jsonData);
  176. $.ajax({
  177. url: "/api/review/",
  178. type: "POST",
  179. data: jsonData,
  180. contentType: "application/json; charset=utf-8",
  181. dataType: "json",
  182. success: function(newReview) {
  183. app._data.reviewData.unshift(newReview);
  184. },
  185. error: toast.defaultAjaxError
  186. });
  187. }
  188. })
  189. .modal("show");
  190. },
  191. fetchReviews: function() {
  192. $.ajax({
  193. url: "/api/review/page/" + this.pageId,
  194. method: "GET"
  195. }).done(responseData => {
  196. app.reviewData = responseData;
  197. });
  198. },
  199. deleteReview: function(id) {
  200. deleteReviewId = id;
  201. $("#deleteReviewModal")
  202. .modal("destroy")
  203. .modal({
  204. onApprove: function() {
  205. let formData = new FormData();
  206. formData.append("pageId", app.pageId);
  207. $.ajax({
  208. url: "/api/review/",
  209. type: "DELETE",
  210. data: formData,
  211. cache: false,
  212. contentType: false,
  213. processData: false,
  214. success: function(newReview) {
  215. app._data.reviewData.splice(deleteReviewId, 1);
  216. toast.info(null, "Review deleted successfully.", false);
  217. },
  218. error: toast.defaultAjaxError
  219. });
  220. }
  221. })
  222. .modal("show");
  223. },
  224. editReview: function(id) {
  225. editReviewId = id;
  226. let currentReview = this.reviewData[id];
  227. $("#edit_reviewRatingVal").val("" + currentReview.rating);
  228. // rating for "edit review"
  229. $("#edit_reviewRating").rating({
  230. initialRating: currentReview.rating,
  231. maxRating: 5,
  232. onRate: function(rating) {
  233. $("#edit_reviewRatingVal").val("" + rating);
  234. }
  235. });
  236. $("#edit_newReviewContent").val(currentReview.content);
  237. $("#editReviewModal")
  238. .modal("destroy")
  239. .modal({
  240. onApprove: function() {
  241. let jsonData = {
  242. pageId: app.pageId,
  243. reviewContent: $("#edit_newReviewContent").val(),
  244. rating: $("#edit_reviewRatingVal").val()
  245. };
  246. jsonData = JSON.stringify(jsonData);
  247. $.ajax({
  248. url: "/api/review/",
  249. type: "PUT",
  250. data: jsonData,
  251. contentType: "application/json; charset=utf-8",
  252. dataType: "json",
  253. success: function(newReview) {
  254. app._data.reviewData.splice(editReviewId, 1, newReview);
  255. },
  256. error: toast.defaultAjaxError
  257. });
  258. }
  259. })
  260. .modal("show");
  261. },
  262. getJitpackDependency() {
  263. // let githubRepo = /*[[${asset.gitRepository}]]*/ "";
  264. let githubRepo = this.page.openSourceData.gitRepository;
  265. let owner = githubRepo.replace("https://github.com/", "");
  266. owner = owner.substr(0, owner.lastIndexOf("/"));
  267. let name = githubRepo.substr(githubRepo.lastIndexOf("/") + 1).replace(".git", "");
  268. let version = "master-SNAPSHOT";
  269. let implementation = 'implementation "com.github.' + owner + ":" + name + ":" + version + '"';
  270. // $("#gradleDependency").text(implementation);
  271. return implementation;
  272. },
  273. getArrayLength(input) {
  274. // string.split(",") returns an array length of 1 for empty strings. This method returns 0 if the string is empty.
  275. if (input.length === 0) {
  276. return 0;
  277. }
  278. return input.split(",").length;
  279. },
  280. millisToDate: function(millis) {
  281. return moment(millis).format("dddd Do MMMM YYYY");
  282. }
  283. }
  284. });
  285. $(document).ready(function() {});
  286. // screenshots + videos carousel
  287. function mountCarousel() {
  288. let media = $("#carousel-links > a");
  289. let options = {
  290. container: "#gallery-carousel",
  291. carousel: true,
  292. slideshowInterval: 5000
  293. };
  294. // we might not have a screenshot or video in "preview" mode, and mounting without any links causes a JS error.
  295. if (media.length > 0) {
  296. blueimp.Gallery(media, options);
  297. }
  298. }
  299. function mountMarkdown(content) {
  300. let md = window
  301. .markdownit({
  302. linkify: true,
  303. typographer: true,
  304. quotes: "“”‘’",
  305. langPrefix: "language-",
  306. html: false,
  307. xhtmlOut: false,
  308. highlight: function(str, lang) {
  309. if (lang && hljs.getLanguage(lang)) {
  310. try {
  311. return '<pre class="hljs"><code>' + hljs.highlight(lang, str, true).value + "</code></pre>";
  312. } catch (__) {}
  313. }
  314. return '<pre class="hljs"><code>' + md.utils.escapeHtml(str) + "</code></pre>";
  315. }
  316. })
  317. .use(window.markdownitAbbr)
  318. .use(window.markdownitDeflist)
  319. .use(window.markdownitEmoji)
  320. .use(window.markdownitFootnote)
  321. .use(window.markdownitIns)
  322. .use(window.markdownitMark)
  323. .use(window.markdownitSub)
  324. .use(window.markdownitSup);
  325. md.renderer.rules.table_open = function() {
  326. return '<table class="ui celled table">\n';
  327. };
  328. md.renderer.rules["h1_open"] = function() {
  329. return '<h1 class="ui header">\n';
  330. };
  331. $("#page-content-div").html(md.render(content));
  332. }