Skip to content

Commit

Permalink
Add set_selectable property for suit.Labels. Labels inside buttons
Browse files Browse the repository at this point in the history 
should not be selectable.
  • Loading branch information
@dsamarin
dsamarin committed Aug 17, 2011
1 parent 6005781 commit 8ac34bd
Show file tree
Hide file tree
Showing 7 changed files with 221 additions and 81 deletions.
2 changes: 1 addition & 1 deletion build/make.js
View file
Expand Up @@ -166,7 +166,7 @@ Maker.prototype.compress_files = function() {

var combined = this.buffer.join("\n");

var output_file = Path.join(__dirname, "suit-uncompressed.js");
var output_file = Path.join(__dirname, "suit.js");
this.log_info("Creating "+filename(output_file)+"...");
File.writeFileSync(output_file, combined);

Expand Down
2 changes: 1 addition & 1 deletion demo.js
View file
@@ -1,4 +1,4 @@
var demo_text = "\tThis is text from a Label widget that has been added as the child of a Packer widget. The Packer widget lines up widgets in a row or column with optional spacing. It's the child of the Scroller widget which allows you to use your mouse wheel to scroll text. Scroll bars will be added when it becomes more developed. As a fallback, you can use your mouse to click-and-drag inside the Scroller to pan around. \n\n\tYou can set preferences to the Label widget to make it suit your needs. Currently you can set the font face, font size, line-height, and alignment (horizontal and vertical).\n\n\tAnother widget currently developed is the Button, which is underneath this Label text. It is added alongside this Label in the Packer.\n\n\tLorem Ipsum is simply dummy text of the printing and typesetting industry. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.\n\n\tThere are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.";
var demo_text = "\tThis is text from a Label widget that has been added as the child of a Packer widget. The Packer widget lines up widgets in a row or column with optional spacing. It's the child of the Scroller widget which allows you to use your mouse wheel to scroll text. Scroll bars will be added when it becomes more developed.\n\n\tYou can set preferences to the Label widget to make it suit your needs. Currently you can set the font face, font size, line-height, and alignment (horizontal and vertical).\n\n\tAnother widget currently developed is the Button, which is underneath this Label text. It is added alongside this Label in the Packer.\n\n\tLorem Ipsum is simply dummy text of the printing and typesetting industry. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.\n\n\tThere are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.";

var screen, scroller, vpack, hpack, logo, demo_label, button, button_alert, button_prompt, more_text, source;

Expand Down
2 changes: 1 addition & 1 deletion index.html
View file
Expand Up @@ -18,7 +18,7 @@
<script type="application/ecmascript" async="" href="//www.google-analytics.com/ga.js"></script>
</head>
<body>
<script src="build/suit-min.js" type="application/ecmascript"></script>
<script src="build/suit.js" type="application/ecmascript"></script>
<script src="demo.js" type="application/ecmascript"></script>
</body>
</html>
11 changes: 8 additions & 3 deletions javascript/Button.js
View file
@@ -1,12 +1,17 @@
suit.Button = function SUITButton(text) {
var label;

suit.Bin.call(this);

if (text) {
suit.ensure(text, "string");

this.set_child(new suit.Label(text));
this.child.set_align ("center");
this.child.set_valign ("middle");
label = new suit.Label(text);
label.set_selectable (false);
label.set_align ("center");
label.set_valign ("middle");

this.set_child (label);
}

this.style = {
Expand Down
242 changes: 178 additions & 64 deletions javascript/Label.js
View file
@@ -1,9 +1,26 @@
suit.Label = function SUITLabel(text) {
suit.Widget.call(this);
var style;

if (text) this.text = text;
suit.Widget.call(this);

this.set_has_window (true);

this.window = new suit.Window (document.body, this, true);
style = this.window.base.style;

style.display = "none";
style.whiteSpace = "pre-wrap";
style.overflow = "visible";
style.color = "white";

this.update_properties ();

this.cache_pref_width = null;
this.cache_pref_height = null;
this.cache_pref_wfh = [];
this.cache_pref_hfw = [];

if (text) this.set_text (text);
};

suit.Label.inherit (suit.Widget);
Expand All @@ -13,18 +30,18 @@ suit.Label.prototype.name = "Label";
suit.Label.prototype.updated = false;
suit.Label.prototype.align = "left";
suit.Label.prototype.valign = "top"; // top, middle, bottom

suit.Label.metric = (function() {
var offscreen = document.createElement ("div");
offscreen.style.position = "absolute";
offscreen.style.display = "none";
offscreen.style.whiteSpace = "pre-wrap";
document.body.appendChild (offscreen);
return offscreen;
})();
suit.Label.prototype.line_height = null;
suit.Label.prototype.selectable = true;

suit.Label.prototype.clear_cache = function() {
this.cache_pref_width = null;
this.cache_pref_height = null;
this.cache_pref_wfh.length = 0;
this.cache_pref_hfw.length = 0;
};

suit.Label.prototype.realize = function() {
var window, allocation;
var window, base, parent, allocation;

if (!this.realized) {

Expand All @@ -34,56 +51,87 @@ suit.Label.prototype.realize = function() {
this.size_allocate (allocation);
}

window = new suit.Window(this.get_parent_window(), this, true);
window.move_resize (allocation);

window.base.style.whiteSpace = "pre-wrap";
window.base.style.overflow = "visible";
window.base.style.color = "white";
window.base.style.textAlign = this.align;
this.set_element_text (window.base, this.text);
window = this.window;
window.reparent (this.get_parent_window ());
window.base.style.display = "block";

this.window = window;
window.move_resize (allocation);
}

this.realized = true;

};


suit.Label.prototype.update_properties = function() {
var base;

base = this.window.base;
base.style.textAlign = this.align;
base.style.lineHeight = this.line_height ? this.line_height + "em" : "normal";

if (this.selectable) {
base.style.cursor = "auto";
} else {
base.style.cursor = "default";
base.style.userSelect = "none";
base.style.MozUserSelect = "none";
base.style.KhtmlUserSelect = "none";
}
};


suit.Label.prototype.set_text = function(text) {
text = String(text);

if (this.realized) {
if (this.text !== text) {
this.clear_cache ();
this.set_element_text (this.window.base, text);
this.text = text;
this.queue_resize ();
}

this.text = text;

this.queue_resize ();
};

suit.Label.prototype.set_align = function(align) {
suit.ensure(align, "string");

this.align = align;
if (this.realized) {
this.window.base.style.textAlign = align;
if (this.align !== align) {
this.align = align;
this.update_properties ();
}
};

suit.Label.prototype.set_valign = function(valign) {
suit.ensure(valign, "string");

this.valign = valign;
this.queue_redraw();
if (this.valign !== valign) {
this.valign = valign;
this.update_properties ();
}
};

suit.Label.prototype.set_line_height = function(line_height) {
if (this.line_height !== line_height) {
this.line_height = line_height;
this.update_properties ();
this.clear_cache ();
this.queue_resize ();
}
};

suit.Label.prototype.set_selectable = function(selectable) {
suit.ensure(selectable, "boolean");

if (this.selectable !== selectable) {
this.selectable = selectable;
this.update_properties ();
}
};

suit.Label.prototype.set_element_text = function(element, text) {
while (element.hasChildNodes()) element.removeChild(element.lastChild);
while (element.firstChild) {
element.removeChild(element.firstChild);
}
element.appendChild(document.createTextNode(text));
};

Expand All @@ -92,79 +140,145 @@ suit.Label.prototype.get_request_mode = function() {
};

suit.Label.prototype.get_preferred_width = function() {
var width, ostyle;
var width, realized, ostyle, ow, oh;

if (this.cache_pref_width !== null) {
width = this.cache_pref_width;
} else {

ostyle = suit.Label.metric.style;
realized = this.realized;
ostyle = this.window.base.style;

this.set_element_text (suit.Label.metric, this.text);
if (!realized) {
ostyle.display = "block";
} else {
ow = ostyle.width;
oh = ostyle.height;
}

ostyle.display = "block";
ostyle.height = "auto";
ostyle.width = "auto";
ostyle.height = "auto";
ostyle.width = "auto";

width = suit.Label.metric.clientWidth + 1;
width = this.cache_pref_width = this.window.base.clientWidth + 1;

ostyle.display = "none";
if (!realized) {
ostyle.display = "none";
} else {
ostyle.width = ow;
ostyle.height = oh;
}
}

return {
minimum: width,
natural: width
};
};

suit.Label.prototype.get_preferred_height = function() {
var height, ostyle;
var height, realized, ostyle, ow, oh;

if (this.cache_pref_height !== null) {
height = this.cache_pref_height;
} else {

ostyle = suit.Label.metric.style;
realized = this.realized;
ostyle = this.window.base.style;

this.set_element_text (suit.Label.metric, this.text);
if (!realized) {
ostyle.display = "block";
} else {
ow = ostyle.width;
oh = ostyle.height;
}

ostyle.display = "block";
ostyle.height = "auto";
ostyle.width = "auto";
ostyle.height = "auto";
ostyle.width = "auto";

height = suit.Label.metric.clientHeight + 1;
height = this.cache_pref_height = this.window.base.clientHeight + 1;

ostyle.display = "none";
if (!realized) {
ostyle.display = "none";
} else {
ostyle.width = ow;
ostyle.height = oh;
}
}

return {
minimum: height,
natural: height
};
};



suit.Label.prototype.get_preferred_height_for_width = function(width) {
var height, ostyle;
var height, realized, ostyle, ow, oh;

if (this.cache_pref_hfw[width] != null) {
height = this.cache_pref_hfw[width];
} else {

ostyle = suit.Label.metric.style;
realized = this.realized;
ostyle = this.window.base.style;

this.set_element_text (suit.Label.metric, this.text);
if (!realized) {
ostyle.display = "block";
} else {
ow = ostyle.width;
oh = ostyle.height;
}

ostyle.display = "block";
ostyle.width = width+"px";
ostyle.height = "auto";
ostyle.height = "auto";
ostyle.width = width+"px";

height = suit.Label.metric.clientHeight + 1;
height = this.cache_pref_hfw[width] = this.window.base.clientHeight + 1;

ostyle.display = "none";
if (!realized) {
ostyle.display = "none";
} else {
ostyle.width = ow;
ostyle.height = oh;
}
}

return {
minimum: height,
natural: height
};
};


suit.Label.prototype.get_preferred_width_for_height = function(height) {
var width, ostyle;
var width, realized, ostyle, ow, oh;

if (this.cache_pref_wfh[height] != null) {
width = this.cache_pref_wfh[height];
} else {

ostyle = suit.Label.metric.style;
realized = this.realized;
ostyle = this.window.base.style;

this.set_element_text (suit.Label.metric, this.text);
if (!realized) {
ostyle.display = "block";
} else {
ow = ostyle.width;
oh = ostyle.height;
}

ostyle.display = "block";
ostyle.width = "auto";
ostyle.height = height+"px";
ostyle.height = height+"px";
ostyle.width = "auto";

width = suit.Label.metric.clientWidth + 1;
width = this.cache_pref_wfh[height] = this.window.base.clientWidth + 1;

ostyle.display = "none";
if (!realized) {
ostyle.display = "none";
} else {
ostyle.width = ow;
ostyle.height = oh;
}
}

return {
minimum: width,
Expand Down

0 comments on commit 8ac34bd

Please sign in to comment.