Alex
6 years ago
11 changed files with 246 additions and 12 deletions
Binary file not shown.
@ -0,0 +1,145 @@ |
|||
<html> |
|||
|
|||
<head> |
|||
<meta charset="utf-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css"/> |
|||
<style> |
|||
|
|||
body .ui-selecting { border:2px solid yellow; } |
|||
body .ui-selected {border:2px solid black;} |
|||
|
|||
body {overflow: scroll;} |
|||
#scape_container{overflow: scroll;width: 100%; height:100vh;} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div id ="scape_container"> |
|||
|
|||
|
|||
{% for book in books|sort(attribute='title', reverse = False) %} |
|||
<div class = "drag" id = "{{ book.id }}" style="position: absolute;width:40px;height:auto; top:{{ book.scapeY }}px; left:{{ book.scapeX }}px;"> |
|||
|
|||
<object class="no_cover" data="../static/img/default_cover.png" type="image/png" style="width:100%;height:auto;"> |
|||
<p >{{ book.title }}</p> |
|||
<img src="../uploads/cover/{{ book.cover }}" width="80"> |
|||
</object> |
|||
<p style="font-size:7px;"><a href="books/{{ book.id }}">{{ book.title }}</a></p> |
|||
</div> |
|||
{% endfor %} |
|||
|
|||
<div id="random" style="padding:2px; margin: 0;position: absolute;width:120px;height:20px;background-color:yellow;z-index:999999999999999999900000000000000;cursor:pointer;"> |
|||
<p style="padding:0; margin: 0;position: absolute; ">random position</p> |
|||
|
|||
</div> |
|||
</div> |
|||
<script src="https://code.jquery.com/jquery-2.1.4.js"></script> |
|||
<script src="{{ url_for("static", filename="js/app.js") }}"></script> |
|||
<script> |
|||
|
|||
|
|||
|
|||
$( ".no_cover" ).each(function() { |
|||
var string = $(this).children("p").html() |
|||
var randomColor = colorHash(string).rgb |
|||
|
|||
$(this).css({ |
|||
'background-color' : randomColor, |
|||
}); |
|||
|
|||
} |
|||
) |
|||
|
|||
function colorHash(inputString){ |
|||
var sum = 0; |
|||
|
|||
for(var i in inputString){ |
|||
sum += inputString.charCodeAt(i); |
|||
} |
|||
|
|||
r = ~~(('0.'+Math.sin(sum+1).toString().substr(6))*256); |
|||
g = ~~(('0.'+Math.sin(sum+2).toString().substr(6))*256); |
|||
b = ~~(('0.'+Math.sin(sum+3).toString().substr(6))*256); |
|||
|
|||
var rgb = "rgb("+r+", "+g+", "+b+")"; |
|||
|
|||
var hex = "#"; |
|||
|
|||
hex += ("00" + r.toString(16)).substr(-2,2).toUpperCase(); |
|||
hex += ("00" + g.toString(18)).substr(-2,2).toUpperCase(); |
|||
hex += ("00" + b.toString(20)).substr(-2,2).toUpperCase(); |
|||
|
|||
return { |
|||
r: r |
|||
,g: g |
|||
,b: b |
|||
,rgb: rgb |
|||
,hex: hex |
|||
}; |
|||
} |
|||
|
|||
</script> |
|||
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> |
|||
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
|||
<script> |
|||
$( function() { |
|||
$( ".drag" ).draggable({ stack: ".drag", |
|||
stop: function(){ |
|||
var offset = $(this).offset(); |
|||
var id = $(this).attr('id'); |
|||
var xPos = offset.left; |
|||
var yPos = offset.top; |
|||
console.log(xPos); |
|||
console.log(yPos); |
|||
|
|||
var postForm = { //Fetch form data |
|||
'id' : id, |
|||
'x' : xPos, //Store name fields value, |
|||
'y' : yPos |
|||
}; |
|||
|
|||
$.ajax({ //Process the form using $.ajax() |
|||
type : 'POST', //Method type |
|||
url : '/scape', //Your form processing file URL |
|||
data : postForm, //Forms name |
|||
dataType : 'json' |
|||
}); |
|||
|
|||
|
|||
} }); |
|||
|
|||
} ); |
|||
|
|||
$( function() { |
|||
$( ".drag" ).resizable({aspectRatio: true}); |
|||
} ); |
|||
/* $( function() { |
|||
$( "body" ).selectable(); |
|||
} );*/ |
|||
|
|||
$( "#random" ).click(function() { |
|||
console.log("hallo"); |
|||
$( ".drag" ).each(function() { |
|||
var id = $(this).attr('id'); |
|||
var postForm = { //Fetch form data |
|||
'id' : id, |
|||
'x' : Math.floor(Math.random() * window.innerWidth) , //Store name fields value, |
|||
'y' : Math.floor(Math.random() * window.innerHeight) |
|||
}; |
|||
$( this ).css("top", postForm['y']); |
|||
$( this ).css("left", postForm['x']); |
|||
|
|||
$.ajax({ //Process the form using $.ajax() |
|||
type : 'POST', //Method type |
|||
url : '/scape', //Your form processing file URL |
|||
data : postForm, //Forms name |
|||
dataType : 'json' |
|||
}); |
|||
|
|||
|
|||
}); |
|||
}); |
|||
</script> |
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,31 @@ |
|||
{% extends 'base.html' %} |
|||
|
|||
{% block main %} |
|||
<div class="container"> |
|||
<h1 class="page-header">All Books</h1> |
|||
{% with messages = get_flashed_messages() %} |
|||
{% if messages %} |
|||
<div class="alert alert-success"> |
|||
<ul> |
|||
{% for message in messages %} |
|||
<li>{{ message }}</li> |
|||
{% endfor %} |
|||
</ul> |
|||
</div> |
|||
{% endif %} |
|||
{% endwith %} |
|||
|
|||
|
|||
{% for book in books|sort(attribute='title', reverse = False) %} |
|||
<a href="books/{{ book.id }}"> |
|||
<object class="no_cover" data="../static/img/default_cover.png" type="image/png" width="105"> |
|||
<img src="../uploads/cover/{{ book.cover }}" width="80"> |
|||
</object> |
|||
{{ book.title }}</a> |
|||
|
|||
|
|||
{% endfor %} |
|||
|
|||
|
|||
</div> |
|||
{% endblock %} |
|||
|
Can't render this file because it has a wrong number of fields in line 27.
|
Loading…
Reference in new issue