michael@0: /* -*- Mode: Java; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: 
michael@0: // Standard values to use for <img>/<embed> height & width, if requested.
michael@0: var HOST_NODE_HEIGHT = "20";
michael@0: var HOST_NODE_WIDTH =  "30";
michael@0: 
michael@0: // All the possible values of "align"
michael@0: const ALIGN_VALS = ["none",
michael@0:                     "xMinYMin", "xMinYMid", "xMinYMax",
michael@0:                     "xMidYMin", "xMidYMid", "xMidYMax",
michael@0:                     "xMaxYMin", "xMaxYMid", "xMaxYMax"];
michael@0: 
michael@0: // All the possible values of "meetOrSlice"
michael@0: const MEETORSLICE_VALS = [ "meet", "slice" ];
michael@0: 
michael@0: /**
michael@0:  * Generates full data URI for an SVG document, with the given parameters
michael@0:  * on the SVG element.
michael@0:  *
michael@0:  * @param aViewboxArr         An array of four numbers, representing the
michael@0:  *                            viewBox attribute, or null for no viewBox.
michael@0:  * @param aWidth              The width attribute, or null for no width.
michael@0:  * @param aHeight             The height attribute, or null for no height.
michael@0:  * @param aAlign              The 'align' component of the
michael@0:  *                            preserveAspectRatio attribute, or null for none.
michael@0:  * @param aMeetOrSlice        The 'meetOrSlice' component of the
michael@0:  *                            preserveAspectRatio attribute, or null for
michael@0:  *                            none. (If non-null, implies non-null value for
michael@0:  *                            aAlign.)
michael@0:  * @param aViewParams         Parameters to use for the view element.
michael@0:  * @param aFragmentIdentifier The SVG fragment identifier.
michael@0:  */
michael@0: function generateSVGDataURI(aViewboxArr, aWidth, aHeight,
michael@0:                             aAlign, aMeetOrSlice,
michael@0:                             aViewParams, aFragmentIdentifier) {
michael@0:   // prefix
michael@0:   var datauri = "data:image/svg+xml,"
michael@0:   // Begin the SVG tag
michael@0:   datauri += "%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20shape-rendering%3D%22crispEdges%22";
michael@0: 
michael@0:   // Append the custom chunk from our params
michael@0:   // If we're working with views, the align customisation is applied there instead
michael@0:   datauri += generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
michael@0:                                        aViewParams ? null : aAlign,
michael@0:                                        aMeetOrSlice);
michael@0: 
michael@0:   // Add 'font-size' just in case the client wants to use ems
michael@0:   datauri += "%20font-size%3D%22" + "10px" + "%22";
michael@0: 
michael@0:   // Put closing right bracket on SVG tag
michael@0:   datauri += "%3E";
michael@0: 
michael@0:   if (aViewParams) {
michael@0:     // Give the view the id of the fragment identifier
michael@0:     datauri += "%3Cview%20id%3D%22" + aFragmentIdentifier + "%22";
michael@0: 
michael@0:     // Append the custom chunk from our view params
michael@0:     datauri += generateSVGAttrsForParams(aViewParams.viewBox, null, null,
michael@0:                                          aAlign, aViewParams.meetOrSlice);
michael@0: 
michael@0:     datauri += "%2F%3E";
michael@0:   }
michael@0: 
michael@0:   // Add the rest of the SVG document
michael@0:   datauri += "%3Crect%20x%3D%221%22%20y%3D%221%22%20height%3D%2218%22%20width%3D%2218%22%20stroke-width%3D%222%22%20stroke%3D%22black%22%20fill%3D%22yellow%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2210%22%20r%3D%228%22%20style%3D%22fill%3A%20blue%22%2F%3E%3C%2Fsvg%3E";
michael@0: 
michael@0:   return datauri;
michael@0: }
michael@0: 
michael@0: // Generates just the chunk of a data URI that's relevant to
michael@0: // the given params.
michael@0: function generateSVGAttrsForParams(aViewboxArr, aWidth, aHeight,
michael@0:                                    aAlign, aMeetOrSlice) {
michael@0:   var str = "";
michael@0:   if (aViewboxArr) {
michael@0:     str += "%20viewBox%3D%22";
michael@0:     for (var i in aViewboxArr) {
michael@0:         str += aViewboxArr[i];
michael@0:         if (i != aViewboxArr.length - 1) {
michael@0:           str += "%20";
michael@0:         }
michael@0:     }
michael@0:     str += "%22";
michael@0:   }
michael@0:   if (aWidth) {
michael@0:     str += "%20width%3D%22"  + aWidth  + "%22";
michael@0:   }
michael@0:   if (aHeight) {
michael@0:     str += "%20height%3D%22" + aHeight + "%22";
michael@0:   }
michael@0:   if (aAlign) {
michael@0:     str += "%20preserveAspectRatio%3D%22" + aAlign;
michael@0:     if (aMeetOrSlice) {
michael@0:       str += "%20" + aMeetOrSlice;
michael@0:     }
michael@0:     str += "%22";
michael@0:   }
michael@0: 
michael@0:   return str;
michael@0: }
michael@0: 
michael@0: // Returns a newly-generated element with the given tagname, the given URI
michael@0: // for its |src| attribute, and the given width & height values.
michael@0: function generateHostNode(aHostNodeTagName, aUri,
michael@0:                           aHostNodeWidth, aHostNodeHeight) {
michael@0:   var elem = document.createElement(aHostNodeTagName);
michael@0:   elem.setAttribute("src", aUri);
michael@0: 
michael@0:   if (aHostNodeWidth) {
michael@0:     elem.setAttribute("width", aHostNodeWidth);
michael@0:   }
michael@0:   if (aHostNodeHeight) {
michael@0:     elem.setAttribute("height", aHostNodeHeight);
michael@0:   }
michael@0: 
michael@0:   return elem;
michael@0: }
michael@0: 
michael@0: // THIS IS THE CHIEF HELPER FUNCTION TO BE CALLED BY CLIENTS
michael@0: function appendSVGArrayWithParams(aSVGParams, aHostNodeTagName) {
michael@0:   // These are width & height vals that will be used for the *host node*.
michael@0:   // (i.e. the <img> or <embed> node -- not the <svg> node)
michael@0:   var hostNodeWidthVals  = [ null, HOST_NODE_WIDTH  ];
michael@0:   var hostNodeHeightVals = [ null, HOST_NODE_HEIGHT ];
michael@0: 
michael@0:   for (var i = 0; i < hostNodeWidthVals.length; i++) {
michael@0:     var hostNodeWidth = hostNodeWidthVals[i];
michael@0:     for (var j = 0; j < hostNodeHeightVals.length; j++) {
michael@0:       var hostNodeHeight = hostNodeHeightVals[j];
michael@0:       appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
michael@0:                                   hostNodeWidth, hostNodeHeight);
michael@0:     }
michael@0:   }
michael@0: }
michael@0: 
michael@0: // Helper function for above, for a fixed [host-node-width][host-node-height]
michael@0: function appendSVGSubArrayWithParams(aSVGParams, aHostNodeTagName,
michael@0:                                      aHostNodeWidth, aHostNodeHeight) {
michael@0:   var rootNode = document.getElementsByTagName("body")[0];
michael@0:   for (var k = 0; k < ALIGN_VALS.length; k++) {
michael@0:     var alignVal = ALIGN_VALS[k];
michael@0:     if (!aSVGParams.meetOrSlice) {
michael@0:       alignVal = "none";
michael@0:     }
michael@0: 
michael@0:     // Generate the Data URI
michael@0:     var uri = generateSVGDataURI(aSVGParams.viewBox,
michael@0:                                  aSVGParams.width, aSVGParams.height,
michael@0:                                  alignVal,
michael@0:                                  aSVGParams.meetOrSlice,
michael@0:                                  aSVGParams.view,
michael@0:                                  aSVGParams.fragmentIdentifier);
michael@0: 
michael@0:     if (aSVGParams.fragmentIdentifier) {
michael@0:       uri += "#" + aSVGParams.fragmentIdentifier;
michael@0:     }
michael@0: 
michael@0:     // Generate & append the host node element
michael@0:     var hostNode = generateHostNode(aHostNodeTagName, uri,
michael@0:                                     aHostNodeWidth, aHostNodeHeight);
michael@0:     rootNode.appendChild(hostNode);
michael@0: 
michael@0:     // Cosmetic: Add a newline when we get halfway through the ALIGN_VALS
michael@0:     // and then again when we reach the end
michael@0:     if (k + 1 == ALIGN_VALS.length / 2 ||
michael@0:         k + 1 == ALIGN_VALS.length) {
michael@0:       rootNode.appendChild(document.createElement("br"));
michael@0:     }
michael@0:   }
michael@0: }