#26 Upgrade Bootstrap & Font Awesome

.gitignore

@@ -21,4 +21,9 @@ testem.log
 .node_modules.ember-try/
 bower.json.ember-try
 package.json.ember-try
+
+# npm package-lock.json can get stale because we use yarn; someone might commit a npm installed `package-lock.json`
+package-lock.json
+
+# git time metric
 /.gtm/

addon/mixins/autosize.js

@@ -1,7 +1,5 @@
 /* global autosize */
 import { isPresent } from '@ember/utils';
-
-import { on } from '@ember/object/evented';
 import Mixin from '@ember/object/mixin';
 
 /**
@@ -10,24 +8,25 @@ import Mixin from '@ember/object/mixin';
  * @see http://www.jacklmoore.com/autosize/
  */
 export default Mixin.create({
-
-  /**
-   * Once this textarea is being destroyed let's help clean up the DOM by removing the autosize binding.
-   * @see http://www.jacklmoore.com/autosize/
-   */
-  _removeAutosize: on('willDestroyElement', function () {
-    autosize.destroy(this.element);
-  }),
-
   /**
    * Once this textarea is inserted in the DOM initialize on autosize.
    * @see https://github.com/jackmoore/autosize
    */
-  _initializeAutosize: on('didInsertElement', function () {
+  didInsertElement() {
+    this._super(...arguments);
     autosize(this.element);
     this._setCss('min-height');
     this._setCss('max-height');
-  }),
+  },
+
+  /**
+   * Once this textarea is being destroyed let's help clean up the DOM by removing the autosize binding.
+   * @see http://www.jacklmoore.com/autosize/
+   */
+  willDestroyElement() {
+    this._super(...arguments);
+    autosize.destroy(this.element);
+  },
 
   /**
    * Set the jquery css property `propertyName` with the component property `propertyName`.

app/styles/app.scss

@@ -0,0 +1,2 @@
+//noinspection CssUnknownTarget
+@import "ember-cli-bootstrap-4/bootstrap";

blueprints/ember-cli-textarea-autosize/index.js

@@ -7,11 +7,11 @@ module.exports = {
   afterInstall: function (/*options*/) {
     return this.addAddonsToProject({
       packages: [
-        { name: 'ember-cli-text-support-mixins', target: '~1' }
+        { name: 'ember-cli-text-support-mixins', target: '~2.0.2' }
       ]
     }).then(() => {
       return this.addPackagesToProject([
-        { name: 'autosize' }
+        { name: 'autosize' }  // always install the latest ... that's trust baby
       ])
     });
   }

bower.json

@@ -1,7 +1,5 @@
 {
   "name": "ember-cli-textarea-autosize",
   "devDependencies": {
-    "bootstrap-sass": "^3.3.7",
-    "font-awesome": "^4.7.0"
   }
 }

install_ember_addons.sh

@@ -1,13 +1,26 @@
 #!/bin/sh
 
-ember install ember-cli-bootstrap3-sass
+yarn add --dev clipboard
+
+ember install ct-emberjs-bling
+
+ember install @fortawesome/ember-fontawesome
+yarn add @fortawesome/free-solid-svg-icons --dev
+yarn add @fortawesome/free-brands-svg-icons --dev
+
+ember install ember-auto-import
+
+ember install ember-cli-app-version
+
+ember install ember-cli-bootstrap-4
+
 ember install ember-cli-deploy
 ember install ember-cli-deploy-build
 ember install ember-cli-deploy-gzip
 ember install ember-cli-deploy-s3
-ember install ember-cli-font-awesome-sass
-ember install ember-cli-text-support-mixins@~1
+ember install ember-cli-deploy-slack
+
+ember install ember-cli-text-support-mixins@~2.0.0
 
-yarn add autosize@~4 --dev
-yarn add bootswatch@3.3.7 --dev
+yarn add autosize --dev
 yarn add ember-cli-node-assets  # this must go into "dependencies" NOT "devDependencies"

package.json

@@ -45,27 +45,36 @@
     "ember-cli-node-assets": "^0.2.2"
   },
   "devDependencies": {
+    "@fortawesome/ember-fontawesome": "^0.1.8",
+    "@fortawesome/free-brands-svg-icons": "^5.5.0",
+    "@fortawesome/free-solid-svg-icons": "^5.5.0",
     "autosize": "~4",
+    "bootstrap": "^4.1.0",
     "bootswatch": "3.3.7",
     "broccoli-asset-rev": "^2.4.5",
+    "clipboard": "^2.0.3",
+    "ct-emberjs-bling": "^0.0.1-rc.5",
     "ember-ajax": "^3.0.0",
+    "ember-auto-import": "^1.2.15",
     "ember-cli": "~2.18.2",
-    "ember-cli-bootstrap3-sass": "^1.0.6",
+    "ember-cli-app-version": "^3.2.0",
+    "ember-cli-bootstrap-4": "^0.7.0",
     "ember-cli-dependency-checker": "^2.0.0",
     "ember-cli-deploy": "^1.0.2",
     "ember-cli-deploy-build": "^1.1.1",
     "ember-cli-deploy-gzip": "^1.0.1",
     "ember-cli-deploy-s3": "^1.4.0",
+    "ember-cli-deploy-slack": "^1.0.1",
+    "ember-cli-element-closest-polyfill": "^0.0.1",
     "ember-cli-eslint": "^4.2.1",
-    "ember-cli-font-awesome-sass": "^1.0.4",
     "ember-cli-htmlbars": "^2.0.1",
     "ember-cli-htmlbars-inline-precompile": "^1.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",
     "ember-cli-qunit": "^4.1.1",
-    "ember-cli-sass": "^8.0.1",
+    "ember-cli-sass": "^7.2.0",
     "ember-cli-shims": "^1.2.0",
     "ember-cli-sri": "^2.1.0",
-    "ember-cli-text-support-mixins": "^2.0.1",
+    "ember-cli-text-support-mixins": "^2.0.2-rc.1",
     "ember-cli-uglify": "^2.0.0",
     "ember-disable-prototype-extensions": "^1.1.2",
     "ember-export-application-global": "^2.0.0",
@@ -77,6 +86,7 @@
     "eslint-plugin-node": "^5.2.1",
     "keyevent": "^1.1.0",
     "loader.js": "^4.2.3",
+    "popper.js": "^1.14.0",
     "sass": "^1.14.3"
   },
   "engines": {

tests/dummy/app/controllers/demo/ctrl-enter-submits.js

@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  actions: {
+    withSubmit(/*event*/) {
+      window.alert('<form {{action "submitWithOn" on="submit"}}>');
+      return false;
+    },
+
+    withOnSubmit(/*event*/) {
+      window.alert('<form onsubmit={{action "submitWithOn"}}>');
+      return false;
+    }
+  }
+});

