Merge branch 'master' of git.xpub.nl:/var/www/git.xpub.nl/repos/xpub-lib

6 years ago · 42291a5ea4
10 changed files with 117 additions and 6 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/app/cover/3_The_Moral_Of_The_Xerox_cover.png
+++ b/app/cover/3_The_Moral_Of_The_Xerox_cover.png
--- a/app/cover/3_The_Moral_Of_The_Xeroxcover_small.png
+++ b/app/cover/3_The_Moral_Of_The_Xeroxcover_small.png
--- a/app/models.py
+++ b/app/models.py
@ -170,6 +170,8 @@ class BookSchema(Schema):
    category = fields.Str()
    year_published = fields.Str()
    stacks = fields.Nested(StackSchema, many=True)
+    scapeX = fields.Float()
+    scapeY = fields.Float()


 def must_not_be_blank(data):
--- a/app/static/js/d3.min.js
+++ b/app/static/js/d3.min.js
--- a/app/templates/base.html
+++ b/app/templates/base.html
@ -3,6 +3,7 @@
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>XPPL</title>
@ -73,7 +74,7 @@ var socket = io.connect('{{server}}');
      {% for message in chat %}
        {
          username: '{{ username }}',
-          text: '{{ message.message | replace("\n", " ") }}',
+          text: {{ message.message | replace("\n", " ") | tojson}},
          time: convertTime("{{message.time}}")
        }{% if not loop.last %},{% endif %}
      {% endfor %}
@ -102,7 +103,6 @@ socket.on('connect', function() {
 socket.on('channel-' + app.channel, function(msg) {
  console.log("new: "+msg.text)

-
  $(".messageback1").each(function() {
    var oldColor = $(this).css("background-color");
    var randomColor = colorHash(msg.text).rgb;
--- a/app/templates/home.html
+++ b/app/templates/home.html
@ -36,10 +36,9 @@ Feel free to browse our catalogue, interfaced in many different ways.
            <article class="media">
                <div class="media-content">
                    <div class="content">
-                      <p class="user">[[ message.username ]]</p>
-                      <p class="time">[[ message.time ]]</p>
+                        <p class="user">[[ message.username ]]</p>
+                        <p class="time">[[ message.time ]]</p>
                        <p class="msg">[[ message.text ]]</p>
-
                    </div>
                </div>
            </article>
--- a/app/templates/scape.html
+++ b/app/templates/scape.html
@ -7,6 +7,7 @@
    <style>
    #scape_container {
       zoom: 1;
+       -moz-transform: scale(0.5,0.5);
    }
     body  .ui-selecting { border:2px solid yellow; }
     body .ui-selected {border:2px solid black;}
@ -235,7 +236,7 @@ $("#zoom-in").click(function(){
  console.log(newnumber)
  //$('#scape_container').css('zoom','90%'); /* Webkit browsers */
  $('#scape_container').css('zoom',newnumber.toString()); /* Other non-webkit browsers */
-//  $('#scape_container').css('-moz-transform',scale(0.9, 0.9)); /* Moz-browsers */
+  $('#scape_container').css('-moz-transform',scale(newnumber, newnumber)); /* Moz-browsers */
 });
 $("#zoom-out").click(function(){
  var currentZoom = $('#scape_container').css('zoom');
--- a/app/templates/scape_new.html
+++ b/app/templates/scape_new.html
@ -0,0 +1,104 @@
+<html>
+
+<head>
+  <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+      <script src="{{ url_for("static", filename="js/d3.min.js") }}"></script>
+<style>
+rect{
+  width: 40px;
+  height: 40px;
+  stroke: black;
+  fill: yellow;
+}
+svg{
+  width:100%;
+  height:100%;
+
+}
+.bg{
+  fill: blue;
+
+}
+
+</style>
+</head>
+<body>
+
+<script>
+console.log("hello");
+// d3.json("/api/books").then(function(data){
+//   console.log("loaded");
+//   console.log(data)
+//   var g = d3.select('body')
+//   .append('div')
+//   .append('div');
+//   g.selectAll("div.item")
+//   .data(data.books)
+//   .enter()
+//   .append("div")
+//   .attr("class", "item")
+//   .text(function(d){return d.title})
+//   .style("position", "absolute")
+//   .style("top", function (d) { return d.scapeY})
+//   .style("left", function (d) { return d.scapeX})
+//
+// }) //.err(function(err) {console.log("error!", err)})
+d3.json("/api/books").then(function(data){
+  console.log("loaded");
+  console.log(data)
+
+  var svg = d3.select('body')
+  .append('svg');
+
+  var bounds = svg.node().getBoundingClientRect(),
+    width = bounds.width, height = bounds.height;
+  var bg = svg.append("rect")
+    .attr("class", "bg")
+    .attr("width", width)
+    .attr("height", height)
+    .style("pointer-events", "all")
+    .call(d3.zoom()
+            .scaleExtent([1/2, 4])
+          .on("zoom", zoomed));
+
+  function zoomed(){
+g.attr("transform", d3.event.transform);
+
+  }
+
+  var g = svg.append('g');
+  var join = g.selectAll("g.item")
+  .data(data.books, function (d) { return d.id });
+
+  // process new items (enter)
+  join.enter()
+  .append("g")
+  .attr("class", "item")
+//  .text(function(d){return d.title})
+  .style("position", "absolute")
+  .attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"})
+  .append("a")
+  .call(d3.drag()
+    .container(function(){return this.parentNode})
+    .on("start", function(){})
+    .on("drag", function(d){
+      console.log("dragging", this, d3.event);
+      d3.select(this).attr("transform", "translate("+d3.event.x+"," +d3.event.y+")" )
+    })
+  )
+  .attr("xlink:href", function(d){return "/books/"+d.id})
+  .append("rect")
+  .attr("width", "40")
+  .attr("height", "40");
+  // update existing elements
+  join.transition(1000).attr("transform", function (d) { return "translate("+d.scapeX+","+d.scapeY+")"});
+  join.exit().remove();
+
+
+
+})
+
+</script>
+</body>
+</html>
--- a/app/views.py
+++ b/app/views.py
@ -162,6 +162,9 @@ def scape():
            instances.append(instance)
    return render_template('scape.html', books=books, instances=instances)

+@app.route('/scape_new', methods=['POST', 'GET'])
+def scape_new():
+    return render_template('scape_new.html')

@app.route('/books_grid')
 def show_books_grid():