Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Improved tagger. Can resize tags now
  • Loading branch information
pulkit110 committed Jul 3, 2011
1 parent 00a01f6 commit 7998d41
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 22 deletions.
22 changes: 22 additions & 0 deletions css/ImageEditor.css
Expand Up @@ -146,4 +146,26 @@
background-color: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
}

.fl-image-editor-button-tag-confirm {
background-image: url(../images/tick.png);
cursor: pointer;
border: 1px solid transparent;
height: 20px;
width: 20px;
overflow: hidden;
background-color: transparent;
background-attachment: scroll;
background-repeat: no-repeat;
background-position: 1px 1px;
padding: 0;
margin: 0;
}

.fl-image-editor-button-tag-confirm:hover, tr:focus {
border: 1px solid #CCC;
background-color: #FFF;
-moz-border-radius: 20px;
-webkit-border-radius:20px;
}
26 changes: 25 additions & 1 deletion html/ImageEditorDemo.html
Expand Up @@ -109,7 +109,31 @@
<br />
</div>
<div class="fl-image-editor-options fl-image-editor-tag-options">
TAG
<b>TAG IMAGE</b>
<br />
<ol class="flc-inlineEditable fl-image-editor-tag-list">
<li class="fl-image-editor-tag-new-li"><span class="flc-inlineEdit-text fl-image-editor-tag-new">create new tag</span></li>
</ol>
<div class="fl-image-editor-new-tag-options">
&nbsp;&nbsp;location:
<span class="flc-inlineEditable">
<span class="flc-inlineEdit-text fl-image-editor-tag-location"></span>
</span>
<br />
&nbsp;&nbsp;width:
<span class="flc-inlineEditable">
<span class="flc-inlineEdit-text fl-image-editor-tag-width"></span>
</span>
<input type="radio" name="flc-imge-editor-tag-radios" class="fl-image-editor-tag-radio-fixed-ratio-on" title="Fixed Ratio On" value="radio"/>
<input type="radio" name="flc-imge-editor-tag-radios" class="fl-image-editor-tag-radio-fixed-ratio-off" title="Fixed Ratio Off" checked="checked" value="radio"/>
height:
<span class="flc-inlineEditable">
<span class="flc-inlineEdit-text fl-image-editor-tag-height"></span>
</span>
<button class="fl-image-editor-button-tag-confirm">
</button>
</div>
<br />
</div>
</div>
<div class="flc-image-canvas-div">
Expand Down
139 changes: 118 additions & 21 deletions js/ImageEditor.js
Expand Up @@ -145,27 +145,36 @@ var fluid_1_4 = fluid_1_4 || {};
};

