rad_common_interface 0.0.6 → 0.0.7

data/app/static/themes/default/style.js

@@ -0,0 +1,127 @@
+// // 
+// // Css
+// // 
+// css.add({
+//   // App layout
+//   // '.the_aspects':        {autoWidth: '.the_tools'},
+//   // '.the_content':        {autoWidth: '.the_tools'},
+//   // '.the_bottom_panel':   {clear:     'before'},  
+// });
+// (function(){
+//   // max-width  
+//   var maxWidth = 1024;
+//   var increaseProperty = function(e, style, value){e.setStyle(style, e.getStyle(style).toInt() + value);};
+//   var updateMargin = function(diff){    
+//     // aspects, content, tools
+//     var left = $$('.the_content, .the_aspects');
+//     var right = $$('.the_tools');
+//     if(right.blank()) right = left;
+//     left.each(function(e){increaseProperty(e, 'margin-left', diff)});
+//     right.each(function(e){increaseProperty(e, 'margin-right', diff)});
+// 
+//     // panels
+//     $$('.the_top_panel .l_left, .the_bottom_panel .l_left, .the_navigation').each(
+//       function(e){increaseProperty(e, 'margin-left', diff)}
+//     );
+//     $$('.the_top_panel .l_right, .the_bottom_panel .l_right').each(
+//       function(e){increaseProperty(e, 'margin-right', diff)}
+//     );
+//   };  
+//   
+//   css.customCss = function(){
+//     // show tools
+//     $$('.the_top_panel, .the_bottom_panel, .the_navigation, .the_tools, .the_aspects').show();
+//     
+//     // max-width      
+//     var previousDiff = window.retrieve('previousDiff') || 0;
+//     var diff = ((window.getSize().x - maxWidth) / 2).toInt();
+//     var diff = diff < 0 ? 0 : diff;    
+//     diff = diff - previousDiff;    
+//     if((diff + previousDiff) >= 0){
+//       p(diff)
+//       window.store('previousDiff', diff + previousDiff);
+//       updateMargin(diff);
+//     };
+// 
+// 
+//     // // hack for top & bottom panels outside background
+//     // (function(){
+//     //   (['the_top_panel', 'the_bottom_panel']).each(function(name){
+//     //     var hack_class = name + '_hack';
+//     //     var panel = $$('.' + name).first();
+//     //     var hack = $$('body > .' + hack_class).first();
+//     //     if(panel){        
+//     //       if(!hack){
+//     //         hack = new Element('div', {'class': hack_class});
+//     //         hack.inject(document.body);
+//     //       }
+//     //       hack.setStyles({'height': panel.getSize().y, 'top': panel.getPosition().y});
+//     //     }else if (hack){
+//     //       hack.destroy();
+//     //     }
+//     //   });
+//     // }.delay(10));
+//   };
+// })();
+// 
+// window.addEvent('updateStyle', function(){
+//   css.removeClearfixes();
+//   css.customCss();
+//   css.addClearfixes();
+//   css.updateCss();  
+// });
+
+
+// 
+// Initializers
+// 
+window.addEvent('updateStyle', function(){  
+  // Discussion
+	var discussion = $$('.the_discussion').first();
+	if(discussion && discussion.getElement('.the_comment')){
+		var divider = discussion.getElement('.the_divider')
+		if(divider) divider.show();
+	};
+	
+  // Hover Controls
+	$$('.m_hover_controls').applyOnce('m_hover_controls', function(e){
+	  var parent = e.getParent();
+	  parent.setStyle('position', 'relative');
+		parent.hover(
+			function(){e.show()},
+			function(){e.hide()}
+		);
+	});
+		
+  // Border around Items
+  $$('.m_selectable').applyOnce('m_selectable', function(e){
+    e.hover(
+       function(){this.addClass('m_selectable_hover')},
+       function(){this.removeClass('m_selectable_hover')}
+     );
+  }); 
+    
+  // Development only
+  // $$('*').each(function(e){
+  //   if(e.classNames().any(function(c){return c.match(/the_/)})){
+  //     e.addClass('dev_border');
+  //   };
+  // });
+});
+
+// // 
+// // Folder
+// //
+// // Empty title
+// $.addOnceForElementEvent('update', 'empty_folder_title', '.folder', function(){
+// 	$(this).hover(
+// 		function(){
+// 			$(this).find('> .empty_title').show()
+// 		},
+// 		function(){
+// 			$(this).find('> .empty_title').hide()
+// 		}
+// 	);
+// });
+// 
+// 

