joshtronic/leaderbin
1
0
Fork 0
Code Issues 13 Pull requests Projects Releases Packages Wiki Activity Actions

Got JS worked out, slapped together sign up UI

Browse source
This commit is contained in:
Josh Sherman 2013-12-15 09:55:53 -05:00
parent 3c36b68f69
commit 446b128137
9 changed files with 358 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

4
config.php
View file

@ -120,6 +120,10 @@ $config = array(
),
// }}}
'site' => array(
'name' => 'LeaderBin',
'domain' => 'leaderbin.com',
),
);
?>

3
public/css/core.css
View file

@ -1,3 +1,6 @@
body {
padding-top: 50px;
}
footer {
padding-top: 50px;
}

5
public/css/core.less
View file

@ -2,3 +2,8 @@ body,
{
padding-top: 50px;
}
footer,
{
padding-top: 50px;
}

2
public/css/core.min.css vendored
View file

@ -1 +1 @@
body{padding-top:50px}
body{padding-top:50px}footer{padding-top:50px}

301
public/js/jerky.js Executable file
View file

@ -0,0 +1,301 @@
$(function()
{
// Apply the validator if available
if (jQuery().validate)
{
$('form').validate();
/*
TODO, Implement Geoff's fix for the double form issue
Gonna research it a bit more, I'm still perplexed why this wouldn't fire for each selector already
var f = $('form');
if(f.length > 0){
$(f).each(function(i, form){
$(form).validate();
});
}
*/
}
// Catches forms being submitted
$('.ajax [type=submit]').on('click', function()
{
if ($(this).attr('readonly') == 'readonly')
{
return;
}
// Grabs the form
var form = $(this).parents('form').get();
// Removes any messages
$('.alert[generated], label.error', form).remove();
// Checks that it's valid
if (typeof $(form).valid == 'undefined' || $(form).valid() == true)
{
if (typeof $(form).data('readonly') == undefined || $(form).data('readonly') != false)
{
// Sets the buttons, inputs and textareas to READONLY
$('button, input, textarea', form).attr('readonly', 'readonly');
// Forces the cursor to be waiting
document.body.style.cursor = 'wait';
// Swaps the button for a progress meter
$(this).hide();
$(this).after('<progress></progress>');
}
var method = $(form).attr('method') == '' ? 'GET' : $(form).attr('method');
var action = $(form).attr('action');
if (action == '')
{
injectMessage(form, 'Form element lacks action attribute', 'error');
// Removes READONLY status
$('button, input, textarea', form).removeAttr('readonly');
// Returns the cursor to normal... but is anyone really normal?
document.body.style.cursor = 'default';
// Brings the button back
$('progress', form).remove();
$('[type="submit"]', form).show();
}
else
{
var payload = $(form).serialize();
var cleared = (typeof $(form).data('readonly') != undefined && $(form).data('readonly') == false);
if (cleared)
{
if (typeof $(form).data('preprocessor') != undefined)
{
window[$(form).data('preprocessor')]();
}
$('input[type=text]', form).val('');
$('select', form).val('');
$('textarea', form).val('');
if (typeof $(form).data('focus') != undefined)
{
$($(form).data('focus')).focus();
}
}
$.ajax({
'type': method,
'url': action,
'data': payload,
'dataType': 'json',
'success': function(data, textStatus, XMLHttpRequest)
{
if (typeof data.success != 'undefined')
{
data.status = 'success';
data.message = data.success;
}
else if (typeof data.error != 'undefined')
{
data.status = 'error';
data.message = data.error;
}
if (data.status != 'success' && typeof data.message != 'undefined')
{
injectMessage(form, data.message, 'error');
}
else if (data.status == 'success')
{
if ((typeof data.retain == 'undefined' || data.retain == false) && !cleared)
{
$('input[type=text]', form).val('');
$('input[type=email]', form).val('');
$('select', form).val('');
$('textarea', form).val('');
}
if (typeof data.message != 'undefined')
{
injectMessage(form, data.message, 'success');
}
if (typeof data.url != 'undefined')
{
parent.location.href = data.url;
}
}
else
{
// Only really serves a purpose when debugging
//injectMessage(form, data, 'error');
}
if (typeof data.callback != 'undefined')
{
window[data.callback](data);
}
// Removes READONLY status
$('button, input, textarea', form).removeAttr('readonly');
// Returns the cursor to normal... but is anyone really normal?
document.body.style.cursor = 'default';
// Brings the button back
$('progress', form).remove();
$('[type="submit"]', form).show();
},
'error': function(XMLHttpRequest, textStatus, errorThrown)
{
injectMessage(form, errorThrown, 'error');
// Removes READONLY status
$('button, input, textarea', form).removeAttr('readonly');
// Returns the cursor to normal... but is anyone really normal?
document.body.style.cursor = 'default';
// Brings the button back
$('progress', form).remove();
$('[type="submit"]', form).show();
}
});
}
}
else
{
return false;
}
});
// Forces forms to return false on submit
$('form.ajax').submit(function(){ return false; });
// Automatically applies zebra stripes to tables
$('table tr:even td').addClass('even');
$('table tr:odd td').addClass('odd');
});
// Injects a div before the passed element
function injectMessage(element, message, type, duration)
{
if (typeof type == 'undefined')
{
var type = 'error';
}
var id = 'alert-' + Date.now();
var class_name = 'alert ' + type;
var label = '<label id="' + id + '" class="' + class_name + '" generated="generated">' + message + '</label>';
$('.alert[generated]', element).remove();
if ($(element).hasClass('box') || $(element).parent('.two-column'))
{
$('[type="submit"]', element).before(label);
}
else
{
$(element).prepend(label);
}
id = '#' + id;
if (typeof duration != 'undefined')
{
$(id, element).delay(duration).remove();
}
return $(id, element);
}
// Automatically tab to next element when max length is reached
function autoTab(element)
{
if ($(element).val().length >= $(element).attr('maxlength'))
{
$(element).next().focus();
}
}
// Disable Enter Key
function disableEnterKey(e)
{
var key;
if(window.event)
{
key = window.event.keyCode; // IE
}
else
{
key = e.which; // Firefox
}
return (key != 13);
}
// Truncate a string and optionally create a roll over
function truncate(string, length, hover)
{
if (string.length > length)
{
if (hover == true)
{
string = '<span title="' + string + '">' + string.substring(0, length) + '...</span>';
}
else
{
string = string.substring(0, length) + '...';
}
}
return string;
}
function getQueryStringVariable(variable)
{
variable = variable.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
var regexS = "[\\?&]" + variable + "=([^&#]*)";
var regex = new RegExp(regexS);
var results = regex.exec(window.location.search);
if (results === null)
{
return null;
}
else
{
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
}
function getGUID()
{
var guid;
var unique = false;
while (unique == false)
{
guid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c)
{
var r = Math.random()*16|0, v = c === 'x' ? r : (r&0x3|0x8);
return v.toString(16);
});
guid = 'guid-' + guid;
if ($('#' + guid).length == 0)
{
unique = true;
}
}
return guid;
}

