@whoisxavier/display-temple 1.0.0

package/.codeclimate.yml

@@ -0,0 +1,18 @@
+engines:
+  tslint:
+    enabled: true
+  duplication:
+    enabled: true
+    config:
+      languages:
+      - javascript
+  fixme:
+      enabled: true
+ratings:
+  paths:
+  - src/**
+exclude_paths:
+- doc/**/*
+- dist/**/*
+- test/**/*
+- vendor/**/*

package/.esdoc.json

@@ -0,0 +1,8 @@
+{
+  "source": "./src",
+  "destination": "./docs",
+  "plugins": [
+    { "name": "esdoc-standard-plugin" },
+    { "name": "esdoc-ecmascript-proposal-plugin", "option": { "all": true } }
+  ]
+}

package/.github/workflows/Publish-to-NPM.yml

@@ -0,0 +1,30 @@
+name: Test and publish to NPM
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      # Setup .npmrc file to publish to npm
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16.x'
+          registry-url: 'https://registry.npmjs.org'
+      - run: npm install
+      - run: npm run build
+      - run: npm publish
+        working-directory: dist
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+      # Use action slack
+      - uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,job,took,workflow # selectable (default: repo,message)
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} # required
+        if: always() # Pick up events even if the job fails or is canceled.

package/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2016 MediaMonks B.V.
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the "Software"), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,183 @@
+# Display Temple
+
+[![npm](https://img.shields.io/npm/v/@whoisxavier/display-temple.svg?style=flat)](https://www.npmjs.com/package/@whoisxavier/display-temple)
+[![npm](https://img.shields.io/npm/dt/@whoisxavier/display-temple.svg?style=flat)](https://www.npmjs.com/package/@whoisxavier/display-temple)
+
+Display Advertising Temple by **x-code.studio** - Create display ads units for various vendors.
+
+## Getting Started
+
+Refer to the documentation for getting started with display advertising development.
+
+## Installation
+
+#### yarn
+```sh
+yarn add @whoisxavier/display-temple
+```
+
+#### npm
+```sh
+npm i -S @whoisxavier/display-temple
+```
+
+
+
+## Building
+
+In order to build seng-boilerplate, ensure that you have [Git](http://git-scm.com/downloads)
+and [Node.js](http://nodejs.org/) installed.
+
+Clone a copy of the repo:
+```sh
+git clone https://github.com/xaviergdiez/display-temple.git
+```
+
+Change to the display-temple directory:
+```sh
+cd display-temple
+```
+
+Install dev dependencies:
+```sh
+yarn
+```
+
+Use one of the following main scripts:
+```sh
+npm run build            # build this project
+npm run dev              # run compilers in watch mode, both for babel and typescript
+npm run test             # run the unit tests incl coverage
+npm run test:dev         # run the unit tests in watch mode
+npm run lint             # run eslint and tslint on this project
+npm run doc              # generate typedoc documentation
+```
+
+When installing this module, it adds a pre-commit hook, that runs lint and prettier commands
+before committing, so you can be sure that everything checks out.
+
+
+## Contribute
+
+View [CONTRIBUTING.md](./CONTRIBUTING.md)
+
+
+## Changelog
+
+View [CHANGELOG.md](./CHANGELOG.md)
+
+
+## Authors
+
+View [AUTHORS.md](./AUTHORS.md)
+
+
+## LICENSE
+
+[MIT](./LICENSE) © x-code.studio
+
+Based on the original work by MediaMonks (MIT License)
+
+
+## About this boilerplate
+
+**Remove this section when cloning this boilerplate to a real project!**
+
+### Folders
+
+This boilerplate contains the following folders:
+* **/coverage** - Contains the generated test code coverage, is sent to Code
+Climate and Coveral.io.
+* **/docs** - Contains the generated documentation by typedoc.
+* **/lib** - Contains the built code from `src/lib`, will be published to npm.
+* **/node_modules** - Contains the node modules generated by running `yarn`.
+* **/src** - Contains the source code.
+* **/test** - Contains the tests.
+* **/vendor** - Can contain 3rd party code used in this project, when not
+available on npm.
+
+### Files
+
+This boilerplate contains the following files:
+* **.babelrc** - Contains babel configuration.
+* **.codeclimate.yml** - The Code Climate configuration for this project.
+* **.editorconfig** - Defines general formatting rules.
+* **.eslintignore** - Lists patterns that should be ignored when running eslint.
+* **.eslintrc.js** - Contains eslint configuration.
+* **.gitignore** - These files should not end up in git.
+* **.npmignore** - These files should not end up in npm.
+* **.nvmrc** - Contains nodejs version to build this project with.
+* **.nycrc** - Contains nyc code coverage configuration.
+* **.prettierignore** - Lists patterns that should be ignored when running prettier.
+* **.prettierrc** - Contains prettier formatting configuration.
+* **.travis.yml** - Configuration for Travis CI.
+* **AUTHORS.md** - Contains a list of all the authors that worked on this module.
+* **CONTRIBUTING.md** - Contains information on how to contribute on this project.
+* **index.d.ts** - The built Typescript definitions, referenced in the package.json.
+Will be published to npm.
+* **index.d.ts** - The built Typescript index, referenced in the package.json.
+Will be published to npm.
+* **LICENSE** - Our license file.
+* **package.json** - To list the npm package information, all the dependencies,
+and contains all the scripts that can be run.
+* **README.MD** - This file, remove the about section when cloning this boilerplate.
+* **tsconfig.build.json** - The TypeScript configuration file for building definitions.
+* **tsconfig.json** - The TypeScript configuration file for this project.
+* **tslint.json** - The linting rules for our TypeScript code.
+* **yarn.lock** - Yarn lockfile to freeze module versions.
+
+### Travis
+
+This project uses [Travis](https://travis-ci.org) to build, test and
+publish its code to npm. Travis is free for public Github repositories.
+
+It runs on all commits, shows the build status for pull requests, and
+publishes to npm when a new tag/release is created.
+
+Travis only runs the `npm test` script, so have configured that script
+to run everything we want Travis to check. Besides the unit tests, we
+also run our validations and linters.
+
+The travis configuration is placed in a `.travis.yml` file, consisting
+of multiple sections.
+
+1.  Defines the `node_js` [language](https://docs.travis-ci.com/user/languages/javascript-with-nodejs),
+    and tells travis on which node versions to run the process.
+2.  Before running, it needs to install some global dependencies, and
+    when it processes some coverage results.
+3.  It can do a [npm deploy](https://docs.travis-ci.com/user/deployment/npm),
+    telling it to keep the generated artifacts and only publish when run
+    on node 8 and when a tag was committed. It also contains the email
+    address and api key of the npm user.
+4.  Code Climate has a [travis plugin](https://docs.travis-ci.com/user/code-climate/)
+    that automatically uploads the code coverage results.
+
+Because we want to keep the npm api key secret, we add the token to the Travis Repo settings
+where it will be stored secure:
+https://docs.travis-ci.com/user/environment-variables/#Defining-Variables-in-Repository-Settings
+
+Before we can do this, we must make sure that the repository is added
+to Travis, because Travis needs the repository owner/name info to make
+sure the encrypted values only work for that repository.
+
+1.  Then make sure you are logged in to your npm account with the
+    [adduser](https://docs.npmjs.com/cli/adduser) command:
+
+    ```sh
+    $ npm adduser
+    ```
+
+    To verify that you are logged in correctly you can check:
+
+    ```sh
+    $ npm whoami
+    ```
+
+3.  Now we need to [create a new token](https://docs.npmjs.com/getting-started/working_with_tokens):
+
+    ```sh
+    npm token create
+    ```
+
+    Copy the token value from the output to the Travis Environment Variable settings, and
+    add it with the name `NPM_TOKEN`.

package/copy-src-to-dist.js

@@ -0,0 +1,19 @@
+const json = require('./package.json');
+const glob = require('glob');
+const fs = require('fs-extra');
+const path = require('path');
+
+// options is optional
+glob("./src/**/*.*", {}, function (er, files) {
+  Promise.all(files.map(function(file, index){
+
+    const dest = file.replace('./src/', './dist/');
+
+    return fs.copy(file, dest)
+      .then(() => console.log('success!', dest))
+      .catch(err => console.error(err))
+    // // fs.createReadStream('test.log').pipe(fs.createWriteStream('newLog.log'));
+  })).then(result => {
+    fs.copy('README.md', './dist/README.md');
+  })
+});

package/create-dist-package-json.js

@@ -0,0 +1,8 @@
+const json = require('./package.json');
+const fs = require('fs-extra');
+
+const distPackage = Object.assign({}, json);
+distPackage.scripts = {};
+distPackage.devDependencies = {};
+
+fs.writeFile('./dist/package.json', JSON.stringify(distPackage), { encoding: 'utf8' });

package/examples/default/Animation.js

@@ -0,0 +1,23 @@
+class Animation {
+  constructor ()
+  {
+    this.timeline = gsap.timeline();
+
+    // do some animation stuff
+    this.timeline.to('')
+  }
+
+  ctaRollOver(){
+    const ctaRollOver = gsap.timeline();
+
+    // do some animation stuff
+    ctaRollOver.to('')
+  }
+
+  play(){
+    this.timeline.play();
+  }
+}
+
+export default Animation;
+

package/examples/default/Banner.js

@@ -0,0 +1,25 @@
+class Banner {
+
+  /**
+   *
+   * @param {HTMLElement} container
+   * @param {Animation} animation
+   */
+  constructor (container, animation)
+  {
+    this.animation = animation;
+  }
+
+  // function is called by INIT from studio.events.StudioEvent.INIT
+  async init(){
+
+    // this function already inlines svg img tags
+
+  }
+
+  start(){
+    this.animation.play();
+  }
+}
+
+export default Banner;

package/examples/default/main.js

@@ -0,0 +1,10 @@
+import config from "richmediarc";
+import Banner from './Banner';
+import Animation from './Animation';
+
+const banner = new Banner(
+  document.querySelector('body'),
+  new Animation()
+);
+
+banner.start();

package/examples/doubleclickstudio-frameanimation/Animation.js

@@ -0,0 +1,41 @@
+import FrameAnimation from '../../src/animation/FrameAnimation';
+
+class Animation extends FrameAnimation {
+  /**
+   * @param {gsap.core.Timeline} timeline
+   */
+  frame0In(timeline){
+    timeline.to()
+  }
+
+  /**
+   * @param {gsap.core.Timeline} timeline
+   */
+  frame0(timeline){
+    timeline.to()
+  }
+
+  /**
+   * @param {gsap.core.Timeline} timeline
+   */
+  frame0Out(timeline){
+    timeline.to()
+  }
+
+  /**
+   * @param {gsap.core.Timeline} timeline
+   */
+  frame1(timeline){
+    timeline.to()
+  }
+
+  /**
+   * @param {gsap.core.Timeline} timeline
+   */
+  frame2(timeline){
+    timeline.to()
+  }
+
+}
+
+export default Animation;

package/examples/doubleclickstudio-frameanimation/Banner.js

@@ -0,0 +1,39 @@
+import config from "richmediarc";
+import untilEnablerIsInitialized from '@mediamonks/temple/util/doubleclick/untilEnablerIsInitialized';
+import getEventDispatcher from '@mediamonks/temple/util/doubleclick/getEventDispatcher';
+import Events from '@mediamonks/temple/event/Events';
+
+class Banner{
+
+  config = config;
+  /**
+   *
+   * @param {HTMLElement} container
+   * @param {FrameAnimation} animation
+   */
+  constructor (container, animation)
+  {
+    this.container = container;
+    this.animation = animation;
+  }
+
+  // function is called by INIT from studio.events.StudioEvent.INIT
+  async init(){
+
+    // waits until Enabler is initialized.
+    await untilEnablerIsInitialized();
+
+    const eventDispatcher = await getEventDispatcher();
+    eventDispatcher.addEventListener(Events.VISIBLE, () => {
+      // do something when banner is visible.
+    })
+  }
+
+  async start(){
+    await this.init();
+
+    this.animation.play();
+  }
+}
+
+export default Banner;

package/examples/doubleclickstudio-frameanimation/main.js

@@ -0,0 +1,9 @@
+import Banner from './Banner';
+import Animation from './Animation';
+
+const banner = new Banner(
+  document.querySelector('body'),
+  new Animation()
+);
+
+banner.start();

package/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@whoisxavier/display-temple",
+  "version": "1.0.0",
+  "description": "Display Advertising Temple by x-code.studio - Create Display Advertising Units for various vendors.",
+  "scripts": {
+    "validate": "npm-run-all -p lint test",
+    "build": "npm-run-all -s clean build:*",
+    "build:copy": "node copy-src-to-dist.js",
+    "build:npm": "node create-dist-package-json.js",
+    "test": "cross-env NODE_ENV=test nyc --all mocha \"./test/**/*.spec.js\"",
+    "test:dev": "mocha -w --watch-extensions ts,js \"./test/**/*.spec.js\"",
+    "clean": "npm-run-all clean:*",
+    "clean:test": "shx rm -rf coverage .nyc_output",
+    "clean:npm": "shx rm -rf lib tmp index.js",
+    "doc": "node_modules/.bin/esdoc",
+    "lint": "npm-run-all lint:*",
+    "lint:js": "eslint src --ext .js --cache",
+    "prettify": "prettier --write \"src/**/*.{js,json}\"",
+    "precommit": "lint-staged"
+  },
+  "lint-staged": {
+    "linters": {
+      "src/**/*.{js,json}": [
+        "prettier --write",
+        "git add"
+      ]
+    }
+  },
+  "pre-push": [
+    "validate"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/xaviergdiez/display-temple.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "author": "Xavier Diez <hello@whoisxavier.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/xaviergdiez/display-temple/issues"
+  },
+  "homepage": "https://github.com/xaviergdiez/display-temple#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.11.5",
+    "@babel/core": "^7.11.5",
+    "@babel/plugin-transform-runtime": "^7.11.5",
+    "@babel/preset-env": "^7.11.5",
+    "@babel/preset-stage-3": "^7.8.3",
+    "@babel/register": "^7.11.5",
+    "@types/chai": "^4.2.12",
+    "@types/mocha": "^2.2.44",
+    "@types/sinon": "^4.1.2",
+    "@types/sinon-chai": "^2.7.37",
+    "babel-eslint": "^8.0.3",
+    "babel-plugin-istanbul": "^4.1.5",
+    "babel-preset-next": "^1.4.0",
+    "chai": "^4.1.2",
+    "coveralls": "^2.11.6",
+    "cross-env": "^5.2.1",
+    "esdoc": "^1.1.0",
+    "esdoc-ecmascript-proposal-plugin": "^1.0.0",
+    "esdoc-standard-plugin": "^1.0.0",
+    "eslint": "^4.13.1",
+    "eslint-config-airbnb-base": "^12.1.0",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-friendly-formatter": "^3.0.0",
+    "eslint-import-resolver-typescript": "^1.0.2",
+    "eslint-plugin-import": "^2.22.0",
+    "eslint-plugin-prettier": "^2.4.0",
+    "fs-extra": "^6.0.1",
+    "glob": "^7.1.6",
+    "husky": "^0.14.3",
+    "jsdom": "^11.5.1",
+    "jsdom-global": "^3.0.2",
+    "lint-staged": "^6.0.0",
+    "mocha": "^4.0.1",
+    "npm-run-all": "^4.1.5",
+    "nyc": "^11.3.0",
+    "prettier": "^1.19.1",
+    "shx": "^0.2.2",
+    "sinon": "^4.1.3",
+    "sinon-chai": "^2.14.0",
+    "esdoc-publish-html-plugin": "^1.1.2"
+  },
+  "peerDependencies": {
+    "gsap": "^3.1.0"
+  },
+  "dependencies": {}
+}

package/scoping.js

@@ -0,0 +1 @@
+