index.html 7.0KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset='utf-8' />
  5. <meta name="viewport" content="width=device-width, user-scalable=no">
  6. <title>Tracim</title>
  7. <link rel='shortcut icon' href='favicon.ico'>
  8. <link rel="stylesheet" type="text/css" href="/font/font-awesome-4.7.0/css/font-awesome.css">
  9. <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700" rel="stylesheet">
  10. <!--
  11. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
  12. -->
  13. <link rel="stylesheet" type="text/css" href="/asset/hamburger/hamburgers.min.css">
  14. <link rel="stylesheet" type="text/css" href="/dev/bootstrap-4.0.0-beta.css">
  15. </head>
  16. <body>
  17. <div id='content'></div>
  18. <script src='/tracim.vendor.bundle.js'></script>
  19. <script src='/tracim.app.entry.js'></script>
  20. <!--
  21. <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  22. <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
  23. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
  24. -->
  25. <script src='/app/pageHtml.app.js'></script>
  26. <script src='/app/thread.app.js'></script>
  27. <script src='/app/file.app.js'></script>
  28. <script src="/dev/jquery-3.2.1.js"></script>
  29. <script src="/dev/popper-1.12.3.js"></script>
  30. <script src="/dev/bootstrap-4.0.0-beta.2.js"></script>
  31. <script type="text/javascript" src="/asset/tinymce/jquery.tinymce.min.js"></script>
  32. <script type="text/javascript" src="/asset/tinymce/tinymce.min.js"></script>
  33. <script type='text/javascript'>
  34. let prevSelectedApp = {name: ''} // default value
  35. GLOBAL_renderApp = app => {
  36. console.log('GLOBAL_renderApp => ', app)
  37. const selectedApp = (() => {
  38. switch (app.config.name) {
  39. case 'PageHtml':
  40. return appPageHtml
  41. case 'Thread':
  42. return appThread
  43. case 'File':
  44. console.log('spoted')
  45. return appFile
  46. }
  47. })()
  48. if (selectedApp.isRendered) {
  49. GLOBAL_dispatchEvent(`${app.config.name}_showApp`, app)
  50. } else {
  51. selectedApp.renderApp(app)
  52. selectedApp.isRendered = true
  53. prevSelectedApp.isRendered = false
  54. prevSelectedApp = selectedApp
  55. }
  56. }
  57. GLOBAL_dispatchEvent = (type, data) => {
  58. var event = new CustomEvent('appCustomEvent', {detail: {type, data}})
  59. document.dispatchEvent(event)
  60. }
  61. GLOBAL_hideApp = appName => {
  62. switch (appName) {
  63. case 'PageHtml':
  64. GLOBAL_dispatchEvent('PageHtml_hideApp', {}); break
  65. case 'Thread':
  66. GLOBAL_dispatchEvent('Thread_hideApp', {}); break
  67. case 'File':
  68. GLOBAL_dispatchEvent('File_hideApp', {}); break
  69. }
  70. }
  71. </script>
  72. <script type='text/javascript'>
  73. $(document).ready(function () {
  74. wysiwyg = function () {
  75. function base64EncodeAndTinyMceInsert (files) {
  76. for (var i = 0; i < files.length; i++) {
  77. if (files[i].size > 1000000)
  78. files[i].allowed = confirm(files[i].name + " fait plus de 1mo et peut prendre du temps à insérer, voulez-vous continuer ?")
  79. }
  80. for (var i = 0; i < files.length; i++) {
  81. if (files[i].allowed !== false && files[i].type.match('image.*')) {
  82. var img = document.createElement('img')
  83. var fr = new FileReader()
  84. fr.readAsDataURL(files[i])
  85. fr.onloadend = function (e) {
  86. img.src = e.target.result
  87. tinymce.activeEditor.execCommand('mceInsertContent', false, img.outerHTML)
  88. }
  89. }
  90. }
  91. }
  92. // HACK: The tiny mce source code modal contain a textarea, but we
  93. // can't edit it (like it's readonly). The following solution
  94. // solve the bug: https://stackoverflow.com/questions/36952148/tinymce-code-editor-is-readonly-in-jtable-grid
  95. $(document).on('focusin', function(e) {
  96. if ($(e.target).closest(".mce-window").length) {
  97. e.stopImmediatePropagation();
  98. }
  99. });
  100. tinymce.init({
  101. selector: 'textarea',
  102. height: 130,
  103. // width: 530,
  104. menubar: false,
  105. resize: false,
  106. plugins: [
  107. 'advlist autolink lists link image charmap print preview anchor textcolor',
  108. 'searchreplace visualblocks code fullscreen',
  109. 'insertdatetime media table contextmenu paste code help'
  110. ],
  111. toolbar: 'insert | formatselect | bold italic underline strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify | numlist bullist outdent indent | table | code ',
  112. content_css: [
  113. '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
  114. '//www.tinymce.com/css/codepen.min.css'
  115. ],
  116. setup: function ($editor) {
  117. //////////////////////////////////////////////
  118. // add custom btn to handle image by selecting them with system explorer
  119. $editor.addButton('customInsertImage', {
  120. icon: 'mce-ico mce-i-image',
  121. title: 'Image',
  122. onclick: function () {
  123. if ($('#hidden_tinymce_fileinput').length > 0) $('#hidden_tinymce_fileinput').remove()
  124. fileTag = document.createElement('input')
  125. fileTag.id = 'hidden_tinymce_fileinput'
  126. fileTag.type = 'file'
  127. $('body').append(fileTag)
  128. $('#hidden_tinymce_fileinput').on('change', function () {
  129. base64EncodeAndTinyMceInsert($(this)[0].files)
  130. })
  131. $('#hidden_tinymce_fileinput').click()
  132. }
  133. })
  134. //////////////////////////////////////////////
  135. // Handle drag & drop image into TinyMce by encoding them in base64 (to avoid uploading them somewhere and keep saving comment in string format)
  136. $editor
  137. .on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
  138. e.preventDefault()
  139. e.stopPropagation()
  140. })
  141. .on('drop', function(e) {
  142. base64EncodeAndTinyMceInsert(e.dataTransfer.files)
  143. })
  144. }
  145. });
  146. }
  147. wysiwyg()
  148. })
  149. </script>
  150. </body>
  151. </html>