Add fill slice support

kpdecker · Jul 23, 2012 · dc04823 · dc04823
1 parent 150fee1
commit dc04823
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/border-image-generator.js b/border-image-generator.js
@@ -8,6 +8,7 @@ $(document).ready(function() {
         imageEl = $("#imageEl"),
         dividers = $(".divider"),
         sliders = $(".slider"),
+        fillEl = $("#fillCenter"),
         cssEl = $("#cssEl"),
         repeat = $(".repeat"),
 
@@ -21,6 +22,7 @@ $(document).ready(function() {
             borderWidth: [0, 0, 0, 0],
             imageOffset: [0, 0, 0, 0],
 
+            fill: true,
             setRepat: false,
             repeat: ["stretch", "stretch"],
 
@@ -62,6 +64,9 @@ $(document).ready(function() {
     function calcPixels(pos) {
         return (pos / state.scaleFactor) | 0;
     }
+    function updateFill() {
+        fillEl[0].checked = !!state.fill;
+    }
     function updateSliders() {
         $(".slider").each(function(index, el) {
             var map = sliderMap[el.id];
@@ -98,6 +103,7 @@ $(document).ready(function() {
     }
     function updateCSS() {
         var borderImage = "", borderWidthStr = "", style = "",
+            fillStr = state.fill ? " fill" : "",
             repeatStr = state.setRepeat ? " " + joinValues(state.repeat) : "";
 
         if (validImage) {
@@ -111,7 +117,7 @@ $(document).ready(function() {
                 + "-moz-border-image: " + borderImage + repeatStr + ";\n"
                 + "-webkit-border-image: " + borderImage + repeatStr + ";\n"
                 + "-o-border-image: " + borderImage + repeatStr + ";\n"
-                + "border-image: " + borderImage + repeatStr + ";\n";
+                + "border-image: " + borderImage + fillStr + repeatStr + ";\n";
 
             borderImage = "url(" + UserImageCache.getSrc() + ") " + joinValues(imageOffset);
         }
@@ -121,9 +127,15 @@ $(document).ready(function() {
                 .css("-moz-border-image", borderImage + repeatStr)
                 .css("-webkit-border-image", borderImage + repeatStr)
                 .css("-o-border-image", borderImage + repeatStr)
-                .css("border-image", borderImage + repeatStr);
+                .css("border-image", borderImage + fillStr + repeatStr);
     }
 
+    fillEl.change(function() {
+        state.fill = this.checked;
+        updateCSS();
+        updateHash();
+    });
+
     sliders.slider({
         max: 100,
         slide: function(event, ui) {
@@ -285,6 +297,8 @@ $(document).ready(function() {
             $("#repeatOptionsExpander").click();
         }
 
+        updateFill();
+
         if (UserImageCache.getEntryId() !== state.src) {
             // The other values will update when the image loads
             UserImageCache.load(state.src, errorHandler);

diff --git a/index.html b/index.html
@@ -38,6 +38,7 @@ <h2>Editor</h2>
             <div><label for="imageRight">Right Offset:</label><div id="imageRight" class="slider image-offset"></div></div>
             <div><label for="imageBottom">Bottom Offset:</label><div id="imageBottom" class="slider image-offset"></div></div>
             <div><label for="imageLeft">Left Offset:</label><div id="imageLeft" class="slider image-offset"></div></div>
+            <div><label for="fillCenter">Fill Center:</label><input id="fillCenter" type="checkbox"></div>
         </div>
 
         <div>