Skip to content

Commit

Permalink
Background color and resize
Browse files Browse the repository at this point in the history 
Background color functionality  implemented and resize improved
  • Loading branch information
@kriosguerra3
kriosguerra3 committed Mar 22, 2017
1 parent 2ec34dc commit 0b6beca
Show file tree
Hide file tree
Showing 3 changed files with 237 additions and 77 deletions.
58 changes: 44 additions & 14 deletions index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
</head>
<body>
<div id ="header">
<div id ="header_text"><h1 class="title">HTML5 Photo Collage </h1></div>
<div id ="header_text"><a href="index.php" class="title"><h1 class="title">HTML5 Photo Collage </h1></a></div>
<div id ="header_background"></div>
</div>
<div class="container-fluid">
Expand Down Expand Up @@ -43,31 +43,61 @@
</div>

<div id="screen_2" >
<div class="row">
<div class = "instructions_container">
<div class="row">
<div class = "options_container">
<form class="form-inline">
<div class="col-xs-12 col-sm-12 col-md-2 col-lg-1">
<button type="button" id="previous" class="btn btn-info btn-sm">
<span class="glyphicon glyphicon-arrow-left"></span>
Back
</button>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<label class="px" for="width">Width:</label>
<input type="text" class="form-control" id="width" placeholder="" size="4" value="600" maxlength="4" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
<span class ="px"> px</span>
</div>

<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<label class="px" for="height">Height:</label>
<input type="text" class="form-control" id="height" placeholder="" size="4" value="400" maxlength="4" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>
<span class ="px"> px</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
<div id="selected_background_color">
<div id = "selected_color_label"><span class="px">Background Color: </span></div>
<div id = "selected_color_sample" class = "color_sample"></div>
</div>


</div>


<div class="col-xs-12 col-sm-12 col-md-2 col-lg-2">
<button type="button" id="download" class="btn btn-sample btn-lg">
<span class="glyphicon glyphicon-th-large"></span> Create Collage
</button>
</div>
</form>
</div>
<!--<div class = "instructions_container">
<div class="instruction_num">3</div>
<p class="instructions_text">Upload photos and add filters</p>
</div>
</div>-->
<div class="col-md-12 col-lg-12">
<div id="layout_main_container">
<div id="photo_layout_main" ></div>
</div>
<div class="button_container">
<button type="button" id="previous" class="btn btn-info">
<span class="glyphicon glyphicon-arrow-left"></span>
Back
</button>
<button type="button" id="download" class="btn btn-sample btn-lg">
<span class="glyphicon glyphicon-th-large"></span> Create Collage
</button>
</div>
</div>
</div>
</div>
</div>
<div id="filters" title="Add filter">
<div id="filters_wrapper" class="row no-gutters filters_group"></div>
<input type="hidden" id="hdnParentLayoutClass" name="hdnParentLayoutClass" value="">
</div>
<div id="background_colors" title="Choose background color">
<div id="background_colors_wrapper" class="row no-gutters"></div>
</div>
<div id="screen_3" title="Download">
<div id="canvas_area"></div>
</div>
Expand Down
201 changes: 150 additions & 51 deletions scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,44 @@ $(function() {
$(this).toggleClass("active").siblings().removeClass('active');
});

//Dynamically generate the HTML for the filters samples, so it's easily to make changes to it
var filtersArray = ["none","blackandwhite","nineteen77", "sunset","xpro2","walden","toaster","sutro","rise","lofi","kelvin","hudson"];

//We use 2 for loops since we want them in 2 rows.
var columnsPerRow = 6;
//We use this counter to keep track of the real number of columns that are displayed so far
//var columnsCounter = 1;

//Creating the string that will contain the HTML for the filters samples,
var filtersHTML = '';
filtersHTML += '<div class="row-fluid">';

for (i = 0; i < filtersArray.length; i++) {
filterName = filtersArray[i];
filtersHTML += '<div class ="filter_sample col-xs-1 col-sm-1 col-md-1 col-lg-1" data-filter-name="'+filterName+'">'
+ '<div class="filter_thumbnail '+filterName+'"></div>'
+ '<span class="filter_name">'+filterName+'</span></div>';
}
filtersHTML += '</div>';
//Append the filters
$("#filters_wrapper").append(filtersHTML);


//Creating the string that will contain the HTML for the background color samples,
var backgroundColorsArray = ["AliceBlue","Aquamarine","Azure","Black","HotPink","IndianRed","Ivory","LemonChiffon","LightBlue","LightGreen","LightPink","MediumOrchid","MediumPurple","MediumVioletRed","MidnightBlue","OliveDrab","PaleGoldenRod","Palegreen","PaleVioletRed","PeachPuff","Purple","SteelBlue","Turquoise","White","WhiteSmoke"];