var setupTag = function (that) {
if (that.tagStarted) {
//Done tagging
that.tagButton.text(that.options.buttons.tag);
that.tagStarted = false;
enableElement(that, that.cropButton);
enableElement(that, that.resizeButton);
that.tagger.doneTagging();
clearCanvas(that);
drawImage(that);

annotationNbUpdater(that, that.tagger.getNbAnnotations(), 0);
} else {
//Initialize and start tagging
if (!that.tagStarted) {
hideAllOptions(that);
showElement(that, that.locate("tagOptions"));
hideElement(that, that.locate("newTagOptions"));
hideElement(that, that.locate("showAnnotation"));
that.tagButton.text(that.options.buttons.doneTagging);
disableElement(that, that.resizeButton);
disableElement(that, that.cropButton);
showAnnotations(that);
that.tagStarted = true;
that.tagger.init(that.imageCanvas, that.resizeFactor, that.image, that.imageX, that.imageY);
} else {
hideAllOptions(that);
that.tagStarted = false;
}
};

var startTagging = function (that) {
that.tagger.init(that.imageCanvas, that.resizeFactor, that.image, that.imageX, that.imageY);
showElement(that, that.locate("newTagOptions"));
};

var confirmTag = function (that) {
//Done tagging
hideElement(that, that.locate("tagOptions"));
that.tagStarted = false;
//that.tagger.doneTagging();
clearCanvas(that);
drawImage(that);

that.tagger.confirmTagAdd (that.locate("newTag").get(0).innerHTML);

annotationNbUpdater(that, that.tagger.getNbAnnotations(), 0);
};

var showAnnotations = function (that) {
that.tagger.showAnnotations();
Expand All @@ -179,6 +188,21 @@ var fluid_1_4 = fluid_1_4 || {};
that.locate("showAnnotationsLink").text("(show)");
};

var addTagToList = function (that, newTag) {
var tag = document.createElement('li');
var tagSpan = document.createElement('span');
tag.className += ' ' + that.options.styles.tagLi;
tagSpan.className += ' ' + that.options.styles.inlineEditableText;
tagSpan.innerHTML = newTag;
tag.appendChild(tagSpan);
//var temp = that.locate("newTag");
that.locate("newTagLi").before(tag);
};

var removeTagFromList = function (that, tagIndex) {
that.locate("tagLi").eq(tagIndex).remove();
};

annotationNbUpdater = function (that, nbAnnotations, oldNbAnnotations) {

if (!that.tagStarted && nbAnnotations !== 0) {
Expand Down Expand Up @@ -222,6 +246,10 @@ var fluid_1_4 = fluid_1_4 || {};
that.locate("resizeConfirm").click(function () {
confirmResize(that);
});

that.locate("tagConfirm").click(function () {
confirmTag(that);
});
};

var updateResizeWidth = function (that, newWidth, oldWidth, isFixedRatio) {
Expand Down Expand Up @@ -252,7 +280,7 @@ var fluid_1_4 = fluid_1_4 || {};
cancelInlineEdits(that);
return;
}

var temp = that.locate("newTag");
if (that.locate("cropLocation").get(0) === viewNode) {
var newLocation = newValue.split(',', 2);
if (newLocation.length === 2) {
Expand All @@ -271,7 +299,19 @@ var fluid_1_4 = fluid_1_4 || {};
newValue = newValue.substring(0, (newValue.indexOf("%") === -1) ? newValue.length : newValue.indexOf("%"));
that.locate("resizeWidth").get(0).textContent = newValue / 100 * that.getImageWidth();
that.locate("resizeHeight").get(0).textContent = newValue / 100 * that.getImageHeight();
}
} else if (that.locate("newTag").get(0) === viewNode) {
startTagging(that);
} else if (that.locate("tagLocation").get(0) === viewNode) {
var newLocation = newValue.split(',', 2);
if (newLocation.length === 2) {
that.tagger.setLocationX(parseFloat(newLocation[0]));
that.tagger.setLocationY(parseFloat(newLocation[1]));
}
} else if (that.locate("tagWidth").get(0) === viewNode) {
that.tagger.setWidth(parseFloat(newValue), false);
} else if (that.locate("tagHeight").get(0) === viewNode) {
that.tagger.setHeight(parseFloat(newValue), false);
}
};

var updateCropHeight = function (that, newHeight) {
Expand All @@ -295,6 +335,27 @@ var fluid_1_4 = fluid_1_4 || {};
that.locate("cropLocation").get(0).textContent = Math.round(cropLocationX) + ", " + Math.round(cropLocationY);
};

var updateTagHeight = function (that, newHeight) {
that.locate("tagHeight").get(0).textContent = Math.round(newHeight);
};

var updateTagWidth = function (that, newWidth) {
that.locate("tagWidth").get(0).textContent = Math.round(newWidth);
};

var tagLocationX = 0;
var tagLocationY = 0;

var updateTagLocationX = function (that, newLocationX) {
tagLocationX = newLocationX;
that.locate("tagLocation").get(0).textContent = Math.round(tagLocationX) + ", " + Math.round(tagLocationY);
};

var updateTagLocationY = function (that, newLocationY) {
tagLocationY = newLocationY;
that.locate("tagLocation").get(0).textContent = Math.round(tagLocationX) + ", " + Math.round(tagLocationY);
};

var setupImageEditor = function (that) {

that.imageCanvas = that.locate("imageCanvas");
Expand Down Expand Up @@ -345,9 +406,33 @@ var fluid_1_4 = fluid_1_4 || {};
updateCropLocationY(that, newLocationY);
});

