wolnelektury/static/sponsors/js/footer_admin.js

   1 (function($) {
   2   $.fn.sponsorsFooter = function(options) {
   3     var settings = {
   4       sponsors: []
   5     };
   6     $.extend(settings, options);
   7
   8     var input = $(this).hide();
   9
  10     var container = $('<div class="sponsors"></div>').appendTo(input.parent());
  11     var groups = $.evalJSON(input.val());
  12
  13     var unusedDiv = $('<div class="sponsors-sponsor-group sponsors-unused-sponsor-group"></div>')
  14       .appendTo(container)
  15       .append('<p class="sponsors-sponsor-group-name sponsors-unused-sponsor-group-name">dostępni sponsorzy</p>');
  16     var unusedList = $('<ol class="sponsors-sponsor-group-list sponsors-unused-group-list"></ol>')
  17         .appendTo(unusedDiv)
  18         .sortable({
  19           connectWith: '.sponsors-sponsor-group-list'
  20                 });
  21
  22     // Edit group name inline
  23     function editNameInline(name) {
  24       name.unbind('click.sponsorsFooter');
  25       var inlineInput = $('<input></input>').val(name.html());
  26       name.html('');
  27
  28       function endEditing() {
  29         name.html(inlineInput.val());
  30         inlineInput.remove();
  31         name.bind('click.sponsorsFooter', function() {
  32           editNameInline($(this));
  33         });
  34         input.parents('form').unbind('submit.sponsorsFooter', endEditing);
  35         return false;
  36       }
  37
  38       inlineInput.appendTo(name).focus().blur(endEditing);
  39       input.parents('form').bind('submit.sponsorsFooter', endEditing);
  40     }
  41
  42     // Remove sponsor with passed id from sponsors array and return it
  43     function popSponsor(id) {
  44       for (var i=0; i < settings.sponsors.length; i++) {
  45         if (settings.sponsors[i].id == id) {
  46           var s = settings.sponsors[i];
  47           settings.sponsors.splice(i, 1);
  48           return s;
  49         }
  50       }
  51       return null;
  52     }
  53
  54     // Create sponsor group and bind events
  55     function createGroup(name, sponsors) {
  56       if (!sponsors) {
  57         sponsors = [];
  58       }
  59
  60       var groupDiv = $('<div class="sponsors-sponsor-group"></div>');
  61
  62       $('<a class="sponsors-remove-sponsor-group">X</a>')
  63         .click(function() {
  64           groupDiv.fadeOut('slow', function() {
  65             $('.sponsors-sponsor', groupDiv).hide().appendTo(unusedList).fadeIn();
  66             groupDiv.remove();
  67           });
  68         }).appendTo(groupDiv);
  69
  70       $('<p class="sponsors-sponsor-group-name">' + name + '</p>')
  71         .bind('click.sponsorsFooter', function() {
  72           editNameInline($(this));
  73         }).appendTo(groupDiv);
  74
  75       var groupList = $('<ol class="sponsors-sponsor-group-list"></ol>')
  76         .appendTo(groupDiv)
  77         .sortable({
  78           connectWith: '.sponsors-sponsor-group-list'
  79                 });
  80
  81
  82       for (var i = 0; i < sponsors.length; i++) {
  83         $('<li class="sponsors-sponsor"><img src="' + sponsors[i].image + '" alt="' + sponsors[i].name + '"/></li>')
  84           .data('obj_id', sponsors[i].id)
  85           .appendTo(groupList);
  86       }
  87       return groupDiv;
  88     }
  89
  90     // Create groups from data in input value
  91     for (var i = 0; i < groups.length; i++) {
  92       var group = groups[i];
  93       var sponsors = [];
  94
  95       for (var j = 0; j < group.sponsors.length; j++) {
  96         var s = popSponsor(group.sponsors[j]);
  97         if (s) {
  98           sponsors.push(s);
  99         }
 100       }
 101       createGroup(group.name, sponsors).appendTo(container);
 102     }
 103
 104     // Serialize input value before submiting form
 105     input.parents('form').submit(function(event) {
 106       var groups = [];
 107       $('.sponsors-sponsor-group', container).not('.sponsors-unused-sponsor-group').each(function() {
 108         var group = {name: $('.sponsors-sponsor-group-name', this).html(), sponsors: []};
 109         $('.sponsors-sponsor', this).each(function() {
 110           group.sponsors.push($(this).data('obj_id'));
 111         });
 112         groups.push(group);
 113       });
 114       input.val($.toJSON(groups));
 115     });
 116
 117     for (i = 0; i < settings.sponsors.length; i++) {
 118       $('<li class="sponsors-sponsor"><img src="' + settings.sponsors[i].image + '" alt="' + settings.sponsors[i].name + '"/></li>')
 119         .data('obj_id', settings.sponsors[i].id)
 120         .appendTo(unusedList);
 121     }
 122
 123     $('<button type="button">Dodaj nową grupę</button>')
 124       .click(function() {
 125         var newGroup = createGroup('').appendTo(container);
 126         editNameInline($('.sponsors-sponsor-group-name', newGroup));
 127       }).prependTo(input.parent());
 128
 129     input.parent().append('<div style="clear: both"></div>');
 130   };
 131 })(jQuery);