var backgroundsHTML = '';
backgroundsHTML += '<div class="row-fluid">';

for (i = 0; i < backgroundColorsArray.length; i++) {
colorName = backgroundColorsArray[i];
backgroundsHTML += '<div class="color_sample" style="background-color:'+colorName+'"></div>';
}
backgroundsHTML += '</div>';
//Append the filters
$("#background_colors_wrapper").append(backgroundsHTML);


//When clicking the numbered links...
$( ".total_photos" ).click(function() {
Expand Down Expand Up @@ -102,14 +140,24 @@ $(function() {
$( "#output_" + i ).draggable();

};
//We make the photo draggable using JQuery UI
$(".photo").resizable({
containment: "#photo_layout_main"
});

$(".photo").draggable({ containment: "#photo_layout_main", scroll: false });
//We make the photo draggable using JQuery UI
//$(".photo").draggable({ containment: "#photo_layout_main", scroll: false });

//We make the photo resizable using JQuery UI
$("#photo_layout_main").resizable({
minWidth: 600,
minHeight: 400 ,
resize: function( event, ui ) {
//Restrict resizing to 1 pixel increments:
ui.size.height = Math.round( ui.size.height / 1 ) * 1;
ui.size.width = Math.round( ui.size.width / 1 ) * 1;
$("#width").val(ui.size.width);
$("#height").val(ui.size.height);
}

$("#photo_layout_main").resizable();
});


//Hide the div from the forst step
$("#screen_1").css("display","none");
Expand All @@ -119,43 +167,72 @@ $(function() {
//Adding the listener for when we upload a photo
document.getElementById("photo_layout_main").addEventListener("change", handleFileSelect, false);


//Dynamically generate the HTML for the filters samples, so it's easily to make changes to it

var filters = ["none","blackandwhite","nineteen77", "sunset","xpro2","walden","toaster","sutro","rise","lofi","kelvin","hudson"];

//We use 2 for loops since we want them in 2 rows.
var columnsPerRow = 6;
//We use this counter to keep track of the real number of columns that are displayed so far
//var columnsCounter = 1;

//Creating the string that will contain the HTML for the filters samples,
var filtersHTML = '';
filtersHTML += '<div class="row-fluid">';

for (i = 0; i < filters.length; i++) {
filterName = filters[i];
filtersHTML += '<div class ="filter_sample col-xs-1 col-sm-1 col-md-1 col-lg-1" data-filter-name="'+filterName+'">'
+ '<div class="filter_thumbnail '+filterName+'"></div>'
+ '<span class="filter_name">'+filterName+'</span></div>';
}
filtersHTML += '</div>';
//Append the filters
$("#filters_wrapper").append(filtersHTML);
});

$("#previous").click(function() {
//Hide the div from the first step
$("#screen_1").css("display","block");
$("#screen_2").css("display","none");
$("#photo_layout_main").html("");
$("#filters_wrapper").html("");
$("#photo_layout_main").find(".photo").remove();
});

//Function to apply changes in widh and height after the user has stopped typing. Source: http://stackoverflow.com/questions/14042193
$.fn.extend({
donetyping: function(callback,timeout){
timeout = timeout || 1e3; // 1 second default timeout
var timeoutReference,
doneTyping = function(el){
if (!timeoutReference) return;
timeoutReference = null;
callback.call(el);
};
return this.each(function(i,el){
var $el = $(el);
// Chrome Fix (Use keyup over keypress to detect backspace)
// thank you @palerdot
$el.is(':input') && $el.on('keyup keypress paste',function(e){
// This catches the backspace button in chrome, but also prevents
// the event from triggering too preemptively. Without this line,
// using tab/shift+tab will make the focused element fire the callback.
if (e.type=='keyup' && e.keyCode!=8) return;
// Check if timeout has been set. If it has, "reset" the clock and
// start over again.
if (timeoutReference) clearTimeout(timeoutReference);
timeoutReference = setTimeout(function(){
// if we made it here, our timeout has elapsed. Fire the
// callback
doneTyping(el);
}, timeout);
}).on('blur',function(){
// If we can, fire the event since we're leaving the field
doneTyping(el);
});
});
}
});

//Changing the widht and height after the user is done typing
$("#width, #height").donetyping(function(){
var newWidth= $("#width").val();
var newHeight= $("#height").val();

if(newWidth < 600){
$("#width").val(600);
}
else{
$('#photo_layout_main').css("width",$("#width").val());
}

//When selecting the individual photo on a layout, we color the border red. We use "on()" since "click()" doesn't work for dinamically created elements.
//$('body').on('click', 'div.photo', function() {
//$(this).toggleClass("selected").siblings().removeClass('selected');
//});
if(newHeight < 400){
$("#height").val(400);
}
else{
$('#photo_layout_main').css("height",$("#height").val());
}

});

//When clicking an "add filter" button, we store in the hdnParentLayoutClass hidden field the class of the div we will aply the filter to
$('body').on('click', '.btn-filter', function() {
Expand All @@ -170,15 +247,15 @@ $(function() {

//Removing the blue border from filters selected for other photos
$(".filter_sample").removeClass('selected_filter');

//Apply CSS class to give it a blue border
$("#filters_wrapper").find('[data-filter-name="'+current_filter+'"]').addClass('selected_filter');

//Opening the modal
$("#filters").dialog("open");
console.log("selected_element:" + selected_element + " current filter " + current_filter);
});

//When clicking a filter div, we apply it to the photo that opened the dialog window
//When clicking a color div, we apply it to the photo that opened the dialog window
$('body').on('click', 'div.filter_sample', function() {

$(this).toggleClass('selected_filter').siblings().removeClass('selected_filter');
Expand All @@ -187,18 +264,22 @@ $(function() {
filterName = $(this).data("filter-name");

//forming the selector of the photo container
var selected_element = "." + $('#hdnParentLayoutClass').val();
var selectedElement = "." + $('#hdnParentLayoutClass').val();

//Remove all classes but "filter" from the selected photo
$(selected_element).find(".filter").removeClass().addClass("filter");
$(selected_element).find(".draggable_photo").attr("data-filter",filterName);
$(selectedElement).find(".filter").removeClass().addClass("filter");
$(selectedElement).find(".draggable_photo").attr("data-filter",filterName);

//Adding the single filter
if(filterName != 'none'){
$(selected_element).find(".filter").addClass(filterName);
$(selectedElement).find(".filter").addClass(filterName);
}
});


//When clicking a color background sample div, we color the background of the layout
$('body').on('click', 'div.color_sample', function() {
var newColor = $(this).css("background-color");
$("#photo_layout_main,#selected_color_sample").css("background-color", newColor);
});

$("#filters").dialog({
Expand All @@ -214,19 +295,26 @@ $(function() {
}
});

$("#selected_background_color").click(function() {
//Opening the modal
$("#background_colors").dialog("open");

});


var element = $("#photo_layout_main");
$("#download").on('click', function () {
//Hiding the close icons and red border ("selected"class)from photos
$(".close_icon").css("display","none");
$("#photo_layout_main").find(".photo").removeClass("selected");
html2canvas(element, {
onrendered: function (canvas) {
$("#canvas_area").html('').append(canvas);
getCanvas = canvas;
//display close icons
$(".close_icon").css("display","block");
$("#screen_3").dialog("open");
}
$("#canvas_area").html('').append(canvas);
getCanvas = canvas;
//display close icons
$(".close_icon").css("display","block");
$("#screen_3").dialog("open");
}
});
});

Expand All @@ -241,10 +329,9 @@ $(function() {
effect: "fadeOut",
duration: 500
}
});

});

$("#filters").dialog({
$("#filters").dialog({
width: $(window).width() - 100,
autoOpen: false,
show: {
Expand All @@ -255,6 +342,19 @@ $(function() {
effect: "fadeOut",
duration: 500
}
});

$("#background_colors").dialog({
width: 390,
autoOpen: false,
show: {
effect: "fadeIn",
duration: 500
},
hide: {
effect: "fadeOut",
duration: 500
}
});

//If we are in the screen # 2, we warn the user about leaving the page
Expand Down Expand Up @@ -308,10 +408,8 @@ function handleFileSelect(event) {

var filter_button_id = container_id.replace(/output/gi, "filter");
document.getElementById(filter_button_id).style.display = "block";

};
})(f);

// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
Expand All @@ -325,5 +423,6 @@ function deletePhoto(container_id){
//Restoring the input value to "No file chosen"
$("#files_" + container_id).val('');
$("#close_" + container_id).css("display", "none");
$("#filter_" + container_id).css("display", "none");
$("#output_"+ container_id).parent().removeClass().addClass("filter");
}
Loading

0 comments on commit 0b6beca

Please sign in to comment.