Commit 0543477

mo <mo.khan@gmail.com>
2018-09-01 21:34:52
extract application controller for js.
1 parent c87ef6e
app/javascript/controllers/sessions/new_controller.js
@@ -1,7 +1,7 @@
-import { Controller } from 'stimulus';
+import ApplicationController from '../application_controller';
 import Email from '../../models/email';
 
-export default class extends Controller {
+export default class extends ApplicationController {
   get email() { return this.targets.find('email'); }
 
   get password() { return this.targets.find('password'); }
app/javascript/controllers/sessions/response_controller.js
@@ -1,6 +1,6 @@
-import { Controller } from 'stimulus';
+import ApplicationController from '../application_controller';
 
-export default class extends Controller {
+export default class extends ApplicationController {
   connect() {
     setTimeout(() => {
       this.element.submit();
app/javascript/controllers/tfa/setup_controller.js
@@ -1,12 +1,14 @@
-import { Controller } from 'stimulus';
+import ApplicationController from '../application_controller';
 import QRCode from 'qrcode';
 
-export default class extends Controller {
+export default class extends ApplicationController {
   get secret() { return this.targets.find('secret'); }
 
   get canvas() { return this.targets.find('canvas'); }
 
   connect() {
-    QRCode.toCanvas(this.canvas, this.secret.value);
+    QRCode.toCanvas(this.canvas, this.secret.value, (error) => {
+      if (error) super.log(error);
+    });
   }
 }
app/javascript/controllers/application_controller.js
@@ -0,0 +1,40 @@
+// Visit The Stimulus Handbook for more details
+// https://stimulusjs.org/handbook/introduction
+
+import { Controller } from 'stimulus';
+
+export default class extends Controller {
+  get isDevelopment() {
+    return process.env.RAILS_ENV === 'development';
+  }
+
+  initialize() {
+    this.log(`Loading... ${this.identifier}`);
+  }
+
+  connect() {
+    this.log(`Connected to ${this.element.outerHTML} to ${this.identifier}`);
+  }
+
+  disconnect() {
+    this.log(`Disconnected from ${this.identifier}`);
+  }
+
+  enable(element) {
+    element.removeAttribute('disabled');
+  }
+
+  disable(element) {
+    element.setAttribute('disabled', 'disabled');
+  }
+
+  log(message) {
+    if (this.isDevelopment) {
+      console.log(message); /* eslint-disable-line no-console */
+    }
+  }
+
+  controllerFor(element, identifier) {
+    return this.application.getControllerForElementAndIdentifier(element, identifier);
+  }
+}
app/javascript/controllers/hello_controller.js
@@ -1,18 +0,0 @@
-// Visit The Stimulus Handbook for more details
-// https://stimulusjs.org/handbook/introduction
-//
-// This example controller works with specially annotated HTML like:
-//
-// <div data-controller="hello">
-//   <h1 data-target="hello.output"></h1>
-// </div>
-
-import { Controller } from 'stimulus';
-
-export default class extends Controller {
-  static targets = ['output']
-
-  connect() {
-    this.outputTarget.textContent = 'Hello, Stimulus!';
-  }
-}