# HG changeset patch # User veltr # Date 1359394022 -3600 # Node ID c64d503ebba70929884e79114aa77d70d4c10671 # Parent 4edf6745bda55e2ad67f0b8fa17978f2ab59796d Added Fragment views diff -r 4edf6745bda5 -r c64d503ebba7 integration/css/egonomy.css --- a/integration/css/egonomy.css Thu Jan 24 17:44:10 2013 +0100 +++ b/integration/css/egonomy.css Mon Jan 28 18:27:02 2013 +0100 @@ -233,7 +233,7 @@ content: "."; display: block; clear: both; width: 0; line-height: 0; visibility: hidden; } */ -.image-and-fragment svg { +.image-and-fragment svg, .cutout-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @@ -245,10 +245,6 @@ /* STYLES SPECIFIQUES A image.html */ -.fullphoto { - width: 476px; height: 350px; -} - .image-metadata { width: 100%; margin: 30px 0 0; font-size: 14px; } @@ -261,13 +257,23 @@ width: 314px; padding: 4px 0; } +.image-metadata input[type=text] { + box-sizing: border-box; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + width: 100%; border: 1px solid #6699FF; background: #FFFFFF; + padding: 2px; margin: 3px 0; + font-size: 13px; +} + .image-metadata textarea { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; - width: 100%; border: 1px solid #6699FF; background: none; - padding: 2px; margin: 3px 0; height: 120px; + width: 100%; border: 1px solid #6699FF; background: #FFFFFF; + padding: 2px; margin: 3px 0; height: 100px; font-size: 13px; + resize: none; } .image-keywords { @@ -304,3 +310,12 @@ background: #ffff80; } +/* STYLES SPECIFIQUES A fragment-edit */ + +.head-button { + font-weight: bold; float: right; margin: 8px 0 0 2px; font-size: 20px; +} + +a.clear-fragment { + color: #800000; +} diff -r 4edf6745bda5 -r c64d503ebba7 integration/fragment-edit-create-v1.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/fragment-edit-create-v1.html Mon Jan 28 18:27:02 2013 +0100 @@ -0,0 +1,152 @@ + + + + + + eGonomy » Edit or Create Fragment + + + + + + + + +
+
+

TagItAll by eGonomy

+
+ +
+ +
+
+
+ +
+
+
+
+ × + +

Nouveau fragment :

+
+ +
+
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+
+
+
+
+
+

Fragments de cette image

+
    +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
+
+
+ + + +
+ +
+ + diff -r 4edf6745bda5 -r c64d503ebba7 integration/fragment-view-v1.html --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/fragment-view-v1.html Mon Jan 28 18:27:02 2013 +0100 @@ -0,0 +1,141 @@ + + + + + + eGonomy » Fragment + + + + + +
+
+

TagItAll by eGonomy

+
+ +
+ +
+
+
+ +
+
+
+

Titre du fragment

+
+ + + + +
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+

Fragments de cette image

+
    +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
  • +
    +
    + + + + +
    +
    +

    Titre du fragment

    +

    Annoté par Julien75

    +
  • +
+
+
+ + + +
+ +
+ + diff -r 4edf6745bda5 -r c64d503ebba7 integration/image-v1.html --- a/integration/image-v1.html Thu Jan 24 17:44:10 2013 +0100 +++ b/integration/image-v1.html Mon Jan 28 18:27:02 2013 +0100 @@ -26,8 +26,8 @@

Titre de l'image

-
- Photo à annoter +
+
diff -r 4edf6745bda5 -r c64d503ebba7 integration/image.html --- a/integration/image.html Thu Jan 24 17:44:10 2013 +0100 +++ b/integration/image.html Mon Jan 28 18:27:02 2013 +0100 @@ -26,8 +26,8 @@

Titre de l'image

