Function mkStop

src/js/lib/jquery.jgraduate.js:514–603

(n, color, opac, sel, stop_elem)

      });

      function mkStop(n, color, opac, sel, stop_elem) {
        var stop = stop_elem || mkElem('stop',{'stop-color':color,'stop-opacity':opac,offset:n}, curGradient);
        if(stop_elem) {
          color = stop_elem.getAttribute('stop-color');
          opac = stop_elem.getAttribute('stop-opacity');
          n = stop_elem.getAttribute('offset');
        } else {
          curGradient.appendChild(stop);
        }
        if(opac === null) opac = 1;
        
        var picker_d = 'M-6.2,0.9c3.6-4,6.7-4.3,6.7-12.4c-0.2,7.9,3.1,8.8,6.5,12.4c3.5,3.8,2.9,9.6,0,12.3c-3.1,2.8-10.4,2.7-13.2,0C-9.6,9.9-9.4,4.4-6.2,0.9z';
        
        var pathbg = mkElem('path',{
          d: picker_d,
          fill: 'url(#jGraduate_trans)',
          transform: 'translate(' + (10 + n * MAX) + ', 26)'
        }, stopGroup);
        
        var path = mkElem('path',{
          d: picker_d,
          fill: color,
          'fill-opacity': opac,
          transform: 'translate(' + (10 + n * MAX) + ', 26)',
          stroke: '#000',
          'stroke-width': 1.5
        }, stopGroup);

        var $path = $(path);

        $path
          .data('stop', stop)
          .data('bg', pathbg)
          .on("click", function(e) {
            if (wasDragged) return wasDragged = false; // just dragged stop
            $('div.jGraduate_LightBox').show();     
            var colorhandle = this;
            var stopOpacity = +stop.getAttribute('stop-opacity') || 1;
            var stopColor = stop.getAttribute('stop-color') || 1;
            var thisAlpha = (parseFloat(stopOpacity)*255).toString(16);
            while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
            color = stopColor.substr(1) + thisAlpha;
            $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
                window: { title: "Pick the start color and opacity for the gradient" },
                images: { clientPath: $settings.images.clientPath },
                color: { active: color, alphaSupport: true }
              }, function(color, arg2){
                // todo if color is 'none' it should get the same color as the next color stop
                stopColor = color.val('hex') ? ('#'+color.val('hex')) : "rgba(255,255,255,0)";
                stopOpacity = color.val('a') !== null ? color.val('a')/256 : 1;
                colorhandle.setAttribute('fill', stopColor);
                colorhandle.setAttribute('fill-opacity', stopOpacity);
                stop.setAttribute('stop-color', stopColor);
                stop.setAttribute('stop-opacity', stopOpacity);
                $('div.jGraduate_LightBox').hide();
                $('#'+id+'_jGraduate_stopPicker').hide();
              }, null, function() {
                $('div.jGraduate_LightBox').hide();