philo/static/philo/js/EmbedWidget.js

   1 ;(function ($) {
   2         var widget = window.embedWidget;
   3
   4         widget = {
   5                 options: {},
   6                 optgroups: {},
   7                 init: function () {
   8                         var EmbedFields = widget.EmbedFields = $('.embedding'),
   9                                 EmbedWidgets = widget.EmbedWidgets,
  10                                 EmbedBars = widget.EmbedBars,
  11                                 EmbedButtons = widget.EmbedButtons,
  12                                 EmbedSelects = widget.EmbedSelects;
  13
  14                         EmbedFields.wrap($('<div class="embed-widget" />'));
  15                         EmbedWidgets = $('.embed-widget');
  16                         EmbedWidgets.prepend($('<div class="embed-toolbar" />'));
  17                         EmbedBars = $('.embed-toolbar');
  18                         EmbedBars.append('<select class="embed-select"></select><button class="embed-button">Embed</button>');
  19                         EmbedButtons = $('.embed-button');
  20                         EmbedSelects = $('.embed-select');
  21
  22                         widget.parseContentTypes();
  23                         EmbedSelects.each(widget.populateSelect);
  24
  25                         EmbedButtons.click(widget.buttonHandler);
  26                 },
  27                 parseContentTypes: function () {
  28                         var string = widget.EmbedFields.eq(0).attr('data-content-types'),
  29                                 data = $.parseJSON(string),
  30                                 i=0,
  31                                 current_app_label = '',
  32                                 optgroups = {};
  33
  34                                 // this loop relies on data being clustered by app
  35                                 for(i=0; i < data.length; i++){
  36                                         item = data[i]
  37                                         // run this next loop every time we encounter a new app label
  38                                         if (item.app_label !== current_app_label) {
  39                                                 current_app_label = item.app_label;
  40                                                 optgroups[current_app_label] = {}
  41                                         }
  42                                         optgroups[current_app_label][item.verbose_name] = [item.app_label,item.object_name].join('.');
  43
  44                                         widget.optgroups = optgroups;
  45                                 }
  46                 },
  47                 populateSelect: function () {
  48                         var $this = $(this),
  49                                 optgroups = widget.optgroups,
  50                                 optgroup_els = {},
  51                                 optgroup_el, group;
  52
  53                         // append a title
  54                         $this.append('<option value="">Media Types</option>');
  55
  56                         // for each group
  57                         for (name in optgroups){
  58                                 if(optgroups.hasOwnProperty(name)){
  59                                         // assign the group to variable group, temporarily
  60                                         group = optgroups[name];
  61                                         // create an element for this group and assign it to optgroup_el, temporarily
  62                                         optgroup_el = optgroup_els[name] = $('<optgroup label="'+name+'" />');
  63                                         // append this element to the select menu
  64                                         $this.append(optgroup_el);
  65                                         // for each item in the group
  66                                         for (name in group) {
  67                                                 // append an option to the optgroup
  68                                                 optgroup_el.append('<option value='+group[name]+'>'+name+'</option>');
  69                                         }
  70                                 }
  71                         }
  72                 },
  73                 buttonHandler: function (e) {
  74                         var $this = $(this),
  75                                 select = $this.prev('select'),
  76                                 embed_widget = $this.closest('.embed-widget'),
  77                                 textarea = embed_widget.children('.embedding').eq(0),
  78                                 val, app_label, object_name,
  79                                 href,
  80                                 win;
  81
  82                         // prevent the button from submitting the form
  83                         e.preventDefault();
  84                         // handle the case that they haven't chosen a type to embed
  85                         if (select.val()==='') {
  86                                 alert('Please select a media type to embed.');
  87                                 textarea.focus();
  88                                 return;
  89                         }
  90
  91                         // split the val into app and object
  92                         val = select.val();
  93                         app_label = val.split('.')[0];
  94                         object_name = val.split('.')[1];
  95
  96                         // generate the url
  97                         // TODO: Find a better way to get ADMIN_URL. Currently this only works with grappelli, which provides the javascript global ADMIN_URL
  98                         href=[ADMIN_URL, app_label,  '/', object_name, '/?pop=1'].join('');
  99
 100                         // this is a bit hackish. let's walk through it.
 101                         // TODO: best to write our own template for this in the future
 102
 103                         // open a new window
 104                         win = window.open(href, id_to_windowname(textarea.attr('id')), 'height=500,width=980,resizable=yes,scrollbars=yes');
 105
 106                         // when the window finishes loading
 107                         win.addEventListener('load', function(){
 108                                 // collect all the links to objects in that window
 109                                 var links = win.django.jQuery('#changelist th:first-child a');
 110                                         // for each link
 111                                         links.each(function(){
 112                                                 // capture the pk
 113                                                 var pk = $(this).attr('href').split('/')[0];
 114                                                 // bind our own function to onclick instead of the function that's currently there
 115                                                 this.onclick = function () { widget.appendEmbed(textarea, val, pk); win.close(); return false; };
 116                                         });
 117                         }, false)
 118
 119                         // return focus to the textarea
 120                         textarea.focus();
 121                 },
 122                 appendEmbed: function (textarea, embed_type, embed_id) {
 123                         var $textarea = $(textarea),
 124                                 textarea = $textarea[0], // make sure we're *not* working with a jQuery object
 125                                 current_selection = [textarea.selectionStart, textarea.selectionEnd],
 126                                 current_text = $textarea.val(),
 127                                 embed_string = ['{% embed', embed_type, embed_id, '%}'].join(' '),
 128                                 new_text = current_text.substring(0, current_selection[0]) + embed_string + current_text.substring(current_selection[1]);
 129
 130                         $textarea.val(new_text);
 131                 }
 132         }
 133
 134         $(widget.init);
 135 }(django.jQuery));