Skip to content

Commit

Permalink
Copy paste pattern
Browse files Browse the repository at this point in the history 
- show snakebar when weighted pattern is copied to card with different weight
- copy button : to copy single card pattern without weight
- Shit+copy button : to copy multiple card pattern with weight
- paste button to apply selected patterns
-
  • Loading branch information
@amitguptagwl
amitguptagwl committed May 17, 2018
1 parent 5c575fb commit 008aa90
Show file tree
Hide file tree
Showing 6 changed files with 372 additions and 151 deletions.
1 change: 1 addition & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
<link href="static/css/style.css" rel="stylesheet">
<link href="static/css/masorny.css" rel="stylesheet">
<link href="static/css/slider.css" rel="stylesheet">
<link href="static/css/snackbar.css" rel="stylesheet">
<style>

</style>
Expand Down
46 changes: 46 additions & 0 deletions static/css/snackbar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
visibility: hidden; /* Hidden by default. Visible on click */
min-width: 250px; /* Set a default minimum width */
margin-left: -125px; /* Divide value of min-width by 2 */
background-color: #333; /* Black background color */
color: #fff; /* White text color */
text-align: center; /* Centered text */
border-radius: 2px; /* Rounded borders */
padding: 16px; /* Padding */
position: fixed; /* Sit on top of the screen */
z-index: 1; /* Add a z-index if needed */
left: 50%; /* Center the snackbar */
bottom: 30px; /* 30px from the bottom */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
visibility: visible; /* Show the snackbar */

