smartyellow/docx-js
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #133 from dolanmiu/feat/readme-update

Browse Source 
Add table cell margin
This commit is contained in:
Dolan
2018-08-23 01:24:16 +01:00
committed by GitHub
parent 4a3b7d71fe 90497036a6
commit dc942bc2e4
9 changed files with 140 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
demo/browser-demo.html
View File

@ -2,7 +2,8 @@
<html> <html>
<head> <head>
<script src="../build/index.web.js"></script> <script src="../build/index.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.js"></script>
</head> </head>
<body> <body>
@ -13,7 +14,23 @@
<script> <script>
function generate() { function generate() {
console.log('g'); const doc = new Document();
const paragraph = new Paragraph("Hello World");
const institutionText = new TextRun("Foo Bar").bold();
const dateText = new TextRun("Github is the best").tab().bold();
paragraph.addRun(institutionText);
paragraph.addRun(dateText);
doc.addParagraph(paragraph);
const packer = new Packer();
packer.toBlob(doc).then(blob => {
console.log(blob);
saveAs(blob, "example.docx");
console.log("Document created successfully");
});
} }
</script> </script>

33
demo/index.js
View File

@ -1,33 +0,0 @@
var prompt = require('prompt');
var shelljs = require('shelljs');
var fs = require('fs');
console.log('What demo do you wish to run? (Enter a number)');
var schema = {
properties: {
number: {
pattern: /^[0-9]+$/,
message: 'Please enter a number.',
required: true
}
}
};
prompt.start();
prompt.get(schema, function (err, result) {
var demoNumber = result.number;
var filePath = `./demo/demo${demoNumber}.ts`;
if (!fs.existsSync(filePath)) {
console.error(`demo${demoNumber} does not exist: ${filePath}`);
return;
}
console.log(`Running demo ${demoNumber}`);
if (shelljs.exec(`npm run ts-node -- ${filePath}`).code === 0) {
console.log("Document created successfully");
} else {
console.error('Something went wrong with the demo');
}
});

34
demo/index.ts Normal file
View File

@ -0,0 +1,34 @@
// tslint:disable:no-console
import * as fs from "fs";
import * as prompt from "prompt";
import * as shelljs from "shelljs";
console.log("What demo do you wish to run? (Enter a number)");
const schema = {
properties: {
number: {
pattern: /^[0-9]+$/,
message: "Please enter a number.",
required: true,
},
},
};
prompt.start();
prompt.get(schema, (_, result) => {
const demoNumber = result.number;
const filePath = `./demo/demo${demoNumber}.ts`;
if (!fs.existsSync(filePath)) {
console.error(`demo${demoNumber} does not exist: ${filePath}`);
return;
}
console.log(`Running demo ${demoNumber}`);
if (shelljs.exec(`npm run ts-node -- ${filePath}`).code === 0) {
console.log("Document created successfully");
} else {
console.error("Something went wrong with the demo");
}
});

2
package.json
View File

@ -13,7 +13,7 @@
"tsc": "rimraf ./build && tsc -p .", "tsc": "rimraf ./build && tsc -p .",
"webpack": "rimraf ./build && webpack", "webpack": "rimraf ./build && webpack",
"build.web": "webpack --config webpack.web.config.js", "build.web": "webpack --config webpack.web.config.js",
"demo": "npm run build && node ./demo", "demo": "npm run build && npm run ts-node ./demo",
"typedoc": "typedoc src/index.ts", "typedoc": "typedoc src/index.ts",
"style": "prettier -l \"src/**/*.ts\"", "style": "prettier -l \"src/**/*.ts\"",
"style.fix": "prettier \"src/**/*.ts\" --write", "style.fix": "prettier \"src/**/*.ts\" --write",

14
src/file/table/properties.spec.ts
View File

