Add .ts files

Author: gperouffe

.gitignore

@@ -4,9 +4,6 @@ npm-debug.log
 # OS generated files
 Thumbs.db
 .DS_Store
-# Ignored files
-*.ts
-!*.d.ts
 #Visual Files
 bin
 obj

.npmignore

@@ -0,0 +1,18 @@
+# Node generated files
+node_modules
+npm-debug.log
+# OS generated files
+Thumbs.db
+.DS_Store
+# Ignored files
+*.ts
+!*.d.ts
+#Visual Files
+bin
+obj
+Properties
+*.config
+*.csproj
+*.user
+
+gulpfile.js

ng2-gridstack.ts

@@ -0,0 +1,2 @@
+export * from './src/gridstack.component';
+export * from './src/gridstack.item.directive';

package.json

@@ -1,6 +1,6 @@
 {
  "name": "ng2-gridstack",
- "version": "0.1.10",
+ "version": "0.1.11",
  "description": "A gridstack component for Angular2",
  "main": "index.js",
  "scripts": {

src/gridstack.component.js

@@ -0,0 +1,103 @@
+import { Component, EventEmitter, OnInit, Input, Output, ElementRef, Renderer } from '@angular/core';
+declare var $: any; // JQuery
+declare var _: any; // lodash
+
+
+@Component({
+ selector: 'gridStack',
+ templateUrl: 'gridstack.component.html'
+})
+
+export class GridStackComponent{
+
+ @Input() w: number;
+ @Input() animate: boolean;
+ @Input() buttonClass: string = "";
+ @Input() allowEditing: boolean = false;
+ @Input() options: any[];
+ @Output() addFunction = new EventEmitter<boolean>();
+ @Output() saveFunction = new EventEmitter<any>();
+ @Output() deleteFunction = new EventEmitter<boolean>();
+ @Output() deleteCardFunc = new EventEmitter<number>();
+ @Input() items: any[];
+ private isStart = true;
+ private editing = false;
+
+ constructor(private el: ElementRef,
+ private renderer: Renderer) {
+ }
+
+ ngAfterViewInit() {
+ let nativeElement = this.el.nativeElement; 
+
+ $(nativeElement).find(".grid-stack").gridstack(this.options);
+
+ }
+
+ onItemClick()
+ {
+ var grid = $('.grid-stack').data('gridstack');
+ var element = $(event.target);
+ if (element.hasClass("grid-stack-item-content")) {
+ if (!element.hasClass("selected-item")) {
+ $(".grid-stack-item-content").removeClass("selected-item");
+ element.addClass("selected-item");
+ $(".card-management").show();
+ if (this.allowEditing)
+ {
+ this.editing = true;
+ element.attr("contenteditable", "true");
+ $('.grid-stack').data('gridstack').disable();
+ }
+ }
+ else {
+ element.removeClass("selected-item");
+ $(".card-management").hide();
+ $('.grid-stack').data('gridstack').enable();
+ element.attr("contenteditable", "false");
+ this.editing = false;
+ }
+ }
+ }
+
+ addItem() {
+ if (this.addFunction) {
+ this.addFunction.emit();
+ }
+ }
+
+ deletePanel() {
+ if (this.deleteFunction) {
+ this.deleteFunction.emit();
+ }
+ }
+
+ deleteCard() {
+ var selected = $(this.el.nativeElement).find(".selected-item").parent();
+ if (this.deleteCardFunc) {
+ this.deleteCardFunc.emit(selected.attr("data-custom-id"));
+ $('.grid-stack').data('gridstack').removeWidget(selected);
+ $(".grid-stack-item-content").removeClass("selected-item");
+ $(".card-management").hide();
+ }
+ }
+
+ savePanel() {
+ if (this.saveFunction) {
+ //Get cards from view
+ var jsonItems = _.map($('.grid-stack .grid-stack-item:visible'), function (el) {
+ el = $(el);
+ var node = el.data('_gridstack_node');
+ return {
+ customid: el.attr('data-custom-id'),
+ x: node.x,
+ y: node.y,
+ width: node.width,
+ height: node.height,
+ content: el[0].firstChild.outerText
+ };
+ });
+ this.saveFunction.emit(jsonItems);
+ }
+ }
+}

src/gridstack.component.js.map

@@ -0,0 +1,58 @@
+import { Directive, ElementRef, Input, Renderer, OnInit } from '@angular/core';
+declare var $: any; // JQuery
+
+@Directive({
+ selector: '[gridStackItem]'
+})
+
+export class GridStackItemDirective {
+ @Input() x: number;
+ @Input() y: number;
+ @Input() w: number;
+ @Input() h: number;
+ @Input() customid: string;
+ @Input() content: string;
+
+ @Input() minWidth: number;
+ @Input() canResize: boolean;
+
+ private toMake = true;
+
+ constructor(
+ private el: ElementRef,
+ private renderer: Renderer
+ ) {
+ renderer.setElementAttribute(el.nativeElement, "class", "grid-stack-item");
+ }
+
+ ngAfterViewInit() {
+ let renderer = this.renderer;
+ let nativeElement = this.el.nativeElement;
+ let cannotResize: string = this.canResize ? "yes" : "no";
+
+ let elementText: string = '<div class="grid-stack-item-content">' + (this.content ? this.content : nativeElement.innerHTML) + '</div>';
+ // TODO: Find the Angular(tm) way to do this ...
+ nativeElement.innerHTML = elementText;
+
+ renderer.setElementAttribute(nativeElement, "data-gs-x", String(this.x));
+ renderer.setElementAttribute(nativeElement, "data-gs-y", String(this.y));
+ renderer.setElementAttribute(nativeElement, "data-gs-width", String(this.w));
+ renderer.setElementAttribute(nativeElement, "data-gs-height", String(this.h));
+ if (this.customid) {
+ renderer.setElementAttribute(nativeElement, "data-custom-id", String(this.customid));
+ }
+ if (this.minWidth) {
+ renderer.setElementAttribute(nativeElement, "data-gs-min-width", String(this.minWidth));
+ }
+ if (cannotResize == "yes") {
+ renderer.setElementAttribute(nativeElement, "data-gs-no-resize", cannotResize);
+ }
+
+ var parent = $(this.el.nativeElement).parent();
+ var grid = parent.data('gridstack');
+ if (grid && this.toMake) {
+ grid.makeWidget(this.el.nativeElement);
+ this.toMake = false;
+ }
+ }
+}