More updates

Author: Nick Litwin

app/community/community.routes.js

@@ -1,28 +1,27 @@
+import angular from 'angular'
+
 (function() {
-  'use strict';
+  'use strict'
 
   angular.module('tc.community').config([
     '$stateProvider',
-    '$urlRouterProvider',
-    '$locationProvider',
     routes
-  ]);
+  ])
 
-  function routes($stateProvider, $urlRouterProvider, $locationProvider) {
-    $locationProvider.html5Mode(true);
+  function routes($stateProvider) {
     var states = {
       'community': {
         parent: 'root',
         url: '/community/',
         abstract: true,
         data: {
-          authRequired: false,
+          authRequired: false
         }
       },
       'community.members': {
         parent: 'root',
         url: '/community/members/',
-        templateUrl: 'community/members.html',
+        template: require('./members')(),
         controller: 'MembersController',
         controllerAs: 'ctrl',
         data: {
@@ -34,17 +33,17 @@
       'community.statistics': {
         parent: 'root',
         url: '/community/statistics/',
-        templateUrl: 'community/statistics.html',
+        template: require('./statistics')(),
         controller: 'StatisticsController',
         controllerAs: 'ctrl',
         data: {
           title: 'Community Statistics'
         }
       }
-    };
+    }
 
     angular.forEach(states, function(state, name) {
-      $stateProvider.state(name, state);
-    });
-  };
-})();
+      $stateProvider.state(name, state)
+    })
+  }
+})()

app/directives/badges/badge-tooltip.directive.js

@@ -1,59 +1,53 @@
+import angular from 'angular'
 
 (function() {
-  'use strict';
+  'use strict'
 
-  angular.module('tcUIComponents').directive('badgeTooltip', badgeTooltip);
+  angular.module('tcUIComponents').directive('badgeTooltip', badgeTooltip)
 
-  /**
-   * Add a badge tooltip.
-   */
   function badgeTooltip() {
     return {
       restrict: 'A',
-      templateUrl: 'directives/badges/badge-tooltip.html',
+      template: require('./badge-tooltip')(),
       scope: {
         badge: '='
       },
       link : function(scope, element, attr) {
-        scope.hide = true;
-        return new TcBadgeTooltipDirective(scope, element, attr);
+        scope.hide = true
+        return new TcBadgeTooltipDirective(scope, element, attr)
       }
     }
   }
 
-  /**
-   * The link function of directive tc-badge-tooltip
-   */
+  // The link function of directive tc-badge-tooltip
   var TcBadgeTooltipDirective = function (scope, element, attr) {
 
-    var tooltipElement = element.children(0);
+    var tooltipElement = element.children(0)
     if (!tooltipElement.hasClass('tooltip')) {
-      return;
+      return
     }
-    var tooltipHtml = tooltipElement[0];
-
-    var tooltipFn = this;
+    var tooltipHtml = tooltipElement[0]
 
     element.on('mouseenter', function() {
-      tooltipElement.css('z-index', '-2000');
-      scope.hide = false;
+      tooltipElement.css('z-index', '-2000')
+      scope.hide = false
       // apply scope to display the tooltip element at z-index -2000
       // otherwise we won't get the height of the element
-      scope.$apply();
+      scope.$apply()
 
-      var ht = tooltipHtml.offsetHeight;
-      var wt = tooltipHtml.offsetWidth - element[0].offsetWidth;
-      var top  = element[0].offsetTop - ht - 10;
-      var lt = element[0].offsetLeft - wt / 2;
+      var ht = tooltipHtml.offsetHeight
+      var wt = tooltipHtml.offsetWidth - element[0].offsetWidth
+      var top  = element[0].offsetTop - ht - 10
+      var lt = element[0].offsetLeft - wt / 2
 
-      tooltipElement.css("left", lt + 'px');
-      tooltipElement.css("top", top + 'px');
-      tooltipElement.css('z-index', '2000');
-    });
+      tooltipElement.css('left', lt + 'px')
+      tooltipElement.css('top', top + 'px')
+      tooltipElement.css('z-index', '2000')
+    })
 
     element.on('mouseleave', function(){
-      scope.hide = true;
-      scope.$apply();
-    });
+      scope.hide = true
+      scope.$apply()
+    })
   }