/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
However, delay the fade out process for 2.5 seconds */
-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
from {bottom: 0; opacity: 0;}
to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
from {bottom: 30px; opacity: 1;}
to {bottom: 0; opacity: 0;}
}
14 changes: 9 additions & 5 deletions static/js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,19 +70,23 @@ function rotateSymbolsRandomly(elements){
* @param {boolean} maintainRatio
* @param {*} desiredSize : desired size whould be bigger for big cards, small for small cards
*/
function resizeSymbolsRandomly(elements, maintainRatio, desiredSize){
function resizeSymbolsRandomly(elements, randomEnable, maintainRatio, desiredSize){
elements.each(function(){
var originalSize = {
width : $(this).attr("w"),
height : $(this).attr("h")
}
var size = transformSize(originalSize,true,maintainRatio, desiredSize);
var size = transformSize(originalSize,randomEnable,maintainRatio, desiredSize);
//$(this).width(size.width).height(size.height);
$(this).css({width: size.width, height : size.height });
$(this).find(".ui-wrapper").css({width: size.width, height : size.height });
$(this).find(".ui-wrapper img").css({width: size.width, height : size.height });
resizeSymbol($(this), size);
});
}

function resizeSymbol(symbol,size){
$(symbol).css({width: size.width, height : size.height });
$(symbol).find(".ui-wrapper").css({width: size.width, height : size.height });
$(symbol).find(".ui-wrapper img").css({width: size.width, height : size.height });
}
/*
calculate new width and height for a symbol on the basis of original size.
Maintains ratio if selected
Expand Down
183 changes: 152 additions & 31 deletions tags/decktemplate.tag
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@
</div>

<i class="fa fa-random action-btn btn btn-info" title="Arrange Randomly" onclick={ arrangeRandomly }></i>
<i class="fa fa-copy action-btn btn btn-info" title="Copy Pattern" onclick={ this.parent.arrangeRandomly }></i>
<i class="fa fa-paste action-btn btn btn-info" title="Paste Pattern" onclick={ this.parent.arrangeRandomly }></i>
<i class="fa fa-copy action-btn btn btn-info" title="Copy Pattern" onclick={ copy }></i>
<i class="fa fa-paste action-btn btn btn-info" title="Paste Pattern" onclick={ paste }></i>


<label class="btn-bs-file">
Expand Down Expand Up @@ -70,7 +70,46 @@

resizeRandomly(){
var maintainRatio = $("#resize-action").prop("checked");
this.selectCards(resizeSymbolsRandomly, maintainRatio, this.parent.frame.desiredSymbolSize);
this.selectCards(resizeSymbolsRandomly, true, maintainRatio, this.parent.frame.desiredSymbolSize);
}

var clipboard = null;

copy(e){
var selected = $(".cf-selected");
if(e.shiftKey){
//copy pattern weightwise
clipboard = {};
selected.each((i,cardEl) =>{
var result = this.extractPatternDataWithWeight(cardEl);
if( !clipboard[result.weight] ){
clipboard[result.weight] = [];
}
clipboard[result.weight].push( result.pattern );
});
}else{
if(selected.length > 1 || selected.length === 0 ){
alert("Please select only 1 card.");
}else{
clipboard = this.extractPatternData(selected);
}
}
}

paste(){
var selected = $(".cf-selected");
if(clipboard === null || selected.length === 0) return;

if( Array.isArray(clipboard) ){//non weight
selected.each((i,cardEl) =>{
this.applyPatternData( clipboard , cardEl);
});
}else{
selected.each((i,cardEl) =>{
this.applyPatternDataWithWeight(clipboard,cardEl);
});
}
//clipboard = null;
}

/*loadtemplate(e){
Expand All @@ -93,13 +132,111 @@
}
});
}*/


extractPatternData(cardEl){
var symbols = [];
$(cardEl).find(".symbol").each( (si,symbol) => {
symbols.push( this.copyStyle(symbol) );
});
return symbols;
}

applyPatternData(data,cardEl){
$(cardEl).find(".symbol").each( (si,symbol) => {
this.applyStyle(data[si],symbol);
});
}

extractPatternDataFromMultipleCards(cardsEl){
var cards = [];
$(cardsEl).each( (card_i, card) => {
cards.push( this.extractPatternData(card) );
});
}

applyPatternDataOnMultipleCards(data,cardsEl){
$(cardsEl).each( (card_i, card) => {
this.applyPatternData(data[card_i], card);
});
}

extractPatternDataWithWeight(cardEl){
var totalWeight =0;
var symbols = {
"1" : [],
"2" : []
};

$(cardEl).find(".symbol").each( (si,symbol) => {
var weight = $(symbol).attr("weight");
symbols[weight].push( this.copyStyle(symbol) );
totalWeight += Number.parseInt(weight);
});

return { weight: totalWeight, pattern: symbols};
}

/*
1. Calculate totalWeight of a card (based on image size)
2. Select a set *randomly* from the pattern sets for calculated weight
3. For each symbol in selected set, apply pattern on each symbol in given card.
*/
applyPatternDataWithWeight(data,cardEl){
var weightSets = data[ $(cardEl).attr("totalweight") ];//there can be multiple pattern set for each weight
if(!weightSets){//selected card has different weight
showSnackBar();
return;
}
var patternSet = weightSets[ randInRange(0,weightSets.length -1) ];//select one set randomly

var weightWiseCounter = {//Each set contains symbol position info weight wise
"1" : 0,
"2" : 0
}
$(cardEl).find(".symbol").each( (si, symbol) => {
var w = $(symbol).attr("weight");
var index = weightWiseCounter[w];
this.applyStyle( patternSet[ w ][ index ], symbol)
weightWiseCounter[w] +=1;
} );
}

applyPatternsToCards(data){
$(".cardframe").each( (card_i, cardEl) => {
this.applyPatternDataWithWeight(data,cardEl);//Each set contains symbol position info weight wise
});
}

copyStyle(el){
return {
top: $(el).position().top,
left: $(el).position().left,
height: $(el).height(),
width: $(el).width(),
transform: $(el).css("transform"),
}
}

applyStyle(source,target){
$(target).css({
top: source.top,
left: source.left,
transform: source.transform,
});
resizeSymbol($(target), source);
}




this.exportTemplateName = `${this.parent.frame.symbolsPerCard}-${this.parent.frame.width}x${this.parent.frame.height}-match-it`;
readTemplateFile(f){
var input = f.srcElement;
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = e => {
this.parent.applyTemplate(JSON.parse(e.target.result));
this.applyPatternsToCards(JSON.parse(e.target.result).cards);
}
reader.onloadend = e => {
this.update();
Expand All @@ -114,33 +251,9 @@
frame : this.parent.frame,
cards: {}
};
$(".cardframe").each(function(fi){
var totalWeight =0;
var symbols = {
"1" : [],
"2" : []
};

$(this).find(".symbol").each( function(si,symbol){
//var thumbnail = $(this).find("img")[0];
var height = $(symbol).height();
var width = $(symbol).width();
var weight = $(symbol).attr("weight");

symbols[weight].push({
top: $(this).position().top,
left: $(this).position().left,
height: height,
width: width,
transform: $(this).css("transform"),
});

totalWeight += Number.parseInt(weight);
});
if(!deck.cards[totalWeight]){
deck.cards[totalWeight] = [];
}
deck.cards[totalWeight].push(symbols);
$(".cardframe").each((fi,frame) => {
var result = this.extractPatternDataWithWeight(frame);
deck.cards[result.weight].push(result.pattern);
})
//TODO: convert to nimn first
//download(JSON.stringify(deck), `${deck.frame.symbolsPerCard}-${this.frame.width}x${this.frame.height}-match-it.json` ,"application/json");
Expand All @@ -149,5 +262,13 @@

download( data, fileName ,"application/vnd.nimn");
}

function showSnackBar() {
// Get the snackbar DIV
var x = $("#snackbar").addClass("show");

// After 3 seconds, remove the show class from DIV
setTimeout(function(){ x.className = x.className.replace("show", ""); }, 3000);
}
</script>
</decktemplate>
54 changes: 12 additions & 42 deletions tags/review.tag
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@
</div>

</div>
<div id="snackbar">Selected card has different size of images</div>
</div>
</div>
<script>
Expand Down Expand Up @@ -89,11 +90,12 @@

//position symbols in a card
$(".cardframe").each( (i,el) => {
resizeSymbolsRandomly($(el).find(".symbol"),this.frame.resizeEnable , this.frame.maintainratio, this.frame.desiredSymbolSize);
resizeSymbolsRandomly($(el).find(".symbol"), this.frame.resizeEnable, this.frame.maintainratio, this.frame.desiredSymbolSize);
if(this.frame.rotateEnable){
rotateSymbolsRandomly($(el).find(".symbol"));
}
setRandomPos($(el).find(".symbol"));
this.updateTotalWeight(el);
})

//Card selection
Expand Down Expand Up @@ -150,6 +152,15 @@
}
}
}

updateTotalWeight(el){
totalWeight = 0;
$(el).find(".symbol").each( (i,img) => {
totalWeight += Number.parseInt($(img).attr("weight"));
});
$(el).attr("totalweight", totalWeight);
}

this.totalSymbols = totalCombinations($( "#symbolscount" ).val());
this.cards = createBlocks($( "#symbolscount" ).val());

Expand All @@ -173,46 +184,5 @@
}
}

