WIP: sm-card component

src/core/directives.ts

@@ -0,0 +1,37 @@
+///<reference path="../../typings/angularjs/angular.d.ts"/>
+
+/**
+ * Template class for wrapper-type directives
+ */
+export class ComponentDirective implements ng.IDirective {
+
+  restrict = 'E';
+  replace = true;
+  transclude = true;
+  template = ``;
+  controller = ComponentDirectiveController;
+  controllerAs = '$ctrl';
+  bindToController = true;
+  scope = {};
+
+  link = (
+    scope: ng.IScope,
+    element: ng.IAugmentedJQuery,
+    attrs,
+    ctrl,
+    transclude: ng.ITranscludeFunction
+  ) => {
+    // transclude when we actually want it
+    if (transclude) {
+      transclude(scope, (nodes) => {
+        element.append(nodes);
+      });
+    }
+
+    element.on('$destroy', function() {
+      scope.$destroy();
+    });
+  };
+}
+
+class ComponentDirectiveController { }

src/core/dom.ts

@@ -0,0 +1,28 @@
+
+/**
+ * Helper function to wrap a node with container element
+ *
+ * @param node
+ * @param cssClassName
+ */
+
+export function wrapWithContainer(node: Node, cssClassName: string): void {
+  let nodeList = Array.prototype.slice.call(node.parentElement.children);
+  let nodeIndex = nodeList.indexOf(node);
+  let container = document.createElement('div');
+  container.classList.add(cssClassName);
+
+  node.parentNode.insertBefore(container, node.parentElement.children[nodeIndex  + 1]);
+  container.appendChild(node);
+}
+
+/**
+ * Helper function to check if element has container or not
+ *
+ * @param node
+ * @param cssClassName
+ * @returns {boolean}
+ */
+export function isContainerDefined(node: Node, cssClassName: string): boolean {
+  return node.parentElement.classList.contains(cssClassName);
+}

src/core/layout/align-right/align-right.ts

@@ -0,0 +1,20 @@
+///<reference path="../../../../typings/angularjs/angular.d.ts"/>
+
+'use strict';
+
+export class SmAlignRightDirective implements ng.IDirective {
+  static instance(): ng.IDirective {
+    return new SmAlignRightDirective;
+  }
+
+  restrict = 'A';
+  replace = true;
+
+  link = (
+    scope: ng.IScope,
+    element: ng.IAugmentedJQuery
+  ) => {
+
+    element.addClass('right floated');
+  };
+}

src/core/layout/core.layout.module.ts

@@ -0,0 +1,7 @@
+import { SmAlignRightDirective } from './align-right/align-right';
+
+'use strict';
+
+export var smCoreModule: ng.IModule = angular
+  .module('semantic.ui.core.layout', [])
+  .directive('smAlignRight', SmAlignRightDirective.instance);

src/index.ts

@@ -1,13 +1,18 @@
 ///<reference path="../typings/angularjs/angular.d.ts"/>
 
+import { smCoreModule } from './core/layout/core.layout.module';
+
 import { smButtonModule } from './elements/button/button';
+import { smCardModule } from './views/card/card';
 
 ((): void => {
   'use strict';
 
   angular
     .module('semantic.ui', [
-      smButtonModule.name
+      smCoreModule.name,
+      smButtonModule.name,
+      smCardModule.name
     ]);
 
 })();

src/views/card/card.ts

@@ -0,0 +1,127 @@
+///<reference path="../../../typings/angularjs/angular.d.ts"/>
+///<reference path="../../../typings/angularjs/angular-animate.d.ts"/>
+
+import { isContainerDefined, wrapWithContainer } from './../../core/dom';
+import { ComponentDirective } from './../../core/directives';
+
+'use strict';
+
+/**
+ * sm-card directive
+ */
+
+class SmCardDirective extends ComponentDirective {
+  static instance(): ng.IDirective {
+    return new SmCardDirective;
+  }
+
+  template = `<div class="ui card"></div>`;
+}
+
+/**
+ * sm-card-content directive
+ */
+
+class SmCardContentDirective extends ComponentDirective {
+  static instance(): ng.IDirective {
+    return new SmCardContentDirective;
+  }
+
+  template = `<div class="content"></div>`;
+}
+
+/**
+ * sm-card-header directive
+ */
+
+class SmCardHeaderDirective extends ComponentDirective {
+  static instance(): ng.IDirective {
+    return new SmCardHeaderDirective;
+  }
+
+  require = '^smCardContent';
+  template = `<div class="header"></div>`;
+}
+
+/**
+ * sm-card-meta directive
+ */
+
+class SmCardMetaDirective extends ComponentDirective {
+  static instance(): ng.IDirective {
+    return new SmCardMetaDirective;
+  }
+
+  require = '^smCardContent';
+  template = `<div class="meta"></div>`;
+}
+
+/**
+ * sm-card-description directive
+ */
+
+class SmCardDescriptionDirective extends ComponentDirective {
+  static instance(): ng.IDirective {
+    return new SmCardDescriptionDirective;
+  }
+
+  require = '^smCardContent';
+  template = `<div class="description"></div>`;
+}
+
+/**
+ * sm-card-image directive
+ */
+
+class SmCardImageDirective implements ng.IDirective {
+  static instance(): ng.IDirective {
+    return new SmCardImageDirective;
+  }
+
+  restrict = 'A';
+  replace = true;
+  scope = {};
+
+  link = (
+    scope: ng.IScope,
+    element: ng.IAugmentedJQuery
+  ) => {
+
+    let node: HTMLElement = element[0];
+
+    if (!isContainerDefined(node, 'image')) {
+      wrapWithContainer(node, 'image');
+    }
+  };
+}
+
+/**
+ * sm-card-avatar directive
+ */
+
+class SmCardAvatarDirective implements ng.IDirective {
+  static instance(): ng.IDirective {
+    return new SmCardAvatarDirective;
+  }
+
+  restrict = 'A';
+  replace = true;
+  scope = {};
+
+  link = (
+    scope: ng.IScope,
+    element: ng.IAugmentedJQuery
+  ) => {
+    element.addClass('ui avatar image');
+  };
+}
+
+export var smCardModule: ng.IModule = angular
+  .module('semantic.ui.views.card', [])
+  .directive('smCard', SmCardDirective.instance)
+  .directive('smCardContent', SmCardContentDirective.instance)
+  .directive('smCardHeader', SmCardHeaderDirective.instance)
+  .directive('smCardMeta', SmCardMetaDirective.instance)
+  .directive('smCardDescription', SmCardDescriptionDirective.instance)
+  .directive('smCardImage', SmCardImageDirective.instance)
+  .directive('smCardAvatar', SmCardAvatarDirective.instance);