[Dojo-checkins] toonetown - r17880 - in dojox/trunk/html: . resources tests
dojo-checkins-admin at dojotoolkit.org
dojo-checkins-admin at dojotoolkit.org
Thu Jun 11 14:04:26 EDT 2009
Author: toonetown
Date: Thu Jun 11 11:04:22 2009
New Revision: 17880
Added:
dojox/trunk/html/ellipsis.js (contents, props changed)
dojox/trunk/html/resources/
dojox/trunk/html/resources/ellipsis.css (contents, props changed)
dojox/trunk/html/tests/test_ellipsis.html (contents, props changed)
Modified:
dojox/trunk/html/README
Log:
Fixes #9392 - add in cross-browser support for dojoxEllipsis class
Modified: dojox/trunk/html/README
==============================================================================
--- dojox/trunk/html/README (original)
+++ dojox/trunk/html/README Thu Jun 11 11:04:22 2009
@@ -14,6 +14,7 @@
Tom Trenka (ttrenka AT gmail.com)
Bryan Forbes (bryan AT reigndropsfall.net)
Mike Wilcox - dojox.html.styles (anm8tr AT yahoo.com)
+ Nathan Toone - dojox.html.ellipsis (toonetown AT dojotoolkit.org)
-------------------------------------------------------------------------------
Project description
@@ -23,6 +24,8 @@
enough to not be duplicated.
Styles adds the ability to create and remove dynamic cssRules, as well as
manipulate document style sheets.
+Ellipsis adds some css definitions and dojo.behavior rules (for FF) to support
+text-overflow: ellipsis
-------------------------------------------------------------------------------
Dependencies:
Added: dojox/trunk/html/ellipsis.js
==============================================================================
--- (empty file)
+++ dojox/trunk/html/ellipsis.js Thu Jun 11 11:04:22 2009
@@ -0,0 +1,66 @@
+dojo.provide("dojox.html.ellipsis");
+
+dojo.require("dojo.behavior");
+
+(function(d){
+ if(d.isFF){
+ // The delay (in ms) to wait so that we don't keep querying when many
+ // changes happen at once - set config "dojoxFFEllipsisDelay" if you
+ // want a different value
+ var delay = 1;
+ if("dojoxFFEllipsisDelay" in d.config){
+ delay = Number(d.config.dojoxFFEllipsisDelay);
+ if(isNaN(delay)){
+ delay = 1;
+ }
+ }
+
+ // Create our stub XUL elements for cloning later
+ var sNS = 'http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul';
+ var xml = document.createElementNS(sNS, 'window');
+ var label = document.createElementNS(sNS, 'description');
+ label.setAttribute('crop', 'end');
+ xml.appendChild(label);
+
+ var createXULEllipsis = function(/* Node */ n){
+ // Summary:
+ // Given a node, it creates the XUL and sets its
+ // content so that it will have an ellipsis
+ var x = xml.cloneNode(true);
+ x.firstChild.setAttribute('value', n.textContent);
+ n.innerHTML = '';
+ n.appendChild(x);
+ };
+
+ // Add our behavior
+ var b = d.behavior;
+ b.add({
+ ".dojoxEllipsis": function(n){
+ createXULEllipsis(n);
+ }
+ });
+
+ d.addOnLoad(function(){
+ // Apply our initial stuff
+ b.apply();
+ var t = null;
+ var running = false;
+
+ // Connect to the modified function so that we can catch
+ // future changes
+ dojo.connect(dojo.body(), "DOMSubtreeModified", function(){
+ if(running){
+ // We are in the process of applying - so we just return
+ return;
+ }
+ if(t){ clearTimeout(t); }
+ t = setTimeout(function(){
+ t = null;
+ running = true;
+ b.apply();
+ running = false;
+ }, delay);
+ });
+ });
+ }
+})(dojo);
\ No newline at end of file
Added: dojox/trunk/html/resources/ellipsis.css
==============================================================================
--- (empty file)
+++ dojox/trunk/html/resources/ellipsis.css Thu Jun 11 11:04:22 2009
@@ -0,0 +1,8 @@
+.dojoxEllipsis {
+ white-space: nowrap;
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ -o-text-overflow: ellipsis;
+ -webkit-text-overflow: ellipsis;
+}
\ No newline at end of file
Added: dojox/trunk/html/tests/test_ellipsis.html
==============================================================================
--- (empty file)
+++ dojox/trunk/html/tests/test_ellipsis.html Thu Jun 11 11:04:22 2009
@@ -0,0 +1,345 @@
+<html>
+<head>
+ <title>Ellipsis tests</title>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <style type="text/css">
+ @import "../resources/ellipsis.css";
+ @import "../../../dojo/resources/dojo.css";
+ @import "../../../dijit/tests/css/dijitTests.css";
+ </style>
+ <script type="text/javascript" src="../../../dojo/dojo.js" djConfig="isDebug: false"></script>
+ <script type="text/javascript">
+ dojo.require("dojox.html.ellipsis");
+
+ dojo.addOnLoad(function(){
+ // Add in some stuff programmatically after a delay
+ setTimeout(function(){
+ var content = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta. " +
+ "Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris. " +
+ "Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend " +
+ "sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque " +
+ "egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula " +
+ "lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus " +
+ "fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus, " +
+ "sapien ac faucibus feugiat, ligula felis laoreet justo, eu " +
+ "sollicitudin purus purus in nibh. Phasellus in nunc.";
+ dojo.create("hr", {}, dojo.body());
+ dojo.create("div", {className: "heading", innerHTML: "Programmatic and delayed"}, dojo.body());
+ dojo.create("div", {className: "subheading", innerHTML: "Within Div"}, dojo.body());
+ dojo.create("div", {className: "dojoxEllipsis", innerHTML: content},
+ dojo.create("div", {className: "divContainer", style: {width: "100px"}}, dojo.body()));
+
+ dojo.create("div", {className: "subheading", innerHTML: "Within Table (using innerHTML)"}, dojo.body());
+ dojo.create("button", {innerHTML: "Change Data", onclick: function(){
+ var n = dojo.byId("c_1_1");
+ if(n.innerHTML == "Short Text"){
+ n.innerHTML = content;
+ }else if(n.innerHTML == content){
+ n.innerHTML = "<div class='dojoxEllipsis'>" + content + "</div>";
+ }else{
+ n.innerHTML = "Short Text";
+ }
+ }}, dojo.body());
+ var tableDiv = dojo.create("div", {});
+ var tableNode = dojo.create("table", {className: "tableContainer", style: {width: "600px"}}, tableDiv);
+ var inner = "<div class='dojoxEllipsis'>" + content + "</div>";
+ for (var r = 0; r < 3; r++){
+ var tableRow = dojo.create("tr", {}, tableNode);
+ for (var c = 0; c < 3; c++){
+ dojo.create("td", {id: "c_" + r + "_" + c, innerHTML: inner, style: {width: ((c+1)*100) + "px"}}, tableRow);
+ }
+ }
+ var ihtml = tableDiv.innerHTML;
+ tableDiv.innerHTML = "";
+ dojo.body().appendChild(tableDiv);
+ tableDiv.innerHTML = ihtml;
+ }, 1000);
+ });
+ </script>
+ <style>
+ .heading {
+ font-weight: bold;
+ font-size: 1.25em;
+ }
+ .subheading {
+ font-weight: bold;
+ padding-top: 1em;
+ }
+ .divContainer,
+ .tableContainer,
+ .tableContainer td {
+ border: 1px solid #F00;
+ }
+ .tableContainer {
+ /* If using ellipsis inside a table, the
+ table-layout needs to be set to fixed */
+ table-layout: fixed;
+ }
+ </style>
+</head>
+<body>
+ <div class="heading">Within divs</div>
+ <div class="subheading">Fixed width (px):</div>
+ <div class="divContainer" style="width: 250px">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </div>
+ <div class="subheading">Fixed width (em):</div>
+ <div class="divContainer" style="width: 20em">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </div>
+ <div class="subheading">Relative width (% - resize browser window):</div>
+ <div class="divContainer" style="width: 70%">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </div>
+ <div class="subheading">Floated and margins</div>
+ <div class="divContainer" style="width: 25%; float: right">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </div>
+ <div class="divContainer" style="width: 25%; float: left">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </div>
+ <div class="divContainer" style="width: 250px; margin-left: 30%;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </div>
+ <div style="clear: both"></div>
+ <hr>
+ <div class="heading">Within tables</div>
+ <div class="subheading">Fixed table, fixed columns:</div>
+ <table class="tableContainer" style="width: 500px;">
+ <tr>
+ <td style="width: 200px;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ <td style="width: 300px;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ <td>
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ </tr>
+ </table>
+ <div class="subheading">Fixed table, relative columns:</div>
+ <table class="tableContainer" style="width: 500px;">
+ <tr>
+ <td style="width: 25%;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ <td style="width: 75%;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ <td>
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ </tr>
+ </table>
+ <div class="subheading">Relative table, relative columns:</div>
+ <table class="tableContainer" style="width: 75%;">
+ <tr>
+ <td style="width: 30%;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ <td style="width: 60%;">
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td>
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ <td>
+ <div class="dojoxEllipsis">
+ Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In porta.
+ Etiam mattis libero nec ante. Nam porta lacus eu ligula. Cras mauris.
+ Suspendisse vel augue. Vivamus aliquam orci ut eros. Nunc eleifend
+ sagittis turpis. Nullam consequat iaculis augue. Aliquam pellentesque
+ egestas massa. Curabitur pulvinar, enim vel porta dapibus, ligula
+ lectus vulputate purus, eu tempus ante dolor id quam. Sed luctus
+ fermentum nulla. Donec sollicitudin imperdiet risus. Cras cursus,
+ sapien ac faucibus feugiat, ligula felis laoreet justo, eu
+ sollicitudin purus purus in nibh. Phasellus in nunc.
+ </div>
+ </td>
+ </tr>
+ </table>
+</body>
+</html>
More information about the Dojo-checkins
mailing list