-})();
+})()

app/directives/challenge-tile/challenge-tile.directive.js

@@ -3,8 +3,7 @@ import angular from 'angular'
 (function() {
   'use strict'
 
-  angular.module('tcUIComponents')
-    .directive('challengeTile', challengeTile)
+  angular.module('tcUIComponents').directive('challengeTile', challengeTile)
 
   function challengeTile() {
     return {
@@ -29,7 +28,8 @@ import angular from 'angular'
 
         function openLightbox() {
           ngDialog.open({
-            template: 'directives/challenge-tile/design-lightbox/design-lightbox.html',
+            plain: true,
+            template: require('./design-lightbox/design-lightbox')(),
             className: 'ngdialog-theme-default',
             scope: $scope
           })

app/directives/challenge-tile/design-lightbox/design-lightbox.jade

@@ -1,2 +1,2 @@
 .lightbox-container
-  img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src=require("../../../assets/images/ico-picture.svg"))
+  img(ng-src="http://studio.{{DOMAIN}}/studio.jpg?module=DownloadSubmission&sbmid={{challenge.thumbnailId}}&sbt=full", fallback-src=require("../../../../assets/images/ico-picture.svg"))

app/directives/external-account/external-links-data.directive.js

@@ -46,8 +46,9 @@ import angular from 'angular'
               return
             }
             $scope.deletionDialog = ngDialog.open({
+              plain: true,
               className: 'ngdialog-theme-default tc-dialog',
-              template: 'directives/external-account/external-link-deletion-confirm.html',
+              template: require('./external-link-deletion-confirm')(),
               controller: 'ExternalLinkDeletionController',
               controllerAs: 'vm',
               resolve: {

app/directives/onoffswitch/onoffswitch.directive.js

@@ -1,19 +1,18 @@
+import angular from 'angular'
+
 (function() {
-  'use strict';
+  'use strict'
 
-  angular.module('tcUIComponents').directive('onoffSwitch', onoffSwitch);
+  angular.module('tcUIComponents').directive('onoffSwitch', onoffSwitch)
 
   function onoffSwitch() {
     return {
       restrict: 'E',
-      templateUrl: 'directives/onoffswitch/onoffswitch.directive.html',
+      template: require('./onoffswitch')(),
       scope: {
         model: '=',
         uniqueId: '='
-      },
-      link: function(scope, element, attrs) {
-
       }
-    };
+    }
   }
-})();
+})()

app/directives/onoffswitch/onoffswitch.directive.jade renamed to app/directives/onoffswitch/onoffswitch.jade

@@ -1,29 +1,28 @@
+import angular from 'angular'
+
 (function() {
-  'use strict';
+  'use strict'
 
-  angular.module('tcUIComponents').directive('progressBar', progressBar);
+  angular.module('tcUIComponents').directive('progressBar', progressBar)
 
-  progressBar.$inject = ['$timeout', '$parse'];
+  progressBar.$inject = ['$parse']
 
-  function progressBar($timeout, $parse) {
+  function progressBar($parse) {
     return {
       restrict: 'E',
-      templateUrl: 'directives/progress-bar/progress-bar.directive.html',
+      template: require('./progress-bar')(),
       link: function(scope, element, attr) {
-        var model = $parse(attr.completed);
-        var msg = attr.message;
-        var progress = angular.element(element[0].querySelector('.progress-bar__bar--completed'));
+        var model = $parse(attr.completed)
+        var msg = attr.message
+        var progress = angular.element(element[0].querySelector('.progress-bar__bar--completed'))
 
         scope.$watch(model, function(newValue, oldValue) {
-          scope.completed = Math.round(newValue);
-          // console.log("Updating progress bar with " + scope.completed);
-          scope.message = msg;
+          scope.completed = Math.round(newValue)
+          // console.log("Updating progress bar with " + scope.completed)
+          scope.message = msg
           progress.css('width', scope.completed + '%')
-        });
-      },
-      controller: ['$scope', function($scope) {
-
-      }]
-    };
+        })
+      }
+    }
   }
-})();
+})()

