From 29b6ffc9d32d01df3971742650ca4dd142733ca7 Mon Sep 17 00:00:00 2001 From: m0t0r Date: Thu, 28 Jan 2016 22:00:03 -0500 Subject: [PATCH 1/4] chore(core): Add helper functions for DOM operations --- src/core/dom.ts | 28 ++++++++++++++++++++++++++++ src/views/.gitkeep | 0 2 files changed, 28 insertions(+) create mode 100644 src/core/dom.ts delete mode 100644 src/views/.gitkeep diff --git a/src/core/dom.ts b/src/core/dom.ts new file mode 100644 index 0000000..46dab17 --- /dev/null +++ b/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); +} diff --git a/src/views/.gitkeep b/src/views/.gitkeep deleted file mode 100644 index e69de29..0000000 From 01e69f8e66ab99d0d16028738448e0d96a740440 Mon Sep 17 00:00:00 2001 From: m0t0r Date: Thu, 28 Jan 2016 22:01:45 -0500 Subject: [PATCH 2/4] chore(core): Add ComponentDirective class, simulating module.component in angular 1.5 --- src/core/directives.ts | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/core/directives.ts diff --git a/src/core/directives.ts b/src/core/directives.ts new file mode 100644 index 0000000..3c5b330 --- /dev/null +++ b/src/core/directives.ts @@ -0,0 +1,33 @@ +/// + +/** + * 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); + }); + } + }; +} + +class ComponentDirectiveController { } From 2de1f6846d13402ed354b367e455b2528489d705 Mon Sep 17 00:00:00 2001 From: m0t0r Date: Thu, 28 Jan 2016 22:21:58 -0500 Subject: [PATCH 3/4] feat(core): Create sm-align-right directive to support right floated alignment --- src/core/layout/align-right/align-right.ts | 20 ++++++++++++++++++++ src/core/layout/core.layout.module.ts | 7 +++++++ 2 files changed, 27 insertions(+) create mode 100644 src/core/layout/align-right/align-right.ts create mode 100644 src/core/layout/core.layout.module.ts diff --git a/src/core/layout/align-right/align-right.ts b/src/core/layout/align-right/align-right.ts new file mode 100644 index 0000000..f4a57ca --- /dev/null +++ b/src/core/layout/align-right/align-right.ts @@ -0,0 +1,20 @@ +/// + +'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'); + }; +} diff --git a/src/core/layout/core.layout.module.ts b/src/core/layout/core.layout.module.ts new file mode 100644 index 0000000..fa7fa32 --- /dev/null +++ b/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); From c9f8ac855458f78ad18697017d5db0fa71d589c9 Mon Sep 17 00:00:00 2001 From: m0t0r Date: Thu, 28 Jan 2016 22:47:02 -0500 Subject: [PATCH 4/4] feat(views): Create sm-card component --- src/core/directives.ts | 4 ++ src/index.ts | 7 ++- src/views/card/card.ts | 127 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 137 insertions(+), 1 deletion(-) create mode 100644 src/views/card/card.ts diff --git a/src/core/directives.ts b/src/core/directives.ts index 3c5b330..4694652 100644 --- a/src/core/directives.ts +++ b/src/core/directives.ts @@ -27,6 +27,10 @@ export class ComponentDirective implements ng.IDirective { element.append(nodes); }); } + + element.on('$destroy', function() { + scope.$destroy(); + }); }; } diff --git a/src/index.ts b/src/index.ts index 42c78df..ce73a1a 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,13 +1,18 @@ /// +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 ]); })(); diff --git a/src/views/card/card.ts b/src/views/card/card.ts new file mode 100644 index 0000000..d2b0219 --- /dev/null +++ b/src/views/card/card.ts @@ -0,0 +1,127 @@ +/// +/// + +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 = `
`; +} + +/** + * sm-card-content directive + */ + +class SmCardContentDirective extends ComponentDirective { + static instance(): ng.IDirective { + return new SmCardContentDirective; + } + + template = `
`; +} + +/** + * sm-card-header directive + */ + +class SmCardHeaderDirective extends ComponentDirective { + static instance(): ng.IDirective { + return new SmCardHeaderDirective; + } + + require = '^smCardContent'; + template = `
`; +} + +/** + * sm-card-meta directive + */ + +class SmCardMetaDirective extends ComponentDirective { + static instance(): ng.IDirective { + return new SmCardMetaDirective; + } + + require = '^smCardContent'; + template = `
`; +} + +/** + * sm-card-description directive + */ + +class SmCardDescriptionDirective extends ComponentDirective { + static instance(): ng.IDirective { + return new SmCardDescriptionDirective; + } + + require = '^smCardContent'; + template = `
`; +} + +/** + * 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);