_form.html 3.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394
  1. {% if req.form.errors %}
  2. <div class="alert alert-danger">
  3. <ul>
  4. {% for error in req.form.errors %}
  5. <li>{{ error }}</li>
  6. {% endfor %}
  7. </ul>
  8. </div>
  9. {% endif %}
  10. <div id="form-box">
  11. <div class="row">
  12. <div class="col-md-8">
  13. <a href="javascript:;" id="form-box-full">最大化切り換え</a>
  14. <form action="{{ path }}/edit" method="post" class="">
  15. <div class="form-group">
  16. <textarea name="pageForm[body]" class="form-control form-body-height" id="form-body">{% if pageForm.body %}{{ pageForm.body }}{% elseif not revision.body %}# {{ path|path2name }}{% else %}{{ revision.body }}{% endif %}</textarea>
  17. </div>
  18. <input type="hidden" name="pageForm[format]" value="markdown" id="form-format">
  19. <input type="hidden" name="pageForm[currentRevision]" value="{{ pageForm.currentRevision|default(revision._id.toString()) }}">
  20. <div class="form-group form-inline">
  21. <select name="pageForm[grant]" class="form-control">
  22. {% for grantId, grantLabel in consts.pageGrants %}
  23. <option value="{{ grantId }}" {% if (pageForm.grant && grantId == pageForm.grant) || (page.grant == grantId ) %}selected{% endif %}>{{ grantLabel }}</option>
  24. {% endfor %}
  25. </select>
  26. <input type="submit" class="btn btn-primary" id="edit-form-submit" value="ページを更新" />
  27. </div>
  28. </form>
  29. </div>
  30. <div class="col-md-4">
  31. <div id="preview-body" class="wiki preview-body">
  32. </div>
  33. </div>
  34. </div>
  35. <script type="text/javascript">
  36. $(function() {
  37. // preview watch
  38. var prevContent = "";
  39. var watchTimer = setInterval(function() {
  40. $('#preview-body').height($('#form-body').height() + 'px');
  41. var content = $('#form-body').val();
  42. if (prevContent != content) {
  43. var renderer = new Crowi.renderer('#form-body', $('#form-format').val(), '#preview-body');
  44. renderer.render();
  45. prevContent = content;
  46. }
  47. }, 1000);
  48. function maximizeFormBox()
  49. {
  50. $('#form-box').addClass('form-maximized');
  51. $('#form-body').height($(window).height() - 150 + 'px');
  52. }
  53. function minimizeFormBox()
  54. {
  55. $('#form-box').removeClass('form-maximized');
  56. $('#form-body').height('300px');
  57. }
  58. $('#form-box-full').toggle(function()
  59. {
  60. maximizeFormBox();
  61. }, function() {
  62. minimizeFormBox();
  63. });
  64. // tabs handle
  65. $('textarea#form-body').on('keydown', function(event){
  66. var self = $(this)
  67. start = this.selectionStart,
  68. end = this.selectionEnd
  69. val = self.val();
  70. if (event.keyCode === 9) {
  71. // tab
  72. event.preventDefault();
  73. self.val(
  74. val.substring(0, start)
  75. + ' '
  76. + val.substring(end, val.length)
  77. );
  78. this.selectionStart = start + 4;
  79. this.selectionEnd = start + 4;
  80. } else if (event.keyCode === 27) {
  81. // escape
  82. self.blur();
  83. }
  84. });
  85. });
  86. </script>
  87. </div>