mirror of
https://github.com/Tygs/0bin.git
synced 2023-08-10 21:13:00 +03:00
Auto hide paste options & auto resize content
This commit is contained in:
max
parent
d2ab694b71
commit
5b4ee443e9
@ -49,4 +49,27 @@ if (content && key) {
|
||||
}
|
||||
}
|
||||
|
||||
/* expiration flip/flop */
|
||||
$('.paste-option select').change(function(){
|
||||
var value = $(this).val();
|
||||
$('.paste-option select').val(value);
|
||||
});
|
||||
|
||||
|
||||
/* Resize Textarea content */
|
||||
$('#content').elastic();
|
||||
|
||||
/* Display bottom paste option buttons when needed */
|
||||
$('.paste-option-down').hide();
|
||||
$('#content').live('keyup', function(){
|
||||
if($('#content').height() < 600 ){
|
||||
$('.paste-option-down').hide();
|
||||
}
|
||||
else {
|
||||
$(window).scrollTop($(this).height());
|
||||
$('.paste-option-down').show();
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
162
static/js/jquery.elastic.source.js
Normal file
162
static/js/jquery.elastic.source.js
Normal file
@ -0,0 +1,162 @@
|
||||
/**
|
||||
* @name Elastic
|
||||
* @descripton Elastic is jQuery plugin that grow and shrink your textareas automatically
|
||||
* @version 1.6.11
|
||||
* @requires jQuery 1.2.6+
|
||||
*
|
||||
* @author Jan Jarfalk
|
||||
* @author-email jan.jarfalk@unwrongest.com
|
||||
* @author-website http://www.unwrongest.com
|
||||
*
|
||||
* @licence MIT License - http://www.opensource.org/licenses/mit-license.php
|
||||
*/
|
||||
|
||||
(function($){
|
||||
jQuery.fn.extend({
|
||||
elastic: function() {
|
||||
|
||||
// We will create a div clone of the textarea
|
||||
// by copying these attributes from the textarea to the div.
|
||||
var mimics = [
|
||||
'paddingTop',
|
||||
'paddingRight',
|
||||
'paddingBottom',
|
||||
'paddingLeft',
|
||||
'fontSize',
|
||||
'lineHeight',
|
||||
'fontFamily',
|
||||
'width',
|
||||
'fontWeight',
|
||||
'border-top-width',
|
||||
'border-right-width',
|
||||
'border-bottom-width',
|
||||
'border-left-width',
|
||||
'borderTopStyle',
|
||||
'borderTopColor',
|
||||
'borderRightStyle',
|
||||
'borderRightColor',
|
||||
'borderBottomStyle',
|
||||
'borderBottomColor',
|
||||
'borderLeftStyle',
|
||||
'borderLeftColor'
|
||||
];
|
||||
|
||||
return this.each( function() {
|
||||
|
||||
// Elastic only works on textareas
|
||||
if ( this.type !== 'textarea' ) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $textarea = jQuery(this),
|
||||
$twin = jQuery('<div />').css({
|
||||
'position' : 'absolute',
|
||||
'display' : 'none',
|
||||
'word-wrap' : 'break-word',
|
||||
'white-space' :'pre-wrap'
|
||||
}),
|
||||
lineHeight = parseInt($textarea.css('line-height'),10) || parseInt($textarea.css('font-size'),'10'),
|
||||
minheight = parseInt($textarea.css('height'),10) || lineHeight*3,
|
||||
maxheight = parseInt($textarea.css('max-height'),10) || Number.MAX_VALUE,
|
||||
goalheight = 0;
|
||||
|
||||
// Opera returns max-height of -1 if not set
|
||||
if (maxheight < 0) { maxheight = Number.MAX_VALUE; }
|
||||
|
||||
// Append the twin to the DOM
|
||||
// We are going to meassure the height of this, not the textarea.
|
||||
$twin.appendTo($textarea.parent());
|
||||
|
||||
// Copy the essential styles (mimics) from the textarea to the twin
|
||||
var i = mimics.length;
|
||||
while(i--){
|
||||
$twin.css(mimics[i].toString(),$textarea.css(mimics[i].toString()));
|
||||
}
|
||||
|
||||
// Updates the width of the twin. (solution for textareas with widths in percent)
|
||||
function setTwinWidth(){
|
||||
var curatedWidth = Math.floor(parseInt($textarea.width(),10));
|
||||
if($twin.width() !== curatedWidth){
|
||||
$twin.css({'width': curatedWidth + 'px'});
|
||||
|
||||
// Update height of textarea
|
||||
update(true);
|
||||
}
|
||||
}
|
||||
|
||||
// Sets a given height and overflow state on the textarea
|
||||
function setHeightAndOverflow(height, overflow){
|
||||
|
||||
var curratedHeight = Math.floor(parseInt(height,10));
|
||||
if($textarea.height() !== curratedHeight){
|
||||
$textarea.css({'height': curratedHeight + 'px','overflow':overflow});
|
||||
}
|
||||
}
|
||||
|
||||
// This function will update the height of the textarea if necessary
|
||||
function update(forced) {
|
||||
|
||||
// Get curated content from the textarea.
|
||||
var textareaContent = $textarea.val().replace(/&/g,'&').replace(/ {2}/g, ' ').replace(/<|>/g, '>').replace(/\n/g, '<br />');
|
||||
|
||||
// Compare curated content with curated twin.
|
||||
var twinContent = $twin.html().replace(/<br>/ig,'<br />');
|
||||
|
||||
if(forced || textareaContent+' ' !== twinContent){
|
||||
|
||||
// Add an extra white space so new rows are added when you are at the end of a row.
|
||||
$twin.html(textareaContent+' ');
|
||||
|
||||
// Change textarea height if twin plus the height of one line differs more than 3 pixel from textarea height
|
||||
if(Math.abs($twin.height() + lineHeight - $textarea.height()) > 3){
|
||||
|
||||
var goalheight = $twin.height()+lineHeight;
|
||||
if(goalheight >= maxheight) {
|
||||
setHeightAndOverflow(maxheight,'auto');
|
||||
} else if(goalheight <= minheight) {
|
||||
setHeightAndOverflow(minheight,'hidden');
|
||||
} else {
|
||||
setHeightAndOverflow(goalheight,'hidden');
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Hide scrollbars
|
||||
$textarea.css({'overflow':'hidden'});
|
||||
|
||||
// Update textarea size on keyup, change, cut and paste
|
||||
$textarea.bind('keyup change cut paste', function(){
|
||||
update();
|
||||
});
|
||||
|
||||
// Update width of twin if browser or textarea is resized (solution for textareas with widths in percent)
|
||||
$(window).bind('resize', setTwinWidth);
|
||||
$textarea.bind('resize', setTwinWidth);
|
||||
$textarea.bind('update', update);
|
||||
|
||||
// Compact textarea on blur
|
||||
$textarea.bind('blur',function(){
|
||||
if($twin.height() < maxheight){
|
||||
if($twin.height() > minheight) {
|
||||
$textarea.height($twin.height());
|
||||
} else {
|
||||
$textarea.height(minheight);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// And this line is to catch the browser paste event
|
||||
$textarea.bind('input paste',function(e){ setTimeout( update, 250); });
|
||||
|
||||
// Run update once when elastic is initialized
|
||||
update();
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
});
|
||||
})(jQuery);
|
||||
@ -86,6 +86,8 @@
|
||||
|
||||
<script src="/static/js/lzw.js"></script>
|
||||
<script src="/static/js/highlight.pack.js"></script>
|
||||
<script src="/static/js/jquery.elastic.source.js"></script>
|
||||
|
||||
<!--
|
||||
<script src="/static/js/jquery.js"></script>
|
||||
<script src="/static/js/bootstrap-transition.js"></script>
|
||||
@ -100,7 +102,6 @@
|
||||
<script src="/static/js/bootstrap-collapse.js"></script>
|
||||
<script src="/static/js/bootstrap-carousel.js"></script>
|
||||
<script src="/static/js/bootstrap-typeahead.js"></script>
|
||||
|
||||
-->
|
||||
|
||||
</body>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<form class="well" method="post" action="/paste/create">
|
||||
|
||||
<p class="paste-option">
|
||||
<label >Expiration:</label>
|
||||
<select id="expiration" name="expiration">
|
||||
<label for="expiration">Expiration:</label>
|
||||
<select name="expiration" >
|
||||
<option value="burn_after_reading">Burn after reading</option>
|
||||
<option value="10_minutes">10 minutes</option>
|
||||
<option value="1_hour">1 hour</option>
|
||||
@ -20,9 +20,9 @@
|
||||
</p>
|
||||
|
||||
|
||||
<p class="paste-option">
|
||||
<label >Expiration:</label>
|
||||
<select id="expiration" name="expiration">
|
||||
<p class="paste-option paste-option-down">
|
||||
<label for="expiration" >Expiration:</label>
|
||||
<select name="expiration" >
|
||||
<option value="burn_after_reading">Burn after reading</option>
|
||||
<option value="10_minutes">10 minutes</option>
|
||||
<option value="1_hour">1 hour</option>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user