500px Curated Collections

curated_collections.js

// ==UserScript==
// @name       500px Curated Collections
// @namespace  http://500px.com
// @version    0.1
// @description Curating Curated Collections
// @match      http://500px.com/photo/*
// @copyright  2014, Vova
// ==/UserScript==

CollectionsView = Backbone.View.extend({
    api: 'https://api.500px.com/v1',
    template: '<h1>Add to Collection</h1><ul class="list"></ul><h1>Create collection</h1><form class="new_collection">Name: <input name="name"/><input type="submit" value="Create"></form>', 
    collections: [],
    tagName: "div",
    className: "collections-container",
    
    events: {
      "click .list li .add":          "addToCollection",
        "submit .new_collection":     "createCollection"
    }, 
    
    initialize: function() {
        this.token = PxApp.csrf_token;
        this.consumer_key = 'xHkW9aeTnoYk4k1lUYicCjbKY9VXjYOWxE3OsBt8';
        this.user_id = $(".avatar img:first").attr("src").match(/avatars.500px.net\/([\d]+)/)[1]
    },
  
    render: function() {
        return this.$el.html(this.template);
    },
  
    getCollections: function(){
        _this = this;
        var request = $.ajax({
            type: 'GET',
            url: this.api+'/users/'+this.user_id+'/collections?authenticity_token='+this.token+"&consumer_key="+this.consumer_key,
            xhrFields: {
              withCredentials: true
           }
        })
        request.done(function(data){
            _this.renderCollections(data.collections);
        })
        request.fail(function( jqXHR, textStatus, errorThrown ) {
          alert(errorThrown)
        });
    },
    
    renderCollections: function(collections){
        this.collections = collections
        this.$list = this.$el.find(".list")
        this.$list.html('')
        
         $.each(this.collections, function(i,c){
            _this.$list.append(_this.renderCollectionLine(c));
         });
    },
  
    renderCollectionLine: function (c, prefix){
      if (prefix == undefined){prefix = ""}
        return "<li>"+prefix+"<span class='name'><a class='add' data-collection-id='"+c.id+"'>"+c.name+"</a> </span><span class='meta' data-photos-count='"+c.items_count+"'>(Photos: <span class='count'>"+c.items_count+"</span>)</span> <span class='actions'><a href='/collections/"+c.id+"' target='_blank'>Open</a></span></li>"// | <a href='#'>Add Batch: </a><input class='batch' name='batch' /></span></li>"
    },
    
    addToCollection: function(itm){
      $collection_line = $(itm.currentTarget).closest('li')
        collection_id =  $(itm.currentTarget).data('collection-id')
        photo_id = PxApp.router.view.model.id
        
        put_object = {
           "add": {
            "photos": [ photo_id ]
          }
        }
        
        request = $.ajax({
            type: 'PUT',
            url: this.api+'/users/'+_this.user_id+'/collections/'+collection_id+'/items?authenticity_token='+_this.token,
            data: JSON.stringify(put_object),
            xhrFields: {
              withCredentials: true
           },
            contentType: 'application/json'
        })
        
        request.done(function( data ) {
            $meta = $collection_line.find('.meta')
            var num = Number($meta.data('photos-count'))
            
            if (data[photo_id].result == "added"){
                num = num + 1
            }
             $meta.data('photos-count', num)
             $meta.find('.count').text(num)
             
        });
        request.fail(function( jqXHR, textStatus, errorThrown ) {
          alert(errorThrown)
        });
    },

    createCollection: function(itm){
      data = $(itm.currentTarget).serialize()
        request = $.ajax({
            type: 'POST',
            url: _this.api+'/users/'+_this.user_id+'/collections?authenticity_token='+_this.token+"&"+data,
            xhrFields: {
              withCredentials: true
           }
        })
    
        request.done(function( data ) {
            c = data.collection
            _this.$list = _this.$el.find(".list")
            _this.$list.append(_this.renderCollectionLine(c,'NEW:'));
        });
        request.fail(function( jqXHR, textStatus, errorThrown ) {
          alert(errorThrown)
        });
        return false;
    }
});

var C_KEY = 99

var hasCss = false
if ($(".photo_show").length == 1){
    $( document ).keypress(function( event ) {
        if ( event.which == C_KEY && $('.collections-container:visible').length == 0) {
        if (!hasCss){ addCss();}
        showCollectionsView()
      }
    });  
}

function showCollectionsView(){
    var collections_view = new CollectionsView();
    var lightbox_region = PxApp.View.container.findByCustom("lightbox_region");
    var lightbox = new Px.Views.Shared.Lightbox({ type: "html", view: collections_view });
    lightbox_region.show(lightbox);
    collections_view.render()
    collections_view.getCollections()
    _.delay(function(){collections_view.$el.closest('#pxLightbox_inside').css('top','10px')},10)  
}

function addCss(){
    var css = ".list li .name { display:inline-block; width: 200px }"
    css += ".list {margin-bottom: 15px}"
    css +=".collections-container h1 { font-size:16px; margin-bottom: 10px; }"
    css +=".list li .meta { color: gray;display:inline-block; width: 100px  }"
    css +=".list li .add { cursor: pointer }"
    css += ".collections-container input{ border:1px solid gray; background-color: white; font-size:12px; border-radius: 3px; padding: 3px}"
    //css += ".collections-container input.batch{ width: 300px}"
    
    css +=".collections-container{ width: 500px; min-height: 200px; background-color: #FFF; margin-left: -250px; padding: 15px }"
    $("head").append("<style>"+css+"</css>");
}