From 829ad6360a508a7841f5b736b203749e6bf5d037 Mon Sep 17 00:00:00 2001 From: danielvincent Date: Fri, 22 Oct 2010 12:34:01 -0700 Subject: [PATCH] multiple dropzones function. person image does not copy, delete is disabled. --- app/views/aspects/manage.html.haml | 24 ++++++-- public/javascripts/aspect-edit.js | 71 +++++++++++++++--------- public/javascripts/view.js | 1 + public/stylesheets/sass/application.sass | 71 +++++++++++++++++------- 4 files changed, 113 insertions(+), 54 deletions(-) diff --git a/app/views/aspects/manage.html.haml b/app/views/aspects/manage.html.haml index 06f55724a..e067888e0 100644 --- a/app/views/aspects/manage.html.haml +++ b/app/views/aspects/manage.html.haml @@ -16,7 +16,7 @@ %h3=t('.requests') .requests - %ul.dropzone + %ul - if @remote_requests.size < 1 %li No new requests - else @@ -44,23 +44,35 @@ %span.tip click to edit %ul.tools - %li= link_to t('.add_a_new_friend'), "#add_request_pane_#{aspect.id}", :class => 'add_request_button' %li!= remove_link(aspect) - %ul.dropzone{:data=>{:aspect_id=>aspect.id}} + + %ul.people{:data=>{:aspect_id=>aspect.id}} -for person in aspect.people %li.person{:data=>{:guid=>person.id, :aspect_id=>aspect.id}} .delete .x - X + = link_to "X", "#remove_person_pane", :class => "remove_person_button" .circle = person_image_tag(person) - .draggable_info - Drag to add people + %li.dropzone_targets + %span.dropzone.add_person + = link_to "Add person", "#add_request_pane_#{aspect.id}", :class => 'add_request_button' + %span.dropzone.move_person + = link_to "Move person", '#' .fancybox_content %div{:id => "add_request_pane_#{aspect.id}"} = render "requests/new_request", :aspect => aspect + + .fancybox_content + #remove_person_pane + .span-12.last + .modal_title_bar + %h4 Remove from aspect + + .person + diff --git a/public/javascripts/aspect-edit.js b/public/javascripts/aspect-edit.js index 8d3268d58..d31d82114 100644 --- a/public/javascripts/aspect-edit.js +++ b/public/javascripts/aspect-edit.js @@ -21,48 +21,62 @@ function decrementRequestsCounter() { // Dragging person between aspects $(function() { - $("ul .person").draggable({ + $(".person").draggable({ revert: true, start: function(event,ui){ $(this).children("img").animate({'height':80, 'width':80, 'opacity':0.8},200); - $(".draggable_info").fadeIn(100); + $(".dropzone").fadeIn(100); }, stop: function(event,ui){ $(this).children("img").animate({'height':70, 'width':70, 'opacity':1},200); - $(".draggable_info").fadeOut(100); } }); - $(".aspect ul.dropzone").droppable({ + $(".dropzone", ".aspect").droppable({ hoverClass: 'active', drop: function(event, ui) { var dropzone = $(this); var person = ui.draggable; + var aspect = dropzone.closest(".aspect"); if( person.hasClass('request') ){ $.ajax({ type: "DELETE", url: "/requests/" + person.attr('data-guid'), - data: {"accept" : true, "aspect_id" : dropzone.attr('data-aspect_id') }, + data: {"accept" : true, "aspect_id" : aspect.attr('data-guid') }, success: function(data){ decrementRequestsCounter(); } }); }; - if( dropzone.attr('data-aspect_id') != person.attr('data-aspect_id' )){ - $.ajax({ - url: "/aspects/move_friend/", - data: {"friend_id" : person.attr('data-guid'), - "from" : person.attr('data-aspect_id'), - "to" : { "to" : dropzone.attr('data-aspect_id') }}, - success: function(data){ - person.attr('data-aspect_id', dropzone.attr('data-aspect_id')); - }}); - } + if( aspect.attr('data-guid') != person.attr('data-aspect_id' )){ - $(this).closest("ul").append(person); + if( dropzone.hasClass("move_person") ){ + $.ajax({ + url: "/aspects/move_friend/", + data: {"friend_id" : person.attr('data-guid'), + "from" : person.attr('data-aspect_id'), + "to" : { "to" : aspect.attr('data-guid') }}, + success: function(data){ + person.attr('data-aspect_id', aspect.attr('data-guid')); + }}); + + $("ul.people li:last", aspect).before(person); + + } else { + $.ajax({ + url: "/aspects/add_to_aspect/", + data: {"friend_id" : person.attr('data-guid'), + "aspect_id" : aspect.attr('data-guid') }, + success: function(data){ + person.attr('data-aspect_id', aspect.attr('data-guid')); + }}); + + $("ul.people li:last", aspect).before(person); + } + } } }); @@ -87,7 +101,7 @@ $(function() { 'aspect_id' : person.attr('data-aspect_id') } }); } - person.fadeOut('slow', $(this).remove()); + person.fadeOut('slow', function(){person.remove()}); } } }); @@ -97,6 +111,7 @@ $(function() { // Person deletion + $(".delete").live("click", function() { var person = $(this).closest("li.person"); @@ -117,17 +132,19 @@ $(".delete").live("click", function() { } else { - if( confirm("Remove this person from all aspects?") ){ - var person_id = $(this).closest("li.person").attr('data-guid'); + var person_id = $(this).closest("li.person").attr('data-guid'); - $.ajax({ - type: "DELETE", - url: "/people/" + person_id, - success: function() { - person.fadeOut(200); - } - }); - } + + /* + $.ajax({ + type: "DELETE", + url: "/people/" + person_id, + success: function() { + person.fadeOut(200); + } + }); + + */ } }); diff --git a/public/javascripts/view.js b/public/javascripts/view.js index 7e809f978..71fefc347 100644 --- a/public/javascripts/view.js +++ b/public/javascripts/view.js @@ -30,6 +30,7 @@ $(document).ready(function(){ $("#add_request_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false }); $(".invite_user_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false }); $(".add_request_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false }); + $(".remove_person_button").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false }); $(".question_mark").fancybox({ 'titleShow': false , 'hideOnOverlayClick' : false }); $("input[type='submit']").addClass("button"); diff --git a/public/stylesheets/sass/application.sass b/public/stylesheets/sass/application.sass index db0b32edc..4f7a48430 100644 --- a/public/stylesheets/sass/application.sass +++ b/public/stylesheets/sass/application.sass @@ -938,49 +938,71 @@ h1.big_text &:last-child :margin :right 0 + +ul#aspect_list + :list + :style none + :padding 0 + :margin 0 + .aspect, .requests, .aspect_remove - :list - :style none + :position relative :color #999 :cursor default :text-shadow 0 1px #fff - ul.dropzone - :position relative - :min-height 20px - :margin 0 - :bottom 25px + .dropzone + :display inline-block + :-webkit-border-radius 10px :-moz-border-radius 10px :border-radius 10px - :list - :style none - :padding 15px + :margin 5px :border 2px dashed #ccc + :height 70px + :max-height 70px + :width 70px + :max-width 70px + &.active :background :color rgba(255,252,127,0.2) - .draggable_info - :position absolute - :display none - :right 15px - :bottom 10px + a + :display block + :height 100% + :padding + :top 12px + :text + :align center :font - :style italic :size 14px - :color #aaa + + :color #999 + + &:hover + :color #666 + + ul + :list + :style none + :min-height 20px + :margin 0 + :bottom 25px + :padding 0 + + li + :display inline-block .person - :display inline-block :cursor move :z-index 10 - :position relative + :top 0 :padding 0 :margin 5px @@ -1034,8 +1056,15 @@ h1.big_text .x :z-index 2 :position absolute - :top 2px - :left 7px + :padding + :top 2px + :left 7px + a + :cursor default + :display block + :height 100% + :text-shadow none + :color #eee &:hover :cursor default