crystal-ext 0.0.1

data/lib/common_interface/app/views/themes/simple_organization/metadata.rb

@@ -0,0 +1,193 @@
+base = "/common_interface/themes/simple_organization"
+
+m = {
+  :logo => %{<a href="/"><img src="#{base}/img/logo.gif" alt=""></a>}
+}
+
+m[:homepage_html] = <<HTML\
+<div class="col3 left">
+
+	<h2 class="decoration decoration-green">Mission Statement</h2>
+
+	<p class="quiet large">What we want to achieve</p>
+
+	<p>Vestibulum eu pellentesque ante. Sed tincidunt quam eu nisl luctus id mattis tellus rhoncus.</p>
+	<p>Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae. Donec dapibus eros vitae nibh venenatis faucibus.</p>
+	<p><a class="more" href="#">Learn more »</a></p>
+
+</div>
+
+<div class="col3-mid left">
+
+	<h2 class="decoration decoration-orange">Next Event</h2>
+
+	<p class="quiet large">Friday, August 18, 2009</p>
+
+	<p><img height="80" width="240" class="bordered" alt="" src="#{base}/img/sample-event.jpg"></p>
+	<p><em>Aliquam augue neque, rhoncus et dictum in, cursus eget mauris.</em></p>
+
+</div>
+
+<div class="col3 right">
+
+	<h2 class="decoration decoration-blue">Follow Us</h2>
+
+	<p class="quiet large">http://twitter.com/username</p>
+
+	<p>Nulla mollis sollicitudin nulla et mattis.<span class="quiet">(2 hours ago)</span></p>
+	<p>Torquent per conubia nostra, per inceptos himenaeos. <span class="quiet">(2 hours ago)</span></p>
+	<p>In sed ante at velit hendrerit blandit a et nibh. Cras sed cursus nulla. <span class="quiet">(3 hours ago)</span></p>
+	<p>Nullam vitae mi at nulla blandit. <span class="quiet">(5 hours ago)</span></p>
+
+</div>
+
+<div class="clearer">&nbsp;</div>
+
+
+
+<div class="content-separator"></div>
+
+<h2>Images in text</h2>
+
+<p>Curabitur faucibus risus quis lectus. <a href="#">Donec vehicula</a>. Pellentesque nec, lectus. Nullam dictum sem. Phasellus varius. Vestibulum in felis in mauris consequat molestie</p>
+
+<div class='left'>
+<img height="75" width="75" alt="" src="#{base}/img/sample-thumbnail.jpg">
+</div>
+
+<p>Consectetur adipiscing elit. In nisi. Duis condimentum est nec augue blandit scelerisque. Phasellus varius. Vestibulum in felis in mauris consequat molestie. Sem nec pellentesque condimentum, turpis massa ultricies nisi, at molestie justo eros ac velit.</p>
+
+<div class='right'>
+<img height="75" width="75" alt="" src="#{base}/img/sample-thumbnail.jpg">
+</div>
+
+<p>Curabitur euismod mi ac neque. Cras vel tortor molestie <a href="#">tortor luctus</a> facilisis. Nulla a nunc. Vivamus est. Integer ac sem quis ipsum dignissim sodales. Nam pulvinar sem eu nibh. Suspendisse non nulla et ligula bibendum facilisis. Suspendisse potenti. Vivamus leo.</p>
+
+<p>Nulla lacus tortor, ornare vitae, vulputate vitae, sed quis magna. Pellentesque urna urna, bibendum non, ornare in, sollicitudin quis, est.</p>
+
+<div class="clearer">&nbsp;</div>
+
+HTML
+
+m[:style_html] = <<HTML\
+<h1>Heading 1</h1>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+<h2>Heading 2</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+<h3>Heading 3</h3>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+<h4>Heading 4</h4>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+
+<div class="content-separator"></div>
+
+<h2>Images in text</h2>
+
+<img height="75" width="75" src="#{base}/img/sample-thumbnail.jpg">
+
+<p>Curabitur faucibus risus quis lectus. <a href="#">Donec vehicula</a>. Pellentesque nec, lectus. Nullam dictum sem. Phasellus varius. Vestibulum in felis in mauris consequat molestie</p>
+
+<div class="content-separator"></div>
+
+<div class='left'>
+  <img height="75" width="75" alt="" src="#{base}/img/sample-thumbnail.jpg">
+</div>
+
+<p>Consectetur adipiscing elit. In nisi. Duis condimentum est nec augue blandit scelerisque. Phasellus varius. Vestibulum in felis in mauris consequat molestie. Sem nec pellentesque condimentum, turpis massa ultricies nisi, at molestie justo eros ac velit.</p>
+
+<div class='right'>
+  <img height="75" width="75" alt="" src="#{base}/img/sample-thumbnail.jpg">
+</div>
+
+<p>Curabitur euismod mi ac neque. Cras vel tortor molestie <a href="#">tortor luctus</a> facilisis. Nulla a nunc. Vivamus est. Integer ac sem quis ipsum dignissim sodales. Nam pulvinar sem eu nibh. Suspendisse non nulla et ligula bibendum facilisis. Suspendisse potenti. Vivamus leo.</p>
+
+<p>Nulla lacus tortor, ornare vitae, vulputate vitae, sed quis magna. Pellentesque urna urna, bibendum non, ornare in, sollicitudin quis, est.</p>
+
+<div class="clearer">&nbsp;</div>
+
+<div class="content-separator"></div>
+
+<h2>Blockquote</h2>
+
+<blockquote>
+	<p>Praesent orci nisi, interdum quis, tristique vitae, consectetur sed, arcu. Ut at sapien non dolor semper sollicitudin. Etiam semper erat quis odio. Quisque commodo suscipit velit. Nulla facilisi.</p>
+	<p><cite>- Duis justo quam</cite></p>
+</blockquote>
+
+<div class="content-separator"></div>
+
+<h2>Lists</h2>
+
+<h3>Unsorted list</h3>
+<ul>
+	<li>Blandit in, interdum a</li>
+	<li>Ultrices non lectus</li>
+	<li>Nunc id odio</li>
+	<li>Fusce ultricies</li>
+</ul>
+
+<h3>Ordered list</h3>
+<ol>
+	<li>Blandit in, interdum a</li>
+	<li>Ultrices non lectus</li>
+	<li>Nunc id odio</li>
+	<li>Fusce ultricies</li>
+</ol>
+
+<h3>Definition list</h3>
+
+<dl>
+	<dt>title</dt>
+	<dd>definition</dd>
+	<dd>definition</dd>
+	<dt>title</dt>
+	<dt>title</dt>
+	<dd>definition</dd>
+	<dt>title</dt>
+	<dd>definition</dd>
+</dl>
+
+<div class="content-separator"></div>
+
+<h2>Tables</h2>
+
+<h3>Data table</h3>
+
+<table class="data-table">
+	<tbody><tr>
+		<th>Property 1</th>
+		<th>Property 2</th>
+		<th>Property 3</th>
+		<th>Property 4</th>
+	</tr>
+	<tr class="even">
+		<td>Value 1.1</td>
+		<td>Value 1.2</td>
+		<td>Value 1.3</td>
+		<td>Value 1.4</td>
+	</tr>
+	<tr>
+		<td>Value 2.1</td>
+		<td>Value 2.2</td>
+		<td>Value 2.3</td>
+		<td>Value 2.4</td>
+	</tr>
+	<tr class="even">
+		<td>Value 3.1</td>
+		<td>Value 3.2</td>
+		<td>Value 3.3</td>
+		<td>Value 3.4</td>
+	</tr>
+	<tr>
+		<td>Value 4.1</td>
+		<td>Value 4.2</td>
+		<td>Value 4.3</td>
+		<td>Value 4.4</td>
+	</tr>
+</tbody></table>
+HTML
+
+m

