abusedmedia/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Horizontal slider with Impetus

This shows the technique to incorporate a common slider within a svg component using the wonderful library Impetus to handle momentum and rubber-band.
This example use a piece of code to create runtime the neccessary element to clip a content properly. The same thing can be set (avoiding the code) within Illustrator but at the cost of some issues and manual edits and other quirks outlined below.
Tweaks in Illustrator

To animate the masked content properly we need to tweak a little bit the svg since Illustrator export the svg without a proper structure.
This is usually the relevant portion exported by Illustrator
<defs>
	<rect id="SVGID_1_" width="400" height="132.782"/>
</defs>
<clipPath id="SVGID_2_">
	<use xlink:href="#SVGID_1_"  overflow="visible"/>
</clipPath>
<g clip-path="url(#SVGID_2_)">
...
</g>

The problem here is that the 'g' element with clip-path cannot be transformed because also the mask itself will be transformed.
We need to add a further 'g' element with proper 'id' to achieve our purpose, like:
<g clip-path="url(#SVGID_2_)">

    <g id="content">
    ...
    </g>

</g>

At this time Illustrator do preserve the manual correction but pollute a little bit the svg with additional 'g' element everytime a save is performed.

  
## index.html
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">

        <link rel="stylesheet" type="text/css" href="lib.css" />
        <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js">
        </script>
	    <script src="http://chrisbateman.github.io/impetus/impetus.min.js"></script>

        <meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <meta name="mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-title" content="prototypon">
        <meta name="application-name" content="prototypon">

    </head>


    <body class="mobileready">


        <script>

            var svg_path = "ui.svg" // specify the svg filename/path

            function init(){


                // this whole piece of code to create runtime the clipPath in order to avoid the same setting in Illustrator, which is awful
                var component = d3.select('#component')
                var mask = d3.select('#themask').node()
                var content = d3.select('#thecontent')

                component.append('defs')
                    .node()
                    .appendChild(mask)

                component.append('clipPath')
                    .attr('id', 'maskclip')
                    .append('use')
                    .attr('xlink:href', '#themask')

                component.attr('clip-path', 'url(#maskclip)')
                //


                new Impetus({
                    source: content.node(),
                    boundX: [-910, 0], // width of content - width of mask => 1310 - 400
                    initialValues: [0, 0],
                    update: function(x, y) {
                        content.attr('transform', 'translate('+x+', 0)')
                    }
                });

            }

        </script>
        <script src="lib.js"></script>

    </body>

</html>

## lib.css
* {
    box-sizing:border-box;
}
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    padding:0;
    margin:0;
    overflow: hidden;
}
body.mobileready{
    height:100%;
}
svg{
    width:100%;

    overflow: inherit;
}
body.mobileready svg{
    height:100%;
}
svg *{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
svg text{
    pointer-events: none;
}
@media(max-device-width: 600px){
    html, body.mobileready{
        height:inherit;
    }
    body.mobileready svg{
        height:inherit;
    }
}

## lib.js
d3.xml(svg_path, "image/svg+xml", function(xml) {
    d3.select('body').node().appendChild(xml.documentElement);
    d3.select('svg')
        .attr('width', null)
        .attr('height', null)
    FastClick.attach(document.body);
    init()
})


function clone(selector) {
    var node = d3.select(selector).node();
    return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling));
}

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## ui.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              ui.svg
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">

	<link rel="stylesheet" type="text/css" href="lib.css" />
	<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js">
	</script>
	<script src="http://chrisbateman.github.io/impetus/impetus.min.js"></script>

	<meta name="viewport" content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0' />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
	<meta name="mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-title" content="prototypon">
	<meta name="application-name" content="prototypon">

	</head>




	<body class="mobileready">


	<script>

	var svg_path = "ui.svg" // specify the svg filename/path

	function init(){


	// this whole piece of code to create runtime the clipPath in order to avoid the same setting in Illustrator, which is awful
	var component = d3.select('#component')
	var mask = d3.select('#themask').node()
	var content = d3.select('#thecontent')

	component.append('defs')
	.node()
	.appendChild(mask)

	component.append('clipPath')
	.attr('id', 'maskclip')
	.append('use')
	.attr('xlink:href', '#themask')

	component.attr('clip-path', 'url(#maskclip)')
	//


	new Impetus({
	source: content.node(),
	boundX: [-910, 0], // width of content - width of mask => 1310 - 400
	initialValues: [0, 0],
	update: function(x, y) {
	content.attr('transform', 'translate('+x+', 0)')
	}
	});

	}

	</script>
	<script src="lib.js"></script>

	</body>

	</html>
	* {
	box-sizing:border-box;
	}
	html{
	width:100%;
	height:100%;
	}
	body{
	width:100%;
	padding:0;
	margin:0;
	overflow: hidden;
	}
	body.mobileready{
	height:100%;
	}
	svg{
	width:100%;

	overflow: inherit;
	}
	body.mobileready svg{
	height:100%;
	}
	svg *{
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	}
	svg text{
	pointer-events: none;
	}
	@media(max-device-width: 600px){
	html, body.mobileready{
	height:inherit;
	}
	body.mobileready svg{
	height:inherit;
	}
	}
	d3.xml(svg_path, "image/svg+xml", function(xml) {
	d3.select('body').node().appendChild(xml.documentElement);
	d3.select('svg')
	.attr('width', null)
	.attr('height', null)
	FastClick.attach(document.body);
	init()
	})


	function clone(selector) {
	var node = d3.select(selector).node();
	return d3.select(node.parentNode.insertBefore(node.cloneNode(true), node.nextSibling));
	}