Rewrite project creation component in vanilla js

app/Template/project_creation/create.php

@@ -12,10 +12,10 @@
 
         <?php if (count($projects_list) > 1): ?>
             <?= $this->form->label(t('Create from another project'), 'src_project_id') ?>
-            <?= $this->form->select('src_project_id', $projects_list, $values) ?>
+            <?= $this->form->select('src_project_id', $projects_list, $values, array(), array(), 'js-project-creation-select-options') ?>
         <?php endif ?>
 
-        <div class="project-creation-options" <?= isset($values['src_project_id']) && $values['src_project_id'] > 0 ? '' : 'style="display: none"' ?>>
+        <div class="js-project-creation-options" <?= isset($values['src_project_id']) && $values['src_project_id'] > 0 ? '' : 'style="display: none"' ?>>
             <p class="alert"><?= t('Which parts of the project do you want to duplicate?') ?></p>
 
             <?php if (! $is_private): ?>

assets/js/components/project-creation-select-options.js

@@ -0,0 +1,9 @@
+KB.onChange('.js-project-creation-select-options', function (element) {
+    var projectId = element.value;
+
+    if (projectId === '0') {
+        KB.find('.js-project-creation-options').hide();
+    } else {
+        KB.find('.js-project-creation-options').show();
+    }
+});

assets/js/core/base.js

@@ -5,6 +5,7 @@ var KB = {
     http: {},
     listeners: {
         clicks: {},
+        changes: {},
         internals: {}
     }
 };
@@ -31,6 +32,10 @@ KB.onClick = function (selector, callback) {
     this.listeners.clicks[selector] = callback;
 };
 
+KB.onChange = function (selector, callback) {
+    this.listeners.changes[selector] = callback;
+};
+
 KB.listen = function () {
     var self = this;
 
@@ -43,7 +48,16 @@ KB.listen = function () {
         }
     }
 
+    function onChange(e) {
+        for (var selector in self.listeners.changes) {
+            if (self.listeners.changes.hasOwnProperty(selector) && e.target.matches(selector)) {
+                self.listeners.changes[selector](e.target);
+            }
+        }
+    }
+
     document.addEventListener('click', onClick, false);
+    document.addEventListener('change', onChange, false);
 };
 
 KB.component = function (name, object) {

assets/js/src/ProjectCreation.js

@@ -1,15 +0,0 @@
-Kanboard.ProjectCreation = function(app) {
-    this.app = app;
-};
-
-Kanboard.ProjectCreation.prototype.onPopoverOpened = function() {
-    $('#project-creation-form #form-src_project_id').on('change', function() {
-        var srcProjectId = $(this).val();
-
-        if (srcProjectId == 0) {
-            $(".project-creation-options").hide();
-        } else {
-            $(".project-creation-options").show();
-        }
-    });
-};

assets/sass/_project.sass

@@ -6,7 +6,7 @@
   &:hover, &:focus
     text-decoration: underline
 
-.project-creation-options
+.js-project-creation-options
   max-width: 500px
   border-left: 3px dotted #efefef
   margin-top: 20px