rad_common_interface 0.0.6 → 0.0.7

data/Rakefile

@@ -4,6 +4,7 @@ project(
   name: "common_interface",
   official_name: "rad_common_interface",
   gem: true,
+  dirs: 'app',
   summary: "User Interface for Rad Framework",
 
   author: "Alexey Petrushin",

data/app/static/face/attachments.js

@@ -0,0 +1,85 @@
+// 
+// Attachments
+// 
+// - if there's no any files in attachment it should display small file_input without any border or remove button
+// - if there's files - files should have borders, remove buttons and be sortable, file_input 
+// should be last in chain and have border but not the remove button and not be sortable
+// - if user select a file - file input should show remove button and became sortable and there should appear a new file_input - with border
+// but without remove button and not be sortabe
+// 
+Rad.Attachments = new Class({
+  initialize: function(element){
+    this.element = element;
+    
+    // initializing attachments
+    var _this = this;
+    this.element.getElements('.l_item').each(function(attachment){
+      attachment.getElement('.l_remove_button').addEvent('click', function(){
+        attachment.destroy();
+        _this.update();
+      });
+    });
+    
+    this.sortables = new Sortables();
+    this.addFileField();
+    this.update();
+  },
+  
+  addFileField: function(){        
+    var template = this.element.getElement('.l_file_field_template').get('value');    
+    var fileField = template.toElements();
+    fileField.inject(this.element.getElements('.css_clear').last(), 'before');
+    fileField.addEvent('change', function(){
+      this.addFileField();
+      this.update();
+    }.bind(this));
+    fileField.getElement('.l_remove_button').addEvent('click', function(){
+      fileField.destroy();
+      this.update();
+    }.bind(this));
+  },
+  
+  update: function(){
+    var items = this.element.getElements('.l_item');        
+    var attachments = items.filter(function(item){
+      return !item.getElement('input[type=file]');
+    });
+    var filledFileInputs = items.filter(function(item){
+      var fileInput = item.getElement('input[type=file]');
+      return fileInput && !fileInput.get('value').blank();
+    });
+    var emptyFileInputs = items.filter(function(item){
+      var fileInput = item.getElement('input[type=file]');
+      return fileInput && fileInput.get('value').blank();
+    });    
+    
+    // clearing all
+    this.sortables.detach();
+    items.each(function(item){item.getElements('.l_remove_button').hide()});
+    items.removeClass('l_item_style').removeClass('l_empty_item_style');
+    
+    // updating styles
+    if(items.size() > 1){
+      // displaying filled inputs as attachments
+      filledFileInputs.each(function(item){
+        var input = item.getElement('input');
+        var fname = input.get('value').replace(/^.*(\/|\\)/, '');
+        var attachmentStub = item.getElement('.l_attachment_stub');
+        
+        input.hide();
+        attachmentStub.set('text', fname).show();
+      });
+      
+      // 
+      var removableAndSortableItems = Array.concat(attachments, filledFileInputs).flatten();
+      removableAndSortableItems.each(function(item){
+        item.addClass('l_item_style');
+        item.getElements('.l_remove_button').show()
+      });
+      
+      emptyFileInputs.addClass('l_empty_item_style')
+      this.sortables = new Sortables();
+      this.sortables.addItems(removableAndSortableItems);            
+    }
+  }
+});

data/app/static/face/dialogs.js

@@ -0,0 +1,189 @@
+// 
+// Universal dialog form buttons
+//
+Rad.DialogButtons = new Class({
+  _initializeButtons: function(containerQ){
+    var container = containerQ.toElement(true);
+    // Universal Cancel Button (for General and AJAX forms)
+    container.getElements('.m_redirect_back_or_close_dialog').addEvent('click', function(event){
+      event.stop();
+      this.destroy();
+    }.bind(this));
+    
+    // Universal Submit Button (for General and AJAX forms)
+    container.getElements('.m_submit_form_or_ajax_form').addEvent('click', function(event){
+      event.stop();
+      this.submit();
+    }.bind(this));
+  }
+});
+
+
+// 
+// Inplace
+// 
+Rad.AbstractInplace = new Class({
+  Implements: [Events, Rad.DialogButtons],
+  
+  wait: function(message){
+    message = message || "<p>Please wait ...</p>";
+    this.editor.getChildren().hide();
+    message.toElements(true).inject(this.editor);
+  },
+  
+  submit: function(){
+    this.wait();
+    var form = this.editor.getElement('form');
+    rad.submitForm(form, {}, function(){this.destroy();}.bind(this));
+  },
+  
+  edit: function(editorQ){
+    this.editor = editorQ.toElement(true); 
+    this.editor.addClass('the_inplace_editor');
+    this._initializeButtons(this.editor);
+  }
+});
+
+Rad.EditInplace = new Class({
+  Extends: Rad.AbstractInplace,
+  
+  initialize: function(elementQ){
+    this.element = elementQ.toElement(true);
+  },
+  
+  destroy: function(){
+    this.element.show();
+    this.editor.destroy();
+    this.fireEvent('destroy');
+  },
+  
+  edit: function(editorQ){
+    this.parent(editorQ);
+    
+    this.element.hide();
+    this.editor.inject(this.element, 'after');
+        
+    this.fireEvent('edit');
+  },
+  
+  update: function(contentQ){
+    var content = contentQ.toElements(true);
+    content.replaces(this.element);
+    this.fireEvent('update');
+  }    
+});
+
+Rad.AddInplace = new Class({
+  Extends: Rad.AbstractInplace,
+  
+  initialize: function(containerQ){
+    this.container = containerQ.toElement(true);
+  },
+  
+  destroy: function(){
+    this.editor.destroy();
+    this.fireEvent('destroy');
+  },
+  
+  edit: function(editorQ){
+    this.parent(editorQ);
+    
+    if(this.container) this.editor.inject(this.container);
+    this.fireEvent('edit');
+  },
+  
+  update: function(contentQ){
+    var content = contentQ.toElements(true);
+    content.inject(this.container);
+    this.fireEvent('update');
+  }
+});
+
+
+// 
+// Dialog
+// 
+Rad.Dialog = new Class({
+  Extends: SimpleDialog,
+  Implements: [SimpleDialog.OnlyOne, Rad.DialogButtons],
+  
+  initialize: function(options){
+    options = options || {}
+    this.parent(options);
+    this.element.addClass('the_dialog');
+    this.onlyOne(this);
+    new SimpleDialog.Mask(this);
+  },
+  
+  show: function(html){
+    this.parent(html);
+    this._initializeButtons(this.element);
+  },
+  
+  submit: function(){
+    var form;
+    this.wait();
+    form = this.element.getElement('form');
+    // form can be removed only when form is posted, othervise it doesn't works with files
+    rad.submitForm(form, {}, function(){this.destroy();}.bind(this));
+  }
+});
+
+
+// 
+// Image dialog
+//  
+Rad.ImageDialog = new Class({
+  Extends: SimpleDialog.Image,
+  Implements: [SimpleDialog.Autodestroy, SimpleDialog.OnlyOne],
+  initialize: function(options){
+    options = options || {}
+    this.parent(options);
+    this.element.addClass('the_image_dialog');
+    this.onlyOne(this);
+    this.autodestroy();
+    new SimpleDialog.Mask(this);
+  }
+});
+
+
+// 
+// Context menu
+// 
+Rad.ContextMenu = new Class({
+  Extends: SimpleDialog.ContextMenu,
+  Implements: [SimpleDialog.Autodestroy, SimpleDialog.OnlyOne],
+  initialize: function(options){
+    options = options || {}
+    this.parent(options);
+    this.element.addClass('the_context_menu');
+    this.onlyOne(this);
+    this.autodestroy();
+  }
+});
+
+
+// TODO3 showVideosInDialog
+// markup.getElements('a._video').addEvent 'click', (event) ->
+//   event.stop()
+//   Slimbox.open this.get('href'), this.get('title')
+//     $.fancybox({
+//       'padding'    : 0,
+//       // 'autoScale'    : false,
+//       'transitionIn': 'none',
+//       'transitionOut': 'none',
+//       'title': this.title,
+//       // 'width'    : 680,
+//       // 'height'    : 495,
+//       'href': this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
+//       // 'href'      : "http://www.youtube.com/watch?v=M-cIjPOJdFM&amp;fs=1".replace(new RegExp("watch\\?v=", "i"), 'v/'),        
+//       'type': 'swf',
+//       'swf': {
+//         'wmode': 'transparent',
+//         'allowfullscreen'  : 'true'
+//       }
+//     });
+// 
+//     return false;
+//   });
+// });

data/app/static/face/discussion.js

@@ -0,0 +1,47 @@
+// 
+// Discussion
+// 
+Rad.Discussion = new Class({
+  anew: function(formQ){
+    this._buildInplace().edit(formQ);
+  },
+  create: function(contentQ){
+    this._buildInplace().update(contentQ);
+  },  
+  _buildInplace: function(){
+    var inplace = new Rad.AddInplace('.the_discussion .l_comments');
+    var control = '.the_discussion .l_controls'.toElements();
+    inplace.addEvents({
+      edit: control.hide.bind(control),
+      update: control.show.bind(control),
+      destroy: control.show.bind(control)
+    });
+    return inplace;
+  },
+  comment: function(commentQ){
+    return new Rad.Comment(this, commentQ);
+  }
+});
+
+
+// 
+// Comments
+// 
+Rad.Comment = new Class({
+  initialize: function(discussion, commentQ){
+    this.discussion = discussion;
+    this.comment = commentQ.toElement(true);
+  },
+  destroy: function(){
+    this.comment.destroy();
+  },
+  update: function(contentQ){
+    this._buildInplace().update(contentQ);
+  },
+  edit: function(formQ){
+    this._buildInplace().edit(formQ);
+  },
+  _buildInplace: function(){
+    return new Rad.EditInplace(this.comment);
+  },
+});

data/app/static/face/markup.js

@@ -0,0 +1,53 @@
+// 
+// Markup
+// 
+Rad.Markup = new Class({
+  initialize: function(e){
+    this.element = e;
+    this.allignImagesToLeft();
+    this.showImagesInDialog();
+  },
+  
+  // Images by default should be alligned to the left (wrapped inside .left div)
+  allignImagesToLeft: function(){
+    var images;
+    images = this.element.getElements('img');
+    // skipping images inside :div's with custom styles
+    images = images.reject(function(img){
+      var parent;
+      parent = img.getParents('div').first();
+      return (parent.get('tag') === 'div') && !parent.hasClass('m_markup');
+    });
+    images.each(function(img){
+      // wrapping image with outer link
+      img = img.getParent('a') || img;
+      (new Element('div.left')).wraps(img);
+    });
+  },
+  
+  showImagesInDialog: function(){
+    var imageUrls, links, skip_classes;
+    skip_classes = ['_nobox', '_video'];
+
+    // selecting links with images
+    links = this.element.getElements('a').filter(function(a){
+      var child, children;
+      children = a.getChildren();
+      child = children.first();
+      return (children.size() === 1) && (child.get('tag') === 'img') && skip_classes.none(function(cls){return a.hasClass(cls);});
+    });
+    imageUrls = links.map(function(link){return link.get('href');});
+    
+    // adding events
+    links.each(function(link, i){
+      link.addEvent('click', function(event){
+        var dialog;
+        event.stop();
+        dialog = new Rad.ImageDialog({
+          images: imageUrls
+        });
+        dialog.show(imageUrls[i]);
+      });
+    });
+  }
+});

data/app/static/face/more.js

@@ -0,0 +1,33 @@
+// 
+// More
+// 
+Rad.More = new Class({
+  initialize: function(element){    
+    this.element = element;
+    var id = this.element.getData('id');
+    this.core = $(id + '_core');    
+    this.more = $(id + '_more');
+    
+    if(!this.more) console.log("Rad.More: no content for '" + id + "'!"); 
+    
+    // add event to button
+    element.addEvent('click', function(event){
+      event.stop();
+      Rad.More.opened_containers[id] = true;      
+      this._show();
+    }.bind(this));
+    
+    // if opened once, keep it open in all next ajax updates
+    if(Rad.More.opened_containers[id]) this._show();
+  },
+  _show: function(){    
+    this.more.getChildren().reverse().each(function(e){
+      e.inject(this.element, 'after');
+    }.bind(this));
+    if(this.core) this.core.destroy();
+    this.more.destroy();
+    this.element.destroy();
+    window.fireEvent('updateStyle');
+  }
+});
+Rad.More.opened_containers = {};

data/app/static/face/table.js

@@ -0,0 +1,24 @@
+//
+// AJAX Table helpers
+//
+Rad.Table = new Class({
+  initialize: function(tableQ){    
+    this.table = tableQ.toElement(true);
+    if(!this.table) throw("no table '" + tableQ + "'!");
+    this.tbody = this.table.getChild('tbody');
+  },
+  anew: function(form){rad.dialog().show(form);},  
+  create: function(lineQ){lineQ.toElement(true).inject(this.tbody);},
+  edit: function(form){rad.dialog().show(form);},
+  line: function(lineQ){return new Rad.Table.Line(this, lineQ);}
+});
+
+Rad.Table.Line = new Class({
+  initialize: function(table, lineQ){
+    this.table = table;
+    this.tr = table.tbody.getChild(lineQ);
+    if(!this.tr) throw("no table row with '" + lineQ + "'!");
+  },
+  destroy: function(){this.tr.destroy();},
+  update: function(line){line.toElement(true).replaces(this.tr);}
+});

data/app/static/face/tabs.js

@@ -0,0 +1,26 @@
+// 
+// Tabs
+// 
+Rad.Tabs = new Class({
+  initialize: function(tabsQ){
+    this.element = tabsQ.toElement(true);
+    var tabs = this.element.getElements('> .l_panel .l_item');
+    var contents = this.element.getElements('> .l_content .l_item');
+    tabs.each(function(tab){
+      var link = tab.getChild('a');
+      if(link && link.getData('content_id')){
+        link.addEvent('click', function(event){
+          event.stop();
+          var tab = this.getParent('.l_item');
+          tabs.each(function(e){
+            e == tab ? e.addClass('l_active') : e.removeClass('l_active');
+          });
+          contents.each(function(e){
+            e.get('id') == this.getData('content_id') ? e.show() : e.hide();
+          }.bind(this));            
+          window.fireEvent('updateStyle');
+        });
+      };
+    });
+  }
+});

data/app/static/face.css

@@ -0,0 +1,8 @@
+/*
+rad.assets.require '/lib/rad.css'
+
+rad.assets.require '/vendor/purr/purr.css'
+rad.assets.require '/vendor/formalize/formalize.css'
+
+rad.assets.require '/lib/SimpleDialog/SimpleDialog.css'
+*/

data/app/static/face.js

@@ -0,0 +1,109 @@
+// 
+// rad.assets.require '/lib/rad.js'
+// 
+// rad.assets.require '/vendor/mootools-more.js'
+// rad.assets.require '/vendor/iFrameFormRequest.js'
+// rad.assets.require '/vendor/purr/purr.js'
+// rad.assets.require '/vendor/flext.js'
+// rad.assets.require '/vendor/formalize/mootools.formalize.js'
+// 
+// rad.assets.require '/lib/SimpleDialog/SimpleDialog.js'
+// rad.assets.require '/lib/SimpleDialog/SimpleDialog.Mask.js'
+// rad.assets.require '/lib/SimpleDialog/SimpleDialog.Image.js'
+// rad.assets.require '/lib/SimpleDialog/SimpleDialog.ContextMenu.js'
+// 
+// rad.assets.require '/lib/ajax_file_uploading.js'
+// 
+// rad.assets.require '/face/tabs.js'
+// rad.assets.require '/face/table.js'
+// rad.assets.require '/face/more.js'
+// rad.assets.require '/face/markup.js'
+// rad.assets.require '/face/dialogs.js'
+// rad.assets.require '/face/discussion.js'
+// rad.assets.require '/face/attachments.js'
+// 
+// rad.assets.require '/themes/default/style.js'
+// 
+
+Rad.implement({
+  // Table
+  table: function(tableQ){return new Rad.Table(tableQ);},
+  
+  // Messages
+  info: function(message){Rad.messages.alert(message, {'highlight': false});},
+  error: function(message){Rad.messages.alert(message, {'highlight': false, 'hideAfter': false, 'className': 'error'});},
+  
+  // Dialog
+  dialog: function(){
+    return new Rad.Dialog();
+  },
+  
+  // Inplace Editor
+  inplace: function(elementQ){
+    return new Rad.EditInplace(elementQ);
+  },
+  
+  // Context Menu
+  contextMenu: function(){
+    return new Rad.ContextMenu()
+  },
+  
+  // Discussion
+  discussion: function(){
+    return new Rad.Discussion();
+  }
+});
+
+// Messages
+Rad.messages = new Purr({'mode': 'bottom', 'position':	'right'});
+
+
+// 
+// Initializations
+// 
+window.addEvent('updated', function(){
+  // more button
+  $$('.the_more').applyOnce('the_more', function(more){new Rad.More(more)});
+  
+  // markup
+  $$('.m_markup').applyOnce('m_markup', function(e){new Rad.Markup(e)});
+  
+  // tabs
+  $$('.the_tabs').applyOnce('the_tabs', function(e){new Rad.Tabs(e)});
+  
+  // context menu
+  $$('.the_context_menu_button').applyOnce('the_context_menu_button', function(button){
+    button.addEvent('click', function(event){
+      event.stop();
+      var content = $(button.getData('content_id'));      
+      rad.contextMenu().show(event.page.x, event.page.y, content.get('html'))
+    });
+  });
+
+  // autosubmitting changes
+  $$('.m_autosubmit_on_change').applyOnce('m_autosubmit_on_change', function(e){
+    e.addEvent('change', function(){
+      rad.call(e.getData('action'), {
+        value: e.get('value'),
+        target: e.identify()
+      });
+    });
+  });
+  
+  // form attachments
+  $$('.the_attachments').applyOnce('the_attachments', function(e){new Rad.Attachments(e)});
+});
+
+window.addEvent('updateStyle', function(){
+  // Flex TextArea
+  $$('textarea').each(function(e){
+    e.addClass('flext growme maxheight-400'); 
+   new Flext(e);
+  });
+    
+  // Table
+  $$('.the_table').each(function(table){
+    table.getChildren('tbody tr').removeClass('l_even');
+    table.getChildren('tbody tr:even').addClass('l_even');
+  });
+});

data/app/static/lib/SimpleDialog/SimpleDialog.ContextMenu.js

@@ -0,0 +1,36 @@
+SimpleDialog.ContextMenu = new Class({
+  Extends: SimpleDialog,
+  
+  show: function(x, y, html){
+    this.x = x;
+    this.y = y;
+    this.parent(html); 
+  },
+  
+  // 
+  // Protected
+  // 
+  _relocate: function(){
+    // var target_x = this.event.page.x; // this.target.getPosition().x + this.target.getOuterSize().x / 2;
+    // var target_y = this.event.page.y; // this.target.getPosition().y + this.target.getOuterSize().y / 2;  
+  
+    var border_bottom = window.getScroll().y + window.getSize().y;
+    var border_right = window.getSize().x // $$('.layout_content').first().getInnerSize().x
+  
+    var offset = 0;
+    var psize = this.element.getOuterSize();
+    if((border_right - (offset * 2)) >= (this.x + psize.x)){
+      x = this.x + offset;
+    } else {
+      x = border_right - psize.x - (offset * 3);
+    }
+    
+    if((border_bottom + (offset * 2)) >= (this.y + psize.y)){
+      y = this.y + offset;
+    } else {
+      y = this.y - psize.y - offset;
+    }
+  
+    this.element.setStyles({left: x, top: y});
+  }
+});