Skip to content

Instantly share code, notes, and snippets.

@tdreyno
Created June 1, 2012 04:05
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save tdreyno/2848655 to your computer and use it in GitHub Desktop.
Border Coda Pop
<!doctype html>
<html>
<head>
<link href="stylesheets/border.css" rel="stylesheet">
<script src="javascripts/jquery-1.7.2.js"></script>
<script src="javascripts/ember-0.9.7.1.js"></script>
<script src="javascripts/ember-jui.js"></script>
<script src="javascripts/popkit.js"></script>
<script src="javascripts/border.js"></script>
</head>
<body>
<div id="border">
<script type="text/x-handlebars">
{{view PopKit.SnapSlider classNames="width"
valueBinding="Border.mainController.value"
smallerLabel="Thinner" largerLabel="Thicker"}}
<div class="select">
<select>
<option value="solid">Solid</option>
<option value="dotted">Dotted</option>
<option value="dashed">Dashed</option>
<option value="double">Double</option>
<option value="groove">Groove</option>
<option value="ridge">Ridge</option>
<option value="outset">Outset</option>
<option value="inset">Inset</option>
</select>
</div>
{{view PopKit.Swatch
colorBinding="Border.mainController.color"
target="Border.mainController"
action="openColorPop"}}
</script>
</div>
</body>
</html>
Border = PopKit.create({
onLoad: function(value) {
this._super();
var parts = value.match(/(\d+)(?:\w+)?\s+(\w+)\s+(.*)/),
controller = Border.mainController;
if (parts === null) {
parts = ["0 solid black", 0, "solid", "black"];
} else {
parts[1] = parseInt(parts[1], 10);
}
controller.setProperties({
value: parts[1] + (parts[1] > 0 ? 9 : 0),
lineStyle: parts[2],
color: parts[3]
});
Ember.run.next(controller, "updateCodaValue");
}
});
Border.mainController = Ember.Object.create({
value: 0,
lineStyle: "solid",
color: "black",
realValue: function() {
var value = this.get("value");
return value < 10 ? 0 : (value - 9);
}.property("value").cacheable(),
_lineStyleDidChange: function() {
$("select").val(this.get("lineStyle"));
}.observes("lineStyle"),
resultString: function() {
var realValue = this.get("realValue"),
lineStyle = this.get("lineStyle");
return realValue + "px " + lineStyle + " "
+ this.get("color");
}.property("realValue", "lineStyle", "color").cacheable(),
updateCodaValue: function() {
Border.setValue(this.get("resultString"));
}.observes("resultString"),
openColorPop: function() {
var color = this.get("color"),
output = this.get("resultString"),
colorStart = output.indexOf(color),
colorLength = color.length;
Coda.openPop("com.panic.pop.colorpicker",
"left=137, bottom=8, location="
+ colorStart + ", length=" + colorLength);
}
});
$("select").live("change", function() {
Border.mainController.set("lineStyle", $(this).val());
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment