Add frontend assets and plugin bundles
Add the legacy frontend themes, scripts, and plugin assets required by the main SPOTA interfaces.
This commit is contained in:
@@ -0,0 +1,254 @@
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||
<title>Input Limiter Demo</title>
|
||||
<link rel="stylesheet" type="text/css" href="jquery.inputlimiter.1.0.css" />
|
||||
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
|
||||
<script type="text/javascript" src="jquery.inputlimiter.1.3.1.min.js"></script>
|
||||
<style type="text/css">
|
||||
body {
|
||||
font-family: verdana;
|
||||
}
|
||||
#limitingtext {
|
||||
color: #333;
|
||||
font-size: 90%;
|
||||
}
|
||||
</style>
|
||||
<script type="text/javascript">
|
||||
$(document).ready(function() {
|
||||
// Change default to count new lines as two characters
|
||||
$.fn.inputlimiter.defaults.lineReturnCount = 2;
|
||||
|
||||
// Default
|
||||
$('textarea').inputlimiter();
|
||||
|
||||
// Limit by Words
|
||||
$('#textarea3').inputlimiter({
|
||||
limit: 10,
|
||||
limitBy: 'words',
|
||||
remText: 'You only have %n word%s remaining...',
|
||||
limitText: 'Field limited to %n word%s.'
|
||||
});
|
||||
|
||||
// Make it more personal
|
||||
$('#text1').inputlimiter({
|
||||
limit: 50,
|
||||
remText: 'You only have %n character%s remaining...',
|
||||
remFullText: 'Stop typing! You\'re not allowed any more characters!',
|
||||
limitText: 'You\'re allowed to input %n character%s into this field.'
|
||||
|
||||
});
|
||||
|
||||
// The limiter will display the text in Spanish
|
||||
$('#text2').inputlimiter({
|
||||
limit: 50,
|
||||
remText: '%n caractere%s restantes.',
|
||||
limitText: 'Campo limitado a %n caractere%s.'
|
||||
});
|
||||
|
||||
// The limiter will display the text in French
|
||||
$('#text2_1').inputlimiter({
|
||||
limit: 50,
|
||||
remText: '%n caractère%s restants.',
|
||||
limitText: 'Champ limité à %n caractère%s.',
|
||||
zeroPlural: false
|
||||
});
|
||||
|
||||
// This input will display the limiter info in the existing span tag
|
||||
$('#text3').inputlimiter({
|
||||
limit: 30,
|
||||
boxId: 'limitingtext',
|
||||
boxAttach: false
|
||||
});
|
||||
|
||||
$('#text4').inputlimiter({
|
||||
limit: 40,
|
||||
remTextFilter: function (opts, charsRemaining) {
|
||||
var charsTyped = opts.limit - charsRemaining;
|
||||
return "You have typed " + charsTyped + " character" + ( charsTyped == 1?'':'s' ) + ".<br />" +
|
||||
"You have " + charsRemaining + " character" + ( charsRemaining == 1?'':'s' ) + " remaining.";
|
||||
},
|
||||
limitTextFilter: function (opts) {
|
||||
return "This field is limited to " + opts.limit + " character" + ( opts.limit == 1?'':'s' ) + ".";
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// When your remaining characters drops below 13 the lyrics from The Twelve Days of Christmas will be displayed.
|
||||
$('#text5').inputlimiter({
|
||||
limit: 12,
|
||||
remTextFilter: function (opts, charsRemaining) {
|
||||
var remText = "The Twelve Days of Christmas";
|
||||
if ( charsRemaining == 12 ) {
|
||||
remText = "Twelve drummers druming.";
|
||||
} else if ( charsRemaining == 11 ) {
|
||||
remText = "Eleven pipers piping.";
|
||||
} else if ( charsRemaining == 10 ) {
|
||||
remText = "Ten lords a' leaping.";
|
||||
} else if ( charsRemaining == 9 ) {
|
||||
remText = "Nine ladies dancing.";
|
||||
} else if ( charsRemaining == 8 ) {
|
||||
remText = "Eight maids a' milking.";
|
||||
} else if ( charsRemaining == 7 ) {
|
||||
remText = "Seven swans a' swimming.";
|
||||
} else if ( charsRemaining == 6 ) {
|
||||
remText = "Six geese a' laying.";
|
||||
} else if ( charsRemaining == 5 ) {
|
||||
remText = "Five gold rings.";
|
||||
} else if ( charsRemaining == 4 ) {
|
||||
remText = "Four calling birds.";
|
||||
} else if ( charsRemaining == 3 ) {
|
||||
remText = "Three french hens.";
|
||||
} else if ( charsRemaining == 2 ) {
|
||||
remText = "Two turtle doves.";
|
||||
} else if ( charsRemaining == 1 ) {
|
||||
remText = "A partridge in a pear tree.";
|
||||
}
|
||||
return remText;
|
||||
}
|
||||
});
|
||||
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<h1><a href="http://rustyjeans.com/jquery-plugins/input-limiter/">jQuery Plugin: Input Limiter</a></h1>
|
||||
<form>
|
||||
<fieldset>
|
||||
<legend>Default Textareas</legend>
|
||||
<label>This textarea will show the limiter info on two lines<br />
|
||||
<textarea rows="3" cols="30" id="textarea1"></textarea></label><br />
|
||||
|
||||
<label>Since this text area is wider it will show the limiter info on one line<br />
|
||||
<textarea rows="5" cols="40" id="textarea2"></textarea></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('textarea').inputlimiter();</pre>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Limit by Words</legend>
|
||||
<label>This textarea only allows ten words<br />
|
||||
<textarea rows="3" cols="30" id="textarea3"></textarea></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#textarea3').inputlimiter({
|
||||
limit: 10,
|
||||
limitBy: 'words',
|
||||
remText: 'You only have %n word%s remaining...',
|
||||
limitText: 'Field limited to %n word%s.'
|
||||
});</pre>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Custom limiter text</legend>
|
||||
<label>Make it more personal<br />
|
||||
<input type="text" id="text1" size="50" /></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#text1').inputlimiter({
|
||||
limit: 50,
|
||||
remText: 'You only have %n character%s remaining...',
|
||||
remFullText: 'Stop typing! You\'re not allowed any more characters!',
|
||||
limitText: 'You\'re allowed to input %n character%s into this field.'
|
||||
});</pre>
|
||||
|
||||
<label>The limiter will display the text in Spanish<br />
|
||||
<input type="text" id="text2" size="50" /></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#text2').inputlimiter({
|
||||
limit: 50,
|
||||
remText: '%n caractere%s restantes.',
|
||||
limitText: 'Campo limitado a %n caractere%s.'
|
||||
});</pre>
|
||||
|
||||
<label>The limiter will display the text in French<br />
|
||||
<input type="text" id="text2_1" size="50" /></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#text2_1').inputlimiter({
|
||||
limit: 50,
|
||||
remText: '%n caractère%s restants.',
|
||||
limitText: 'Champ limité à %n caractère%s.',
|
||||
zeroPlural: false
|
||||
});</pre>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Alternate Box ID</legend>
|
||||
<label>This input will display the limiter info in the existing span tag<br />
|
||||
<input type="text" id="text3" size="30" /> <span id="limitingtext">Field limited to 30 characters.</span></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#text3').inputlimiter({
|
||||
limit: 30,
|
||||
boxId: 'limitingtext',
|
||||
boxAttach: false
|
||||
});</pre>
|
||||
|
||||
</fieldset>
|
||||
|
||||
<fieldset>
|
||||
<legend>Custom Text Filters</legend>
|
||||
<label>The remText and limitText have custom filters<br />
|
||||
<input type="text" id="text4" size="40" /></label><br />
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#text4').inputlimiter({
|
||||
limit: 40,
|
||||
remTextFilter: function (opts, charsRemaining) {
|
||||
var charsTyped = opts.limit - charsRemaining;
|
||||
return "You have typed " + charsTyped + " character" + ( charsTyped == 1?'':'s' ) + ".<br />" +
|
||||
"You have " + charsRemaining + " character" + ( charsRemaining == 1?'':'s' ) + " remaining.";
|
||||
},
|
||||
limitTextFilter: function (opts) {
|
||||
return "This field is limited to " + opts.limit + " character" + ( opts.limit == 1?'':'s' ) + ".";
|
||||
}
|
||||
});</pre>
|
||||
<label>When your remaining characters drops below 13 the lyrics from The Twelve Days of Christmas will be displayed.<br />
|
||||
<input type="text" id="text5" size="30" /></label><br />
|
||||
|
||||
<strong>Code:</strong><br />
|
||||
<pre>$('#text5').inputlimiter({
|
||||
limit: 12,
|
||||
remTextFilter: function (opts, charsRemaining) {
|
||||
var remText = "The Twelve Days of Christmas";
|
||||
if ( charsRemaining == 12 ) {
|
||||
remText = "Twelve drummers druming.";
|
||||
} else if ( charsRemaining == 11 ) {
|
||||
remText = "Eleven pipers piping.";
|
||||
} else if ( charsRemaining == 10 ) {
|
||||
remText = "Ten lords a' leaping.";
|
||||
} else if ( charsRemaining == 9 ) {
|
||||
remText = "Nine ladies dancing.";
|
||||
} else if ( charsRemaining == 8 ) {
|
||||
remText = "Eight maids a' milking.";
|
||||
} else if ( charsRemaining == 7 ) {
|
||||
remText = "Seven swans a' swimming.";
|
||||
} else if ( charsRemaining == 6 ) {
|
||||
remText = "Six geese a' laying.";
|
||||
} else if ( charsRemaining == 5 ) {
|
||||
remText = "Five gold rings.";
|
||||
} else if ( charsRemaining == 4 ) {
|
||||
remText = "Four calling birds.";
|
||||
} else if ( charsRemaining == 3 ) {
|
||||
remText = "Three french hens.";
|
||||
} else if ( charsRemaining == 2 ) {
|
||||
remText = "Two turtle doves.";
|
||||
} else if ( charsRemaining == 1 ) {
|
||||
remText = "A partridge in a pear tree.";
|
||||
}
|
||||
return remText;
|
||||
}
|
||||
});</pre>
|
||||
|
||||
</fieldset>
|
||||
|
||||
</form>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user