radial-tool.js revision a72d4a27c0d01842fa9746d86918a99f810d2734
3b28a6cd6294fa40166327b097529ae5da1698ceJeff ConniffYUI({filter:"raw"}).use('graphics','dd','event-key','dd-delegate','dd-constrain','resize','json', 'cssbutton', 'cssbuttons', function (Y){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff///////////////////// gradient UI controls //////////////////////
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var resizeNode = Y.one('#resize-r'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff gradControlNode = Y.one('#grad-control'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outCX = Y.one('#out-cx'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outCY = Y.one('#out-cy'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outFX = Y.one('#out-fx'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outFY = Y.one('#out-fy'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outR = Y.one('#out-r'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff myellipse,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff bounds = Y.one('#grad-control'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff origX = bounds.getX(),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff origY = bounds.getY(),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff maxX = bounds.get('offsetWidth'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff maxY = bounds.get('offsetHeight'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff cW = Y.one('.grad-c').get('offsetWidth'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff fW = Y.one('.grad-f').get('offsetWidth'),
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theCX = 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theCY = 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theFX = 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theFY = 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theR = 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff centerColor = '#ff8800',
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outerColor = '#300060',
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff stopsArr = [
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {color: centerColor, opacity:1, offset:0},
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {color: outerColor, opacity:1, offset:1}
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ];
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Updates the radial fill properties in myellipse
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var updateGraphic = function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff myellipse.set('fill', {
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff type: "radial",
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff stops: stopsArr,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff cx: theCX,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff cy: theCY,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff fx: theFX,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff fy: theFY,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff r: theR
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff }
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff );
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff }
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // This recenters the outter edge of the gradient control, as it is sized
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var recenterGradientR = function(e){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var radius = resizeNode.get('offsetWidth')/2 + 'px';
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff resizeNode.setStyles({
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff 'left': '-' + radius,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff 'top': '-' + radius,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff 'borderRadius': radius
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff } );
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theR = (resizeNode.get('offsetWidth') / 2) / gradControlNode.get('offsetWidth');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theR = Math.round(theR * 100) / 100;
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outR.setContent(theR);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff updateGraphic();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff }
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Instatiate a resize object on the outter gradient control ring
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var resize = new Y.Resize({
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff //Selector of the node to resize
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff node: '#resize-r',
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff handles: ['bl', 'br', 'tl', 'tr']
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff resize.plug(Y.Plugin.ResizeConstrained, {
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff minWidth: 20,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff minHeight: 20,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff maxWidth: 300,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff maxHeight: 300,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff preserveRatio: true
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff resize.after('resize:end', function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff recenterGradientR();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff resize.after('resize:resize', function(){ // seem to need both resize:resize and resize:end
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff recenterGradientR();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Instantiate a drag on the container of the outter gradient control ring
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var ddC = new Y.DD.Drag({
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff node: '.grad-c'
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Instantiate a drag on the container of the inner gradient control ring
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ddF = new Y.DD.Drag({
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff node: '.grad-f'
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Handle drag of the container of the outter control ring
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ddC.on('drag:drag', function(e){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theCX = (this.lastXY[0] - origX) / (maxX - cW);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theCY = (this.lastXY[1] - origY) / (maxY - cW);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theCX = Math.round(theCX * 100) / 100;
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theCY = Math.round(theCY * 100) / 100;
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outCX.setContent(theCX);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outCY.setContent(theCY);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff updateGraphic();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Handle drag of the container of the inner control ring
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ddF.on('drag:drag', function(e){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theFX = (this.lastXY[0] - origX) / (maxX - fW);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theFY = (this.lastXY[1] - origY) / (maxY - fW);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theFX = Math.round(theFX * 100) / 100;
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff theFY = Math.round(theFY * 100) / 100;
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outFX.setContent(theFX);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outFY.setContent(theFY);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff updateGraphic();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Handle a click on the 'get code snippet' button
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#btn-get-code').on('click', function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#btn-close-code').setStyle('visibility', 'visible');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#output-grad textarea').setStyle('visibility', 'visible');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var html = ''+
a72d4a27c0d01842fa9746d86918a99f810d2734Jeff Conniff 'var myellipse = mygraphic.addShape({\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' type: "ellipse",\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' fill: {\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' type: "radial",\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' stops: [\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' ' + Y.JSON.stringify(stopsArr[0]) + ',\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' ' + Y.JSON.stringify(stopsArr[1]) + '\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' ],\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' cx: ' + theCX + ',\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' cy: ' + theCY + ',\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' fx: ' + theFX + ',\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' fy: ' + theFY + ',\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' r: ' + theR + '\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' },\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' stroke: {\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' weight: 0,\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' color: "#000" \n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' },\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' width: 150,\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' height: 100,\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' x: 35,\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ' y: 35\n'+
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff '});\n';
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var textArea = Y.one('#output-grad textarea')
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff textArea.setContent(html);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff textArea.focus();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff textArea.select();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var closeCode = function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var tarea = Y.one('#output-grad textarea');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff if(tarea.getStyle('visibility') === 'visible'){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#btn-close-code').setStyle('visibility', 'hidden');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff tarea.setStyle('visibility', 'hidden');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff }
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff }
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#btn-close-code').on('click', function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#center-color').on('change', function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff centerColor = this.get('value');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('.grad-f').setStyle('backgroundColor', centerColor);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff stopsArr = [
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {color: centerColor, opacity:1, offset:0},
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {color: outerColor, opacity:1, offset:1}
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ];
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff updateGraphic();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('#outer-color').on('change', function(){
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff outerColor = this.get('value');
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff Y.one('.grad-r').setStyle('backgroundColor', outerColor);
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff stopsArr = [
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {color: centerColor, opacity:1, offset:0},
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {color: outerColor, opacity:1, offset:1}
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff ];
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff updateGraphic();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff closeCode();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff///////////////////// END gradient UI controls //////////////////////
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // Instantiate a new graphic to contain objects
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var mygraphic = new Y.Graphic();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff mygraphic.render("#mygraphiccontainer");
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff // add shapes to the graphics object
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff var loadGraphics = function (e)
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff {
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff //create an ellipse with addShape
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff myellipse = mygraphic.addShape({
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff type: "ellipse",
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff fill: {
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff type: "radial",
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff stops: stopsArr,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff cx: 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff cy: 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff fx: 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff fy: 0.5,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff r: 0.5
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff },
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff stroke: {
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff weight: 0,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff color: "#000"
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff },
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff width: 150,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff height: 100,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff x: 45,
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff y: 55
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff });
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff }
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff loadGraphics();
3b28a6cd6294fa40166327b097529ae5da1698ceJeff Conniff});