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