diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..cd65bb3 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,13 @@ +[*] +charset=utf-8 +end_of_line=lf +trim_trailing_whitespace = true +insert_final_newline = true +indent_style=space +indent_size=4 + +[*.json] +indent_size=2 + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..6fd9be6 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,21 @@ +# Set the default behavior, in case people don't have core.autocrlf set. +* text=auto + +# Explicitly declare text files you want to always be normalized and converted +# to native line endings on checkout. +*.ts text eol=lf +*.js text eol=lf +*.css text eol=lf +*.scss text eol=lf +*.json text eol=lf +*.xml text eol=lf +*.yml text eol=lf +*.md text eol=lf +*.gitattributes eol=lf +*.gitignore eol=lf + +# Denote all files that are truly binary and should not be modified. +*.png binary +*.jpg binary +*.gif binary +./history diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..9ad6ec5 --- /dev/null +++ b/.gitignore @@ -0,0 +1,3 @@ +dist/ +node_modules/ +localSettings.js diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..a576cd5 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,66 @@ +sudo: required +language: node_js +node_js: +- '6' +before_install: +- npm i -g npm@latest +- npm install grunt-cli -g +- export CHROME_BIN=chromium-browser +- export DISPLAY=:99.0 +- sh -e /etc/init.d/xvfb start +- wget -q -O - http://opensource.wandisco.com/wandisco-debian.gpg | sudo apt-key add - +- sudo sh -c 'echo "deb http://opensource.wandisco.com/debian/ wheezy svn17" > /etc/apt/sources.list.d/wandisco-subversion.list' +- sudo apt-get -qq update +- sudo apt-get install -y --allow-downgrades subversion=1.7.22-1+WANdisco libsvn1=1.7.22-1+WANdisco +- svn --version +after_success: +- bash <(curl -s https://codecov.io/bash) +cache: + directories: + - node_modules +env:sudo: required +language: node_js +node_js: +- "8" +addons: + apt: + sources: + - google-chrome + packages: + - google-chrome-stable +before_install: +- npm i -g npm +- npm install grunt-cli -g +- wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb +- sudo dpkg -i google-chrome*.deb +- export CHROME_BIN=chromium-browser +- export DISPLAY=:99.0 +- sh -e /etc/init.d/xvfb start +- wget -q -O - http://opensource.wandisco.com/wandisco-debian.gpg | sudo apt-key add - +- sudo sh -c "echo 'deb http://opensource.wandisco.com/debian/ wheezy svn17' > /etc/apt/sources.list.d/wandisco-subversion.list" +- sudo apt-get -qq update +- sudo apt-get install -y --allow-downgrades subversion=1.7.22-1+WANdisco libsvn1=1.7.22-1+WANdisco +- svn --version +- npm --version +script: travis_wait 30 npm test +after_success: +- bash <(curl -s https://codecov.io/bash) +cache: + directories: + - node_modules +env: + global: + - MX_APP_NAME=signature101 + - MX_PROJECT_ID=a48ab6ca-82a2-4b82-8286-eddd07eae0b9 + - MX_BRANCH_NAME=trunk + - MX_ENVIRONMENT=Sandbox + - MX_USER="ci@flockofbirds.org" +deploy: + provider: releases + api_key: $GITHUB_KEY + file_glob: true + file: dist/release/* + skip_cleanup: true + on: + repo: $TRAVIS_REPO_SLUG + tags: true diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..ef0fcde --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,112 @@ +"use strict"; +const webpack = require("webpack"); +const webpackConfig = require("./webpack.config"); +const merge = require("webpack-merge"); + +const webpackConfigRelease = webpackConfig.map(config => merge(config, { + devtool: false, + mode: "production" +})); + +module.exports = function(grunt) { + const pkg = grunt.file.readJSON("package.json"); + grunt.initConfig({ + + watch: { + updateWidgetFiles: { + files: [ "./src/**/*" ], + tasks: [ "webpack:develop", "compress:dist", "copy:distDeployment", "copy:mpk" ], + options: { + debounceDelay: 250, + livereload: true + } + } + }, + + compress: { + dist: { + options: { + archive: "./dist/" + pkg.version + "/" + pkg.widgetName + ".mpk", + mode: "zip" + }, + files: [ { + expand: true, + date: new Date(), + store: false, + cwd: "./dist/tmp/src", + src: [ "**/*" ] + } ] + } + }, + + copy: { + distDeployment: { + files: [ { + dest: "./dist/MxTestProject/deployment/web/widgets", + cwd: "./dist/tmp/src/", + src: [ "**/*" ], + expand: true + } ] + }, + mpk: { + files: [ { + dest: "./dist/MxTestProject/widgets", + cwd: "./dist/" + pkg.version + "/", + src: [ pkg.widgetName + ".mpk" ], + expand: true + } ] + } + }, + + file_append: { + addSourceURL: { + files: [ { + append: `\n\n//# sourceURL=${pkg.widgetName}.webmodeler.js\n`, + input: `dist/tmp/src/${pkg.widgetName}.webmodeler.js` + } ] + } + }, + + webpack: { + develop: webpackConfig, + release: webpackConfigRelease + }, + + clean: { + build: [ + "./dist/" + pkg.version + "/" + pkg.widgetName + "/*", + "./dist/tmp/**/*", + "./dist/tsc/**/*", + "./dist/testresults/**/*", + "./dist/MxTestProject/deployment/web/widgets/" + pkg.widgetName + "/*", + "./dist/MxTestProject/widgets/" + pkg.widgetName + ".mpk", + "./dist/wdio/**/*" + ] + }, + + checkDependencies: { + this: {} + } + }); + + grunt.loadNpmTasks("grunt-check-dependencies"); + grunt.loadNpmTasks("grunt-contrib-clean"); + grunt.loadNpmTasks("grunt-contrib-compress"); + grunt.loadNpmTasks("grunt-contrib-copy"); + grunt.loadNpmTasks("grunt-contrib-watch"); + grunt.loadNpmTasks("grunt-webpack"); + grunt.loadNpmTasks("grunt-file-append"); + + grunt.registerTask("default", [ "clean build", "watch" ]); + grunt.registerTask( + "clean build", + "Compiles all the assets and copies the files to the dist directory.", + [ "checkDependencies", "clean:build", "webpack:develop", "compress:dist", "copy:mpk" ] + ); + grunt.registerTask( + "release", + "Compiles all the assets and copies the files to the dist directory. Minified without source mapping", + [ "checkDependencies", "clean:build", "webpack:release", "file_append", "compress:dist", "copy:mpk" ] + ); + grunt.registerTask("build", [ "clean build" ]); +}; diff --git a/LICENSE b/LICENSE index 261eeb9..caacdf2 100644 --- a/LICENSE +++ b/LICENSE @@ -186,7 +186,7 @@ same "printed page" as the copyright notice for easier identification within third-party archives. - Copyright [yyyy] [name of copyright owner] + Copyright 2018 Mendix B.V. Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. diff --git a/README.md b/README.md index a548df4..fa299c8 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,45 @@ -# Signature -Signature +## Signature +A signature pad for capturing signatures. +The widget implements bezier curves and velocity for the smooth drawing of the signature. + +## Features +* Record signature in a mendix database +* Customizable pen color and pen size +* Toggle attribute to delete signature and reset the canvas + +## Configuration +Add the widget to a dataview. + +## Demo project +[https://signature101.mxapps.io](https://signature101.mxapps.io) + +## Usage + +* Add the **Has signature** attribute to toggle when clearing the canvas. +![Canvas](/assets/signature-attribute.png) + +* Under the pen tab, you can customize your own pen size by choosing the different pen types, the pen color. +![Pen](/assets/signature-pen.png) + +* Run the application +* After signing on the canvas the **Has signature** attribute is toggled to show that the canvas has a signature, you can toggle to **no** inorder to clear the signature +![Data source](/assets/signature-image.png) + +### Properties +* **Pen** | **color** - HTML color code of the pen. +* **Show background grid** - When set to yes, a grid is shown in the background of the writable area. +* **Cell width** - The width of a grid cell in (px). +* **Cell height** - The height of a grid cell in (px). +* **Line color** - HTML color code of the grid lines +* **Line width** - Width of grid line border in pixels +* Under the **common tab**, custom CSS Style properties can be set for responsive design, when width and height are a percentage. For example: + - min-width: 200px; + - max-width: 600px; + - min-height: 200px; + - max-height: 600px; + +## Compatibility +The widget is usable and works smoothly in Google chrome, Internet explorer. + +## Development +See [here](/development.md) diff --git a/assets/IconDesktopModeler.png b/assets/IconDesktopModeler.png new file mode 100644 index 0000000..48dd586 Binary files /dev/null and b/assets/IconDesktopModeler.png differ diff --git a/assets/SignatureAppstoreTile.png b/assets/SignatureAppstoreTile.png new file mode 100644 index 0000000..c9cad8f Binary files /dev/null and b/assets/SignatureAppstoreTile.png differ diff --git a/assets/SignatureDemo.gif b/assets/SignatureDemo.gif new file mode 100644 index 0000000..92e1e00 Binary files /dev/null and b/assets/SignatureDemo.gif differ diff --git a/assets/signature-attribute.png b/assets/signature-attribute.png new file mode 100644 index 0000000..610acd9 Binary files /dev/null and b/assets/signature-attribute.png differ diff --git a/assets/signature-image.png b/assets/signature-image.png new file mode 100644 index 0000000..1023b61 Binary files /dev/null and b/assets/signature-image.png differ diff --git a/assets/signature-pen.png b/assets/signature-pen.png new file mode 100644 index 0000000..aebbd4a Binary files /dev/null and b/assets/signature-pen.png differ diff --git a/assets/signature.png b/assets/signature.png new file mode 100644 index 0000000..f422042 Binary files /dev/null and b/assets/signature.png differ diff --git a/development.md b/development.md new file mode 100644 index 0000000..c888bad --- /dev/null +++ b/development.md @@ -0,0 +1,68 @@ +# Development and contribution +Prerequisite: Install git, node package manager, webpack CLI, grunt CLI, Karma CLI + +To contribute, fork and clone. + + > git clone https://github.com/mendixlabs/signature.git + +The code is in typescript. Use a typescript IDE of your choice, like Visual Studio Code or WebStorm. + +To set up the development environment, run: + + > npm install + +Create a folder named `dist` in the project root. + +Create a Mendix test project in the dist folder and rename its root folder to `dist/MxTestProject`. Changes to the widget code shall be automatically pushed to this test project. +Or get the test project from [https://github.com/mendixlabs/signature/releases/latest](https://github.com/mendixlabs/signature/releases/latest) + +To automatically compile, bundle and push code changes to the running test project, run: + + > npm start + +To run the project unit tests with code coverage, results can be found at `dist/testresults/coverage/index.html`, run: + + > npm run test:unit + +Run the unit test continuously during development: + + > npm run test:dev + +Run the end to end test during development: + + > npm run test:e2e:dev + +## Scripts +While developing, you will probably rely mostly on `npm start`; however, there are additional scripts at your disposal: + +|`npm run