From 63d6e2267c297509a1df2727996fa4b0b8c3f008 Mon Sep 17 00:00:00 2001 From: Eitan Peer Date: Sun, 8 Jan 2017 14:09:54 +0200 Subject: [PATCH] Angular2 SDK --- .gitignore | 29 +- .npmignore | 3 + .travis.yml | 20 + .yarnclean | 45 + CHANGELOG.md | 92 +- CONTRIBUTING.md | 118 + LICENSE | 21 + README.md | 199 +- e2e/app.e2e-spec.ts | 69 + e2e/cloudinary_logo.png | Bin 0 -> 23609 bytes index.ts | 1 + karma-test-shim.js | 93 + karma.conf.js | 153 +- package.json | 88 +- protractor.config.js | 194 ++ samples/photo_album/README.md | 65 +- samples/photo_album/app/css/app.css | 49 +- samples/photo_album/app/index.html | 50 +- samples/photo_album/app/js/animations.js | 52 - samples/photo_album/app/js/app.component.ts | 39 + samples/photo_album/app/js/app.module.ts | 37 + samples/photo_album/app/js/app.routing.ts | 22 + samples/photo_album/app/js/config.ts.sample | 4 + samples/photo_album/app/js/controllers.js | 58 - samples/photo_album/app/js/main.ts | 17 + .../app/js/model/photo-album.service.ts | 32 + samples/photo_album/app/js/model/photo.ts | 4 + .../photo-album/photo-upload.component.html | 56 + .../js/photo-album/photo-upload.component.ts | 116 + .../js/photo-list/photo-list.component.css | 6 + .../js/photo-list/photo-list.component.html | 224 ++ .../app/js/photo-list/photo-list.component.ts | 22 + samples/photo_album/app/js/services.js | 15 - samples/photo_album/app/partials/.gitkeep | 0 .../photo_album/app/partials/photo-list.html | 115 - .../app/partials/photo-upload.html | 51 - samples/photo_album/bower.json | 17 - samples/photo_album/package.json | 41 +- samples/photo_album/tsconfig.json | 26 + samples/photo_album/webpack.config.js | 48 + samples/photo_album/yarn.lock | 2950 +++++++++++++++++ samples/photo_album_with_jquery/README.md | 67 +- .../photo_album_with_jquery/app/css/app.css | 49 +- .../photo_album_with_jquery/app/index.html | 43 - .../app/js/animations.js | 52 - .../app/js/app.component.ts | 40 + samples/photo_album_with_jquery/app/js/app.js | 32 - .../app/js/app.module.ts | 35 + .../app/js/app.routing.ts | 22 + .../app/js/config.js.sample | 5 - .../app/js/config.ts.sample | 4 + .../app/js/controllers.js | 68 - .../app/js/model/photo-album.service.ts | 32 + .../app/js/model/photo.ts | 4 + .../photo-upload-jquery.component.html | 51 + .../photo-upload-jquery.component.ts | 101 + .../js/photo-list/photo-list.component.css | 6 + .../js/photo-list/photo-list.component.html | 223 ++ .../app/js/photo-list/photo-list.component.ts | 23 + .../app/js/services.js | 15 - samples/photo_album_with_jquery/app/main.ts | 12 + .../app/partials/.gitkeep | 0 .../app/partials/photo-list.html | 115 - .../app/partials/photo-upload-jquery.html | 51 - .../app/systemjs.config.js | 54 + samples/photo_album_with_jquery/bower.json | 20 - .../bs-config-e2e.json | 3 + samples/photo_album_with_jquery/index.html | 34 + samples/photo_album_with_jquery/package.json | 34 +- samples/photo_album_with_jquery/tsconfig.json | 20 + samples/photo_album_with_jquery/yarn.lock | 2054 ++++++++++++ scripts/install-sample-from-source.js | 24 + scripts/run-sample.js | 37 + src/cloudinary-configuration.class.ts | 27 + src/cloudinary-image-source.directive.spec.ts | 64 + src/cloudinary-image-source.directive.ts | 66 + src/cloudinary-image.component.spec.ts | 187 ++ src/cloudinary-image.component.ts | 70 + ...loudinary-transformation.directive.spec.ts | 56 + src/cloudinary-transformation.directive.ts | 14 + src/cloudinary-video.component.spec.ts | 229 ++ src/cloudinary-video.component.ts | 82 + src/cloudinary.module.ts | 34 + src/cloudinary.service.spec.ts | 200 ++ src/cloudinary.service.ts | 134 + systemjs.config.extras.js | 11 + systemjs.config.js | 42 + tsconfig.json | 24 + tslint.json | 87 + yarn.lock | 2388 +++++++++++++ 90 files changed, 11275 insertions(+), 1011 deletions(-) create mode 100644 .npmignore create mode 100644 .travis.yml create mode 100644 .yarnclean create mode 100644 CONTRIBUTING.md create mode 100644 LICENSE create mode 100644 e2e/app.e2e-spec.ts create mode 100644 e2e/cloudinary_logo.png create mode 100644 index.ts create mode 100644 karma-test-shim.js create mode 100644 protractor.config.js delete mode 100644 samples/photo_album/app/js/animations.js create mode 100644 samples/photo_album/app/js/app.component.ts create mode 100644 samples/photo_album/app/js/app.module.ts create mode 100644 samples/photo_album/app/js/app.routing.ts create mode 100644 samples/photo_album/app/js/config.ts.sample delete mode 100644 samples/photo_album/app/js/controllers.js create mode 100644 samples/photo_album/app/js/main.ts create mode 100644 samples/photo_album/app/js/model/photo-album.service.ts create mode 100644 samples/photo_album/app/js/model/photo.ts create mode 100644 samples/photo_album/app/js/photo-album/photo-upload.component.html create mode 100644 samples/photo_album/app/js/photo-album/photo-upload.component.ts create mode 100644 samples/photo_album/app/js/photo-list/photo-list.component.css create mode 100644 samples/photo_album/app/js/photo-list/photo-list.component.html create mode 100644 samples/photo_album/app/js/photo-list/photo-list.component.ts delete mode 100644 samples/photo_album/app/js/services.js delete mode 100644 samples/photo_album/app/partials/.gitkeep delete mode 100644 samples/photo_album/app/partials/photo-list.html delete mode 100644 samples/photo_album/app/partials/photo-upload.html delete mode 100644 samples/photo_album/bower.json create mode 100644 samples/photo_album/tsconfig.json create mode 100644 samples/photo_album/webpack.config.js create mode 100644 samples/photo_album/yarn.lock delete mode 100644 samples/photo_album_with_jquery/app/index.html delete mode 100644 samples/photo_album_with_jquery/app/js/animations.js create mode 100644 samples/photo_album_with_jquery/app/js/app.component.ts delete mode 100644 samples/photo_album_with_jquery/app/js/app.js create mode 100644 samples/photo_album_with_jquery/app/js/app.module.ts create mode 100644 samples/photo_album_with_jquery/app/js/app.routing.ts delete mode 100644 samples/photo_album_with_jquery/app/js/config.js.sample create mode 100644 samples/photo_album_with_jquery/app/js/config.ts.sample delete mode 100644 samples/photo_album_with_jquery/app/js/controllers.js create mode 100644 samples/photo_album_with_jquery/app/js/model/photo-album.service.ts create mode 100644 samples/photo_album_with_jquery/app/js/model/photo.ts create mode 100644 samples/photo_album_with_jquery/app/js/photo-album/photo-upload-jquery.component.html create mode 100644 samples/photo_album_with_jquery/app/js/photo-album/photo-upload-jquery.component.ts create mode 100644 samples/photo_album_with_jquery/app/js/photo-list/photo-list.component.css create mode 100644 samples/photo_album_with_jquery/app/js/photo-list/photo-list.component.html create mode 100644 samples/photo_album_with_jquery/app/js/photo-list/photo-list.component.ts delete mode 100644 samples/photo_album_with_jquery/app/js/services.js create mode 100644 samples/photo_album_with_jquery/app/main.ts delete mode 100644 samples/photo_album_with_jquery/app/partials/.gitkeep delete mode 100644 samples/photo_album_with_jquery/app/partials/photo-list.html delete mode 100644 samples/photo_album_with_jquery/app/partials/photo-upload-jquery.html create mode 100644 samples/photo_album_with_jquery/app/systemjs.config.js delete mode 100644 samples/photo_album_with_jquery/bower.json create mode 100644 samples/photo_album_with_jquery/bs-config-e2e.json create mode 100644 samples/photo_album_with_jquery/index.html create mode 100644 samples/photo_album_with_jquery/tsconfig.json create mode 100644 samples/photo_album_with_jquery/yarn.lock create mode 100644 scripts/install-sample-from-source.js create mode 100644 scripts/run-sample.js create mode 100644 src/cloudinary-configuration.class.ts create mode 100644 src/cloudinary-image-source.directive.spec.ts create mode 100644 src/cloudinary-image-source.directive.ts create mode 100644 src/cloudinary-image.component.spec.ts create mode 100644 src/cloudinary-image.component.ts create mode 100644 src/cloudinary-transformation.directive.spec.ts create mode 100644 src/cloudinary-transformation.directive.ts create mode 100644 src/cloudinary-video.component.spec.ts create mode 100644 src/cloudinary-video.component.ts create mode 100644 src/cloudinary.module.ts create mode 100644 src/cloudinary.service.spec.ts create mode 100644 src/cloudinary.service.ts create mode 100644 systemjs.config.extras.js create mode 100644 systemjs.config.js create mode 100644 tsconfig.json create mode 100644 tslint.json create mode 100644 yarn.lock diff --git a/.gitignore b/.gitignore index 425b26b7..475f0813 100644 --- a/.gitignore +++ b/.gitignore @@ -1,15 +1,35 @@ - # Logs logs *.log npm-debug.log* -config.js +config.ts + +# Ignore output of typescript compilation. They WILL be included in the package since .npmignore is empty +*.js +*.js.map +*.d.ts + +# Ignore generated output +lib/ + +# Ignore generated typings +typings/ + +# Exclude root folder *.js files and +!/*.js + +# Exclude important config files +!systemjs.config.js +!webpack.config.js + +# Exclude scripts folder +!/scripts/* # Coverage directory used by tools like istanbul coverage -# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) -.grunt +# protractor test results +_test-output/ # Dependency directory # https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git @@ -23,3 +43,4 @@ build/ ## Directory-based project format: .idea/ +.vscode/ diff --git a/.npmignore b/.npmignore new file mode 100644 index 00000000..71d87049 --- /dev/null +++ b/.npmignore @@ -0,0 +1,3 @@ +!*.js +!*.js.map +!*.d.ts \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 00000000..55411619 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,20 @@ +dist: trusty +sudo: required +language: node_js +node_js: + - "node" +os: + - linux +# env: +# global: +# - DBUS_SESSION_BUS_ADDRESS=/dev/null +# - DISPLAY=:99.0 +# - CHROME_BIN=chromium-browser +# before_script: +# - sh -e /etc/init.d/xvfb start +install: + - npm install +script: + - npm run lint + - npm run test-once +# - npm run e2e diff --git a/.yarnclean b/.yarnclean new file mode 100644 index 00000000..3f2e79df --- /dev/null +++ b/.yarnclean @@ -0,0 +1,45 @@ +# test directories +__tests__ +test +tests +powered-test + +# Exclude tslint since it is secial in having a test folder under the src folder +!tslint/lib/test + +# asset directories +docs +doc +website +images +assets + +# examples +example +examples + +# code coverage directories +coverage +.nyc_output + +# build scripts +Makefile +Gulpfile.js +Gruntfile.js + +# configs +.tern-project +.gitattributes +.editorconfig +.*ignore +.eslintrc +.jshintrc +.flowconfig +.documentup.json +.yarn-metadata.json +.*.yml +*.yml + +# misc +*.gz +*.md diff --git a/CHANGELOG.md b/CHANGELOG.md index 6b5e7b63..a49c578e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,93 +1,11 @@ -1.0.0 / 2016-03-15 +1.0.0-rc1 / 2016-12-19 ================== +First release New Features ------------ - * Support Responsive behaviour - -Other Changes -------------- - - * Add tests for responsive behaviour - * Add spec and karma to bower ignore list - * Merge pull request #42 from gilhanan/gilhanan-readme-patch-1 - * Add bower install instructions - -0.2.0 / 2016-01-14 -================== - -jQuery independent version --------------------------- - - * Use Cloudinary new API - * Create CloudinaryProvider. - * Separate sample app to with and without jQuery. - -Other changes -------------- - - * Add setter and getter to Cloudinary provider. Serve `jQuery.cloudinary` if present. - * Add NPM package.json file - * Add spec file. Add Karma configuration. - * Update gitignore. Update dependencies. - * Rename spec file. Remove coverage and add Chrome to the karma test. - * Fix sample project dependency. Remove leftover file. - * Add uploaded image preview to the jQuery upload page - * Support PhantomJS - * Change ng-file-upload input to match version 11. - * Merge pull request #40 from ArdentKid/master - * bower dependency fix for "cloudinary_ng" - -0.1.4 / 2015-08-23 -================== - - * Upgrade Angular to 1.4 and ng-file-upload to version 7.0.x - * Merge pull request #35 from BrittanyLea/editReadMe - * Edited typo under Uploading Images section. - * Change sample project's bower to install local version of the package. - * Fix #16 multiple drag and drop - * Modified bower configuration - * upgrade angular file upload to latest version. support multiple file uploads in sample - * Merge branch 'NotBobTheBuilder-master' from PR #14 - * Friendlier DI for minification compatibility - -0.1.3 / Never released -====================== - - * support angular 1.3 as well - * Merge pull request #12 from vvvvalvalval/master - * Corrected typos in sample README - * Merge pull request #9 from skiomusic/master - * Merge pull request #1 from nealclark/master - * Observe version attribute, reload image on change - -0.1.2 / 2014-09-04 -================== - - * Merge pull request #8 from carlositocasal/bower-json-update - * Correct homepage url. - * Update README.md - * Merge pull request #7 from iwoodruff/master - * Update README.md - * update readme to reflect angular file upload addition - * Merge branch 'fix-angular-dependency-injection' of https://github.com/dsager/cloudinary_angular - * add support for angular file upload (https://github.com/danialfarid/angular-file-upload) - * version bump - * added missing semicolon - * define $scope parameter as injected for controller in order to avoid mangling errors - * Merge pull request #5 from dsager/bower-json-main-entry - * added main entry to bower.json - * make publicId in ng-image dynamic. issue #1 - -v0.1.1 / 2014-05-26 -=================== - - * fix cloudinary_js dependency. add list enabling instructions to sample. fix sample dependency - * make the package not private - -v0.1.0 / 2014-05-26 -=================== - - * initial commit: 0.1.0 + * cl-image and cl-video components + * cl-transformation attribute directive + * clSrc, clHref, clSrcset attribute directives diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..8187c1be --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,118 @@ +# Contributing to Cloudinary Angular SDK + +Contributions are welcome and greatly appreciated! + +## Reporting a bug + +- Ensure that the bug was not already reported by searching in GitHub under [Issues](https://github.com/cloudinary/cloudinary-angular-2/issues) and the Cloudinary [Support forms](https://support.cloudinary.com). +- If you're unable to find an open issue addressing the problem, [open a new one](https://github.com/cloudinary/cloudinary-angular-2/issues/new). + Be sure to include a **title and clear description**, as much relevant information as possible, and a **code sample** or an **executable test case** demonstrating the expected behavior that is not occurring. +- If you require assistance in the implementation of the Cloudinary Angular SDK please [submit a support request](https://support.cloudinary.com/hc/en-us/requests/new) in the Cloudinary web site. + +## Requesting a feature + +We would love to hear your requests! +Please be aware that some features may not be applicable to all users. + +- Open a GitHub [issue](https://github.com/cloudinary/cloudinary-angular-2/issues/new) describing the benefits (and possible drawbacks) of the requested feature + +## Fixing a bug / Implementing a new feature + +- Follow the instructions detailed in [Code contribution](#code-contribution) +- Open a new GitHub pull request +- Ensure the PR description clearly describes the bug / feature. Include the relevant issue number if applicable. +- Provide test code that covers the new code + +## Code contribution + +When contributing code, either to fix a bug or to implement a new feature, please follow these guidelines: + +#### Fork the Project + +Fork [project on Github](https://github.com/cloudinary/cloudinary-angular-2) and check out your copy. + +``` +git clone https://github.com/contributor/cloudinary_ng.git +cd cloudinary_ng +git remote add upstream https://github.com/cloudinary/cloudinary-angular-2.git +``` + +#### Create a Topic Branch + +Make sure your fork is up-to-date and create a topic branch for your feature or bug fix. + +``` +git checkout master +git pull upstream master +git checkout -b my-feature-branch +``` +#### Rebase + +If you've been working on a change for a while, rebase with upstream/master. + +``` +git fetch upstream +git rebase upstream/master +git push origin my-feature-branch -f +``` + + +#### Write Tests + +Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build. + +We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix. + +#### Write Code + +Implement your feature or bug fix. +Follow [Angular's style guide](https://angular.io/styleguide). + +#### Write Documentation + +Document any external behavior in the [README](README.md). + +#### Commit Changes + +Make sure git knows your name and email address: + +``` +git config --global user.name "Your Name" +git config --global user.email "contributor@example.com" +``` + +Writing good commit logs is important. A commit log should describe what changed and why. + +``` +git add ... +git commit +``` + + +> Please squash your commits into a single commit when appropriate. This simplifies future cherry picks and keeps the git log clean. + +#### Push + +``` +git push origin my-feature-branch +``` + +#### Make a Pull Request + +Go to https://github.com/contributor/cloudinary_ng and select your feature branch. Click the 'Pull Request' button and fill out the form. +Pull requests are usually reviewed within a few days. + +Ensure the PR description clearly describes the problem and solution. Include the relevant issue number if applicable. + +#### Check on Your Pull Request + +Go back to your pull request after a few minutes and see whether it passed the Travis-CI build. +Everything should look green, otherwise fix issues and amend your commit as described above. + +#### Be Patient + +It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang on there! + +#### Thank You + +Please do know that we really appreciate and value your time and work, and that open source rocks! diff --git a/LICENSE b/LICENSE new file mode 100644 index 00000000..f1239f03 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2016 https://cloudinary.com + +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. \ No newline at end of file diff --git a/README.md b/README.md index fa723e2b..d5feb704 100644 --- a/README.md +++ b/README.md @@ -1,90 +1,213 @@ Cloudinary ========== +The official [Cloudinary](https://cloudinary.com) SDK for Angular (AKA Angular 2). -Cloudinary is a cloud service that offers a solution to a web application's entire image management pipeline. +Cldouinary's AngularJS (AKA Angular1) SDK can be found [here](https://github.com/cloudinary/cloudinary_angular) -Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. Images are seamlessly delivered through a fast CDN, and much much more. +[Cloudinary](https://cloudinary.com) is a cloud service that offers a solution to a web application's entire image management pipeline. + +Easily upload images to the cloud. Automatically perform smart image resizing, cropping and conversion without installing any complex software. Integrate Facebook or Twitter profile image extraction in a snap, in any dimension and style to match your website’s graphics requirements. +Images are seamlessly delivered through a fast CDN, and much much more. Cloudinary offers comprehensive APIs and administration capabilities and is easy to integrate with any web application, existing or new. Cloudinary provides URL and HTTP based APIs that can be easily integrated with any Web development framework. -For AngularJS, Cloudinary provides a plugin for simplifying the integration even further. The plugin serves as a layer on top the [Cloudinary jQuery plugin](http://cloudinary.com/documentation/jquery_integration#installation) +For Angular, Cloudinary provides an SDK for simplifying the integration even further. +The SDK serves as a layer on top of one of Cloudinary's Javascript libraries: + +| Github Repository | Package name | Description | +|-------------------|--------------|-------------| +| [pkg-cloudinary-core](https://github.com/cloudinary/pkg-cloudinary-core) | cloudinary-core | Core Cloudinary Library. Use this if you do not intend to use jQuery | +| [pkg-cloudinary-jquery](https://github.com/cloudinary/pkg-cloudinary-jquery) | cloudinary-jquery | Core Library + jQuery plugin | +| [pkg-cloudinary-jquery-file-upload](https://github.com/cloudinary/pkg-cloudinary-jquery-file-upload) | cloudinary-jquery-file-upload | Core Library + jQuery plugin + Blueimp File Upload adapter | -## Install ###################################################################### +Signup for free -You can get it on bower. +## Installation ###################################################################### ```shell -bower install cloudinary_ng --save +npm install cloudinary_ng --save ``` ## Setup ###################################################################### -Follow the setup procedure described in the [Cloudinary jQuery plugin](https://github.com/cloudinary/cloudinary_js#setup) setup procedure. The sample project contained in this repository can serve as an example. - +Follow the setup procedure described in the [Cloudinary jQuery plugin](https://github.com/cloudinary/cloudinary_js#setup) setup procedure. +Refer to the sample projects in this repository for usage examples. ## Usage ###################################################################### -The plugin provides two angular directives. URL directive and image tag directive. +The module provides three types of directives: + +* A Cloudinary image component with child transformation directives for creating `` tags and controlling its underlying chained transformations +* A Cloudinary video component with child transformation directives for creating `