8
public/js/jerky.min.js vendored Normal file
View file

@ -0,0 +1,8 @@
$(function(){jQuery().validate&&$("form").validate();$(".ajax [type=submit]").on("click",function(){if("readonly"!=$(this).attr("readonly")){var a=$(this).parents("form").get();$(".alert[generated], label.error",a).remove();if("undefined"==typeof $(a).valid||!0==$(a).valid()){if(void 0==typeof $(a).data("readonly")||!1!=$(a).data("readonly"))$("button, input, textarea",a).attr("readonly","readonly"),document.body.style.cursor="wait",$(this).hide(),$(this).after("<progress></progress>");var c=""==
$(a).attr("method")?"GET":$(a).attr("method"),d=$(a).attr("action");if(""==d)injectMessage(a,"Form element lacks action attribute","error"),$("button, input, textarea",a).removeAttr("readonly"),document.body.style.cursor="default",$("progress",a).remove(),$('[type="submit"]',a).show();else{var f=$(a).serialize(),e=void 0!=typeof $(a).data("readonly")&&!1==$(a).data("readonly");if(e){if(void 0!=typeof $(a).data("preprocessor"))window[$(a).data("preprocessor")]();$("input[type=text]",a).val("");$("select",
a).val("");$("textarea",a).val("");void 0!=typeof $(a).data("focus")&&$($(a).data("focus")).focus()}$.ajax({type:c,url:d,data:f,dataType:"json",success:function(b){"undefined"!=typeof b.success?(b.status="success",b.message=b.success):"undefined"!=typeof b.error&&(b.status="error",b.message=b.error);if("success"!=b.status&&"undefined"!=typeof b.message)injectMessage(a,b.message,"error");else if("success"==b.status){if(("undefined"==typeof b.retain||!1==b.retain)&&!e)$("input[type=text]",a).val(""),
$("input[type=email]",a).val(""),$("select",a).val(""),$("textarea",a).val("");"undefined"!=typeof b.message&&injectMessage(a,b.message,"success");"undefined"!=typeof b.url&&(parent.location.href=b.url)}if("undefined"!=typeof b.callback)window[b.callback](b);$("button, input, textarea",a).removeAttr("readonly");document.body.style.cursor="default";$("progress",a).remove();$('[type="submit"]',a).show()},error:function(b,c,d){injectMessage(a,d,"error");$("button, input, textarea",a).removeAttr("readonly");
document.body.style.cursor="default";$("progress",a).remove();$('[type="submit"]',a).show()}})}}else return!1}});$("form.ajax").submit(function(){return!1});$("table tr:even td").addClass("even");$("table tr:odd td").addClass("odd")});
function injectMessage(a,c,d,f){"undefined"==typeof d&&(d="error");var e="alert-"+Date.now();c='<label id="'+e+'" class="'+("alert "+d)+'" generated="generated">'+c+"</label>";$(".alert[generated]",a).remove();$(a).hasClass("box")||$(a).parent(".two-column")?$('[type="submit"]',a).before(c):$(a).prepend(c);e="#"+e;"undefined"!=typeof f&&$(e,a).delay(f).remove();return $(e,a)}function autoTab(a){$(a).val().length>=$(a).attr("maxlength")&&$(a).next().focus()}
function disableEnterKey(a){return 13!=(window.event?window.event.keyCode:a.which)}function truncate(a,c,d){a.length>c&&(a=!0==d?'<span title="'+a+'">'+a.substring(0,c)+"...</span>":a.substring(0,c)+"...");return a}function getQueryStringVariable(a){a=a.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");a=RegExp("[\\?&]"+a+"=([^&#]*)").exec(window.location.search);return null===a?null:decodeURIComponent(a[1].replace(/\+/g," "))}
function getGUID(){for(var a,c=!1;!1==c;)a="xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(a){var c=16*Math.random()|0;return("x"===a?c:c&3|8).toString(16)}),a="guid-"+a,0==$("#"+a).length&&(c=!0);return a};

13
templates/__shared/index.phtml
View file

@ -4,9 +4,9 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LeaderBin</title>
<title><?php echo $this->config->site['name']; ?></title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php echo $__dynamic->css('/css/core.less'); ?>">
<link rel="stylesheet" href="<?php echo $this->dynamic->css('/css/core.less'); ?>">
<!--link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css"-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.js"></script>
@ -24,8 +24,7 @@
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-46436973-1', 'leaderbin.com');
ga('create', 'UA-46436973-1', '<?php echo $this->config->site['domain']; ?>');
ga('send', 'pageview');
</script>
<?php
@ -40,13 +39,15 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/">LeaderBin</a>
<a class="navbar-brand" href="/"><?php echo $this->config->site['name']; ?></a>
</div>
<div class="collapse navbar-collapse pull-right">
<ul class="nav navbar-nav">
<li class="active"><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/login">Sign in</a></li>
<li><a href="/join">Sign up</a></li>
</ul>
</div>
</div>
@ -93,6 +94,8 @@
</div>
</footer>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.11.1/jquery.validate.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="<?php echo $this->dynamic->js('/js/jerky.js'); ?>"></script>
</body>
</html>

2
templates/home.phtml
View file

@ -2,6 +2,6 @@
<div class="container">
<h1>Leaderboards, at your service!</h1>
<p>Track scores. Track sales. Track anything!</p>
<p><a class="btn btn-success btn-lg" role="button">Sign me up!</a></p>
<p><a class="btn btn-success btn-lg" role="button" href="/join">Sign me up!</a></p>
</div>
</div>

27
templates/join.phtml
View file

@ -0,0 +1,27 @@
<form role="form" class="row col-xs-12 col-sm-6 col-sm-offset-3" method="post">
<h1>Sign up</h1>
<?php
echo $this->html->div(
array('class' => 'form-group'),
$this->html->inputEmail(array(
'label' => 'Email Address',
'name' => 'email',
'class' => 'form-control input-lg email required',
'placeholder' => 'Enter your email',
))
);
echo $this->html->div(
array('class' => 'form-group'),
$this->html->inputPassword(array(
'label' => 'Password',
'name' => 'password',
'class' => 'form-control input-lg required',
'minlength' => 8,
'placeholder' => 'Enter your password',
))
);
?>
<button type="submit" class="btn btn-success btn-lg">Make it so!</button>
</form>