philo/static/philo/js/TagCreation.js

   1 var tagCreation = window.tagCreation;
   2
   3 (function($) {
   4         location_re = new RegExp("^https?:\/\/" + window.location.host + "/")
   5
   6         $('html').ajaxSend(function(event, xhr, settings) {
   7                 function getCookie(name) {
   8                         var cookieValue = null;
   9                         if (document.cookie && document.cookie != '') {
  10                                 var cookies = document.cookie.split(';');
  11                                 for (var i = 0; i < cookies.length; i++) {
  12                                         var cookie = $.trim(cookies[i]);
  13                                         // Does this cookie string begin with the name we want?
  14                                         if (cookie.substring(0, name.length + 1) == (name + '=')) {
  15                                                 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
  16                                                 break;
  17                                         }
  18                                 }
  19                         }
  20                         return cookieValue;
  21                 }
  22                 if (!(/^http:.*/.test(settings.url) || /^https:.*/.test(settings.url)) || location_re.test(settings.url)) {
  23                         // Only send the token to relative URLs i.e. locally.
  24                         xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));
  25                 }
  26         });
  27         tagCreation = {
  28                 'cache': {},
  29                 'addTagFromSlug': function(triggeringLink) {
  30                         var id = triggeringLink.id.replace(/^ajax_add_/, '') + '_input';
  31                         var slug = document.getElementById(id).value;
  32
  33                         var name = slug.split(' ');
  34                         for(var i=0;i<name.length;i++) {
  35                                 name[i] = name[i].substr(0,1).toUpperCase() + name[i].substr(1);
  36                         }
  37                         name = name.join(' ');
  38                         slug = name.toLowerCase().replace(/ /g, '-').replace(/[^\w-]/g, '');
  39
  40                         var href = triggeringLink.href;
  41                         var data = {
  42                                 'name': name,
  43                                 'slug': slug
  44                         };
  45                         $.post(href, data, function(data){
  46                                 newId = html_unescape(data.pk);
  47                                 newRepr = html_unescape(data.unicode);
  48                                 var toId = id.replace(/_input$/, '_to');
  49                                 elem = document.getElementById(toId);
  50                                 var o = new Option(newRepr, newId);
  51                                 SelectBox.add_to_cache(toId, o);
  52                                 SelectBox.redisplay(toId);
  53                         }, "json")
  54                 },
  55                 'init': function(id) {
  56                         tagCreation.cache[id] = {}
  57                         var input = tagCreation.cache[id].input = document.getElementById(id + '_input');
  58                         var select = tagCreation.cache[id].select = document.getElementById(id + '_from');
  59                         var addLinkTemplate = document.getElementById('add_' + input.id.replace(/_input$/, '')).cloneNode(true);
  60                         var addLink = tagCreation.cache[id].addLink = document.createElement('A');
  61                         addLink.id = 'ajax_add_' + id;
  62                         addLink.className = addLinkTemplate.className;
  63                         addLink.href = addLinkTemplate.href;
  64                         addLink.appendChild($(addLinkTemplate).children()[0].cloneNode(false));
  65                         addLink.innerHTML += " <span style='vertical-align:text-top;'>Add this tag</span>"
  66                         addLink.style.marginLeft = "20px";
  67                         addLink.style.display = "block";
  68                         addLink.style.backgroundPosition = "10px 5px";
  69                         addLink.style.width = "120px";
  70                         $(input).after(addLink);
  71                         if (window.grappelli) {
  72                                 addLink.parentNode.style.backgroundPosition = "6px 8px";
  73                         } else {
  74                                 addLink.style.marginTop = "5px";
  75                         }
  76                         tagCreation.toggleButton(id);
  77                         addEvent(input, 'keyup', function() {
  78                                 tagCreation.toggleButton(id);
  79                         });
  80                         addEvent(addLink, 'click', function(e) {
  81                                 e.preventDefault();
  82                                 tagCreation.addTagFromSlug(addLink);
  83                         });
  84                         // SelectFilter actually mistakenly allows submission on enter. We disallow it.
  85                         addEvent(input, 'keypress', function(e) {
  86                                 if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
  87                                         e.preventDefault();
  88                                         if (select.options.length == 0) {
  89                                                 tagCreation.addTagFromSlug(addLink);
  90                                         }
  91                                 }
  92                         })
  93                 },
  94                 'toggleButton': function(id) {
  95                         var addLink = tagCreation.cache[id].addLink;
  96                         var select = $(tagCreation.cache[id].select);
  97                         var input = tagCreation.cache[id].input;
  98                         if (input.value != "") {
  99                                 if (addLink.style.display == 'none') {
 100                                         addLink.style.display = 'block';
 101                                         select.height(select.height() - $(addLink).outerHeight(false))
 102                                 }
 103                         } else {
 104                                 if (addLink.style.display == 'block') {
 105                                         select[0].style.height = null;
 106                                         addLink.style.display = 'none';
 107                                 }
 108                         }
 109                 }
 110         }
 111 }(django.jQuery))