Separate JavaScript from HTML template

gulpfile.js

@@ -51,6 +51,10 @@ var js = {
     'bower_components/reveal.js/js/reveal.js'
   ],
   revealDist: dirs.jsDist + '/crowi-reveal.js',
+  formSrc: [
+    'resource/js/crowi-form.js'
+  ],
+  formDist: dirs.jsDist + '/crowi-form.js',
   clientWatch: ['resource/js/**/*.js'],
   watch: ['test/**/*.test.js', 'app.js', 'lib/**/*.js'],
   lint: ['app.js', 'lib/**/*.js'],
@@ -68,6 +72,10 @@ gulp.task('js:concat', function() {
     .pipe(concat('crowi-reveal.js'))
     .pipe(gulp.dest(dirs.jsDist));
 
+  gulp.src(js.formSrc)
+    .pipe(concat('crowi-form.js'))
+    .pipe(gulp.dest(dirs.jsDist));
+
   return gulp.src(js.src)
     .pipe(concat('crowi.js'))
     .pipe(gulp.dest(dirs.jsDist));
@@ -79,6 +87,11 @@ gulp.task('js:min', ['js:concat'], function() {
     .pipe(rename({suffix: '.min'}))
     .pipe(gulp.dest(dirs.jsDist));
 
+  gulp.src(js.formDist)
+    .pipe(uglify())
+    .pipe(rename({suffix: '.min'}))
+    .pipe(gulp.dest(dirs.jsDist));
+
   return gulp.src(js.dist)
     .pipe(uglify())
     .pipe(rename({suffix: '.min'}))
@@ -140,4 +153,3 @@ gulp.task('watch', function() {
 gulp.task('css', ['css:sass', 'css:concat',]);
 gulp.task('default', ['css:min', 'js:min',]);
 gulp.task('dev', ['css:concat', 'js:concat','jshint', 'test']);
-

lib/views/_form.html

@@ -36,123 +36,5 @@
   </div>
   <div class="file-module hidden">
   </div>
-  <script type="text/javascript">
-  $(function() {
-    // preview watch
-    var originalContent = $('#form-body').val();
-    var prevContent = "";
-    var watchTimer = setInterval(function() {
-      var content = $('#form-body').val();
-      if (prevContent != content) {
-        var renderer = new Crowi.renderer($('#form-body').val(), $('#preview-body'));
-        renderer.render();
-
-        prevContent = content;
-      }
-    }, 500);
-
-    // tabs handle
-    $('textarea#form-body').on('keydown', function(event){
-      var self  = $(this)
-          start = this.selectionStart,
-          end   = this.selectionEnd
-          val   = self.val();
-
-      if (event.keyCode === 9) {
-        // tab
-        event.preventDefault();
-        self.val(
-          val.substring(0, start)
-          + '    '
-          + val.substring(end, val.length)
-        );
-        this.selectionStart = start + 4;
-        this.selectionEnd   = start + 4;
-      } else if (event.keyCode === 27) {
-        // escape
-        self.blur();
-      }
-    });
-
-    var unbindInlineAttachment = function($form) {
-      $form.unbind('.inlineattach');
-    };
-    var bindInlineAttachment = function($form, attachmentOption) {
-      var $this = $form;
-      var editor = createEditorInstance($form);
-      var inlineattach = new inlineAttachment(attachmentOption, editor);
-      $form.bind({
-        'paste.inlineattach': function(e) {
-          inlineattach.onPaste(e.originalEvent);
-        },
-        'drop.inlineattach': function(e) {
-          e.stopPropagation();
-          e.preventDefault();
-          inlineattach.onDrop(e.originalEvent);
-        },
-        'dragenter.inlineattach dragover.inlineattach': function(e) {
-          e.stopPropagation();
-          e.preventDefault();
-        }
-      });
-    };
-    var createEditorInstance = function($form) {
-      var $this = $form;
-
-      return {
-        getValue: function() {
-          return $this.val();
-        },
-        insertValue: function(val) {
-          inlineAttachment.util.insertTextAtCursor($this[0], val);
-        },
-        setValue: function(val) {
-          $this.val(val);
-        }
-      };
-    };
-
-    var $inputForm = $('textarea#form-body');
-    if ($inputForm.length > 0) {
-      var pageId = $('#content-main').data('page-id') || 0;
-      var attachmentOption = {
-        uploadUrl: '/_api/attachment/page/' + pageId,
-        extraParams: {
-          path: location.pathname
-        },
-        progressText: '(Uploading file...)',
-        urlText: "\n![file]({filename})\n"
-      };
-
-      attachmentOption.onFileUploadResponse = function(res) {
-        var result = JSON.parse(res.response);
-
-        if (result.status && result.pageCreated) {
-          var page = result.page,
-            pageId = page._id;
-
-          $('#content-main').data('page-id', page._id);
-          $('#page-form [name="pageForm[currentRevision]"]').val(page.revision)
-
-          unbindInlineAttachment($inputForm);
-
-          attachmentOption.uploadUrl = '/_api/attachment/page/' + pageId,
-          bindInlineAttachment($inputForm, attachmentOption);
-        }
-        return true;
-      };
-
-      bindInlineAttachment($inputForm, attachmentOption);
-    }
-
-    $('textarea#form-body').on('dragenter dragover', function() {
-        $(this).addClass('dragover');
-      });
-    $('textarea#form-body').on('drop dragleave dragend', function() {
-        $(this).removeClass('dragover');
-      });
-  });
-
-
-  </script>
+  <script src="/js/crowi-form{% if env  == 'production' %}.min{% endif %}.js"></script>
 </div>

resource/js/crowi-form.js

@@ -0,0 +1,115 @@
+$(function() {
+  // preview watch
+  var originalContent = $('#form-body').val();
+  var prevContent = "";
+  var watchTimer = setInterval(function() {
+    var content = $('#form-body').val();
+    if (prevContent != content) {
+      var renderer = new Crowi.renderer($('#form-body').val(), $('#preview-body'));
+      renderer.render();
+
+      prevContent = content;
+    }
+  }, 500);
+
+  // tabs handle
+  $('textarea#form-body').on('keydown', function(event){
+    var self  = $(this)
+    start = this.selectionStart,
+    end   = this.selectionEnd
+    val   = self.val();
+
+    if (event.keyCode === 9) {
+      // tab
+      event.preventDefault();
+      self.val(
+        val.substring(0, start)
+          + '    '
+          + val.substring(end, val.length)
+      );
+      this.selectionStart = start + 4;
+      this.selectionEnd   = start + 4;
+    } else if (event.keyCode === 27) {
+      // escape
+      self.blur();
+    }
+  });
+
+  var unbindInlineAttachment = function($form) {
+    $form.unbind('.inlineattach');
+  };
+  var bindInlineAttachment = function($form, attachmentOption) {
+    var $this = $form;
+    var editor = createEditorInstance($form);
+    var inlineattach = new inlineAttachment(attachmentOption, editor);
+    $form.bind({
+      'paste.inlineattach': function(e) {
+        inlineattach.onPaste(e.originalEvent);
+      },
+      'drop.inlineattach': function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+        inlineattach.onDrop(e.originalEvent);
+      },
+      'dragenter.inlineattach dragover.inlineattach': function(e) {
+        e.stopPropagation();
+        e.preventDefault();
+      }
+    });
+  };
+  var createEditorInstance = function($form) {
+    var $this = $form;
+
+    return {
+      getValue: function() {
+        return $this.val();
+      },
+      insertValue: function(val) {
+        inlineAttachment.util.insertTextAtCursor($this[0], val);
+      },
+      setValue: function(val) {
+        $this.val(val);
+      }
+    };
+  };
+
+  var $inputForm = $('textarea#form-body');
+  if ($inputForm.length > 0) {
+    var pageId = $('#content-main').data('page-id') || 0;
+    var attachmentOption = {
+      uploadUrl: '/_api/attachment/page/' + pageId,
+      extraParams: {
+        path: location.pathname
+      },
+      progressText: '(Uploading file...)',
+      urlText: "\n![file]({filename})\n"
+    };
+
+    attachmentOption.onFileUploadResponse = function(res) {
+      var result = JSON.parse(res.response);
+
+      if (result.status && result.pageCreated) {
+        var page = result.page,
+            pageId = page._id;
+
+        $('#content-main').data('page-id', page._id);
+        $('#page-form [name="pageForm[currentRevision]"]').val(page.revision)
+
+        unbindInlineAttachment($inputForm);
+
+        attachmentOption.uploadUrl = '/_api/attachment/page/' + pageId,
+        bindInlineAttachment($inputForm, attachmentOption);
+      }
+      return true;
+    };
+
+    bindInlineAttachment($inputForm, attachmentOption);
+  }
+
+  $('textarea#form-body').on('dragenter dragover', function() {
+    $(this).addClass('dragover');
+  });
+  $('textarea#form-body').on('drop dragleave dragend', function() {
+    $(this).removeClass('dragover');
+  });
+});