data/lib/common_interface/asset_packages.yml

@@ -0,0 +1,89 @@
+--- 
+javascripts:
+  common_interface_base:
+  # Core
+  - common_interface/lib/jquery.js
+  - common_interface/lib/jquery.json.js
+  - common_interface/lib/jquery.hoverIntent.js
+  - common_interface/lib/jquery.template.js
+  - common_interface/lib/jquery.jgrowl/jquery.jgrowl.js
+  - common_interface/lib/jquery.form.js
+  
+  - /rails_ext/rails_ext.js
+  
+  - common_interface/js/basic.js
+  - common_interface/js/items.js
+  - common_interface/js/aspects.js
+  - common_interface/js/style.js
+  
+  #
+  # Files Upload, TODO3 (load it dynamically)
+  # using $.getScript("/some_script.js");
+  # - files_upload: 
+  - common_interface/lib/jquery.swfupload/swfupload/swfupload.js
+  - common_interface/lib/jquery.swfupload/swfupload/swfupload.queue.js
+  - common_interface/lib/jquery.swfupload/jquery.swfupload.js
+  - common_interface/js/files_upload.js  
+  
+  # Images, Slides
+  - common_interface/lib/jquery.fancybox/jquery.fancybox.js
+  
+  # Interactions
+  - common_interface/lib/jquery.ui/jquery.ui.js
+  
+  # Elastic TextArea
+  - common_interface/lib/jquery.elastic.js
+  
+  # Default theme
+  - common_interface/themes/default/elastic.js
+  - common_interface/themes/default/style.js
+  
+
+stylesheets:
+  common_interface_base:
+  # CSS Reset
+  - common_interface/themes/default/reset.css
+  
+  # Default theme
+  - common_interface/themes/default/style.css
+   
+  # Core
+  - common_interface/lib/jquery.jgrowl/jquery.jgrowl.css
+  
+  - /rails_ext/rails_ext.css
+  
+  #
+  # Files Upload, TODO3 (load it dynamically)
+  # - files_upload: 
+  - common_interface/lib/jquery.swfupload/style.css
+  
+  # Images, Slides
+  - common_interface/lib/jquery.fancybox/jquery.fancybox.css
+  
+  # Interactions
+  - common_interface/lib/jquery.ui/jquery.ui.css
+  
+  
+  # 
+  # Mixin, for usage in incomplete themes, to support default theme partials.
+  # The same as common_interface_base but without global 'reset.css'
+  # 
+  common_interface_base_mixin: 
+  # Default theme
+  - common_interface/themes/default/style.css
+   
+  # Core
+  - common_interface/lib/jquery.jgrowl/jquery.jgrowl.css
+  
+  - /rails_ext/rails_ext.css
+  
+  #
+  # Files Upload, TODO3 (load it dynamically)
+  # - files_upload: 
+  - common_interface/lib/jquery.swfupload/style.css
+  
+  # Images, Slides
+  - common_interface/lib/jquery.fancybox/jquery.fancybox.css
+  
+  # Interactions
+  - common_interface/lib/jquery.ui/jquery.ui.css

