Permalink
Browse files

Add fill slice support

  • Loading branch information...
1 parent 150fee1 commit dc04823b3405a214156940ba9e0e182fe27fad99 @kpdecker committed Jul 23, 2012
Showing with 17 additions and 2 deletions.
  1. +16 −2 border-image-generator.js
  2. +1 −0 index.html
@@ -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);
View
@@ -38,6 +38,7 @@
<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>

0 comments on commit dc04823

Please sign in to comment.