data/app/static/themes/default/style.less

@@ -0,0 +1,22 @@
+/*
+Naming convention:
+- global styles have 'the' prefix
+- local styles have 'l' (local) prefix
+- mixins have 'm' (mixin) prefix
+
+- internal structural mixins have 't' (template) prefix
+- internal style mixins have 's' (style) prefix
+*/
+
+@import "style/variables";
+@import "style/styles";
+@import "style/mixins";
+
+@import "style/markup";
+@import "style/application";
+@import "style/aspects";
+@import "style/basic";
+@import "style/micelaneous";
+@import "style/forms";
+@import "style/items"; 
+@import "style/tools";

data/app/static/vendor/flext.js

@@ -0,0 +1,254 @@
+/*
+* Flext - A Mootools Based Flexible TextArea Class
+* version 1.1 - for mootools 1.2
+* by Graham McNicoll
+* 
+* Copyright 2008-2009 - Education.com
+* License:	MIT-style license.
+*
+* Features:
+*  - Grows text areas when needed
+*  - Can set a max height to grow to
+*  - Grows parents if they have a fixed height
+*  - Ghost text replacement
+*  - Text input emulation (enter can submit form, instead of new line)
+*
+* Usage:
+*
+*  include the source somewhere on your page. Textareas must have the class name: 'flext' 
+*  for the class to watch them. Use additional class names to trigger features.
+* 
+*   'growme' -  grow the text area
+*   'maxheight-[num]' - the max height to grow in pixels (replaces [num] )
+*   'stopenter' - stop the enter key
+*   'entersubmits' - submit the form when enter is pressed
+*   'replaceghosttext' - tries to use the ghosted text features
+*   'growparents' - grow the parent elements if needed
+*
+*  if replaceghosttext is on, then you need to add two more attributes to the textarea. 
+*  'ghosttext' contains a copy of the original ghost text (needed for matching initial conditions),
+*  and 'ghostclass' which contains a class name to remove when the ghosting is removed (which 
+*  is used to remove ghosting color).
+* 
+* Examples: 
+*
+*  A simple growing text area: -
+*
+*    <textarea name='mytext' class='flext growme maxheight-200' ></textarea>
+*
+*   It will find this text area by the class name, 'flext', and the 'growme' 
+*   class will tell it to grow until the max size, as given by the 'maxheight-[num]' 
+*   class (integer, in pixels).
+*
+*  Textarea which will grow the parent elements (if needed) -
+* 
+*    <textarea name='mytext' class='flext growme growparents maxheight-200' ></textarea>
+*
+*   This is the same as above, except it will also grow any parent elements which 
+*   have fixed heights when the textarea expands ('growparents').
+*
+*
+* Adv. example:
+* 
+*  <textarea name='mytext' class='flext growme stopenter entersubmits replaceghosttext ghost-text growparents maxheight-60' ghosttext='enter something here' ghostclass='ghost-text'>
+*    enter something here
+* </textarea>
+*
+*   This example not only grows, but simulates a text input, in that 'enter' 
+*   will not be passed to the textarea ('stopenter') instead it will submit 
+*   the form ('entersubmits'). It also has ghosted text replacement and class 
+*   changing. When this textarea receives focus, it will remove the default 
+*   text (ghosttext property), and remove the class as specified by the 
+*   ghostclass property. Use of these features as currently coded requires
+*   non valid xhtml, so dont use it if you require valid markup. (its on my list to fix)
+* 
+*  You can also instantiate this class manually, by leaving off the 'flext' class from 
+*  any textareas, and instantiate a new class usual with the first variable being the 
+*  textarea element, and the second the options object.
+*/
+
+
+
+var Flext = new Class({
+	Implements: Options,
+	options: {
+		aniTime: 300, 					//int (ms) - grow animation time
+		maxHeight: 0,					//int (pixels) - one way to set a max height, if you dont set it via the class.
+		defaultMaxHeight: 1000,			//int (pixels) - if not otherwise set, this is the max height
+		parentDepth: 6,				//int - how many levels up should to check the parent el's height.
+		//trigger classes:
+		growClass: 'growme',					//string (class name)- grow the text area
+		enterStoppedClass: 'stopenter',			//string (class name)- stop the enter key
+		enterSubmitsClass: 'entersubmits',			//string (class name)- submit the form when enter is pressed
+		replaceGhostTextClass: 'replaceghosttext',	//string (class name)- tries to use the ghosted text features
+		growParentsClass: 'growparents',			//string (class name)- grow the parent elements if needed
+		//other attributes:
+		ghostTextAttr: 'ghosttext',
+		ghostClassAttr: 'ghostclass'
+	},
+	initialize: function(el, options) {
+		this.setOptions(options);
+		
+		this.el = document.id(el); //the textarea element.
+		
+		//by default, we will do nothing to the text area unless it has the class...
+		this.autoGrow = el.hasClass(this.options.growClass);
+		this.stopEnter = el.hasClass(this.options.enterStoppedClass);
+		this.enterSubmits = el.hasClass(this.options.enterSubmitsClass);
+		this.useGhostText = el.hasClass(this.options.replaceGhostTextClass);
+		this.growParents = el.hasClass(this.options.growParentsClass);
+		
+		//initialize, and add events:
+		if(this.autoGrow) {
+			this.resizer = new Fx.Tween(this.el, {duration: this.options.aniTime});
+			this.getMaxSize();
+			this.reachedMax = false;
+			this.startSize = this.origSize = this.el.getSize().y;
+			this.vertPadding = this.el.getStyle('padding-top').toInt()+this.el.getStyle('padding-bottom').toInt()+this.el.getStyle('border-top').toInt()+this.el.getStyle('border-bottom').toInt();
+			this.el.setStyle('overflow', 'hidden');
+			this.el.addEvents({
+				'keyup': function(e) {
+					this.checkSize(e);
+				}.bind(this),
+				'change': function(e) {
+					this.checkSize(e);
+				}.bind(this),
+				'click': function(e) {
+					this.checkSize(e);
+				}.bind(this)
+			});
+		
+			//get inital state:
+			this.checkSize();
+		}
+		//watch this text area: keydown
+		if(this.stopEnter) {
+			this.el.addEvent('keydown', function(e) {
+				if(e.key == 'enter') {
+					e.stop();
+					if(this.enterSubmits) {
+						this.submitForm();
+					}
+				}
+			}.bind(this));
+		}
+		//replace ghost text:
+		if(this.useGhostText) {
+			this.ghostText = this.el.get(this.options.ghostTextAttr);
+			this.ghostClass = this.el.get(this.options.ghostClassAttr);
+			if(this.ghostText) {
+				//initial states: if populated with something else, remove the class:
+				if(this.el.value != this.ghostText) {
+					this.el.removeClass(this.ghostClass);
+				}
+				//add events to watch for ghosting:
+				this.el.addEvents({
+					//remove the ghosted text when the text area receives focus
+					'focus': function(e) {
+						if(this.el.value == this.ghostText) {
+							this.el.set('value', '');
+							if(this.ghostClass) {
+								this.el.removeClass(this.ghostClass);
+							}
+						}
+					}.bind(this),
+					//put the ghost text back if blur'ed and its empty
+					'blur': function(e) {
+						if(this.el.value == '') {
+							this.el.set('value', this.ghostText);
+							if(this.ghostClass) {
+								this.el.addClass(this.ghostClass);
+							}
+						}
+					}.bind(this)
+				});
+			}
+		}
+		
+	},
+	getMaxSize: function() {
+		this.maxSize = this.options.maxHeight;
+		if(this.maxSize == 0) {
+			var testmax = this.el.className.match(/maxheight-(\d*)/);
+			if(testmax) {
+				this.maxSize = testmax[1];
+			}
+			else {
+				this.maxSize = this.options.defaultMaxHeight; //if one forgets to set a max height via options or class, use a reasonable number.
+			}
+		}
+	},
+	checkSize: function(e) {
+		var theSize = this.el.getSize();
+		var theScrollSize = this.el.getScrollSize();
+		if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { var checksize = (theScrollSize.y); }
+		else var checksize = (theScrollSize.y+this.vertPadding);
+		
+		if(checksize > theSize.y) {
+			//we are scrolling, so grow:
+			this.resizeIt(theSize, theScrollSize);
+		}
+	},
+	resizeIt: function(theSize, scrollSize) {
+		var newSize = scrollSize.y;
+		if((scrollSize.y+this.vertPadding) > this.maxSize && !this.reachedMax) {
+			//we've reached the max size, grow to max size and make textarea scrollable again:
+			newSize = this.maxSize;
+			this.el.setStyle('overflow', '');
+			this.resizer.start('height', newSize);
+			if(this.growParents) {
+				var increasedSize = newSize - this.startSize;
+				this.resizeParents(this.el, 0, increasedSize);
+			}
+			//remember that we've reached the max size:
+			this.reachedMax = true;
+		}
+		if(!this.reachedMax) {
+			//grow the text area:
+			var increasedSize = newSize - this.startSize;
+			if(increasedSize < 0) increasedSize = 0;
+			this.startSize = newSize;
+			this.resizer.start('height', newSize);
+			//resize parent objects if needed:
+			if(this.growParents) {
+				this.resizeParents(this.el, 0, increasedSize);
+			}
+		}
+	}, 
+	resizeParents: function(el, num, incSize) {
+		if(num < this.options.parentDepth) {
+			var newel = el.getParent();
+			if(newel) {
+				if(newel.style.height && newel.style.height != '' ) {
+					if(newel.retrieve('flextAdjusted')) {
+						var newheight = (newel.getStyle('height').toInt()+incSize);
+					} else {
+						newel.store('flextAdjusted', true); //when resizing parents, the first time we enlarge them we have to include vertical padding
+						var newheight = (newel.getStyle('height').toInt()+incSize+this.vertPadding);
+					}
+					newel.setStyle('height', newheight);
+				}
+				return this.resizeParents(newel, (num+1), incSize);
+			}
+			return true;
+		} else {
+			return true;
+		}
+	},
+	submitForm: function() {
+		var thisForm = this.el.getParent('form');
+		if(thisForm) {
+			var formName = thisForm.get('name');
+			document[formName].submit();
+			
+		}
+	}
+});
+
+
+//watch the text areas:
+window.addEvent('domready', function() {
+	$$('textarea.flext').each(function(el, i) {
+		new Flext(el); 
+	});
+});