data/lib/common_interface/init.rb

@@ -0,0 +1,21 @@
+require 'abstract_interface'
+
+AbstractInterface.available_themes.push *%w{default simple_organization}
+# AVAILABLE_LAYOUT_TEMPLATES = %w{default home dashboard}
+
+# ['basic/dialog', 'basic/popup'].each{|t| AbstractInterface.dont_wrap_into_placeholder.add t}
+
+AbstractInterface.plugin_name = 'common_interface'
+
+AbstractInterface.generate_helper_methods \
+  :aspects => %w{discussion comment controls details paginator tag_selector},
+  :basic => %w{bottom_panel dialog divider inplace message more narrow navigation navigation_item popup text title top_panel tool},
+  :components => %w{basic_list basic_list_item table table_row tabs tabs_item toolbar},
+  :items => %w{folder list list_item note page user thumb line file selector}
+
+ActionController::Base.class_eval do
+  helper CommonInterfaceHelper
+end
+
+dir = File.dirname __FILE__
+AssetPackager.add "#{dir}/asset_packages.yml", "#{dir}/public"

data/lib/common_interface/lib/common_interface_helper.rb

@@ -0,0 +1,49 @@
+module CommonInterfaceHelper
+  # 
+  # Form Buttons
+  # 
+  def ok_button text = t(:ok)
+    submit_tag text, :class => '_submit_form_or_ajax_form'
+  end
+
+  def cancel_button text = t(:cancel)
+    link_to text, :back, :class => '_redirect_back_or_close_dialog'
+  end
+
+  # 
+  # Custom
+  # 
+  def tag_cloud tags, classes, &block
+    return if tags.empty?
+    
+    max_count = tags.sort{|a, b| a.count <=> b.count}.last.count.to_f
+    
+    tags.sort{|a, b| a.name <=> b.name}.each do |tag|
+      index = ((tag.count / max_count) * (classes.size - 1)).round
+      block.call tag, classes[index]
+    end
+  end
+  
+  
+  # 
+  # Folder
+  # 
+  # params = {
+  #   :l => I18n.locale,
+  # }
+  # 
+  # opt = {
+  #   :upload_url => item_files_path(folder),
+  #   :view => 'folder_thumb',
+  #   :select_files => t(:select_files),
+  # }
+  def build_files_uploader_for params, opt
+    session_key = ActionController::Base.session_options[:key]
+  
+    params = {
+      session_key => cookies[session_key]
+    }.merge(params)
+  
+    "new FilesUpload(#{params.to_json}, #{opt.to_json});"    
+  end
+end