applyTemplate(templateData){
$(".cardframe").each( (card_i, card) => {
var totalWeight = this.calculateTotalWeight(card);
var weightSets = templateData.cards[totalWeight];
var randomIndex = randInRange(0,weightSets.length -1);
var symbols = $(card).find(".symbol");
var weightWiseCounter = {
"1" : 0,
"2" : 0
}
var cardTemplate = weightSets[randomIndex];

$(card).find(".symbol").each( (si, symbol) => {
var w = $(symbol).attr("weight");
$(symbol).css({
top: cardTemplate[w][ weightWiseCounter[w] ].top,
left: cardTemplate[w][ weightWiseCounter[w] ].left,
transform: cardTemplate[w][ weightWiseCounter[w] ].transform,
})
$(symbol).height(cardTemplate[w][ weightWiseCounter[w] ].height);
$(symbol).width(cardTemplate[w][ weightWiseCounter[w] ].width);
weightWiseCounter[w] +=1;
} );

});
}

calculateTotalWeight(el){
var totalWeight = $(el).attr("totalweight");
if( ! totalWeight ){
totalWeight = 0;
$(el).find(".symbol").each( (i,img) => {
totalWeight += Number.parseInt($(img).attr("weight"));
});
$(el).attr("totalweight", totalWeight);
return totalWeight;
}else{
return totalWeight;
}
}

</script>
</review>
Loading

0 comments on commit 008aa90

Please sign in to comment.