tests/dummy/app/router.js

@@ -7,11 +7,11 @@ const Router = EmberRouter.extend({
 });
 
 Router.map(function() {
-  this.route('demo-focus-selects-text');
-  this.route('demo-trigger-focus');
-  this.route('demo-min-height');
-  this.route('demo-max-height');
-  this.route('demo-ctrl-enter-submits');
+  this.route('demo', function () {
+    this.route('max-height');
+    this.route('min-height');
+    this.route('ctrl-enter-submits');
+  });
 });
 
 export default Router;

tests/dummy/app/routes/demo/min-height.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default Route.extend({});

tests/dummy/app/styles/app.scss

@@ -1,13 +1,2 @@
-@import "../../../../node_modules/bootswatch/spacelab/variables";
-
-$icon-font-path: '/assets/bootstrap/'; // TODO: this should be removed once I fix the bootstrap3-sass addon
 //noinspection CssUnknownTarget
-@import 'ember-cli-bootstrap3-sass';
-@import "../../../../node_modules/bootswatch/spacelab/bootswatch";
-//noinspection CssUnknownTarget
-@import "ember-cli-font-awesome-sass";
-
-body {
-  padding-top: 50px; // for the fixed navbar
-  margin-bottom: 50%; // to allow scrolling beyond the end of the last example
-}
+@import "ember-cli-bootstrap-4/bootstrap";

tests/dummy/app/templates/application.hbs

@@ -1,101 +1,31 @@
-<nav class="navbar navbar-default navbar-fixed-top">
+<section class="my-2">
   <div class="container">