@ -2,6 +2,7 @@ import { expect } from "chai";
import { Formatter } from "../../export/formatter"; import { Formatter } from "../../export/formatter";
import { TableProperties } from "./properties"; import { TableProperties } from "./properties";
import { WidthType } from "./table-cell";
describe("TableProperties", () => { describe("TableProperties", () => {
describe("#constructor", () => { describe("#constructor", () => {
@ -14,7 +15,7 @@ describe("TableProperties", () => {
describe("#setWidth", () => { describe("#setWidth", () => {
it("adds a table width property", () => { it("adds a table width property", () => {
const tp = new TableProperties().setWidth("dxa", 1234); const tp = new TableProperties().setWidth(WidthType.DXA, 1234);
const tree = new Formatter().format(tp); const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({ expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblW": [{ _attr: { "w:type": "dxa", "w:w": 1234 } }] }], "w:tblPr": [{ "w:tblW": [{ _attr: { "w:type": "dxa", "w:w": 1234 } }] }],
@ -31,4 +32,15 @@ describe("TableProperties", () => {
}); });
}); });
}); });
describe("#cellMargin", () => {
it("adds a table cell top margin", () => {
const tp = new TableProperties();
tp.CellMargin.addTopMargin(1234, WidthType.DXA);
const tree = new Formatter().format(tp);
expect(tree).to.deep.equal({
"w:tblPr": [{ "w:tblCellMar": [{ "w:top": [{ _attr: { "w:sz": "dxa", "w:w": 1234 } }] }] }],
});
});
});
}); });

19
src/file/table/properties.ts
View File

@ -1,13 +1,18 @@
import { XmlAttributeComponent, XmlComponent } from "file/xml-components"; import { XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { WidthType } from "./table-cell";
export type WidthTypes = "dxa" | "pct" | "nil" | "auto"; import { TableCellMargin } from "./table-cell-margin";
export class TableProperties extends XmlComponent { export class TableProperties extends XmlComponent {
private readonly cellMargain: TableCellMargin;
constructor() { constructor() {
super("w:tblPr"); super("w:tblPr");
this.cellMargain = new TableCellMargin();
this.root.push(this.cellMargain);
} }
public setWidth(type: WidthTypes, w: number | string): TableProperties { public setWidth(type: WidthType, w: number | string): TableProperties {
this.root.push(new PreferredTableWidth(type, w)); this.root.push(new PreferredTableWidth(type, w));
return this; return this;
} }
@ -21,10 +26,14 @@ export class TableProperties extends XmlComponent {
this.root.push(new TableBorders()); this.root.push(new TableBorders());
return this; return this;
} }
public get CellMargin(): TableCellMargin {
return this.cellMargain;
}
} }
interface ITableWidth { interface ITableWidth {
type: WidthTypes; type: WidthType;
w: number | string; w: number | string;
} }
@ -33,7 +42,7 @@ class TableWidthAttributes extends XmlAttributeComponent<ITableWidth> {
} }
class PreferredTableWidth extends XmlComponent { class PreferredTableWidth extends XmlComponent {
constructor(type: WidthTypes, w: number | string) { constructor(type: WidthType, w: number | string) {
super("w:tblW"); super("w:tblW");
this.root.push(new TableWidthAttributes({ type, w })); this.root.push(new TableWidthAttributes({ type, w }));
} }

55
src/file/table/table-cell-margin.ts Normal file
View File

@ -0,0 +1,55 @@
import { IXmlableObject, XmlAttributeComponent, XmlComponent } from "file/xml-components";
import { WidthType } from "./table-cell";
class TableCellMarginAttributes extends XmlAttributeComponent<{ type: WidthType; value: number }> {
protected xmlKeys = { value: "w:w", type: "w:sz" };
}
class BaseTableCellMargin extends XmlComponent {
public setProperties(value: number, type: WidthType = WidthType.DXA): void {
this.root.push(
new TableCellMarginAttributes({
type: type,
value: value,
}),
);
}
}
export class TableCellMargin extends XmlComponent {
constructor() {
super("w:tblCellMar");
}
public prepForXml(): IXmlableObject {
return this.root.length > 0 ? super.prepForXml() : "";
}
public addTopMargin(value: number, type: WidthType = WidthType.DXA): void {
const top = new BaseTableCellMargin("w:top");
top.setProperties(value, type);
this.root.push(top);
}
public addLeftMargin(value: number, type: WidthType = WidthType.DXA): void {
const left = new BaseTableCellMargin("w:left");
left.setProperties(value, type);
this.root.push(left);
}
public addBottomMargin(value: number, type: WidthType = WidthType.DXA): void {
const bottom = new BaseTableCellMargin("w:bottom");
bottom.setProperties(value, type);
this.root.push(bottom);
}
public addRightMargin(value: number, type: WidthType = WidthType.DXA): void {
const right = new BaseTableCellMargin("w:right");
right.setProperties(value, type);
this.root.push(right);
}
}

3
src/file/table/table.spec.ts
View File

@ -4,6 +4,7 @@ import { expect } from "chai";
import { Formatter } from "../../export/formatter"; import { Formatter } from "../../export/formatter";
import { Paragraph } from "../paragraph"; import { Paragraph } from "../paragraph";
import { Table } from "./"; import { Table } from "./";
import { WidthType } from "./table-cell";
const DEFAULT_TABLE_PROPERTIES = { const DEFAULT_TABLE_PROPERTIES = {
"w:tblBorders": [ "w:tblBorders": [
@ -174,7 +175,7 @@ describe("Table", () => {
describe("#setWidth", () => { describe("#setWidth", () => {
it("sets the preferred width on the table", () => { it("sets the preferred width on the table", () => {
const table = new Table(2, 2).setWidth("pct", 1000); const table = new Table(2, 2).setWidth(WidthType.PERCENTAGE, 1000);
const tree = new Formatter().format(table); const tree = new Formatter().format(table);
expect(tree) expect(tree)
.to.have.property("w:tbl") .to.have.property("w:tbl")

4
src/file/table/table.ts
View File

@ -12,7 +12,7 @@ import {
import { IXmlableObject, XmlComponent } from "file/xml-components"; import { IXmlableObject, XmlComponent } from "file/xml-components";
import { Paragraph } from "../paragraph"; import { Paragraph } from "../paragraph";
import { TableGrid } from "./grid"; import { TableGrid } from "./grid";
import { TableProperties, WidthTypes } from "./properties"; import { TableProperties } from "./properties";
export class Table extends XmlComponent { export class Table extends XmlComponent {
private readonly properties: TableProperties; private readonly properties: TableProperties;
@ -67,7 +67,7 @@ export class Table extends XmlComponent {
return this.getRow(row).getCell(col); return this.getRow(row).getCell(col);
} }
public setWidth(type: WidthTypes, width: number | string): Table { public setWidth(type: WidthType, width: number | string): Table {
this.properties.setWidth(type, width); this.properties.setWidth(type, width);
return this; return this;
} }