Skip to content

Commit

Permalink
Changes
Browse files Browse the repository at this point in the history
Changes
  • Loading branch information
pekebyte committed Jan 30, 2013
1 parent 787cfef commit 7b7444e
Show file tree
Hide file tree
Showing 3 changed files with 144 additions and 8 deletions.
119 changes: 119 additions & 0 deletions css/custom.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
.btn-pekeupload {

-moz-box-shadow:inset 0px -3px 7px 0px #29bbff;
-webkit-box-shadow:inset 0px -3px 7px 0px #29bbff;
box-shadow:inset 0px -3px 7px 0px #29bbff;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #2dabf9), color-stop(1, #0688fa));
background:-moz-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-webkit-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-o-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:-ms-linear-gradient(top, #2dabf9 5%, #0688fa 100%);
background:linear-gradient(to bottom, #2dabf9 5%, #0688fa 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#2dabf9', endColorstr='#0688fa',GradientType=0);

background-color:#2dabf9;

-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;

border:1px solid #0b0e07;

display:inline-block;
color:#ffffff;
font-family:arial;
font-size:15px;
font-weight:normal;
padding:9px 23px;
text-decoration:none;

text-shadow:0px 1px 0px #263666;

}
.btn-pekeupload:hover {

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0688fa), color-stop(1, #2dabf9));
background:-moz-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-webkit-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-o-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:-ms-linear-gradient(top, #0688fa 5%, #2dabf9 100%);
background:linear-gradient(to bottom, #0688fa 5%, #2dabf9 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0688fa', endColorstr='#2dabf9',GradientType=0);

background-color:#0688fa;
text-decoration: none;
color:#fff;
}
.btn-pekeupload:active {
position:relative;
top:1px;
}


/*
* Base
*/

.progress-pekeupload{

width:100%;
height:16px;
margin:0 auto 20px auto;
padding:0px;

background:#cfcfcf;
border-width:1px;
border-style:solid;
border-color: #aaa #bbb #fff #bbb;
box-shadow:inset 0px 2px 3px #bbb;
}

.progress-pekeupload,
.bar-pekeupload{
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
}

.bar-pekeupload{
height:100%;
background:#999;

background-size:18px 18px;
background-color:#7ce;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);

box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);
}
.alert-pekeupload {
padding: 8px 35px 8px 14px;
margin-bottom: 20px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
color: #b94a48;
background-color: #f2dede;
border: 1px solid #eed3d7;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;

border-color: ;
}
.alert-pekeupload .close{
margin-top: 2px;
}
8 changes: 3 additions & 5 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
<title>PekeUpload jQuery Plugin Demo</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link href="css/themes/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="js/pekeUpload.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#file").pekeUpload({onSubmit: true, allowedExtensions: "jpeg|jpg|gif|png"});
$(document).ready(function(){
});
</script>

Expand All @@ -22,10 +22,8 @@ <h1>PekeUpload jQuery Plugin</h1>
</div>

<div id="content">
<form method="post">
<input id="file" type="file" name="file" />
<input type="submit" value="hola" />
</form>
<input id="file2" type="file" name="file" />
</div>

</div>
Expand Down
25 changes: 22 additions & 3 deletions js/pekeUpload.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
onSubmit: false,
btnText: "Browse files...",
url: "upload.php",
theme: "bootstrap",
theme: "custom",
field: "file",
multi: true,
showFilename: true,
Expand All @@ -46,6 +46,9 @@
if (options.theme == "bootstrap"){
var html = '<a href="javascript:void(0)" class="btn btn-primary btn-upload"> <span class="icon-upload icon-white"></span> '+options.btnText+'</a><div class="pekecontainer"></div>';
}
if (options.theme == "custom"){
var html = '<a href="javascript:void(0)" class="btn-pekeupload">'+options.btnText+'</a><div class="pekecontainer"></div>';
}
obj.after(html);
obj.hide();
//Event when clicked the newly created link
Expand Down Expand Up @@ -76,6 +79,9 @@
if (options.theme=="bootstrap"){
var htmlprogress = '<div class="file"><div class="filename"></div><div class="progress progress-striped"><div class="bar pekeup-progress-bar" style="width: 0%;"><span class="badge badge-info"></span></div></div></div>';
}
if (options.theme=="custom"){
var htmlprogress = '<div class="file"><div class="filename"></div><div class="progress-pekeupload"><div class="bar-pekeupload pekeup-progress-bar" style="width: 0%;"><span></span></div></div></div>';
}
obj.next('a').next('div').prepend(htmlprogress);
var formData = new FormData();
formData.append(options.field, obj[0].files[0]);
Expand Down Expand Up @@ -124,7 +130,7 @@
var percent = Number(((e.loaded * 100)/e.total).toFixed(2));
obj.next('a').next('div').find('.file').first().find('.pekeup-progress-bar:first').width(percent+'%');
}
obj.next('a').next('div').find('.file').first().find('.pekeup-progress-bar:first').text(percent+"%");
obj.next('a').next('div').find('.file').first().find('.pekeup-progress-bar:first').html('<center>'+percent+"%</center>");
}
}
//Validate master
Expand All @@ -138,6 +144,10 @@
obj.next('a').next('div').prepend('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> '+options.invalidExtError+'</div>');
bootstrapclosenotification();
}
if((options.theme == "custom")&&(options.showErrorAlerts==true)){
obj.next('a').next('div').prepend('<div class="alert-pekeupload"><button type="button" class="close">&times;</button> '+options.invalidExtError+'</div>');
customclosenotification();
}
options.onFileError(file,options.invalidExtError);
}
else{
Expand All @@ -152,6 +162,10 @@
obj.next('a').next('div').prepend('<div class="alert alert-error"><button type="button" class="close" data-dismiss="alert">&times;</button> '+options.sizeError+'</div>');
bootstrapclosenotification();
}
if((options.theme == "custom")&&(options.showErrorAlerts==true)){
obj.next('a').next('div').prepend('<div class="alert-pekeupload"><button type="button" class="close" data-dismiss="alert">&times;</button> '+options.sizeError+'</div>');
customclosenotification();
}
options.onFileError(file,options.sizeError);
}
else{
Expand Down Expand Up @@ -186,7 +200,12 @@
obj.next('a').next('div').find('.alert-error').click(function(){
$(this).remove();
})
}
}
function customclosenotification(){
obj.next('a').next('div').find('.alert-pekeupload').click(function(){
$(this).remove();
})
}
};

})(jQuery);

0 comments on commit 7b7444e

Please sign in to comment.