data/lib/common_interface/public/common_interface/js/basic.js

@@ -0,0 +1,229 @@
+// requirements
+railsExt;
+
+// 
+// More
+// 
+$._opened_more_containers = {};
+$.callOnceForEvery('more', '._more', function(){
+	var more = $(this);
+	var button = more.find('._button:first');
+	var content = more.find('._content:first');
+
+	// more button
+	button.click(function(){
+		$._opened_more_containers[more.attr('id')] = true;
+		more.replaceWith(content.contents()); 
+		$.processInitializers();
+		return false
+	});
+	
+	// if opened once, keep it open in all next ajax updates	
+	if($._opened_more_containers[more.attr('id')]){
+		more.replaceWith(content.contents()); 
+		$.processInitializers();
+	};
+});
+
+// 
+// Messages
+// 
+$.jGrowl.defaults.position = 'bottom-right'
+$.extend({
+	infoMessage: function(message){
+		this.jGrowl(message);
+	},
+	
+	errorMessage: function(message){
+		this.jGrowl(message);
+	}
+});
+
+
+// 
+// Inplace Editor
+// 
+$.callOnceForEvery('inplace', '._inplace', function() {
+	var inplace = $(this);
+	var id = inplace.dataAttr('original_id');
+	if(!id) warn("inplace original_id isn't defined!");
+	
+	// Universal Cancel Button (for General and AJAX forms)
+	inplace.find('._redirect_back_or_close_dialog').click(function(){				
+		inplace.remove();
+		$('#' + id).show();
+		$.processInitializers();
+		return false;
+	});
+
+	// Universal Submit Button (for General and AJAX forms)
+	inplace.find('._submit_form_or_ajax_form').click(function(){
+		var form = inplace.find('form');
+		
+		var data = {
+			format: 'js',
+			target: $(this).identify(),
+		};
+		
+		// Calculating index inside container (only if it's inside container)
+		if(!inplace.parents('._container').blank()){
+			var container = inplace.parents('._container').first();
+			var list = container.find('> ._item, #' + inplace.identify());
+			var index = list.index(inplace);
+			data['index'] = index;
+		}
+
+		form.ajaxSubmit({data: data, dataType: 'script'});
+		
+		return false;
+	});
+});
+
+$.fn.extend({
+	add_inplace: function(container, html, add_method){		
+		var target = $(this).parents('._inplace_target');
+		if(!target.blank()){
+			target.after(html);
+		}else{						
+			// if($(container + ' ._inplace._new_inplace').blank()) {
+			// var inplace = $(html).addClass('_new_inplace');
+			var inplace = $(html);
+			var container = $(container);
+			add_method = add_method || 'append';
+			container[add_method](inplace);
+			// }
+		}
+	},
+	
+	edit_inplace: function(id, html){
+		var inplace = $(html);
+		inplace.dataAttr('original_id', id);
+		
+		var original = $('#' + id);
+		original.hide();
+		
+		var previous_inplace = $(this).parents('._inplace');
+		if(!previous_inplace.blank()){
+			previous_inplace.replaceWith(inplace);
+		}else{
+			original.after(inplace);
+		}		
+	}, 
+	
+	update_inplace: function(id, html){
+		var original = $('#' + id);
+		original.remove();
+		
+		var previous_inplace = $(this).parents('._inplace');
+		previous_inplace.replaceWith(html);
+	}
+});
+
+
+// 
+// Dialog
+// 
+$.callOnceForEvery('dialog', '._dialog', function() {
+	// Universal Form Cancel Button (for General and AJAX forms)
+	var dialog = $(this);
+	dialog.find('._redirect_back_or_close_dialog').click(function(){
+		dialog.remove();
+		return false;
+	});
+
+	// Universal Submit Button (for General and AJAX forms)
+	dialog.find('._submit_form_or_ajax_form').click(function(){
+		dialog.hide();
+		
+		var form = dialog.find('form');		
+		form.ajaxSubmit({
+			data: {
+				format: 'js'
+			}, 
+			dataType: 'script',
+			success: function(){
+				dialog.remove(); // can be removed only when form is posted, othervise it doesn't works with files
+			}
+		});
+		
+		return false;
+	});
+
+	// Center dialog
+	var winH = $(window).height();  
+	var winW = $(window).width();  
+	var scroll_top = $(window).scrollTop();
+	var layoutW = $('._layout_content').width();  
+	dialog.css('top',  winH/3 + scroll_top - dialog.height()/2);  
+	dialog.css('left', layoutW/2 - dialog.width()/2);
+	// More about cool modal dialog: http://www.queness.com/post/77/simple-jquery-modal-window-tutorial
+});
+
+$.fn.extend({
+	showDialog: function(dialogHtml){		
+		$('._dialog').remove();
+		$('._main').append(dialogHtml);
+		
+		$.refresh_js_css();
+	}
+});
+
+// 
+// Popup
+// 
+$.callOnceForEvery('popup', 'body', function() {
+	$(this).click(function(){
+		$('._active_popup').remove();
+	});
+});
+
+// Embedded popup (popup without AJAX)
+$.callOnceForEvery('embedded_popup', '._embedded_popup', function() {
+	var e = $(this);
+	e.click(function(){
+		var content = $("#" + e.dataAttr('content_id'));		
+		e.showPopup(content.html());
+		return false;
+	});
+});
+
+// showPopup
+$.fn.extend({
+	showPopup: function(popupHtml){
+		if(popupHtml.blank()){
+			log("Content for PopUp is blank!");
+			return;
+		}
+		
+		$('._active_popup').remove();		
+		var popup = $(popupHtml) 
+		popup.addClass('_active_popup');
+		$('._main').append(popup);
+				
+		$.refresh_js_css();
+		
+		// Positioning
+		var layout_content = $('._layout_content');
+		
+		var left = $(this).offset().left + this.width() / 2;
+		var top = $(this).offset().top + this.height() / 2;
+		
+		var border_bottom = $(window).scrollTop() + $(window).height();
+		var border_right = layout_content.width();
+		var left_pos, top_pos;
+		var offset = 5;
+		if(border_right - (offset * 2) >= left + popup.width()){
+			left_pos = left + offset;
+		}else{
+			left_pos = border_right - popup.width() - (offset * 3);
+		}
+		
+		if(border_bottom + (offset * 2) >= top + popup.height()){
+			top_pos = top + offset;
+		}else{
+			top_pos = top - popup.height() - offset;
+		}	
+		
+		popup.css({left:left_pos, top:top_pos});		
+	}
+});