data/app/static/vendor/formalize/formalize.css

@@ -0,0 +1,311 @@
+/* `Widths
+----------------------------------------------------------------------------------------------------*/
+
+.input_tiny {
+  width: 50px;
+}
+
+.input_small {
+  width: 100px;
+}
+
+.input_medium {
+  width: 150px;
+}
+
+.input_large {
+  width: 200px;
+}
+
+.input_xlarge {
+  width: 250px;
+}
+
+.input_xxlarge {
+  width: 300px;
+}
+
+.input_full {
+  width: 100%;
+}
+
+/*
+  Added via JS to <textarea> and class="input_full".
+  Applies only to IE7. Other browsers don't need it.
+*/
+.input_full_wrap {
+  display: block;
+  padding-right: 8px;
+}
+
+/* `UI Consistency
+----------------------------------------------------------------------------------------------------*/
+
+::-moz-focus-inner {
+  border: 0;
+}
+
+input[type="search"]::-webkit-search-decoration {
+  display: none;
+}
+
+input,
+button,
+select,
+textarea {
+  -moz-background-clip: padding;
+  -webkit-background-clip: padding;
+  background-clip: padding-box;
+  margin: 0;
+  vertical-align: middle;
+}
+
+button,
+input[type="reset"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  -moz-border-radius: 11px;
+  -webkit-border-radius: 11px;
+  border-radius: 11px;
+  background: #ddd url(../images/button.png) repeat-x;
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #ddd));
+  background: -moz-linear-gradient(top center, #fff 0%, #ddd 100%);
+  border: 1px solid;
+  border-color: #ddd #bbb #999;
+  cursor: pointer;
+  color: #333;
+  font: bold 12px/1.2 Arial, sans-serif;
+  outline: 0;
+  overflow: visible;
+  padding: 3px 10px 4px;
+  text-shadow: #fff 0 1px 1px;
+  width: auto;
+
+  /* IE7 */
+  *padding-top: 2px;
+  *padding-bottom: 0px;
+}
+
+button {
+  /* IE7 */
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+
+textarea,
+select,
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="password"],
+input[type="search"],
+input[type="tel"],
+input[type="text"],
+input[type="time"],
+input[type="url"],
+input[type="week"] {
+  -webkit-appearance: none;
+  -moz-border-radius: 0;
+  -webkit-border-radius: 0;
+  border-radius: 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: #000;
+  outline: 0;
+  padding: 2px 3px;
+  font-size: 13px;
+  font-family: Arial, sans-serif;
+  height: 1.8em;
+
+  /* IE7 */
+  *padding-top: 2px;
+  *padding-bottom: 1px;
+  *height: auto;
+}
+
+/*
+  Separate rule for Firefox.
+  Cannot stack with WebKit's.
+*/
+input.placeholder_text,
+textarea.placeholder_text,
+input:-moz-placeholder,
+textarea:-moz-placeholder {
+  color: #888;
+}
+
+::-webkit-input-placeholder {
+  color: #888;
+}
+
+button:focus,
+button:active,
+input:focus,
+input:active,
+select:focus,
+select:active,
+textarea:focus,
+textarea:active {
+  -moz-box-shadow: #06f 0 0 7px;
+  -webkit-box-shadow: #06f 0 0 7px;
+  box-shadow: #06f 0 0 7px;
+
+  /* for Opera */
+  z-index: 1;
+}
+
+input[type="file"]:focus,
+input[type="file"]:active,
+input[type="radio"]:focus,
+input[type="radio"]:active,
+input[type="checkbox"]:focus,
+input[type="checkbox"]:active {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+
+select[disabled],
+textarea[disabled],
+input[type="date"][disabled],
+input[type="datetime"][disabled],
+input[type="datetime-local"][disabled],
+input[type="email"][disabled],
+input[type="month"][disabled],
+input[type="number"][disabled],
+input[type="password"][disabled],
+input[type="search"][disabled],
+input[type="tel"][disabled],
+input[type="text"][disabled],
+input[type="time"][disabled],
+input[type="url"][disabled],
+input[type="week"][disabled] {
+  background-color: #eee;
+}
+
+button[disabled],
+input[disabled],
+select[disabled],
+select[disabled] option,
+select[disabled] optgroup,
+textarea[disabled] {
+  -moz-box-shadow: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  color: #888;
+  cursor: default;
+}
+
+.is_webkit select {
+  /* Tweaks for Safari + Chrome. */
+/*  background-image: url(../images/select_arrow.gif);*/
+  background-repeat: no-repeat;
+  background-position: right center;
+  padding-right: 20px;
+}
+
+textarea,
+select[size],
+select[multiple] {
+  height: auto;
+}
+
+.is_webkit select[size],
+.is_webkit select[multiple] {
+  background-image: none;
+  padding: 0;
+}
+
+textarea {
+  min-height: 40px;
+  overflow: auto;
+  resize: vertical;
+  width: 100%;
+}
+
+optgroup {
+  color: #000;
+  font-style: normal;
+  font-weight: normal;
+}
+
+/* `IE6
+----------------------------------------------------------------------------------------------------*/
+
+/*
+  Everything below this line is for IE6.
+  Delete it if you don't support it! :)
+
+  Classes are added dynamically via JS,
+  because IE6 doesn't support attribute
+  selectors: .ie6_button, .ie6_input, etc.
+
+  Note: These style rules are somewhat
+  duplicated because IE6 bombs out when
+  it sees attribute selectors. Example:
+
+  .ie6_button {
+    This works in IE6.
+  }
+
+  .ie6_button,
+  input[type=submit] {
+    This doesn't work.
+  }
+*/
+
+.ie6_button,
+* html button {
+  background: #ddd url(../images/button.png) repeat-x;
+  border: 1px solid;
+  border-color: #ddd #bbb #999;
+  cursor: pointer;
+  color: #333;
+  font: bold 12px/1.2 Arial, sans-serif;
+  padding: 2px 10px 0px;
+  overflow: visible;
+  width: auto;
+}
+
+* html button {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+
+.ie6_input,
+* html textarea,
+* html select {
+  background: #fff;
+  border: 1px solid;
+  border-color: #848484 #c1c1c1 #e1e1e1;
+  color: #000;
+  padding: 2px 3px 1px;
+  font-size: 13px;
+  font-family: Arial, sans-serif;
+  vertical-align: top;
+}
+
+* html select {
+  margin-top: 1px;
+}
+
+.placeholder_text,
+.ie6_input_disabled,
+.ie6_button_disabled {
+  color: #888;
+}
+
+.ie6_input_disabled {
+  background: #eee;
+}