that.tagger.events.onChangeHeight.addListener(function (newHeight) {
updateTagHeight(that, newHeight);
});

that.tagger.events.onChangeWidth.addListener(function (newWidth) {
updateTagWidth(that, newWidth);
});

that.tagger.events.onChangeLocationX.addListener(function (newLocationX) {
updateTagLocationX(that, newLocationX);
});

that.tagger.events.onChangeLocationY.addListener(function (newLocationY) {
updateTagLocationY(that, newLocationY);
});

that.tagger.events.onAnnotationNbChange.addListener(function (newNbAnnotations, oldNbAnnotations) {
annotationNbUpdater(that, newNbAnnotations, oldNbAnnotations);
});

that.tagger.events.onAnnotationAdd.addListener(function (newTag) {
addTagToList(that, newTag);
});

that.tagger.events.onAnnotationRemove.addListener(function (tagIndex) {
removeTagFromList(that, tagIndex);
});

if (that.options.demo && that.options.demoImageURL) {
that.setImage(that.options.demoImageURL);
Expand Down Expand Up @@ -416,26 +501,38 @@ var fluid_1_4 = fluid_1_4 || {};
cropOptions: ".fl-image-editor-crop-options", //required, Crop Options
resizeOptions: ".fl-image-editor-resize-options", //required, Resize Options
tagOptions: ".fl-image-editor-tag-options", //required, Tag Options
newTagOptions: ".fl-image-editor-new-tag-options", //required, New Tag Options
cropConfirm: ".fl-image-editor-button-crop-confirm", //required, Crop Confirm Button
resizeConfirm: ".fl-image-editor-button-resize-confirm", //required, Resize Confirm Button
tagConfirm: ".fl-image-editor-button-tag-confirm", //required, Tag Confirm Button
cropLocation: ".fl-image-editor-crop-location", //Crop Location
cropWidth: ".fl-image-editor-crop-width", //Crop Width
cropHeight: ".fl-image-editor-crop-height", //Crop Height
tagLocation: ".fl-image-editor-tag-location", //Tag Location
tagWidth: ".fl-image-editor-tag-width", //Tag Width
tagHeight: ".fl-image-editor-tag-height", //Tag Height
cropFixedRatioOn: ".fl-image-editor-crop-radio-fixed-ratio-on",
cropFixedRatioOff: ".fl-image-editor-crop-radio-fixed-ratio-off",
resizeScale: ".fl-image-editor-resize-scale", //Resize Location
resizeWidth: ".fl-image-editor-resize-width", //Resize Width
resizeHeight: ".fl-image-editor-resize-height", //Resize Height
showAnnotation: ".fl-image-editor-show-annotation",
showAnnotationsLink: ".flc-image-editor-show-annotations-link"
showAnnotationsLink: ".flc-image-editor-show-annotations-link",
newTag: ".fl-image-editor-tag-new",
newTagLi: ".fl-image-editor-tag-new-li",
existingTag: ".fl-image-editor-tag-existing",
tagList: ".fl-image-editor-tag-list",
tagLi: ".flc-image-editor-tag"
},

styles: {
disabled: "fl-image-editor-disabled",
hidden: "fl-image-editor-hidden",
dim: "fl-image-editor-dim",
border: "fl-image-editor-border"
border: "fl-image-editor-border",
newTag: "fl-image-editor-tag-new",
inlineEditableText: "flc-inlineEdit-text",
tagLi: "flc-image-editor-tag"
},

buttons: {
Expand Down

0 comments on commit 7998d41

Please sign in to comment.