Skip to content

Commit

Permalink
License.
Browse files Browse the repository at this point in the history
  • Loading branch information
@slightlyoff
slightlyoff committed Jun 2, 2012
1 parent e8cdcd8 commit 94dd6eb
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 48 deletions.
6 changes: 6 additions & 0 deletions demos/panels/cloudy.css
View file
@@ -1,3 +1,9 @@
/**
* Copyright (C) 2012, Alex Russell (slightlyoff@chromium.org)
* Use of this source code is governed by the LGPL, which can be found in the
* COPYING.LGPL file.
*/

::-webkit-scrollbar {
width: 14px;
height: 10px;
Expand Down
6 changes: 6 additions & 0 deletions demos/panels/domutil.js
View file
@@ -1,3 +1,9 @@
/**
* Copyright (C) 2012, Alex Russell (slightlyoff@chromium.org)
* Use of this source code is governed by the LGPL, which can be found in the
* COPYING.LGPL file.
*/

(function(scope) {
"use strict";

Expand Down
6 changes: 6 additions & 0 deletions demos/panels/panels.css
View file
@@ -1,3 +1,9 @@
/**
* Copyright (C) 2012, Alex Russell (slightlyoff@chromium.org)
* Use of this source code is governed by the LGPL, which can be found in the
* COPYING.LGPL file.
*/

/* We're an app, so lay ourselves out like one. Just the basics, ma'am. */
html, body {
height: 100%;
Expand Down
18 changes: 13 additions & 5 deletions demos/panels/panels.js
View file
@@ -1,3 +1,9 @@
/**
* Copyright (C) 2012, Alex Russell (slightlyoff@chromium.org)
* Use of this source code is governed by the LGPL, which can be found in the
* COPYING.LGPL file.
*/

(function(scope) {
"use strict";

Expand Down Expand Up @@ -77,7 +83,7 @@ var listSetter = function(l, name, own, relativeTo, oper, strength, weight) {
this.add.apply(this, this[ln]);
};

var valueSetter = function(item, varOrValue, oper, strength) {
var valueSetter = function(item, varOrValue, oper, strength, weight) {
var slot = "_" + item;
if (typeof varOrValue == "string") {
if (typeof this[slot] == "boolean") {
Expand All @@ -104,8 +110,10 @@ var valueSetter = function(item, varOrValue, oper, strength) {
if (oper && oper != "=") {
if (oper == ">=") oper = c.GEQ;
if (oper == "<=") oper = c.LEQ;
// this[slot] = new c.LinearInequality(this.v[item], oper, varOrValue, strength||weak, weight||1);
this[slot] = new c.LinearInequality(this.v[item], oper, varOrValue, strength);
} else {
// this[slot] = new c.LinearEquation(this.v[item], varOrValue, strength||weak, weight||1);
this[slot] = new c.LinearEquation(this.v[item], varOrValue, strength);
}
this.add(this[slot]);
Expand Down Expand Up @@ -597,10 +605,10 @@ scope.Panel = c.inherit({
// FIXME(slightlyoff):
// need to add max* and min* versions of all of the below

set top(v) { valueSetter.call(this, "top", v, "=", weak); },
set bottom(v) { valueSetter.call(this, "bottom", v, "=", weak); },
set left(v) { valueSetter.call(this, "left", v, "=", weak); },
set right(v) { valueSetter.call(this, "right", v, "=", weak); },
set top(v) { valueSetter.call(this, "top", v, "=", strong); },
set bottom(v) { valueSetter.call(this, "bottom", v, "=", strong); },
set left(v) { valueSetter.call(this, "left", v, "=", strong); },
set right(v) { valueSetter.call(this, "right", v, "=", strong); },

get top() { return valueGetter.call(this, "top"); },
get bottom() { return valueGetter.call(this, "bottom"); },
Expand Down
182 changes: 139 additions & 43 deletions demos/panels/popup.html
View file
Expand Up @@ -36,17 +36,103 @@
window.addEventListener("DOMContentLoaded", function(e) {
"use strict";

// c.debug = true;
// c.trace = true;

// Aliases & helpers, copied from panels.js
var weak = c.Strength.weak;
var medium = c.Strength.medium;
var strong = c.Strength.strong;
var required = c.Strength.required;

var eq = function(a1, a2, strength, w) {
return new c.LinearEquation(a1, a2, strength || weak, w||0);
};
var neq = function(a1, a2, a3) { return new c.LinearInequality(a1, a2, a3); };
var geq = function(a1, a2, str, w) { return new c.LinearInequality(a1, c.GEQ, a2, str, w); };
var leq = function(a1, a2, str, w) { return new c.LinearInequality(a1, c.LEQ, a2, str, w); };

var stay = function(v, strength, weight) {
return new c.StayConstraint(v, strength || weak, weight || 1.0);
};

// Put a button in the center of the page
$("#button").centeredIn = $("#root");

var menu = $("menu"),
sub = $("submenu");
// Descending strengths of constraints:
// - Menus should always be inside the page
// - Menus should not overlap their parent menu if possible.
// - Menus should maintain their width
// - Menus should maintain their height
var menu = $("#menu"),
sub = $("#submenu"),
root = $("#root"),
button = $("#button"),
menus = $$(".menu");

// button.centeredIn = root;
button.left = 100;
button.top = 10;
// button.add(stay(button.v.width), stay(button.v.height));

var displayAround = function(popup, ref, preferY, preferX) {
// Default to drop-down placement
popup.add(
// top to bottom
eq(),
// left edges aligned
eq(),
// bottom to top
eq(),
// right edges aligned
eq(),

/*
preferY = preferY || "bottom";
preferX = preferX || "left";
var y = ["bottom", "top"];
var x = ["left", "right"]
var xs = x.indexOf(preferX),
xhead = x.slice(0, xs);
x = x.slice(xs);
xhead.forEach(function(v){ x.push(v); });
var ys = y.indexOf(preferY),
yhead = y.slice(0, ys);
y = y.slice(ys);
yhead.forEach(function(v){ y.push(v); });
x.forEach(function(xv, xi) {
var xopp = x[x.length - 1 - xi];
y.forEach(function(yv, yi) {
var yopp = y[y.length - 1 - yi];
var strength = (xi * x.length) + yi + 1;
console.log(xv, xopp, yv, yopp);
popup.add(
eq(popup.v[yv], ref.v[yopp], weak, strength),
eq(popup.v[xv], ref.v[xopp], weak, strength)
);
});
});
*/

};

displayAround(menu, button);

menus.forEach(function(m) {
// Descending strengths of constraints:
// - Menus should always be inside the page
// - Menus should not overlap their parent menu if possible.
// - Menus should maintain their width
// - Menus should maintain their height

m.add(
// leq(m.v.bottom, root.v.bottom, weak)
leq(m.v.top, c.Minus(root.v.bottom, m.v.height), weak)

// geq(m.v.top, root.v.top, weak, 1),
// geq(m.v.left, root.v.left, weak, 1),
// leq(m.v.right, root.v.right, weak, 1)
);
});
}, false);
</script>

Expand All @@ -55,20 +141,22 @@
color: white;
background-color: #527DFF;
border-radius: 4px;
font-size: 15px;
font-size: 13px;
line-height: 30px;
font-weight: bold;
text-align: center;
vertical-align: center;
font-family: "Helvetica Neue";
}

/* FIXME(slightlyoff) */
.menu {
background-color: #527DFF;
border-radius: 4px;
font-size: 15px;
font-size: 13px;
line-height: 30px;
font-weight: bold;
font-family: "Helvetica Neue";
letter-spacing: 1px;
box-shadow: 0px 6px 20px rgba(54,54,54,0.7);
}

.menu > * {
Expand All @@ -78,6 +166,10 @@
padding-left: 1em;
padding-right: 1em;
}

.menu > :last-child {
border-bottom: none;
}
</style>
</head>
<body debug="false" id="root">
Expand All @@ -87,74 +179,78 @@
</x-panel>

<x-panel id="menu"
minWidth="200" preferredHeight="300"
top="#button.v.bottom" left="#button.v.left" class="menu">
minWidth="200" maxWidth="200" minHeight="300" maxHeight="300"
class="menu">
<!--
left="#button.v.left" top="#button.v.bottom"
below="#button" -->
<x-panel preferredHeight="30"
preferredWidth="#menu.v.width" left="inherit" top="#menu.v.top" id="i1">
Item 1
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i2">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i1.v.bottom" id="i2">
Item 2
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i3">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i2.v.bottom" id="i3">
Item 3
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i4">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i3.v.bottom" id="i4">
Item 4 <span style="float: right;">&#9654;</span>
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i5">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i4.v.bottom" id="i5">
Item 5
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i6">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i5.v.bottom" id="i6">
Item 6
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i7">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i6.v.bottom" id="i7">
Item 7
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i8">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i7.v.bottom" id="i8">
Item 8
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i9">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i8.v.bottom" id="i9">
Item 9
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="i10">
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#i9.v.bottom" id="i10">
Item 10
</x-panel>
</x-panel>

<x-panel id="submenu"
minWidth="200" preferredHeight="500"
minWidth="200" maxWidth="200"
maxHeight="300"
top="#i4.v.top" rightOf="#i4" class="menu">
<x-panel preferredHeight="30"
preferredWidth="#submenu.v.width" left="#submenu.v.left" top="#submenu.v.top" id="si1">
Item 1
Sub-Item 1
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si2">
Item 2
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si1.v.bottom" id="si2">
Sub-Item 2
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si3">
Item 3
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si2.v.bottom" id="si3">
Sub-Item 3
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si4">
Item 4
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si3.v.bottom" id="si4">
Sub-Item 4
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si5">
Item 5
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si4.v.bottom" id="si5">
Sub-Item 5
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si6">
Item 6
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si5.v.bottom" id="si6">
Sub-Item 6
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si7">
Item 7
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si6.v.bottom" id="si7">
Sub-Item 7
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si8">
Item 8
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si7.v.bottom" id="si8">
Sub-Item 8
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si9">
Item 9
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si8.v.bottom" id="si9">
Sub-Item 9
</x-panel>
<x-panel preferredHeight="30" left="inherit" right="inherit" below="previous" id="si10">
Item 10
<x-panel preferredHeight="30" left="inherit" right="inherit" top="#si9.v.bottom" id="si10">
Sub-Item 10
</x-panel>
</x-panel>

Expand Down

0 comments on commit 94dd6eb

Please sign in to comment.