merge
This commit is contained in:
James Burke
Коммит
47e5125e0c
|
|
@ -0,0 +1,108 @@
|
|||
/*!
|
||||
* jQuery Text Overflow v0.7
|
||||
*
|
||||
* Licensed under the new BSD License.
|
||||
* Copyright 2009-2010, Bram Stein
|
||||
* All rights reserved.
|
||||
*/
|
||||
/*global jQuery, document, setInterval*/
|
||||
(function ($) {
|
||||
var style = document.documentElement.style,
|
||||
hasTextOverflow = ('textOverflow' in style || 'OTextOverflow' in style),
|
||||
|
||||
domSplit = function (root, maxIndex) {
|
||||
var index = 0, result = [],
|
||||
domSplitAux = function (nodes) {
|
||||
var i = 0, tmp;
|
||||
|
||||
if (index > maxIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
for (i = 0; i < nodes.length; i += 1) {
|
||||
if (nodes[i].nodeType === 1) {
|
||||
tmp = nodes[i].cloneNode(false);
|
||||
result[result.length - 1].appendChild(tmp);
|
||||
result.push(tmp);
|
||||
domSplitAux(nodes[i].childNodes);
|
||||
result.pop();
|
||||
} else if (nodes[i].nodeType === 3) {
|
||||
if (index + nodes[i].length < maxIndex) {
|
||||
result[result.length - 1].appendChild(nodes[i].cloneNode(false));
|
||||
} else {
|
||||
tmp = nodes[i].cloneNode(false);
|
||||
tmp.textContent = $.trim(tmp.textContent.substring(0, maxIndex - index));
|
||||
result[result.length - 1].appendChild(tmp);
|
||||
}
|
||||
index += nodes[i].length;
|
||||
} else {
|
||||
result.appendChild(nodes[i].cloneNode(false));
|
||||
}
|
||||
}
|
||||
};
|
||||
result.push(root.cloneNode(false));
|
||||
domSplitAux(root.childNodes);
|
||||
return $(result.pop().childNodes);
|
||||
};
|
||||
|
||||
$.extend($.fn, {
|
||||
textOverflow: function (str, autoUpdate) {
|
||||
var more = str || '…';
|
||||
|
||||
if (!hasTextOverflow) {
|
||||
return this.each(function () {
|
||||
var element = $(this),
|
||||
|
||||
// the clone element we modify to measure the width
|
||||
clone = element.clone(),
|
||||
|
||||
// we save a copy so we can restore it if necessary
|
||||
originalElement = element.clone(),
|
||||
originalText = element.text(),
|
||||
originalWidth = element.width(),
|
||||
low = 0, mid = 0,
|
||||
high = originalText.length,
|
||||
reflow = function () {
|
||||
if (originalWidth !== element.width()) {
|
||||
element.replaceWith(originalElement);
|
||||
element = originalElement;
|
||||
originalElement = element.clone();
|
||||
element.textOverflow(str, false);
|
||||
originalWidth = element.width();
|
||||
}
|
||||
};
|
||||
|
||||
element.after(clone.hide().css({
|
||||
'position': 'absolute',
|
||||
'width': 'auto',
|
||||
'overflow': 'visible',
|
||||
'max-width': 'inherit'
|
||||
}));
|
||||
|
||||
if (clone.width() > originalWidth) {
|
||||
while (low < high) {
|
||||
mid = Math.floor(low + ((high - low) / 2));
|
||||
clone.empty().append(domSplit(originalElement.get(0), mid)).append(more);
|
||||
if (clone.width() < originalWidth) {
|
||||
low = mid + 1;
|
||||
} else {
|
||||
high = mid;
|
||||
}
|
||||
}
|
||||
|
||||
if (low < originalText.length) {
|
||||
element.empty().append(domSplit(originalElement.get(0), low - 1)).append(more);
|
||||
}
|
||||
}
|
||||
clone.remove();
|
||||
|
||||
if (autoUpdate) {
|
||||
setInterval(reflow, 200);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
return this;
|
||||
}
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Linkdrop: Account Manager</title>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="accounts.css">
|
||||
|
||||
<script src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
||||
<script>require(["accounts.js"]);</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
<div id="header" class="row">
|
||||
<div class="c2 logo">
|
||||
</div>
|
||||
<div class="c1 title">
|
||||
<h1>Account Manager - <a href="#" class="close">close</a></h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="notifications"></div>
|
||||
|
||||
<ul id="accounts"></ul>
|
||||
|
||||
<div id="footer" class="row">
|
||||
<div class="c3">
|
||||
Mozilla Messaging 2010
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script id="service" type="text/template">
|
||||
<li class="row">
|
||||
<div class="accountHeaders">
|
||||
<div class="c1">
|
||||
<h1><img src="{serviceIcon(_)}"> {serviceName(_)} accounts</h1>
|
||||
</div>
|
||||
<div class="c2 accountOptions">
|
||||
<h1>Options</h1>
|
||||
</div>
|
||||
</div>
|
||||
<ul class="accountListing">
|
||||
{accounts(_) [}
|
||||
<li>
|
||||
{.userAccount accounts[0]}
|
||||
<div class="c2"><a href="#">{userAccount.username} [{userAccount.userid}]</a></div>
|
||||
<div class="c1 accountOptions">
|
||||
<a href="#" class="disconnectButton" data-domain="{domain}" data-username="{svcAccount.username}" data-userid="{svcAccount.userid}">remove</a>
|
||||
</div>
|
||||
</li>
|
||||
{] [}
|
||||
<li class="noAccount">
|
||||
<div class="c2 addAccount">
|
||||
No {serviceName(_)} accounts configured
|
||||
</div>
|
||||
<div class="c1 accountOptions">
|
||||
<a href="#" class="connectButton" title="add a {serviceName(_)} account!" data-domain="{}">add account</a>
|
||||
</div>
|
||||
</li>
|
||||
{]}
|
||||
</ul>
|
||||
</li>
|
||||
</script>
|
||||
|
||||
<div id="error" class="template">There was an error: {message}</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -4,6 +4,7 @@
|
|||
<title>Linkdrop Alpha</title>
|
||||
<link rel="stylesheet" type="text/css" href="share.css">
|
||||
<script src="../../scripts/requireplugins-jquery-1.4.2.js" charset="utf-8"></script>
|
||||
<script src="../../scripts/requireplugins-jquery-textOverflow.js" charset="utf-8"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
|
||||
<script>require(["index.js"]);</script>
|
||||
</head>
|
||||
|
|
@ -36,10 +37,10 @@
|
|||
<div class="thumb">
|
||||
<div class="image"><img class="thumb"/></div>
|
||||
<div class="meta">
|
||||
<div class="title"></div>
|
||||
<div class="description"></div>
|
||||
<a title="The link for this page" class="url"></a>
|
||||
<a title="A smaller, shorter link to use for Twitter" class="surl"></a>
|
||||
<div class="title">Some long ass shit that will have an ellipsis</div>
|
||||
<div class="description">Some long ass shit that will have an ellipsis</div>
|
||||
<a title="The link for this page" class="url">Some long ass shit that will have an ellipsis</a>
|
||||
<a title="A smaller, shorter link to use for Twitter" class="surl">Some long ass shit that will have an ellipsis</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="message twitterCounter boxFlex">
|
||||
|
|
|
|||
|
|
@ -440,6 +440,12 @@ function (require, $, fn, rdapi, oauth, jig, url,
|
|||
if (options.system) {
|
||||
$(document.documentElement).addClass(options.system);
|
||||
}
|
||||
|
||||
//Create ellipsis for thumbnail section
|
||||
$('.title').textOverflow(null,true);
|
||||
$('.description').textOverflow(null,true);
|
||||
$('.url').textOverflow(null,true);
|
||||
$('.surl').textOverflow(null,true);
|
||||
|
||||
//Debug info on the data that was received.
|
||||
$('#debugOutput').val(JSON.stringify(options));
|
||||
|
|
@ -624,6 +630,7 @@ function (require, $, fn, rdapi, oauth, jig, url,
|
|||
.each(function (i, node) {
|
||||
placeholder(node);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -303,6 +303,7 @@ div.meta {
|
|||
.meta {
|
||||
padding: 0 3px;
|
||||
width: 150px;
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.meta .title {
|
||||
|
|
@ -315,8 +316,7 @@ div.meta {
|
|||
color: #444;
|
||||
white-space: normal;
|
||||
font-size: 9px;
|
||||
line-height: 11px;
|
||||
max-height: 22px; /* 2 lines worth */
|
||||
/* max-height: 22px; */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче