From e149ca8be068986ff49ea212fecde4d2e1f0ace5 Mon Sep 17 00:00:00 2001 From: Chloe Chen Date: Thu, 30 Apr 2015 14:20:05 +1000 Subject: [PATCH] feature: coloring svg --- index.html | 5 +++- js/main.js | 72 ++++++++++++++++++++++++++++++++++++++---------------- 2 files changed, 55 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 5c58881..29962cd 100755 --- a/index.html +++ b/index.html @@ -42,7 +42,10 @@

Interactive Coloring Concept A fun drag & drop experiment

We help tell your brand's story The most efficient toolset for businesses

- +

example svg

+ + +
diff --git a/js/main.js b/js/main.js index 6c6a750..5441a3c 100644 --- a/js/main.js +++ b/js/main.js @@ -8,22 +8,23 @@ * Copyright 2015, Codrops * http://www.codrops.com */ -(function() { - + (function() { + //The Document.documentElement read-only property returns the Element that is the root element of the document (for example, the element for HTML documents). var docElem = window.document.documentElement, // transition end event name + //The transitionend event is fired when a CSS transition has completed. In the case where a transition is removed before completion, such as if the transition-property is removed, then the event will not fire. transEndEventNames = { 'WebkitTransition': 'webkitTransitionEnd', 'MozTransition': 'transitionend', 'OTransition': 'oTransitionEnd', 'msTransition': 'MSTransitionEnd', 'transition': 'transitionend' }, transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ]; - function scrollX() { return window.pageXOffset || docElem.scrollLeft; } - function scrollY() { return window.pageYOffset || docElem.scrollTop; } - function getOffset(el) { - var offset = el.getBoundingClientRect(); - return { top : offset.top + scrollY(), left : offset.left + scrollX() }; - } + function scrollX() { return window.pageXOffset || docElem.scrollLeft; } + function scrollY() { return window.pageYOffset || docElem.scrollTop; } + function getOffset(el) { + var offset = el.getBoundingClientRect(); + return { top : offset.top + scrollY(), left : offset.left + scrollX() }; + } - function dragMoveListener(event) { - var target = event.target, + function dragMoveListener(event) { + var target = event.target, // keep the dragged position in the data-x/data-y attributes x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx, y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy; @@ -49,7 +50,6 @@ var info = document.querySelector('.info-wrap'); info.parentNode.removeChild(info); }); - // target elements with the "drag-element" class interact('.drag-element').draggable({ // enable inertial throwing @@ -80,6 +80,9 @@ if(classie.has(event.target, 'paint-area--text')) { type = 'text'; } + if(classie.has(event.target, 'paint-area--svg')) { + type = 'svg'; + } var draggableElement = event.relatedTarget; @@ -87,7 +90,7 @@ var onEndTransCallbackFn = function(ev) { this.removeEventListener( transEndEventName, onEndTransCallbackFn ); - if( type === 'area' ) { + if( type === 'area' || type === 'svg') { paintArea(event.dragEvent, event.target, draggableElement.getAttribute('data-color')); } setTimeout(function() { @@ -112,13 +115,21 @@ function paintArea(ev, el, color) { var type = 'area'; + if(classie.has(el, 'paint-area--text')) { type = 'text'; } + if(classie.has(el, 'paint-area--svg')) { + type = 'svg'; + } + + console.log(type); + - if( type === 'area' ) { + if( type === 'area' || type === 'svg' ) { // create SVG element var dummy = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + //setAttributeNS adds a new attribute or changes the value of an attribute with the given namespace and name. dummy.setAttributeNS(null, 'version', '1.1'); dummy.setAttributeNS(null, 'width', '100%'); dummy.setAttributeNS(null, 'height', '100%'); @@ -132,15 +143,14 @@ circle.setAttributeNS(null, 'cy', 0); circle.setAttributeNS(null, 'r', Math.sqrt(Math.pow(el.offsetWidth,2) + Math.pow(el.offsetHeight,2))); circle.setAttributeNS(null, 'fill', color); - dummy.appendChild(g); g.appendChild(circle); el.appendChild(dummy); } setTimeout(function() { - classie.add(el, 'paint--active'); + classie.add(el, 'paint--active'); if( type === 'text' ) { el.style.color = color; var onEndTransCallbackFn = function(ev) { @@ -150,6 +160,22 @@ }; el.addEventListener(transEndEventName, onEndTransCallbackFn); + } else if( type === 'svg') { + var changeFill = function() { + // if( ev.target != this) return; + this.removeEventListener(transEndEventName, onEndTransCallbackFn); + // set the color + el.setAttribute("fill", color); + el.setAttribute("stroke", color); + // remove SVG element + el.removeChild(dummy); + setTimeout(function() { classie.remove(el, 'paint--active'); }, 25); + }; + el.style.transition = el.style.MSTransitionEnd = el.style.OTransition= el.style.MozTransition = el.style.WebkitTransition = "none"; + el.style.transition = el.style.MSTransitionEnd = el.style.OTransition= el.style.MozTransition = el.style.WebkitTransition = "fill 0.4s ease-in-out, stroke 0.4s ease-in-out"; + setTimeout(function(){changeFill();}, 200); + + } else { var onEndTransCallbackFn = function(ev) { @@ -166,14 +192,18 @@ circle.addEventListener(transEndEventName, onEndTransCallbackFn); } }, 25); - } +} - function resetColors() { - [].slice.call(document.querySelectorAll('.paint-area')).forEach(function(el) { +function resetColors() { + [].slice.call(document.querySelectorAll('.paint-area')).forEach(function(el) { el.style[classie.has(el, 'paint-area--text') ? 'color' : 'background-color'] = ''; + el.setAttribute('fill', " #fafafa"); + el.setAttribute('stroke', " #999999"); + + }); - } +} - init(); +init(); -})(); \ No newline at end of file +})();