Migrated 'components' to es6

app/page/template/partials/template-user-profile.htm

@@ -16,7 +16,7 @@
         <!-- /ko -->
       </div>
 
-      <!-- ko if: user().connected() -->
+      <!-- ko if: user().is_connected() -->
         <div class="user-profile-tabs" data-bind="attr: {'data-tab-index': tab_index}">
           <span data-uie-name="go-profile-details" class="user-profile-tab" data-bind="click: function() { click_on_tab(0) }, l10n_text: z.string.people_tabs_details"></span>
           <span data-uie-name="go-profile-devices" class="user-profile-tab" data-bind="click: function() { click_on_tab(1) }, l10n_text: z.string.people_tabs_devices"></span>

app/script/components/accentColorPicker.js

@@ -0,0 +1,56 @@
+/*
+ * Wire
+ * Copyright (C) 2017 Wire Swiss GmbH
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see http://www.gnu.org/licenses/.
+ *
+ */
+
+'use strict';
+
+window.z = window.z || {};
+window.z.components = z.components || {};
+
+z.components.AccentColorPicker = class AccentColorPicker {
+  /**
+   * Construct a audio seek bar that renders audio levels.
+   *
+   * @param {Object} params - Component parameters
+   * @param {z.entity.User} params.user - User entity
+   * @param {z.entity.File} params.asset - Asset file
+   * @param {ko.observable} params.selected - Selected accent collor
+   */
+  constructor(params) {
+    this.user = ko.unwrap(params.user);
+
+    this.accent_color_ids = [1, 2, 4, 5, 6, 7];
+
+    this.on_select = function(id) {
+      params.selected(id);
+      return true;
+    };
+  }
+};
+
+// Knockout registration of the accent color picker component.
+ko.components.register('accent-color-picker', {
+  template: `
+    <!-- ko foreach: accent_color_ids -->
+      <input type="radio" name="accent"
+             data-bind="attr: {'id': 'accent' + $data, 'checked': $parent.user.accent_id() === $data}, click: $parent.on_select">
+      <label data-bind="attr: {'for': 'accent' + $data},css: 'accent-color-' + $data"></label>
+    <!-- /ko -->
+  `,
+  viewModel: z.components.AccentColorPicker,
+});

app/script/components/asset/assetHeader.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.AssetHeader = class AssetHeader {
   /**

app/script/components/asset/audioAsset.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.AudioAssetComponent = class AudioAssetComponent {
   /**

app/script/components/asset/controls/audioSeekBar.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.AudioSeekBarComponent = class AudioSeekBarComponent {
   /**
@@ -71,11 +71,15 @@ z.components.AudioSeekBarComponent = class AudioSeekBarComponent {
     const scaled_loudness = z.util.ArrayUtil.interpolate(this.loudness, number_of_levels_fit_on_screen);
 
     $(this.element).empty();
-    return Array.from(scaled_loudness).map((level) => $('<span>').height(level).appendTo(this.element));
+    scaled_loudness.map((level) => {
+      $('<span>')
+        .height(level)
+        .appendTo(this.element);
+    });
   }
 
   _normalize_loudness(loudness, max) {
-    const peak = Math.max.apply(Math, loudness);
+    const peak = Math.max(...loudness);
     return peak > max ? loudness.map((level) => (level * max) / peak) : loudness;
   }
 

app/script/components/asset/controls/mediaButton.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.MediaButtonComponent = class MediaButtonComponent {
   /**
@@ -65,7 +65,7 @@ z.components.MediaButtonComponent = class MediaButtonComponent {
       }
     };
     this.on_pause_button_clicked = function() {
-      if(typeof params.pause === 'function') {
+      if (typeof params.pause === 'function') {
         params.pause();
       }
     };

app/script/components/asset/controls/seekBar.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.SeekBarComponent = class SeekBarComponent {
   /**

app/script/components/asset/fileAsset.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.FileAssetComponent = class FileAssetComponent {
   /**

app/script/components/asset/linkPreviewAsset.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.LinkPreviewAssetComponent = class LinkPreviewAssetComponent {
   /**

app/script/components/asset/locationAsset.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.LocationAssetComponent = class LocationAssetComponent {
   /**

app/script/components/asset/videoAsset.js

@@ -20,7 +20,7 @@
 'use strict';
 
 window.z = window.z || {};
-window.z.announce = z.announce || {};
+window.z.components = z.components || {};
 
 z.components.VideoAssetComponent = class VideoAssetComponent {
   /**