diff --git a/demos/panels/cloudy.css b/demos/panels/cloudy.css index 119d45b..99c19ac 100644 --- a/demos/panels/cloudy.css +++ b/demos/panels/cloudy.css @@ -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; diff --git a/demos/panels/domutil.js b/demos/panels/domutil.js index 1fcdf7d..908367f 100644 --- a/demos/panels/domutil.js +++ b/demos/panels/domutil.js @@ -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"; diff --git a/demos/panels/panels.css b/demos/panels/panels.css index e89bd21..5b6f4c0 100644 --- a/demos/panels/panels.css +++ b/demos/panels/panels.css @@ -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%; diff --git a/demos/panels/panels.js b/demos/panels/panels.js index fcd6b4e..a3f8e02 100644 --- a/demos/panels/panels.js +++ b/demos/panels/panels.js @@ -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"; @@ -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") { @@ -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]); @@ -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"); }, diff --git a/demos/panels/popup.html b/demos/panels/popup.html index 53eec55..ce12ab3 100644 --- a/demos/panels/popup.html +++ b/demos/panels/popup.html @@ -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); @@ -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 > * { @@ -78,6 +166,10 @@ padding-left: 1em; padding-right: 1em; } + + .menu > :last-child { + border-bottom: none; + } @@ -87,74 +179,78 @@ + minWidth="200" maxWidth="200" minHeight="300" maxHeight="300" + class="menu"> + Item 1 - + Item 2 - + Item 3 - + Item 4 ▶ - + Item 5 - + Item 6 - + Item 7 - + Item 8 - + Item 9 - + Item 10 - Item 1 + Sub-Item 1 - - Item 2 + + Sub-Item 2 - - Item 3 + + Sub-Item 3 - - Item 4 + + Sub-Item 4 - - Item 5 + + Sub-Item 5 - - Item 6 + + Sub-Item 6 - - Item 7 + + Sub-Item 7 - - Item 8 + + Sub-Item 8 - - Item 9 + + Sub-Item 9 - - Item 10 + + Sub-Item 10