diff --git a/CHANGELOG.md b/CHANGELOG.md
index 612c56761..260d34ea3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,13 +1,20 @@
# Change Log
-## [v1.1.5](https://github.com/gitbrent/pptxgenjs/tree/v1.1.4) (2017-01-17)
-[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.3...v1.1.5)
+## [v1.1.6](https://github.com/gitbrent/pptxgenjs/tree/v1.1.6) (2017-01-19)
+[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.5...v1.1.6)
+
+**Implemented Enhancements:**
+- Support for animated GIFs in `addImage()` [\#22](https://github.com/gitbrent/PptxGenJS/issues/22) ([shashank2104](https://github.com/shashank2104))
+- Added new `slideNumber` option allowing `x` and `y` placement of slide number [\#25](https://github.com/gitbrent/PptxGenJS/issues/25) ([priyaraskar](https://github.com/priyaraskar))
+
+## [v1.1.5](https://github.com/gitbrent/pptxgenjs/tree/v1.1.5) (2017-01-17)
+[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.4...v1.1.5)
**Fixed Bugs:**
- Trouble running in NW.js [\#19](https://github.com/gitbrent/PptxGenJS/issues/19) ([GregReser](https://github.com/GregReser))
- Supported usage via node program instead of HTML [\#23](https://github.com/gitbrent/PptxGenJS/issues/23) ([parsleyt](https://github.com/parsleyt))
-## [v1.1.4](https://github.com/gitbrent/pptxgenjs/tree/v1.1.3) (2017-01-04)
+## [v1.1.4](https://github.com/gitbrent/pptxgenjs/tree/v1.1.4) (2017-01-04)
[Full Changelog](https://github.com/gitbrent/pptxgenjs/compare/v1.1.3...v1.1.4)
**Fixed Bugs:**
diff --git a/README.md b/README.md
index 90bf7587c..7ab7e9f3d 100644
--- a/README.md
+++ b/README.md
@@ -26,17 +26,14 @@ an HTML Table across one or more Slides with a single command.
- [Client-Side](#client-side)
- [Node.js (4.x and later)](#nodejs-4x-and-later)
- [Optional Library Files](#optional-library-files)
-- [Creating a Presentation](#creating-a-presentation)
-- [Master Slides and Corporate Branding](#master-slides-and-corporate-branding)
- - [Slide Masters](#slide-masters)
- - [Slide Master Examples](#slide-master-examples)
- - [ProTip](#protip)
- - [Slide Master Object Options](#slide-master-object-options)
- - [Sample Slide Master File](#sample-slide-master-file)
+- [Presentation Basics](#presentation-basics)
- [Library Reference](#library-reference)
- - [Presentation Options](#presentation-options)
- - [Available Layouts](#available-layouts)
+ - [Create Presentation](#create-presentation)
+ - [Presentation Options](#presentation-options)
+ - [Available Layouts](#available-layouts)
- [Creating Slides](#creating-slides)
+ - [Slide Options](#slide-options)
+ - [Slide Number Options](#slide-number-options)
- [Adding Text](#adding-text)
- [Text Options](#text-options)
- [Text Examples](#text-examples)
@@ -52,6 +49,11 @@ an HTML Table across one or more Slides with a single command.
- [Adding Images](#adding-images)
- [Image Options](#image-options)
- [Image Examples](#image-examples)
+- [Master Slides and Corporate Branding](#master-slides-and-corporate-branding)
+ - [Slide Masters](#slide-masters)
+ - [Slide Master Examples](#slide-master-examples)
+ - [Slide Master Object Options](#slide-master-object-options)
+ - [Sample Slide Master File](#sample-slide-master-file)
- [Table-to-Slides Feature](#table-to-slides-feature)
- [Table-to-Slides Options](#table-to-slides-options)
- [Notes:](#notes)
@@ -100,7 +102,7 @@ include the `pptxgen.shapes.js` library. It's a complete PowerPoint PPTX Shape
```
**************************************************************************************************
-# Creating a Presentation
+# Presentation Basics
PowerPoint Presentations are created via JavaScript by following 4 basic steps:
1. Create the Presentation
@@ -117,95 +119,30 @@ pptx.save('Sample Presentation');
That's really all there is to it!
**************************************************************************************************
-# Master Slides and Corporate Branding
-
-## Slide Masters
-Generating sample slides like those shown above is great for demonstrating library features,
-but the reality is most of us will be required to produce presentations that have a certain design or
-corporate branding.
-
-PptxGenJS allows you to define Master Slides via objects that can then be used to provide branding
-functionality.
-
-Slide Masters are defined using the same object style used in Slides. Add these objects as a variable to a file that
-is included in the script src tags on your page, then reference them by name in your code.
-E.g.: ``
-
-## Slide Master Examples
-`pptxgenjs.masters.js` contents:
-```javascript
-var gObjPptxMasters = {
- MASTER_SLIDE: {
- title: 'Slide master',
- isNumbered: true,
- margin: [ 0.5, 0.25, 1.0, 0.25 ],
- bkgd: 'FFFFFF',
- images: [ { path:'images/logo_square.png', x:9.3, y:4.9, w:0.5, h:0.5 } ],
- shapes: [
- { type:'text', text:'ACME - Confidential', x:0, y:5.17, w:'100%', h:0.3, align:'center', valign:'top', color:'7F7F7F', font_size:8, bold:true },
- { type:'line', x:0.3, y:3.85, w:5.7, h:0.0, line:'007AAA' },
- { type:'rectangle', x:0, y:0, w:'100%', h:.65, w:5, h:3.2, fill:'003b75' }
- ]
- },
- TITLE_SLIDE: {
- title: 'I am the Title Slide',
- isNumbered: false,
- bkgd: { data:'image/png;base64,R0lGONlhotPQBMAPyoAPosR[...]+0pEZbEhAAOw==' },
- images: [ { x:'7.4', y:'4.1', w:'2', h:'1', data:'image/png;base64,R0lGODlhPQBEAPeoAJosM[...]+0pCZbEhAAOw==' } ]
- }
-};
-```
-Every object added to the global master slide variable `gObjPptxMasters` can then be referenced
-by their key names that you created (e.g.: "TITLE_SLIDE").
+# Library Reference
-### ProTip
-Pre-encode your images (base64) and add the string as the optional data key/val
-(see the `TITLE_SLIDE.images` object above)
+## Create Presentation
+Client Browser:
```javascript
var pptx = new PptxGenJS();
-
-var slide1 = pptx.addNewSlide( pptx.masters.TITLE_SLIDE );
-slide1.addText('How To Create PowerPoint Presentations with JavaScript', { x:0.5, y:0.7, font_size:18 });
-// NOTE: Base master slide properties can be overridden on a selective basis:
-// Here we can set a new background color or image on-the-fly
-var slide2 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:'0088CC' } );
-var slide3 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ path:'images/title_bkgd.jpg' } } );
-var slide4 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ data:'image/png;base64,tFfInmP[...]=' } } );
-
-pptx.save();
+```
+Node.js:
+```javascript
+var pptx = require("pptxgenjs");
```
-## Slide Master Object Options
-| Option | Type | Unit | Default | Description | Possible Values |
-| :----------- | :------ | :----- | :------- | :----------- | :-------------------- |
-| `bkgd` | string | | `ffffff` | color | hex color code. Ex: `{ bkgd:'0088CC' }` |
-| `bkgd` | object | | | image | object with path OR data. Ex: `{path:'img/bkgd.png'}` OR `{data:'image/png;base64,iVBORwTwB[...]='}` |
-| `images` | array | | | image(s) | object array of path OR data. Ex: `{path:'img/logo.png'}` OR `{data:'image/png;base64,tFfInmP[...]'}`|
-| `isNumbered` | boolean | | `false` | Show slide numbers | `true` or `false` |
-| `margin` | number | inches | `1.0` | Slide margin | 0.0 through whatever |
-| `margin` | array | | | Slide margins | array of numbers in TRBL order. Ex: `[0.5, 0.75, 0.5, 0.75]` |
-| `shapes` | array | | | shape(s) | array of shape objects. Ex: (see [Shape](#shape) section) |
-| `title` | string | | | Slide title | some title |
-
-## Sample Slide Master File
-A sample masters file is included in the distribution folder and contain a couple of different slides to get you started.
-Location: `PptxGenJS/dist/pptxgen.masters.js`
-
-**************************************************************************************************
-# Library Reference
-
-## Presentation Options
+### Presentation Options
Setting the Title:
```javascript
pptx.setTitle('PptxGenJS Sample Presentation');
```
-Setting the Layout (applied to every Slide in the Presentation):
+Setting the Layout (applies to all Slides in the Presentation):
```javascript
pptx.setLayout('LAYOUT_WIDE');
```
-## Available Layouts
+### Available Layouts
| Layout Name | Default | Layout Slide Size |
| :------------- | :------- | :---------------- |
| `LAYOUT_16x9` | Yes | 10 x 5.625 inches |
@@ -220,10 +157,21 @@ Add a Slide to a Presentation
var slide = pptx.addNewSlide();
```
-(*Optional*) Pass the name of a Master Slide to use
+### Slide Options
+Applying Master Slides
```javascript
var slide = pptx.addNewSlide(pptx.masters.TITLE_SLIDE);
```
+Adding Slide Numbers
+```javascript
+slide.slideNumber({ x:1.0, y:'90%' });
+```
+
+### Slide Number Options
+| Option | Type | Unit | Default | Description | Possible Values |
+| :----------- | :------ | :----- | :-------- | :------------------ | :--------------- |
+| `x` | number | inches | `0.3` | horizontal location | 0-n OR 'n%'. (Ex: `{x:'10%'}` places number 10% from left edge) |
+| `y` | number | inches | `90%` | vertical location | 0-n OR 'n%'. (Ex: `{y:'90%'}` places number 90% down the Slide) |
## Adding Text
```javascript
@@ -456,6 +404,81 @@ slide.addImage({ path:'images/cc_license_comp_chart.png', x:6.6, y:0.75, w:6.30,
pptx.save('Demo-Images');
```
+**************************************************************************************************
+# Master Slides and Corporate Branding
+
+## Slide Masters
+Generating sample slides like those shown above is great for demonstrating library features,
+but the reality is most of us will be required to produce presentations that have a certain design or
+corporate branding.
+
+PptxGenJS allows you to define Master Slides via objects that can then be used to provide branding
+functionality.
+
+Slide Masters are defined using the same object style used in Slides. Add these objects as a variable to a file that
+is included in the script src tags on your page, then reference them by name in your code.
+E.g.: ``
+
+## Slide Master Examples
+`pptxgenjs.masters.js` contents:
+```javascript
+var gObjPptxMasters = {
+ MASTER_SLIDE: {
+ title: 'Slide master',
+ margin: [ 0.5, 0.25, 1.0, 0.25 ],
+ bkgd: 'FFFFFF',
+ images: [ { path:'images/logo_square.png', x:9.3, y:4.9, w:0.5, h:0.5 } ],
+ shapes: [
+ { type:'text', text:'ACME - Confidential', x:0, y:5.17, w:'100%', h:0.3, align:'center', valign:'top', color:'7F7F7F', font_size:8, bold:true },
+ { type:'line', x:0.3, y:3.85, w:5.7, h:0.0, line:'007AAA' },
+ { type:'rectangle', x:0, y:0, w:'100%', h:.65, w:5, h:3.2, fill:'003b75' }
+ ],
+ slideNumber: { x:0.3, y:'90%' }
+ },
+ TITLE_SLIDE: {
+ title: 'I am the Title Slide',
+ bkgd: { data:'image/png;base64,R0lGONlhotPQBMAPyoAPosR[...]+0pEZbEhAAOw==' },
+ images: [ { x:'7.4', y:'4.1', w:'2', h:'1', data:'image/png;base64,R0lGODlhPQBEAPeoAJosM[...]+0pCZbEhAAOw==' } ]
+ }
+};
+```
+Every object added to the global master slide variable `gObjPptxMasters` can then be referenced
+by their key names that you created (e.g.: "TITLE_SLIDE").
+
+**TIP:**
+Pre-encode your images (base64) and add the string as the optional data key/val
+(see the `TITLE_SLIDE.images` object above)
+
+```javascript
+var pptx = new PptxGenJS();
+
+var slide1 = pptx.addNewSlide( pptx.masters.TITLE_SLIDE );
+slide1.addText('How To Create PowerPoint Presentations with JavaScript', { x:0.5, y:0.7, font_size:18 });
+// NOTE: Base master slide properties can be overridden on a selective basis:
+// Here we can set a new background color or image on-the-fly
+var slide2 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:'0088CC' } );
+var slide3 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ path:'images/title_bkgd.jpg' } } );
+var slide4 = pptx.addNewSlide( pptx.masters.MASTER_SLIDE, { bkgd:{ data:'image/png;base64,tFfInmP[...]=' } } );
+
+pptx.save();
+```
+
+## Slide Master Object Options
+| Option | Type | Unit | Default | Description | Possible Values |
+| :------------ | :------ | :----- | :------- | :----------- | :-------------------- |
+| `bkgd` | string | | `ffffff` | color | hex color code. Ex: `{ bkgd:'0088CC' }` |
+| `bkgd` | object | | | image | object with path OR data. Ex: `{path:'img/bkgd.png'}` OR `{data:'image/png;base64,iVBORwTwB[...]='}` |
+| `images` | array | | | image(s) | object array of path OR data. Ex: `{path:'img/logo.png'}` OR `{data:'image/png;base64,tFfInmP[...]'}`|
+| `slideNumber` | object | | | Show slide numbers | ex: `{ x:1.0, y:'50%' }` `x` and `y` can be either inches or percent |
+| `margin` | number | inches | `1.0` | Slide margin | 0.0 through whatever |
+| `margin` | array | | | Slide margins | array of numbers in TRBL order. Ex: `[0.5, 0.75, 0.5, 0.75]` |
+| `shapes` | array | | | shape(s) | array of shape objects. Ex: (see [Shape](#shape) section) |
+| `title` | string | | | Slide title | some title |
+
+## Sample Slide Master File
+A sample masters file is included in the distribution folder and contain a couple of different slides to get you started.
+Location: `PptxGenJS/dist/pptxgen.masters.js`
+
**************************************************************************************************
# Table-to-Slides Feature
* With the unique `addSlidesForTable()` function, you can reproduce an HTML table - background
diff --git a/dist/pptxgen.js b/dist/pptxgen.js
index 1af42b788..903453083 100644
--- a/dist/pptxgen.js
+++ b/dist/pptxgen.js
@@ -50,8 +50,11 @@ Number.isInteger = Number.isInteger || function(value) {
return typeof value === "number" && isFinite(value) && Math.floor(value) === value;
};
+// Detect Node.js
+var NODEJS = ( typeof module !== 'undefined' && module.exports );
+
// [Node.js]