├── src
├── css
│ ├── picediticons
│ │ ├── fonts
│ │ │ ├── picediticons.eot
│ │ │ ├── picediticons.ttf
│ │ │ ├── picediticons.woff
│ │ │ └── picediticons.svg
│ │ ├── Read Me.txt
│ │ ├── demo-files
│ │ │ ├── demo.js
│ │ │ └── demo.css
│ │ ├── demo.html
│ │ ├── style.css
│ │ └── selection.json
│ ├── picedit.css
│ ├── font.v01.css
│ └── font.css
├── out.php
└── index.html
├── dist
├── index.html
├── js
│ └── picedit.min.js
└── css
│ ├── picedit.min.css
│ └── picedit.css
├── LICENSE.txt
└── README.md
/src/css/picediticons/fonts/picediticons.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andyvr/picEdit/HEAD/src/css/picediticons/fonts/picediticons.eot
--------------------------------------------------------------------------------
/src/css/picediticons/fonts/picediticons.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andyvr/picEdit/HEAD/src/css/picediticons/fonts/picediticons.ttf
--------------------------------------------------------------------------------
/src/css/picediticons/fonts/picediticons.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/andyvr/picEdit/HEAD/src/css/picediticons/fonts/picediticons.woff
--------------------------------------------------------------------------------
/src/out.php:
--------------------------------------------------------------------------------
1 | ';
14 | }
15 |
16 | ?>
--------------------------------------------------------------------------------
/src/css/picediticons/Read Me.txt:
--------------------------------------------------------------------------------
1 | Open *demo.html* to see a list of all the glyphs in your font along with their codes/ligatures.
2 |
3 | You won't need any of the files located under the *demo-files* directory when including the generated font in your own projects.
4 |
5 | You can import *selection.json* back to the IcoMoon app using the *Import Icons* button (or via Main Menu > Manage Projects) to retrieve your icon selection.
6 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Untitled Document
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
23 |
24 |
25 |
26 |
27 |
28 |
33 |
34 |
35 |
--------------------------------------------------------------------------------
/src/css/picediticons/demo-files/demo.js:
--------------------------------------------------------------------------------
1 | if (!('boxShadow' in document.body.style)) {
2 | document.body.setAttribute('class', 'noBoxShadow');
3 | }
4 |
5 | document.body.addEventListener("click", function(e) {
6 | var target = e.target;
7 | if (target.tagName === "INPUT" &&
8 | target.getAttribute('class').indexOf('liga') === -1) {
9 | target.select();
10 | }
11 | });
12 |
13 | (function() {
14 | var fontSize = document.getElementById('fontSize'),
15 | testDrive = document.getElementById('testDrive'),
16 | testText = document.getElementById('testText');
17 | function updateTest() {
18 | testDrive.innerHTML = testText.value || String.fromCharCode(160);
19 | if (window.icomoonLiga) {
20 | window.icomoonLiga(testDrive);
21 | }
22 | }
23 | function updateSize() {
24 | testDrive.style.fontSize = fontSize.value + 'px';
25 | }
26 | fontSize.addEventListener('change', updateSize, false);
27 | testText.addEventListener('input', updateTest, false);
28 | testText.addEventListener('change', updateTest, false);
29 | updateSize();
30 | }());
31 |
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2014 Andy V.
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/src/css/picediticons/demo-files/demo.css:
--------------------------------------------------------------------------------
1 | body {
2 | padding: 0;
3 | margin: 0;
4 | font-family: sans-serif;
5 | font-size: 1em;
6 | line-height: 1.5;
7 | color: #555;
8 | background: #fff;
9 | }
10 | h1 {
11 | font-size: 1.5em;
12 | font-weight: normal;
13 | }
14 | small {
15 | font-size: .66666667em;
16 | }
17 | a {
18 | color: #e74c3c;
19 | text-decoration: none;
20 | }
21 | a:hover, a:focus {
22 | box-shadow: 0 1px #e74c3c;
23 | }
24 | .bshadow0, input {
25 | box-shadow: inset 0 -2px #e7e7e7;
26 | }
27 | input:hover {
28 | box-shadow: inset 0 -2px #ccc;
29 | }
30 | input, fieldset {
31 | font-size: 1em;
32 | margin: 0;
33 | padding: 0;
34 | border: 0;
35 | }
36 | input {
37 | color: inherit;
38 | line-height: 1.5;
39 | height: 1.5em;
40 | padding: .25em 0;
41 | }
42 | input:focus {
43 | outline: none;
44 | box-shadow: inset 0 -2px #449fdb;
45 | }
46 | .glyph {
47 | font-size: 16px;
48 | width: 15em;
49 | padding-bottom: 1em;
50 | margin-right: 4em;
51 | margin-bottom: 1em;
52 | float: left;
53 | overflow: hidden;
54 | }
55 | .liga {
56 | width: 80%;
57 | width: calc(100% - 2.5em);
58 | }
59 | .talign-right {
60 | text-align: right;
61 | }
62 | .talign-center {
63 | text-align: center;
64 | }
65 | .bgc1 {
66 | background: #f1f1f1;
67 | }
68 | .fgc1 {
69 | color: #999;
70 | }
71 | .fgc0 {
72 | color: #000;
73 | }
74 | p {
75 | margin-top: 1em;
76 | margin-bottom: 1em;
77 | }
78 | .mvm {
79 | margin-top: .75em;
80 | margin-bottom: .75em;
81 | }
82 | .mtn {
83 | margin-top: 0;
84 | }
85 | .mtl, .mal {
86 | margin-top: 1.5em;
87 | }
88 | .mbl, .mal {
89 | margin-bottom: 1.5em;
90 | }
91 | .mal, .mhl {
92 | margin-left: 1.5em;
93 | margin-right: 1.5em;
94 | }
95 | .mhmm {
96 | margin-left: 1em;
97 | margin-right: 1em;
98 | }
99 | .mls {
100 | margin-left: .25em;
101 | }
102 | .ptl {
103 | padding-top: 1.5em;
104 | }
105 | .pbs, .pvs {
106 | padding-bottom: .25em;
107 | }
108 | .pvs, .pts {
109 | padding-top: .25em;
110 | }
111 | .clearfix {
112 | zoom: 1;
113 | }
114 | .unit {
115 | float: left;
116 | }
117 | .unitRight {
118 | float: right;
119 | }
120 | .size1of2 {
121 | width: 50%;
122 | }
123 | .size1of1 {
124 | width: 100%;
125 | }
126 | .clearfix:before, .clearfix:after {
127 | content: " ";
128 | display: table;
129 | }
130 | .clearfix:after {
131 | clear: both;
132 | }
133 | .noLiga-true {
134 | display: none;
135 | }
136 | .textbox0 {
137 | width: 3em;
138 | background: #f1f1f1;
139 | padding: .25em .5em;
140 | line-height: 1.5;
141 | height: 1.5em;
142 | }
143 | #testDrive {
144 | padding-top: 24px;
145 | }
146 | .fs0 {
147 | font-size: 16px;
148 | }
149 | .fs1 {
150 | font-size: 32px;
151 | }
152 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | picEdit
2 | =======
3 |
4 | *This plugin is work in progress! Use with caution!*
5 |
6 | The plugin will turn your form's ```
10 |
11 |
12 | will change to something more user-friendly:
13 |
14 |
15 |
16 |
17 | **This plugin allows you to receive images from 3 different sources:**
18 |
19 | 1. You can search your computer for images by clicking on the image button in the center of the plugin, it will behave just like a regular file input field, you can also drag-and-drop your image on to the widget (work only in browsers that support drag and drop api)
20 | 2. You can use your computer/tablet web-camera to make a photo by clicking on the camera button in the center of the plugin (work only in browsers that support WebRTC)
21 | 3. You can copy and paste the image from the clipboard (work only in browsers that support clipboard api)
22 |
23 | The plugin allows to perform image rotations, cropping, resizing and pen tool.
24 | Once you're done with the image manipulations you can just upload the form as usual, the updated image will be uploaded along with the form as the a part of the form.
25 |
26 |
Note: Due to limitations of HTML5 Form API the form will be submitted with XMLHttpRequest/Ajax. The submission is handled by picEdit. If your form uses any js plugins or custom javascript this can create issues!
27 |
28 | See the demo here: https://andyvr.github.io/picEdit/
29 | ###Usage Example
30 |
31 | **Include jquery, the plugin js and css files**
32 |
33 | ```
34 |
35 |
36 |
37 | ```
38 |
39 | **Create a form in your html code with the file upload input box ex.:**
40 |
41 | ```
42 |
47 | ```
48 |
49 | **Bind the plugin to the file upload input box, that's it!**
50 |
51 | ```
52 |
57 | ```
58 |
59 |
60 | ###Available methods and options
61 |
62 | **defaultImage**
63 |
64 | _type: string, default: false_ - an image to be loaded in the editor by default ('path/to/image')
65 |
use only images located on the same server to prevent CORS issues
66 |
67 | **maxWidth**
68 |
69 | _type: int/auto, default: 400_ - max width for the picedit element (the original image will not be re-scaled if it's wider than maxWidth, this parameter controls image preview only)
70 |
71 | **maxHeight**
72 |
73 | _type: int/auto, default: auto_ - max height for the picedit element (same as with maxWidth parameter)
74 |
75 | **redirectUrl**
76 |
77 | _type: string/bool, default: false_ - the form redirect url. When defined it will redirect the user to the specified url after the form is submitted.
78 |
79 | **imageUpdated**
80 |
81 | _type: func_ - the callback function to be called when the image is updated/changed. Exposes the image object as the first parameter of the function.
82 | ```
83 | $('#image').picEdit({
84 | imageUpdated: function(img){
85 | alert('Image updated!');
86 | }
87 | });
88 | ```
89 |
90 | **formSubmitted**
91 |
92 | _type: func_ - the callback function to be called once the form is submitted to the server. Exposes the XMLHttpRequest response object as the first parameter of the function.
93 | ```
94 | $('#image').picEdit({
95 | formSubmitted: function(response){
96 | alert('Form submitted!');
97 | }
98 | });
99 | ```
100 |
101 |
102 |
15 | 
11 |
12 | will change to something more user-friendly:
13 | 
104 |