app/directives/progress-bar/progress-bar.directive.js

@@ -1,13 +1,16 @@
+import angular from 'angular'
+import _ from 'lodash'
+
 (function() {
-  'use strict';
+  'use strict'
 
-  angular.module('tcUIComponents').directive('tcFileInput', tcFileInput);
+  angular.module('tcUIComponents').directive('tcFileInput', tcFileInput)
 
   function tcFileInput() {
     return {
       restrict: 'E',
       require: '^form',
-      templateUrl: 'directives/tc-file-input/tc-file-input.html',
+      template: require('./tc-file-input')(),
       scope: {
         labelText: '@',
         fieldId: '@',
@@ -20,63 +23,63 @@
         ngModel: '='
       },
       link: function(scope, element, attrs, formController) {
-        scope.selectFile = selectFile;
-        var fileTypes = scope.fileType.split(',');
+        scope.selectFile = selectFile
+        var fileTypes = scope.fileType.split(',')
 
         // fieldId is not set on element at this point, so grabbing with class .none
         // which exists on the element right away
-        var fileInput = $(element[0]).find('.none');
-        var fileNameInput = $(element[0]).find('input[type=text]');
+        var fileInput = $(element[0]).find('.none')
+        var fileNameInput = $(element[0]).find('input[type=text]')
 
         fileInput.bind('change', function(event) {
-          var file = event.target.files[0];
+          var file = event.target.files[0]
 
           // About 1 in 20 times, the file is undefined (must be race condition)
           // Return early in this case so no errors are thrown
           if (!file) {
-            return;
+            return
           }
 
-          var fileSize = file.size;
-          var isAllowedFileSize = fileSize < '500000000';
+          var fileSize = file.size
+          var isAllowedFileSize = fileSize < '500000000'
 
-          var selectedFileType = file.type.slice(file.type.lastIndexOf('/') + 1);
-          var isAllowedFileFormat = _.some(fileTypes, _.matches(selectedFileType));
+          var selectedFileType = file.type.slice(file.type.lastIndexOf('/') + 1)
+          var isAllowedFileFormat = _.some(fileTypes, _.matches(selectedFileType))
 
           scope.$apply(function(){
             // Set the file name as the value of the disabled input
-            fileNameInput[0].value = file.name;
-            var clickedFileInput = formController[attrs.fieldId];
+            fileNameInput[0].value = file.name
+            var clickedFileInput = formController[attrs.fieldId]
 
             if (!isAllowedFileFormat) {
               // Manually setting is required since Angular doesn't support file inputs
-              clickedFileInput.$setTouched();
-              clickedFileInput.$setValidity('required', false);
+              clickedFileInput.$setTouched()
+              clickedFileInput.$setValidity('required', false)
 
             } else {
-              clickedFileInput.$setValidity('required', true);
+              clickedFileInput.$setValidity('required', true)
             }
 
             if (!isAllowedFileSize) {
               // Manually setting is required since Angular doesn't support file inputs
-              clickedFileInput.$setTouched();
-              clickedFileInput.$setValidity('filesize', false);
+              clickedFileInput.$setTouched()
+              clickedFileInput.$setValidity('filesize', false)
 
             } else {
-              clickedFileInput.$setValidity('filesize', true);
+              clickedFileInput.$setValidity('filesize', true)
             }
 
             if (isAllowedFileFormat && isAllowedFileSize) {
               // Pass file object up through callback into controller
-              scope.setFileReference({file: file, fieldId: scope.fieldId});
+              scope.setFileReference({file: file, fieldId: scope.fieldId})
             }
-          });
-        });
+          })
+        })
 
         function selectFile() {
-          fileInput.click();
+          fileInput.click()
         }
       }
     }
   }
-})();
+})()