caboose-cms 0.8.43 → 0.8.44

data/app/assets/javascripts/caboose/modal_controllers/modal_controller.js

@@ -6,12 +6,20 @@ var ModalController = Class.extend({
   block: false,
   modal_element: false,
   authenticity_token: false,
+  parent_controller: false,
+  new_block_on_init: false,
+  assets_path: false,  
     
-  init: function(params) {
-    var that = this;
+  init: function(params) 
+  {
+    var that = this;    
     for (var i in params)
-      that[i] = params[i];
-    that.print();    
+      that[i] = params[i];    
+    that.include_assets();
+    if (that.new_block_on_init == true)
+      that.add_block();
+    else
+      that.print();    
   },
   
   refresh: function(callback)
@@ -37,9 +45,9 @@ var ModalController = Class.extend({
     $.colorbox({
       html: el,           
       initialWidth: width, 
-      initialHeight: height, 
+      //initialHeight: height, 
       innerWidth: width, 
-      innerHeight: height, 
+      //innerHeight: height, 
       scrolling: false,        
       closeButton: false,
       opacity: 0.50,
@@ -52,18 +60,158 @@ var ModalController = Class.extend({
     });
   },
   
-  autosize: function(msg, msg_container)
-  {
-    var that = this;    
+  last_size: 0,
+  autosize: function(msg, msg_container, flag)
+  {    
+    var that = this;
+    if (!flag)
+      that.last_size = 0;
     if (!that.modal_element) return;
-    if (msg) $('#' + (msg_container ? msg_container : 'modal_message')).html(msg);
+    if (msg) $('#' + (msg_container ? msg_container : 'modal_message')).html(msg);    
     var h = $(that.modal_element).outerHeight(true) + 20;    
-    $.colorbox.resize({ innerHeight: '' + h + 'px' });
+    if (h > 0 && h > that.last_size)    
+      $.colorbox.resize({ innerHeight: '' + h + 'px' });
+    that.last_size = h;
+    
+    if (!flag || flag < 2)
+      setTimeout(function() { that.autosize(false, false, flag ? flag + 1 : 1); }, 200);
   },
   
   close: function()
   {
     $.colorbox.close();    
-  }
+  },
+  
+  block_with_id: function(block_id, b)
+  {
+    var that = this;
+    if (!b) b = that.block;
+    if (b.id == block_id) return b;
+    
+    var the_block = false;
+    $.each(b.children, function(i, b2) {
+      the_block = that.block_with_id(block_id, b2);
+      if (the_block)
+        return false;
+    });
+    return the_block;        
+  },
+  
+  base_url: function(b)
+  {
+    var that = this;
+    if (!b) b = that.block; 
+    return '/admin/' + (b.page_id ? 'pages/' + b.page_id : 'posts/' + b.post_id) + '/blocks';        
+  },
   
+  block_url: function(b)
+  {
+    var that = this;
+    if (!b) b = that.block;
+    return this.base_url(b) + '/' + b.id;          
+  },
+  
+  add_block: function(block_type_id)
+  {
+    var that = this;
+    
+    that.include_assets([          
+      'caboose/icomoon_fonts.css',
+      'caboose/admin_new_block.css'
+    ]);
+    
+    if (!that.block_type_id)
+    {
+      that.new_block_types = false;
+      $.ajax({
+        url: '/admin/block-types/new-options',
+        type: 'get',
+        success: function(resp) { that.new_block_types = resp; },
+        async: false          
+      });
+      
+      var icons = $('<div/>').addClass('icons');
+      $.each(that.new_block_types, function(i, h) {        
+        if (h.block_types && h.block_types.length > 0)
+        {
+          var cat = h.block_type_category;          
+          icons.append($('<h2/>').click(function(e) { $('#cat_' + cat.id + '_container').slideToggle(); }).append(cat.name));
+          var cat_container = $('<div/>').attr('id', 'cat_' + cat.id + '_container');
+          $.each(h.block_types, function(j, bt) {            
+            cat_container.append($('<a/>').attr('href', '#')
+              .data('block_type_id', bt.id)
+              .click(function(e) { e.preventDefault(); that.add_block($(this).data('block_type_id')); })
+              .append($('<span/>').addClass('icon icon-' + bt.icon))
+              .append($('<span/>').addClass('name').append(bt.description))
+            );
+          });
+          icons.append(cat_container);
+        }
+      });
+          
+      var div = $('<div/>').append($('<form/>').attr('id', 'new_block_form')
+        .submit(function(e) { e.preventDefault(); return false; })
+        .append(icons)
+      );
+      that.modal(div, 800);
+      return;
+    }
+    
+    that.autosize("<p class='loading'>Adding block...</p>");    
+    var h = {                      
+      authenticity_token: that.authenticity_token,
+      block_type_id: block_type_id
+    };
+    if (that.before_id ) h['before_id'] = that.before_id;
+    if (that.after_id  ) h['after_id' ] = that.after_id;
+
+    $.ajax({
+      url: that.block_url(),
+      type: 'post',
+      data: h,
+      success: function(resp) {
+        if (resp.error)   that.autosize("<p class='note error'>" + resp.error + "</p>");
+        if (resp.success) that.parent_controller.edit_block(resp.new_id);        
+      }
+    });     
+  },
+
+  /*****************************************************************************
+  Asset management
+  *****************************************************************************/
+  
+  // To be overridden in each controller
+  assets_to_include: function() { return []; }, 
+  
+  // Called at the beginning of init to include modal assets,
+  // and can be called at anytime with more assets
+  include_assets: function(arr)
+  {
+    var that = this;    
+    if (!arr) arr = that.assets_to_include();
+    if (!arr) return;
+                
+    if (!that.parent_controller.included_assets || that.parent_controller.included_assets == undefined)
+      that.parent_controller.included_assets = [];
+    if (typeof arr == 'string') arr = [arr];
+    $.each(arr, function(i, url) {        
+      if (that.parent_controller.included_assets.indexOf(url) > -1) return;      
+      if (url.match(/\.js/))
+      {
+        var el = document.createElement('script');    
+        el.setAttribute('type', 'text/javascript');
+        el.setAttribute('src', that.assets_path + url);
+        document.getElementsByTagName('head')[0].appendChild(el)
+      }
+      else if (url.match(/\.css/))
+      {
+        var el = document.createElement('link');
+        el.setAttribute('rel', 'stylesheet');
+        el.setAttribute('type', 'text/css');
+        el.setAttribute('href', that.assets_path + url);
+        document.getElementsByTagName('head')[0].appendChild(el)
+      }
+      that.parent_controller.included_assets.push(url);
+    });
+  }  
 });

data/app/assets/javascripts/caboose/modal_controllers/modal_media_controller.js

@@ -0,0 +1,419 @@
+
+var ModalMediaController = ModalController.extend({
+    
+  media_id: false,
+  top_cat_id: false,
+  cat_id: false,
+  cat: false,
+  categories: false,  
+  s3_upload_url: false,		      		  	
+	aws_access_key_id: false,		
+	policy: false,
+	signature: false,
+	refresh_unprocessed_images: false,		               
+	selected_media: false,
+	uploader: false,  
+  upload_extensions: "jpg,jpeg,png,gif,tif,tiff,pdf,doc,docx,odt,odp,ods,ppt,pptx,xls,xlsx,zip,tgz,csv,txt",
+  file_view: 'thumbnail',
+  
+  assets_to_include: function()
+  {
+    return [      
+      'plupload/plupload.full.min.js', 
+      'plupload/jquery.ui.plupload/jquery.ui.plupload.js',
+      'plupload/jquery.ui.plupload/css/jquery.ui.plupload.css'
+    ];   
+  },
+
+  refresh_categories: function(after) 
+  {
+    var that = this;
+    $.ajax({
+      url: '/admin/media-categories/tree',
+      type: 'get',
+      async: false,      
+      success: function(resp) { 
+        that.top_category = resp;        
+        if (!that.cat_id) that.cat_id = that.top_category.id;
+        if (after) after();
+      }        
+    });
+  },
+  
+  refresh_media: function(after) 
+  {
+    var that = this;    
+    $.ajax({
+      url: '/admin/media/json',
+      type: 'get',
+      async: false,
+      data: { media_category_id: that.cat_id },
+      success: function(resp) {
+        that.media = resp;        
+        that.selected_media = [];        
+        if (after) after();
+      }        
+    });
+  },
+    
+  refresh_policy: function(after)
+  {
+    var that = this;
+    $.ajax({
+      url: '/admin/media/policy',
+      type: 'get',
+      success: function(resp) {        
+        that.policy             = resp.policy;      
+        that.signature          = resp.signature;      
+        that.s3_upload_url      = resp.s3_upload_url;
+        that.aws_access_key_id  = resp.aws_access_key_id;
+        that.top_media_category = resp.top_media_category;
+        that.top_cat_id         = resp.top_media_category.id;                
+        if (after) after();
+      }
+    });
+  },
+  
+  print: function()
+  {
+    var that = this;    
+    if (!that.block)
+    {
+      var div = $('<div/>')
+        .append($('<div/>').attr('id', 'top_controls'))        
+        .append($('<div/>').attr('id', 'media'      ))                  
+        .append($('<div/>').attr('id', 'controls')
+          .append($('<p/>').css('clear', 'both')
+            .append($('<input/>').attr('type', 'button').val('Close'        ).click(function(e) { that.parent_controller.render_blocks(); that.close(); }))
+          )
+        );        
+      that.modal(div, 800);
+      that.refresh(function() {
+        that.refresh_categories(function() {                         
+          that.refresh_media(function() {
+            that.refresh_policy(function() {
+              that.print();
+            });
+          });
+        });
+      })
+      return;
+    }
+    that.print_top_controls();    
+    that.print_media();
+    that.autosize();
+  },
+  
+  print_top_controls: function() 
+  {
+    var that = this;
+    
+    var select = $('<select/>').attr('id', 'categories').change(function(e) {             
+      that.select_category($(this).val()); 
+    });   
+    that.print_categories_helper(that.top_category, select, '');
+    
+    var div = $('<div/>').attr('id', 'top_controls')
+      .append($('<p/>')
+        .append(select).append(' | ')
+        .append($('<a/>').attr('href', '#').html('New Category'                                                 ).click(function(e) { e.preventDefault(); that.add_category();     })).append(' | ')              
+        .append($('<a/>').attr('href', '#').html('Upload to this Category'                                      ).click(function(e) { e.preventDefault(); that.toggle_uploader();  })).append(' | ')
+        .append($('<a/>').attr('href', '#').html(that.file_view == 'thumbnail' ? 'List View' : 'Thumbnail View' ).click(function(e) { e.preventDefault(); that.toggle_file_view(); }))
+      )
+      .append($('<div/>').attr('id', 'new_cat_message'))              
+      .append($('<div/>').attr('id', 'uploader'   ).append($('<div/>').attr('id', 'the_uploader')));     
+            
+    $('#top_controls').replaceWith(div);              
+  },
+  
+  print_categories_helper: function(cat, select, prefix) 
+  {
+    var that = this;
+    var opt = $('<option/>')
+      .data('media_category_id', cat.id)
+      .val(cat.id)
+      .append(prefix + cat.name + ' (' + cat.media_count + ')');      
+    if (cat.id == that.cat_id)
+      opt.attr('selected', 'true');
+    select.append(opt);        
+    if (cat.children.length > 0)
+    {
+      $.each(cat.children, function(i, cat2) {
+        that.print_categories_helper(cat2, select, prefix + ' - ');
+      });      
+    }    
+  },
+
+  print_media: function() 
+  {
+    var that = this;
+    var ul = $('<ul/>').addClass(that.file_view + '_view');    
+    var processing = false;
+    var d = new Date();
+    d = d.getTime();
+        
+    if (that.media.length > 0)
+    {      
+      $.each(that.media, function(i, m) {
+        if (m.media_type == 'image' && m.processed == false)
+          processing = true
+        var li = $('<li/>')          
+          .attr('id', 'media' + m.id)
+          .addClass('media')          
+          .data('media_id', m.id)
+          .click(function(e) { that.print_media_detail($(this).data('media_id')); })
+          .append($('<span/>').addClass('name').html(m.original_name));
+        if (m.image_urls)
+          li.append($('<img/>').attr('src', m.image_urls.tiny_url + '?' + d));
+        //if (that.selected_media.indexOf(m.id) > -1)
+        //  li.addClass('selected ui-selected');
+        if (m.id == that.media_id)
+          li.addClass('selected ui-selected');
+        ul.append(li);      
+      });
+    }
+    else
+      ul = $('<p/>').html("This category is empty.");
+    $('#media').empty().append(ul);
+    if (that.refresh_unprocessed_images == true && processing)
+      setTimeout(function() { that.refresh(); }, 2000);
+    that.autosize();
+          
+    $.each(that.media, function(i, m) {
+      $('li.media').draggable({
+        multiple: true,
+        revert: 'invalid',
+        start: function() { $(this).data("origPosition", $(this).position()); }
+      });
+    });
+  },
+  
+  print_media_detail: function(media_id)
+  {
+    var that = this;            
+    var m = that.media_with_id(media_id);
+         
+    var image_urls = $('<div/>').attr('id', 'image_urls').css('margin-bottom', '20px');
+    for (var size in m.image_urls)
+    {
+      var s = size.replace('_url', '');
+      s = s[0].toUpperCase() + s.slice(1);
+      var url = m.image_urls[size];
+      image_urls.append($('<div/>')
+        .append($('<span/>').addClass('size').append(s))
+        .append($('<input/>').attr('type', 'text').attr('id', 'size_' + s).addClass('url').val(url))
+        .append($('<button/>').addClass('clippy').data('clipboard-target', '#size_' + s).append('Copy'))                
+      );                        
+    }    
+    
+    $('#top_controls').empty();
+    $('#media').empty()              
+      .append($('<img/>').attr('id', 'detail_image').attr('src', m.image_urls.thumb_url))      
+      .append($('<p/>').append($('<div/>').attr('id', 'media_' + media_id + '_media_category_id' ))) 
+      .append($('<p/>').append($('<div/>').attr('id', 'media_' + media_id + '_name'              )))
+      .append($('<p/>').append($('<div/>').attr('id', 'media_' + media_id + '_description'       )))
+      .append($('<h2/>').append('Image URLs'))
+      .append(image_urls);
+    $('#controls').empty()
+      .append($('<p/>').css('clear', 'both')
+        .append($('<input/>').attr('type', 'button').val('< Back'            ).click(function(e) { that.print_top_controls(); that.print_media();        }))
+        .append($('<input/>').attr('type', 'button').val('Select this Image' ).click(function(e) { that.select_media(media_id)                           }))        
+        .append($('<input/>').attr('type', 'button').val('Close'             ).click(function(e) { that.parent_controller.render_blocks(); that.close(); }))
+      );
+    
+    var m = new ModelBinder({
+      name: 'Media',
+      id: m.id,
+      update_url: '/admin/media/' + m.id,      
+      authenticity_token: that.authenticity_token,
+      attributes: [                                                                                                                                             
+        { name: 'media_category_id' , nice_name: 'Category'    , type: 'select' , value: m.media_category_id  , fixed_placeholder: true, width: 400, after_update: function() { m.media_category_id = this.value; }, on_load: function() { that.autosize(); }, options_url: '/admin/media-categories/options' },
+        { name: 'name'              , nice_name: 'Name'        , type: 'text'   , value: m.name               , fixed_placeholder: true, width: 400, after_update: function() { m.name              = this.value; }, on_load: function() { that.autosize(); }},
+        { name: 'description'       , nice_name: 'Description' , type: 'text'   , value: m.description        , fixed_placeholder: true, width: 400, after_update: function() { m.description       = this.value; }, on_load: function() { that.autosize(); }},        
+      ]
+    });
+    $('#media_' + media_id + '_media_category_id' + '_container').css('width', '400px');
+    $('#media_' + media_id + '_name'              + '_container').css('width', '400px');
+    $('#media_' + media_id + '_description'       + '_container').css('width', '400px');
+       
+    $('#image_urls span.size'       ).css('width', '70px').css('display', 'inline-block');
+    $('#image_urls input.url'       ).css('width', '270px').css('border', '#ccc 1px solid');
+    $('#image_urls button').css('width', '60px');
+    
+    c = new Clipboard('.clippy');
+    c.on('success', function(e) {
+      console.info('Action:', e.action);
+      console.info('Text:', e.text);
+      console.info('Trigger:', e.trigger);
+      e.clearSelection();
+    });
+    c.on('error', function(e) {
+      console.error('Action:', e.action);
+      console.error('Trigger:', e.trigger);
+    });
+           
+    that.autosize();
+  },
+ 
+  //============================================================================
+  
+  toggle_uploader: function()
+  {
+    var that = this;
+    if (that.uploader)
+    {      
+      $("#the_uploader").slideUp(400, function() {
+        $("#the_uploader").plupload('destroy');
+        that.uploader = false;
+        that.autosize();
+      });            
+    }
+    else
+    {      
+      $("#the_uploader").hide();
+      that.uploader = $("#the_uploader").plupload({
+		    runtimes: 'html5,flash,silverlight',
+		    url: that.s3_upload_url,		      
+		    multipart: true,
+		    multipart_params: {
+		    	key: that.cat_id + '_${filename}', // use filename as a key
+		    	Filename: that.cat_id + '_${filename}', // adding this to keep consistency across the runtimes
+		    	acl: 'public-read',
+		    	//'Content-Type': 'image/jpeg',
+		    	AWSAccessKeyId: that.aws_access_key_id,		
+		    	policy: that.policy,
+		    	signature: that.signature
+		    },		
+		    file_data_name: 'file', // optional, but better be specified directly
+		    filters: {			
+		    	max_file_size: '100mb', // Maximum file size			
+		    	mime_types: [{ title: "Upload files", extensions: that.upload_extensions }] // Specify what files to browse for		    	
+		    },		
+		    flash_swf_url: '../../js/Moxie.swf', // Flash settings		
+		    silverlight_xap_url: '../../js/Moxie.xap', // Silverlight settings
+        init: {
+          BeforeUpload: function(up, file) {        
+            $.ajax({
+              url: '/admin/media/pre-upload',
+              type: 'post',
+              data: {
+                media_category_id: that.cat_id,
+                name: file.name 
+              },
+              success: function(resp) {},
+              async: false          
+            });
+            that.refresh_media(function() { that.refresh_categories(function() { that.print(); }); });
+          },   
+          FileUploaded: function(ip, file)
+          {
+            that.refresh_media(function() { that.refresh_categories(function() { that.print(); }); });            
+          },          
+          UploadComplete: function(up, files) {
+            that.refresh_media(function() { that.refresh_categories(function() { that.print(); }); });
+            if (that.uploader)
+            {
+              $("#the_uploader").slideUp(400, function() {
+                $("#the_uploader").plupload('destroy');
+                that.uploader = false;                
+              });
+            }
+          }
+        }
+      });
+      $("#the_uploader").slideDown(400, function() { that.autosize(); });      
+    }
+  },
+  
+  //============================================================================
+        
+  select_media: function(media_id)
+  {
+    var that = this;    
+    $.ajax({
+      url: that.block_url(),
+      type: 'put',
+      data: { media_id: media_id },
+      success: function(resp) {
+        that.parent_controller.render_blocks();
+        that.parent_controller.edit_block(that.block.parent_id);        
+      }
+    });        
+  },         
+  
+  //============================================================================
+  
+  select_category: function(cat_id)
+  {      
+    var that = this;
+    that.cat_id = cat_id;
+    that.print_top_controls();
+    that.refresh_media(function() { that.print_media(); });        
+  }, 
+  
+  add_category: function(name)
+  {
+    var that = this;
+    if (!name)
+    {
+      if (!$('#new_cat_message').is(':empty'))
+      {
+        $('#new_cat_message').empty();
+        return;
+      }
+      var div = $('<p/>').addClass('note warning')
+        .append('Name: ')
+        .append($('<input/>').attr('type', 'text').attr('id', 'new_cat_name')).append(" ")
+        .append($('<input/>').attr('type', 'button').val('Add').click(function() { that.add_category($('#new_cat_name').val()); })).append(" ")
+        .append($('<input/>').attr('type', 'button').val('Cancel').click(function() { $('#new_cat_message').empty(); }));
+      $('#new_cat_message').empty().append(div);
+      return;
+    }
+    $('#new_cat_message').empty().html("<p class='loading'>Adding category...</p>");
+    $.ajax({
+      url: '/admin/media-categories',
+      type: 'post',
+      data: {
+        parent_id: that.cat_id,
+        name: name
+      },
+      success: function(resp) {
+        if (resp.error) $('#new_cat_message').empty().html("<p class='note error'>" + resp.error + "</p>");
+        if (resp.refresh) {
+          that.cat_id = resp.new_id;
+          that.refresh(function() {
+            that.refresh_categories(function() {                         
+              that.refresh_media(function() {
+                that.refresh_policy(function() {
+                  that.print();
+                });
+              });
+            });
+          });
+        }
+      }    
+    });
+  },
+
+  toggle_file_view: function()
+  {
+    var that = this;
+    that.file_view = (that.file_view == 'thumbnail' ? 'list' : 'thumbnail');    
+    that.print_media();        
+  },  
+  
+  media_with_id: function(media_id)
+  {
+    var that = this;
+    var media = false;
+    $.each(that.media, function(i, m) {
+      if (m.id == media_id)
+      {
+        media = m;
+        return false;
+      }
+    });
+    return media;    
+  },    
+
+});