-
- Photo à annoter +
+
diff -r 4edf6745bda5 -r c64d503ebba7 integration/js/cutout.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/js/cutout.js Mon Jan 28 18:27:02 2013 +0100 @@ -0,0 +1,246 @@ +$(function() { + + var startPath = $(".fragment-path").val(); + + var PATHCOLOR = "#ff00ff", + SELECTEDCOLOR = "#ffff00", + HANDLESIZE = 6; + + var jqs = $(".cutout-canvas"), + offset = jqs.offset(), + paper = new Raphael(jqs[0]), + closed = false, + closeTimeout, + points = []; + + paper.rect(0, 0, paper.width, paper.height) + .attr({ + stroke: "none", + fill: "#fff", + "fill-opacity": .01 + }) + .click(clickAddPoint) + .drag( + function(dx, dy, mx, my) { + + if (dx*dx+dy*dy < 4) { + return; + } + + if (!pathDragging) { + clearTimeout(closeTimeout); + closed = true; + resetPoints(); + for (var i = 0; i < 4; i++) { + addPoint(mx - offset.left, my - offset.top) + } + redrawPath(); + pathDragging = true; + } + + var x = mx - offset.left, + y = my - offset.top; + points[1].x = points[2].x = x; + points[2].y = points[3].y = y; + redrawPath(); + }, + function(mx, my) { + pathDragging = false; + }, + function() { + setTimeout(function() { + pointDragging = false; + },0); + } + ); + + function resetPoints() { + points.forEach(function(p) { + p.handle.remove(); + }); + points = []; + } + + function addPoint(x, y) { + + var dragdeltax, dragdeltay, pointDragging, + point = { + x: Math.floor(x), + y: Math.floor(y) + } + + var pointrect = paper.rect(0, 0, HANDLESIZE, HANDLESIZE) + .attr({ + stroke: PATHCOLOR, + fill: PATHCOLOR, + "fill-opacity": .3 + }) + .hover(shapeMouseOver, shapeMouseOut) + .drag( + function(dx, dy) { + pointDragging = true; + point.x = dx + dragdeltax; + point.y = dy + dragdeltay; + redrawPath(); + }, + function() { + dragdeltax = point.x; + dragdeltay = point.y; + }, + function() { + setTimeout(function() { + pointDragging = false; + shapeMouseOut(pointrect); + },0); + } + ) + .click(function() { + if (pointDragging) { + return; + } + this.remove(); + points = points.filter(function(p) { + return p != point; + }); + redrawPath(); + }); + + point.handle = pointrect; + + points.push(point); + + } + + function clickAddPoint(e, mx, my) { + + if (pathDragging) { + return; + } + + clearTimeout(closeTimeout); + closed = false; + + addPoint(mx - offset.left, my - offset.top); + + redrawPath(); + + closeTimeout = setTimeout(function() { + closed = true; + redrawPath(); + }, 1000) + + } + + function shapeMouseOver() { + points.forEach(function(point) { + if (point.handle !== this) { + point.handle.attr({ + stroke: PATHCOLOR, + fill: PATHCOLOR + }); + } + }); + if (this !== path) { + path.attr({ + stroke: PATHCOLOR, + fill: PATHCOLOR + }); + } + this.attr({ + stroke: SELECTEDCOLOR, + fill: SELECTEDCOLOR + }); + } + + function shapeMouseOut() { + if (pathDragging || !this || !this.attr) { + return; + } + this.attr({ + stroke: PATHCOLOR, + fill: PATHCOLOR + }); + } + + function redrawPath() { + var d = "M" + + points.map(function(p) { return p.x + " " + p.y }).join("L") + + (closed ? "Z" : ""); + path.attr({ + path: d + }); + points.forEach(function(point) { + point.handle.attr({ + x: point.x - HANDLESIZE / 2, + y: point.y - HANDLESIZE / 2 + }); + }); + var transd = "M" + + points.map(function(p) { return (p.x / paper.width).toString().replace(/(\.\d{4})\d*/,"$1") + " " + (p.y / paper.height).toString().replace(/(\.\d{4})\d*/,"$1") }).join("L") + + "Z"; + $(".fragment-path").val(transd); + } + + var dragdeltax, dragdeltay, pathDragging; + + var path = paper.path() + .attr({ + stroke: PATHCOLOR, + fill: PATHCOLOR, + "fill-opacity": .1 + }) + .click(clickAddPoint) + .hover(shapeMouseOver, shapeMouseOut) + .drag( + function(dx, dy) { + pathDragging = true; + points.forEach(function(point) { + point.x += dx - dragdeltax; + point.y += dy - dragdeltay; + }); + dragdeltax = dx; + dragdeltay = dy; + redrawPath(); + }, + function() { + dragdeltax = 0; + dragdeltay = 0; + }, + function() { + setTimeout(function() { + pathDragging = false; + shapeMouseOut(path); + },0); + } + ); + + $(".clear-fragment").click(function() { + resetPoints(); + redrawPath(); + return false; + }); + + function revertPath() { + startPath.split(/\s*[A-Z]\s*/).forEach(function(coords) { + xy = coords.split(/[\s,]/); + if (xy.length === 2) { + addPoint(paper.width * parseFloat(xy[0]), paper.height * parseFloat(xy[1])); + } + }); + + if (points.length) { + closed = true; + } + + redrawPath(); + } + + revertPath(); + + $(".reset-fragment").click(function() { + resetPoints(); + revertPath(); + return false; + }) + +}); diff -r 4edf6745bda5 -r c64d503ebba7 integration/lib/jquery.min.js --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/integration/lib/jquery.min.js Mon Jan 28 18:27:02 2013 +0100 @@ -0,0 +1,4 @@ +/*! jQuery v1.9.0 | (c) 2005, 2012 jQuery Foundation, Inc. | jquery.org/license */(function(e,t){"use strict";function n(e){var t=e.length,n=st.type(e);return st.isWindow(e)?!1:1===e.nodeType&&t?!0:"array"===n||"function"!==n&&(0===t||"number"==typeof t&&t>0&&t-1 in e)}function r(e){var t=Tt[e]={};return st.each(e.match(lt)||[],function(e,n){t[n]=!0}),t}function i(e,n,r,i){if(st.acceptData(e)){var o,a,s=st.expando,u="string"==typeof n,l=e.nodeType,c=l?st.cache:e,f=l?e[s]:e[s]&&s;if(f&&c[f]&&(i||c[f].data)||!u||r!==t)return f||(l?e[s]=f=K.pop()||st.guid++:f=s),c[f]||(c[f]={},l||(c[f].toJSON=st.noop)),("object"==typeof n||"function"==typeof n)&&(i?c[f]=st.extend(c[f],n):c[f].data=st.extend(c[f].data,n)),o=c[f],i||(o.data||(o.data={}),o=o.data),r!==t&&(o[st.camelCase(n)]=r),u?(a=o[n],null==a&&(a=o[st.camelCase(n)])):a=o,a}}function o(e,t,n){if(st.acceptData(e)){var r,i,o,a=e.nodeType,u=a?st.cache:e,l=a?e[st.expando]:st.expando;if(u[l]){if(t&&(r=n?u[l]:u[l].data)){st.isArray(t)?t=t.concat(st.map(t,st.camelCase)):t in r?t=[t]:(t=st.camelCase(t),t=t in r?[t]:t.split(" "));for(i=0,o=t.length;o>i;i++)delete r[t[i]];if(!(n?s:st.isEmptyObject)(r))return}(n||(delete u[l].data,s(u[l])))&&(a?st.cleanData([e],!0):st.support.deleteExpando||u!=u.window?delete u[l]:u[l]=null)}}}function a(e,n,r){if(r===t&&1===e.nodeType){var i="data-"+n.replace(Nt,"-$1").toLowerCase();if(r=e.getAttribute(i),"string"==typeof r){try{r="true"===r?!0:"false"===r?!1:"null"===r?null:+r+""===r?+r:wt.test(r)?st.parseJSON(r):r}catch(o){}st.data(e,n,r)}else r=t}return r}function s(e){var t;for(t in e)if(("data"!==t||!st.isEmptyObject(e[t]))&&"toJSON"!==t)return!1;return!0}function u(){return!0}function l(){return!1}function c(e,t){do e=e[t];while(e&&1!==e.nodeType);return e}function f(e,t,n){if(t=t||0,st.isFunction(t))return st.grep(e,function(e,r){var i=!!t.call(e,r,e);return i===n});if(t.nodeType)return st.grep(e,function(e){return e===t===n});if("string"==typeof t){var r=st.grep(e,function(e){return 1===e.nodeType});if(Wt.test(t))return st.filter(t,r,!n);t=st.filter(t,r)}return st.grep(e,function(e){return st.inArray(e,t)>=0===n})}function p(e){var t=zt.split("|"),n=e.createDocumentFragment();if(n.createElement)for(;t.length;)n.createElement(t.pop());return n}function d(e,t){return e.getElementsByTagName(t)[0]||e.appendChild(e.ownerDocument.createElement(t))}function h(e){var t=e.getAttributeNode("type");return e.type=(t&&t.specified)+"/"+e.type,e}function g(e){var t=nn.exec(e.type);return t?e.type=t[1]:e.removeAttribute("type"),e}function m(e,t){for(var n,r=0;null!=(n=e[r]);r++)st._data(n,"globalEval",!t||st._data(t[r],"globalEval"))}function y(e,t){if(1===t.nodeType&&st.hasData(e)){var n,r,i,o=st._data(e),a=st._data(t,o),s=o.events;if(s){delete a.handle,a.events={};for(n in s)for(r=0,i=s[n].length;i>r;r++)st.event.add(t,n,s[n][r])}a.data&&(a.data=st.extend({},a.data))}}function v(e,t){var n,r,i;if(1===t.nodeType){if(n=t.nodeName.toLowerCase(),!st.support.noCloneEvent&&t[st.expando]){r=st._data(t);for(i in r.events)st.removeEvent(t,i,r.handle);t.removeAttribute(st.expando)}"script"===n&&t.text!==e.text?(h(t).text=e.text,g(t)):"object"===n?(t.parentNode&&(t.outerHTML=e.outerHTML),st.support.html5Clone&&e.innerHTML&&!st.trim(t.innerHTML)&&(t.innerHTML=e.innerHTML)):"input"===n&&Zt.test(e.type)?(t.defaultChecked=t.checked=e.checked,t.value!==e.value&&(t.value=e.value)):"option"===n?t.defaultSelected=t.selected=e.defaultSelected:("input"===n||"textarea"===n)&&(t.defaultValue=e.defaultValue)}}function b(e,n){var r,i,o=0,a=e.getElementsByTagName!==t?e.getElementsByTagName(n||"*"):e.querySelectorAll!==t?e.querySelectorAll(n||"*"):t;if(!a)for(a=[],r=e.childNodes||e;null!=(i=r[o]);o++)!n||st.nodeName(i,n)?a.push(i):st.merge(a,b(i,n));return n===t||n&&st.nodeName(e,n)?st.merge([e],a):a}function x(e){Zt.test(e.type)&&(e.defaultChecked=e.checked)}function T(e,t){if(t in e)return t;for(var n=t.charAt(0).toUpperCase()+t.slice(1),r=t,i=Nn.length;i--;)if(t=Nn[i]+n,t in e)return t;return r}function w(e,t){return e=t||e,"none"===st.css(e,"display")||!st.contains(e.ownerDocument,e)}function N(e,t){for(var n,r=[],i=0,o=e.length;o>i;i++)n=e[i],n.style&&(r[i]=st._data(n,"olddisplay"),t?(r[i]||"none"!==n.style.display||(n.style.display=""),""===n.style.display&&w(n)&&(r[i]=st._data(n,"olddisplay",S(n.nodeName)))):r[i]||w(n)||st._data(n,"olddisplay",st.css(n,"display")));for(i=0;o>i;i++)n=e[i],n.style&&(t&&"none"!==n.style.display&&""!==n.style.display||(n.style.display=t?r[i]||"":"none"));return e}function C(e,t,n){var r=mn.exec(t);return r?Math.max(0,r[1]-(n||0))+(r[2]||"px"):t}function k(e,t,n,r,i){for(var o=n===(r?"border":"content")?4:"width"===t?1:0,a=0;4>o;o+=2)"margin"===n&&(a+=st.css(e,n+wn[o],!0,i)),r?("content"===n&&(a-=st.css(e,"padding"+wn[o],!0,i)),"margin"!==n&&(a-=st.css(e,"border"+wn[o]+"Width",!0,i))):(a+=st.css(e,"padding"+wn[o],!0,i),"padding"!==n&&(a+=st.css(e,"border"+wn[o]+"Width",!0,i)));return a}function E(e,t,n){var r=!0,i="width"===t?e.offsetWidth:e.offsetHeight,o=ln(e),a=st.support.boxSizing&&"border-box"===st.css(e,"boxSizing",!1,o);if(0>=i||null==i){if(i=un(e,t,o),(0>i||null==i)&&(i=e.style[t]),yn.test(i))return i;r=a&&(st.support.boxSizingReliable||i===e.style[t]),i=parseFloat(i)||0}return i+k(e,t,n||(a?"border":"content"),r,o)+"px"}function S(e){var t=V,n=bn[e];return n||(n=A(e,t),"none"!==n&&n||(cn=(cn||st("