Basuritter

by thepirat000

HTML

<script src="http://rvera.github.io/image-picker/image-picker/image-picker.min.js"></script>
<script src="http://desandro.github.io/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="http://masonry.desandro.com/masonry.pkgd.min.js"></script>
<link rel="stylesheet" href="http://rvera.github.io/image-picker/image-picker/image-picker.css">
<link rel="stylesheet" href="http://bgrins.github.com/spectrum/spectrum.css">
<script src="http://bgrins.github.com/spectrum/spectrum.js"></script>
<div id='container'>
<h1>
Basuritter 2.0
</h1>
<div id='config'>
  <span>Engine</span>
  <select id='engine' title="image search engine">
    <option value='google' selected>google</option>
    <option value='bing'>bing</option>
    <option value='pixabay'>pixabay</option>
  </select>
  <span class='language'>-</span>
  <select id='language' class='language'>
    <option value='es' selected>español</option>
    <option value='en'>inglés</option>
  </select>
  <span class='quantity'>-</span>
  <select id='quantity' class='quantity'>
    <option value='5'>5</option>
    <option value='10' selected>10</option>
    <option value='20'>20</option>
    <option value='50'>50</option>
    <option value='100'>100</option>
  </select>
  <span>- by thepirat000 -</span>
  <span><a id='album' href='#' target='_blank'>album</a></span>
</div>

<hr />
<div><span>Search terms:</span>
</div>
<div id='inputs'>
</div>
<input type='button' value='+' id='addTerm' />

<div>
  <br />
  <input id='dale' type='button' value='Go' style='width: 200px;'/>
</div>

<div id='main' style='display:none;'>
</div>

<br/>
<div>
  <span>Type:</span>
  <select id='type' title="output layout">
    <option value='h' selected>horizontal</option>
    <option value='v'>vertical</option>
  </select>
  <span>-</span>
  <span>Size:</span>
  <select id='size' title="output size">
    <option value='64'>64px</option>
    <option value='100'>100px</option>
    <option value='120'>120px</option>
    <option...

CSS

.image_picker_image {
    max-width: 140px;
    max-height: 100px;
    background-color: #FF0000;
}

.full-spectrum .sp-palette {
  max-width: 200px;
}

JavaScript

// ThePirat 2018

var N = 6;

var pixabayKey = "10654725-1829b1299c4103708fd706523";
var googleKey = new Date().getSeconds() % 2 == 1 ? "AIzaSyBfC5ICxN3iNo41dFD49AKgmjK2Z3qAfqM" : "AIzaSyCzb6SI_JRrp6xLLYV617Ary6n59h36ros";
var bingKey = "2acaa76bcb0d4335baa5191bc91ae295";
var imgUrCli = "52c9b8cfd5d8bca";
var imgUrToken = "80dc0ebc1b409dbe5349fe40943c1427a13bdc68"; // Get new from the redirected URL on https://api.imgur.com/oauth2/authorize?client_id=52c9b8cfd5d8bca&response_type=token
var imgUrAlbum = "RJe6O2x";

// TODO: Use cache
var cache = {};
var bank = new Array(N);
var validBanksCount = 0;
var pendingImagesLoading = 0;
var errorImagesLoading = 0;
var finalSize = { w:-1, h:-1};
var penColor = "#000000";

Date.prototype.YYYYMMDDHHMMSS = function () {
  var yyyy = this.getFullYear().toString(); var MM = pad(this.getMonth() + 1,2); var dd = pad(this.getDate(), 2);
  var hh = pad(this.getHours(), 2); var mm = pad(this.getMinutes(), 2); var ss = pad(this.getSeconds(), 2);
  return yyyy + MM + dd+  hh + mm + ss;
};
function pad(number, length) {
  var str = '' + number;
  while (str.length < length) { str = '0' + str; }
  return str;
}

$(document).ready(function () {
	$("#album").attr('href', 'https://imgur.com/a/' + imgUrAlbum);
  for(var i = 1; i <= N; i++) {
		$("#inputs").append($("<input id='search" + i + "'' type='text'/>"));
  }
  $("#inputs input").on('keydown', function(event) {
    if (event.keyCode === 13) {
        $("#dale").click();
        return false;
    }
	});
  $("#addTerm").click(function(){
  	N++;
  	$("#inputs").append($("<input id='search" + N + "'' type='text'/>"));
  });
  $("#size,#type,#as").on('change', function(){
  	SelectionChanged();
  });
  
  $("#dale").click(function() {
    if ($("#search1").val().length == 0) {
      alert('Buscá algo !');
      return false;
    }
    Search();
  });
  
  $("#canvas-container").on('dblclick', function() {
  	ToggleResultFocus();
  });
  $("#edit").click(function(){
 ...