Converted Column Layout to new JS design pattern

Converted Column Layout component to use the new JS design pattern
defined at
http://codepen.io/jasonmayes/pen/146b4483d870f79f4d33254311703ac2 Have
verified it still works as before using gulp serve.

app/styleguide/column-layout/column-layout.js

@@ -1,20 +1,72 @@
-'use strict';
+/**
+ * Class constructor for Column Layout WSK component.
+ * Implements WSK component design pattern defined at:
+ * http://codepen.io/jasonmayes/pen/146b4483d870f79f4d33254311703ac2
+ * @param {HTMLElement} element The element that will be upgraded.
+ */
+function MaterialColumnLayout(element) {
+  'use strict';
 
-(function() {
-  window.addEventListener('load', function() {
-    var INVISIBLE_WRAPPING_ELEMENT_CLASS = 'wsk-column-layout__wrap-hack';
-    var INVISIBLE_WRAPPING_ELEMENT_COUNT = 3;
-    var columnLayouts = document.querySelectorAll('.wsk-column-layout');
+  this.element_ = element;
 
-    for (var i = 0; i < columnLayouts.length; i++) {
-      var columnLayout = columnLayouts[i];
-      // Add some hidden elements to make sure everything aligns correctly. See
-      // CSS file for details.
-      for (var j = 0; j < INVISIBLE_WRAPPING_ELEMENT_COUNT; j++) {
-        var hiddenHackDiv = document.createElement('div');
-        hiddenHackDiv.classList.add(INVISIBLE_WRAPPING_ELEMENT_CLASS);
-        columnLayout.appendChild(hiddenHackDiv);
-      }
+  // Initialize instance.
+  this.init();
+}
+
+/**
+ * Store constants in one place so they can be updated easily.
+ * @enum {string | number}
+ * @private
+ */
+MaterialColumnLayout.prototype.Constant_ = {
+  INVISIBLE_WRAPPING_ELEMENT_COUNT: 3
+};
+
+/**
+ * Store strings for class names defined by this component that are used in
+ * JavaScript. This allows us to simply change it in one place should we
+ * decide to modify at a later date.
+ * @enum {string}
+ * @private
+ */
+MaterialColumnLayout.prototype.CssClasses_ = {
+  /**
+   * Class names should use camelCase and be prefixed with the word "material"
+   * to minimize conflict with 3rd party systems.
+   */
+
+  // TODO: Upgrade classnames in HTML / CSS / JS to use material prefix to
+  // reduce conflict and convert to camelCase for consistency.
+  INVISIBLE_WRAPPING_ELEMENT: 'wsk-column-layout__wrap-hack'
+};
+
+
+/**
+ * Initialize element.
+ */
+MaterialColumnLayout.prototype.init = function() {
+  'use strict';
+
+  if (this.element_) {
+    // Add some hidden elements to make sure everything aligns correctly. See
+    // CSS file for details.
+    for (var j = 0; j < this.Constant_.INVISIBLE_WRAPPING_ELEMENT_COUNT ; j++) {
+      var hiddenHackDiv = document.createElement('div');
+      hiddenHackDiv.classList.add(this.CssClasses_.INVISIBLE_WRAPPING_ELEMENT);
+      this.element_.appendChild(hiddenHackDiv);
     }
+  }
+};
+
+
+window.addEventListener('load', function() {
+  'use strict';
+
+  // On document ready, the component registers itself. It can assume
+  // componentHandler is available in the global scope.
+  componentHandler.register({
+    constructor: MaterialColumnLayout,
+    classAsString: 'MaterialColumnLayout',
+    cssClass: 'wsk-column-layout'
   });
-})();
+});

app/styleguide/column-layout/demo.html

@@ -19,6 +19,7 @@
       <div class="wsk-column-layout__child">to be placed in columns,</div>
       <div class="wsk-column-layout__child">automatically.</div>
     </div>
+    <script src="../third_party/wskComponentHandler.js"></script>
     <!-- build:js(app/styleguide/column-layout/) ../../scripts/main.min.js -->
     <script src="column-layout.js"></script>
     <!-- endbuild -->