Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 29, 2015 02:15
Show Gist options
  • Save anonymous/cc66d6a80dfa2812f00c to your computer and use it in GitHub Desktop.
Save anonymous/cc66d6a80dfa2812f00c to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/jirehunuja
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style>
a .invisible {
font-size: 0;
line-height: 0;
}
<\style>
</head>
<body>
<ul class="normal">
<li><a href="http://t.co/AAAAAAA">処理しない</a></li>
<li><a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/EEE?FF=GGG</a></li>
<li><a href="http://t.co/AAAAAAA">http://google.co.jp/too_short/</a></li>
</ul>
<ul class="short">
<li> <a href="http://t.co/AAAAAAA">処理しない</a></li>
<li> <a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/EEE?FF=GGG</a></li>
<li> <a href="http://t.co/AAAAAAA">http://google.co.jp/too_short/</a></li>
</ul>
<ul class="ellipsis">
<li> <a href="http://t.co/AAAAAAA">処理しない</a></li>
<li> <a href="http://t.co/AAAAAAA">http://google.co.jp/AAABBBCCCDDD/EEE?FF=GGG</a></li>
<li> <a href="http://t.co/AAAAAAA">http://google.co.jp/too_short/</a></li>
</ul>
<ul class="large_front">
<li> <a href="http://t.co/AAAAAAA">http://domai_nagai.domain-nagai.domain_nagai.co.jp/aaa/bbb/ccc?eee=fff&ggg=hijklmn</a></li>
<li> <a href="http://t.co/AAAAAAA">http://domai_nagai.domain-nagai.domain_nagai.co.jp/too_short/</a></li>
</ul>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(function(){
$('.normal a').twellipsis();
$('.short a').twellipsis({length:5});
$('.ellipsis a').twellipsis({'tco-ellipsis':'---'});
$('.large_front a').twellipsis({length_front:37});
});
</script>
<script id="jsbin-javascript">
(function($) {
var setting = {};
$.fn.twellipsis = function(options){
//options
var defaults = {
length: 14,
length_front: 37,
'tco-ellipsis': '...'
};
setting = $.extend(defaults, options);
//run
run(this);
//
return this;
};
var run = function(elements){
$(elements).each(function(){
if( $(this).prop("tagName") == 'A' ){
_omit(this);
}
});
};
var _omit = function(a){
text = $(a).text();
var segments = _split(text);
if( !segments ){ return; }
$(a).empty();
$(a).attr('data-expanted-url',text);
var invisible = segments[1] + '://';
var display = '';
var ellipsis = '';
if( segments[2].length > setting.length_front ){
display += segments[2].slice(-setting.length_front) + '/';
invisible += segments[2].slice(0,segments[2].length-setting.length_front);
ellipsis = setting['tco-ellipsis'];
}else{
display += segments[2] + '/';
}
$(a).append(
$('<span>').addClass('tco-ellipsis').text( ellipsis ),
$('<span>').addClass('invisible').text( invisible )
);
invisible = '';
ellipsis = '';
if( segments[3].length > setting.length ){
display += segments[3].slice(0,setting.length);
invisible = segments[3].slice(setting.length);
ellipsis = setting['tco-ellipsis'];
}else{
display += segments[3];
}
$(a).append(
$('<span>').addClass('js-display-url').text( display ),
$('<span>').addClass('invisible').text( invisible ),
$('<span>').addClass('tco-ellipsis').append(
$('<span>').addClass('invisible').html( ' ' ),
ellipsis
)
);
};
var _split = function(url){
var regex = /^(.+):\/\/(.+?)\/(.+)$/;
var m = regex.exec(url);
if( !m ){ return false; }
return m;
};
})(jQuery);
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function($) {
var setting = {};
$.fn.twellipsis = function(options){
//options
var defaults = {
length: 14,
length_front: 37,
'tco-ellipsis': '...'
};
setting = $.extend(defaults, options);
//run
run(this);
//
return this;
};
var run = function(elements){
$(elements).each(function(){
if( $(this).prop("tagName") == 'A' ){
_omit(this);
}
});
};
var _omit = function(a){
text = $(a).text();
var segments = _split(text);
if( !segments ){ return; }
$(a).empty();
$(a).attr('data-expanted-url',text);
var invisible = segments[1] + '://';
var display = '';
var ellipsis = '';
if( segments[2].length > setting.length_front ){
display += segments[2].slice(-setting.length_front) + '/';
invisible += segments[2].slice(0,segments[2].length-setting.length_front);
ellipsis = setting['tco-ellipsis'];
}else{
display += segments[2] + '/';
}
$(a).append(
$('<span>').addClass('tco-ellipsis').text( ellipsis ),
$('<span>').addClass('invisible').text( invisible )
);
invisible = '';
ellipsis = '';
if( segments[3].length > setting.length ){
display += segments[3].slice(0,setting.length);
invisible = segments[3].slice(setting.length);
ellipsis = setting['tco-ellipsis'];
}else{
display += segments[3];
}
$(a).append(
$('<span>').addClass('js-display-url').text( display ),
$('<span>').addClass('invisible').text( invisible ),
$('<span>').addClass('tco-ellipsis').append(
$('<span>').addClass('invisible').html( ' ' ),
ellipsis
)
);
};
var _split = function(url){
var regex = /^(.+):\/\/(.+?)\/(.+)$/;
var m = regex.exec(url);
if( !m ){ return false; }
return m;
};
})(jQuery);</script></body>
</html>
Raw
jsbin.jirehunuja.js
(function($) {
var setting = {};
$.fn.twellipsis = function(options){
//options
var defaults = {
length: 14,
length_front: 37,
'tco-ellipsis': '...'
};
setting = $.extend(defaults, options);
//run
run(this);
//
return this;
};
var run = function(elements){
$(elements).each(function(){
if( $(this).prop("tagName") == 'A' ){
_omit(this);
}
});
};
var _omit = function(a){
text = $(a).text();
var segments = _split(text);
if( !segments ){ return; }
$(a).empty();
$(a).attr('data-expanted-url',text);
var invisible = segments[1] + '://';
var display = '';
var ellipsis = '';
if( segments[2].length > setting.length_front ){
display += segments[2].slice(-setting.length_front) + '/';
invisible += segments[2].slice(0,segments[2].length-setting.length_front);
ellipsis = setting['tco-ellipsis'];
}else{
display += segments[2] + '/';
}
$(a).append(
$('<span>').addClass('tco-ellipsis').text( ellipsis ),
$('<span>').addClass('invisible').text( invisible )
);
invisible = '';
ellipsis = '';
if( segments[3].length > setting.length ){
display += segments[3].slice(0,setting.length);
invisible = segments[3].slice(setting.length);
ellipsis = setting['tco-ellipsis'];
}else{
display += segments[3];
}
$(a).append(
$('<span>').addClass('js-display-url').text( display ),
$('<span>').addClass('invisible').text( invisible ),
$('<span>').addClass('tco-ellipsis').append(
$('<span>').addClass('invisible').html( ' ' ),
ellipsis
)
);
};
var _split = function(url){
var regex = /^(.+):\/\/(.+?)\/(.+)$/;
var m = regex.exec(url);
if( !m ){ return false; }
return m;
};
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment