Adding a few features

.gitignore

@@ -0,0 +1 @@
+*.iml

README.md

@@ -1,26 +1,38 @@
-see full documentation at http://www.croppic.net/
+# Croppic Extended 
+## Overview
+This purpose of this fork of the original [croppic](https://github.com/styoe/croppic) has been to extend the functionality beyond what was offerred by the original author(s). 
 
-works in IE 10+, chrome, and ffx (opera coming soon)
+Namely, thus far, the following have been:
+
+1. Option to supply completely custom upload behavior (to allow for IE9 or any other custom behavior)
+2. Ability to zoom from the original cropping area when using a modal
+3. Reading an image directly into the DOM instead of uploading the image to a server first
+4. Moving the CSS to LESS
 
-Uses FormData so no IE9 and prev versions support. feel free to extend with ie9 support
+See full documentation for the original version at <http://www.croppic.net/>
 
+## Usage Restrictions
+Additional documentation for this fork of the original croppic coming soon.
 
+works in IE 10+, chrome, and ffx (opera coming soon)
 
+Uses FormData so no IE9 and prev versions support unless you use a custom upload method. 
 
+##### MIT LICENCE
 
-MIT LICENCE
 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:
+<br/>
 
-The above copyright notice and this permission notice shall be
+1. 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,
+2. 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

assets/less/croppic.less

@@ -0,0 +1,239 @@
+@cropperIconsUrl: '../img/cropperIcons.png';
+@cropperPlaceholderUrl: '../img/placeholder.png';
+@croppicModalOpacity: 0.8;
+
+#croppic{
+	width: 400px;
+	height: 208px;
+	position: relative;
+
+	margin: 50px 70px 20px;
+	border: 3px  solid #FFF;
+	box-sizing: content-box;
+	-moz-box-sizing: content-box;
+	border-radius: 2px;
+	background-image: url(@cropperPlaceholderUrl);
+	background-repeat: no-repeat;
+	background-position: center;
+	box-shadow: 8px 8px 0px rgba(0,0,0,0.1);
+}
+
+.cropImgWrapper{
+	cursor: -webkit-grab;
+	cursor: grab;
+}
+.cropImgWrapper:active{
+	cursor: -webkit-grabbing;
+	cursor: grabbing;
+}
+
+.cropImgUpload{
+	z-index:2;
+	position:absolute;
+	height:28px;
+	display:block;
+	top: -30px;
+	right: -2px;
+	font-family:sans-serif;
+	width:20px;
+	height:20px;
+	text-align:center;
+	line-height:20px;
+	color:#FFF;
+}
+
+.cropControls{
+	z-index:2;
+	position:absolute;
+	height:30px;
+	display:block;
+	/* top: -31px; */
+	top: -1px;
+	right: -1px;
+	font-family:sans-serif;
+	background-color:rgba(0,0,0,0.35);
+}
+
+.cropControls i{
+	display:block;
+	float:left;
+	margin:0;
+	cursor:pointer;
+	background-image:url(@cropperIconsUrl);
+	width:30px;
+	height:30px;
+	text-align:center;
+	line-height:20px;
+	color:#FFF;
+	font-size:13px;
+	font-weight: bold;
+	font-style: normal;
+
+}
+
+.cropControls i:hover{ background-color:rgba(0,0,0,0.7);  }
+
+.cropControls i.cropControlZoomMuchIn{ background-position:0px 0px;}
+.cropControls i.cropControlZoomIn{ background-position:-30px 0px; }
+.cropControls i.cropControlZoomOut{ background-position:-60px 0px; }
+.cropControls i.cropControlZoomMuchOut{ background-position:-90px 0px; }
+.cropControls i.cropControlCrop{ background-position:-120px 0px;}
+.cropControls i.cropControlUpload{ background-position:-150px 0px;}
+.cropControls i.cropControlReset{ background-position:-180px 0px;}
+.cropControls i.cropControlRemoveCroppedImage{ background-position:-180px 0px;}
+
+.cropControls i:last-child{
+	margin-right:none;
+}
+
+#croppicModal{
+	position:fixed;
+	width:100%;
+	height:100%;
+	top: 0;
+	left: 0;
+	display:block;
+	background:rgba(0,0,0,@croppicModalOpacity);
+	z-index: 10000;
+}
+
+.bubblingG {
+	text-align: center;
+	width:80px;
+	height:50px;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -18px auto auto -40px;
+	z-index:2;
+}
+
+.bubblingG span {
+	display: inline-block;
+	vertical-align: middle;
+	width: 10px;
+	height: 10px;
+	margin: 25px auto;
+	background: #FFF;
+	box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
+	-moz-border-radius: 50px;
+	-moz-animation: bubblingG 1s infinite alternate;
+	-webkit-border-radius: 50px;
+	-webkit-animation: bubblingG 1s infinite alternate;
+	-ms-border-radius: 50px;
+	-ms-animation: bubblingG 1s infinite alternate;
+	-o-border-radius: 50px;
+	-o-animation: bubblingG 1s infinite alternate;
+	border-radius: 50px;
+	animation: bubblingG 1s infinite alternate;
+
+}
+
+#bubblingG_1 {
+	-moz-animation-delay: 0s;
+	-webkit-animation-delay: 0s;
+	-ms-animation-delay: 0s;
+	-o-animation-delay: 0s;
+	animation-delay: 0s;
+}
+
+#bubblingG_2 {
+	-moz-animation-delay: 0.3s;
+	-webkit-animation-delay: 0.3s;
+	-ms-animation-delay: 0.3s;
+	-o-animation-delay: 0.3s;
+	animation-delay: 0.3s;
+}
+
+#bubblingG_3 {
+	-moz-animation-delay: 0.6s;
+	-webkit-animation-delay: 0.6s;
+	-ms-animation-delay: 0.6s;
+	-o-animation-delay: 0.6s;
+	animation-delay: 0.6s;
+}
+
+@-moz-keyframes bubblingG {
+	0% {
+		width: 10px;
+		height: 10px;
+		background-color:#FFF;
+		-moz-transform: translateY(0);
+	}
+
+	100% {
+		width: 24px;
+		height: 24px;
+		background-color:#FFF;
+		-moz-transform: translateY(-21px);
+	}
+
+}
+
+@-webkit-keyframes bubblingG {
+	0% {
+		width: 10px;
+		height: 10px;
+		background-color:#FFF;
+		-webkit-transform: translateY(0);
+	}
+
+	100% {
+		width: 24px;
+		height: 24px;
+		background-color:#FFF;
+		-webkit-transform: translateY(-21px);
+	}
+
+}
+
+@-ms-keyframes bubblingG {
+	0% {
+		width: 10px;
+		height: 10px;
+		background-color:#FFF;
+		-ms-transform: translateY(0);
+	}
+
+	100% {
+		width: 24px;
+		height: 24px;
+		background-color:#FFF;
+		-ms-transform: translateY(-21px);
+	}
+
+}
+
+@-o-keyframes bubblingG {
+	0% {
+		width: 10px;
+		height: 10px;
+		background-color:#FFF;
+		-o-transform: translateY(0);
+	}
+
+	100% {
+		width: 24px;
+		height: 24px;
+		background-color:#FFF;
+		-o-transform: translateY(-21px);
+	}
+
+}
+
+@keyframes bubblingG {
+	0% {
+		width: 10px;
+		height: 10px;
+		background-color:#FFF;
+		transform: translateY(0);
+	}
+
+	100% {
+		width: 24px;
+		height: 24px;
+		background-color:#FFF;
+		transform: translateY(-21px);
+	}
+
+}

bower.json

@@ -0,0 +1,22 @@
+{
+  "name": "croppic-extended",
+  "main": "croppic.js",
+  "version": "0.0.0",
+  "homepage": "https://github.com/th3morg/croppic",
+  "authors": [
+    "Ryan Morgan <th3morg@gmail.com>"
+  ],
+  "description": "Extending the croppic.net project to contain some additional features.",
+  "keywords": [
+    "crop"
+  ],
+  "license": "MIT",
+  "private": false,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ]
+}