aboutsummaryrefslogtreecommitdiff
path: root/node_modules/ninja-components/photo-editor.reel
diff options
context:
space:
mode:
Diffstat (limited to 'node_modules/ninja-components/photo-editor.reel')
-rwxr-xr-xnode_modules/ninja-components/photo-editor.reel/photo-editor.css34
-rwxr-xr-xnode_modules/ninja-components/photo-editor.reel/photo-editor.html50
-rwxr-xr-xnode_modules/ninja-components/photo-editor.reel/photo-editor.js415
3 files changed, 499 insertions, 0 deletions
<
diff --git a/node_modules/ninja-components/photo-editor.reel/photo-editor.css b/node_modules/ninja-components/photo-editor.reel/photo-editor.css
new file mode 100755
index 00000000..6f0cf843
--- /dev/null
+++ b/node_modules/ninja-components/photo-editor.reel/photo-editor.css
@@ -0,0 +1,34 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6.PhotoEditor {
7 position: absolute;
8 top: 0;
9 left: 0;
10 bottom: 197px;
11 right: 301px;
12 display: -webkit-box;
13 -webkit-box-pack: center;
14 -webkit-box-align: center;
15 overflow: hidden;
16 background-color: #777;
17 -webkit-user-select: none;
18}
19
20.PhotoEditor .image {
21 position: absolute;
22 top: -9999px;
23 left: -9999px;
24}
25
26.PhotoEditor canvas {
27 -webkit-user-select: none;
28 box-shadow: 0 0 16px rgba(0,0,0,.6);
29}
30
31.PhotoEditor.pickingColor {
32 cursor: none;
33 -webkit-user-select: none;
34}
diff --git a/node_modules/ninja-components/photo-editor.reel/photo-editor.html b/node_modules/ninja-components/photo-editor.reel/photo-editor.html
new file mode 100755
index 00000000..8a0ac1d2
--- /dev/null
+++ b/node_modules/ninja-components/photo-editor.reel/photo-editor.html
@@ -0,0 +1,50 @@
1<!DOCTYPE html>
2<!-- <copyright>
3 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
4 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
5 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
6 </copyright> -->
7<html>
8<head>
9 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
10 <title>Photo Editor</title>
11 <link rel="stylesheet" type="text/css" href="photo-editor.css">
12
13 <script type="text/montage-serialization">
14 {
15 "image": {
16 "module": "montage/ui/image.reel",
17 "name": "Image",
18 "properties": {
19 "element": {"#": "image"}
20 },
21 "bindings": {
22 "src": {
23 "boundObject": {"@": "owner"},
24 "boundObjectPropertyPath": "src",
25 "oneway": true
26 }
27 }
28 },
29 "owner": {
30 "module": "montage/ui/photo-editor.reel",
31 "name": "PhotoEditor",
32 "properties": {
33 "element": {"#": "editor"},
34 "_image": {"@": "image"},
35 "_canvas": {"#": "canvas"}
36 }
37 }
38 }
39 </script>
40
41</head>
42<body>
43
44 <div id="editor" class="PhotoEditor">
45 <img id="image" class="image">
46 <canvas id="canvas" class="canvas"></canvas>
47 </div>
48
49</body>
50</html>
diff --git a/node_modules/ninja-components/photo-editor.reel/photo-editor.js b/node_modules/ninja-components/photo-editor.reel/photo-editor.js
new file mode 100755
index 00000000..afead518
--- /dev/null
+++ b/node_modules/ninja-components/photo-editor.reel/photo-editor.js
@@ -0,0 +1,415 @@
1/* <copyright>
2 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
3 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
4 (c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved.
5 </copyright> */
6var Montage = require("montage").Montage;
7var Component = require("ui/component").Component;
8var dom = require("ui/dom");
9var Point = require("core/geometry/point").Point;
10var Effect = require("effect/effect").Effect;
11
12var DesaturateEffect = require("effect/desaturate-effect").DesaturateEffect;
13var InvertEffect = require("effect/invert-effect").InvertEffect;
14var SepiaEffect = require("effect/sepia-effect").SepiaEffect;
15var MultiplyEffect = require("effect/multiply-effect").MultiplyEffect;
16
17exports.PhotoEditor = Montage.create(Component, {
18
19 __image: {
20 enumerable: false,
21 value: null
22 },
23
24 _image: {
25 enumerable: false,
26 get: function() {
27 return this.__image;
28 },
29 set: function(value) {
30
31 if (this.__image === value) {
32 return;
33 }
34
35 if (this.__image) {
36 this.__image.element.removeEventListener("load", this, false);
37 }
38
39 this.__image = value;
40 this.__image.element.identifier = "editorImage";
41
42 if (this.__image) {
43 this.__image.element.addEventListener("load", this, false);
44 }
45
46 }
47 },
48
49 _canvas: {
50 enumerable: false,
51 value: null
52 },
53
54 _pointerIdentifier: {
55 enumerable: false,
56 value: null
57 },
58
59 prepareForActivationEvents: {
60 value: function() {
61 if (window.Touch) {
62 this._canvas.addEventListener("touchstart", this, false);
63 } else {
64 this._canvas.addEventListener("mousedown", this, false);
65 }
66 }
67 },
68
69 handleMousedown: {
70 value: function(event) {
71 event.preventDefault();
72 this._pointerIdentifier = "mouse";
73 this._canvas.addEventListener("mousemove", this, false);
74 document.addEventListener("mouseup", this, false);
75
76 this._pickColor(event.clientX, event.clientY);
77
78 this.needsDraw = true;
79 }
80 },
81
82 handleTouchstart: {
83 value: function(event) {
84
85 if (this._pointerIdentifier) {
86 return;
87 }
88
89 event.preventDefault();
90
91 var pickTouch = event.changedTouches[0];
92 this._pointerIdentifier = pickTouch.identifier;
93 this._canvas.addEventListener("touchmove", this, false);
94 document.addEventListener("touchend", this, false);
95 document.addEventListener("touchcancel", this, false);
96
97 this._pickColor(pickTouch.clientX, pickTouch.clientY);
98 }
99 },
100
101 handleMouseup: {
102 value: function() {
103 this._pointerIdentifier = null;
104 this._canvas.removeEventListener("mousemove", this, false);
105 document.removeEventListener("mouseup", this, false);
106
107 var colorPickEvent = document.createEvent("CustomEvent");
108 colorPickEvent.initCustomEvent("colorpickend", true, true, null);
109 document.application.dispatchEvent(colorPickEvent);
110
111 this.needsDraw = true;
112 }
113 },
114
115 handleMousemove: {
116 enumerable: false,
117 value: function(event) {
118
119 if (!this._pointerIdentifier) {
120 return;
121 }
122