-    <div class="navbar-header">
-      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-              data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
-        <span class="sr-only">Toggle navigation</span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-        <span class="icon-bar"></span>
-      </button>
-      {{#link-to "index" class="navbar-brand"}}
-        ember-cli-textarea-autosize
-      {{/link-to}}
-    </div>
-
-    <!-- Collect the nav links, forms, and other content for toggling -->
-    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
-      <ul class="nav navbar-nav navbar-right">
-        <li>
-          <a href="https://cybertoothca.github.io/ember-cli-textarea-autosize/" target="_blank">
-            <i class="fa fa-book"></i>
-            Docs
-          </a>
-        </li>
-        <li>
-          <a href="https://github.com/cybertoothca/ember-cli-textarea-autosize" target="_blank">
-            <i class="fa fa-github"></i>
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a href="https://www.npmjs.com/package/ember-cli-textarea-autosize" target="_blank">
-            npm
-          </a>
-        </li>
-        <li class="dropdown">
-          <a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
-            Other Projects <span class="caret"></span>
-          </a>
-          <ul class="dropdown-menu">
-            <li>
-              <a href="http://ember-cli-bootstrap3-carousel.cybertooth.io/" target="_blank">
-                ember-cli-bootstrap3-carousel
-              </a>
-            </li>
-            <li>
-              <a href="http://ember-cli-bootstrap3-popover.cybertooth.io/" target="_blank">
-                ember-cli-bootstrap3-popover
-              </a>
-            </li>
-            {{!--
-                        <li>
-                          <a href="http://ember-cli-bootstrap3-tooltip.cybertooth.io/" target="_blank">
-                            ember-cli-bootstrap3-tooltip
-                          </a>
-                        </li>
-            --}}
-            <li>
-              <a href="http://ember-cli-date-textbox.cybertooth.io/" target="_blank">
-                ember-cli-date-textbox
-              </a>
-            </li>
-            <li>
-              <a href="http://ember-cli-marked-down.cybertooth.io/" target="_blank">
-                ember-cli-marked-down
-              </a>
-            </li>
-            <li>
-              <a href="http://ember-cli-text-support-mixins.cybertooth.io/" target="_blank">
-                ember-cli-text-support-mixins
-              </a>
-            </li>
-            <li>
-              <a href="http://ember-cli-textarea-autosize.cybertooth.io/" target="_blank">
-                ember-cli-textarea-autosize
-              </a>
-            </li>
-            <li>
-              <a href="http://ember-data-bootstrap3-forms.cybertooth.io/" target="_blank">
-                ember-data-bootstrap3-forms
-              </a>
-            </li>
-          </ul>
-        </li>
-      </ul>
-    </div>
+    {{#ct-navbar
+      appLabel="Textarea Autosize"
+      appName=(read-config "APP.name")
+      class="bg-dark navbar-expand-md navbar-dark shadow rounded"
+    }}
+      <li class="nav-item">
+        {{#link-to "demo.index" class="nav-link"}}
+          {{fa-icon "tv" size="2x"}}
+        {{/link-to}}
+      </li>
+    {{/ct-navbar}}
   </div>
-</nav>
+</section>
 
-<section class="container">
-  <div class="page-header">
-    <h1>
-      Demo
-      <img src="http://badge.fury.io/gh/cybertoothca%2Fember-cli-textarea-autosize.svg"
-           alt="ember-cli-textarea-autosize version">
-      <img src="https://badge.fury.io/js/ember-cli-textarea-autosize.svg" alt="ember-cli-textarea-autosize npm"/>
-    </h1>
+<section class="my-3">
+  <div class="container">
+    {{badge-fury-io appName=(read-config "APP.name")}}
+    {{badge-built-with appName=(read-config "APP.name") emberCliVersion="2.18.2"}}
+    {{badge-install-command appName=(read-config "APP.name") version=(app-version versionOnly=true)}}
   </div>
 </section>
 
-{{outlet}}
+{{outlet}}
+
+<section class="bg-dark mt-5 text-light">
+  <div class="container">
+    {{ct-footer class="py-5"}}
+  </div>
+</section>