common-interface 0.0.3

data/Rakefile

@@ -0,0 +1,66 @@
+require 'rake'
+require 'spec/rake/spectask'
+
+Dir.chdir File.dirname(__FILE__)	
+
+# Specs
+task :default => :spec
+
+Spec::Rake::SpecTask.new('spec') do |t|
+	t.spec_files = FileList["spec/**/*_spec.rb"].select{|f| f !~ /\/_/}
+  t.libs = ['lib'].collect{|f| "#{File.dirname __FILE__}/#{f}"}
+end
+
+# Gem
+require 'rake/clean'
+require 'rake/gempackagetask'
+require 'fileutils'
+
+spec = Gem::Specification.new do |s|
+	s.name = "common-interface"
+	s.version = "0.0.3" 
+	s.summary = "Rapid Web Interface Creation for the Crystal framework"
+	s.description = "Rapid Web Interface Creation for the Crystal framework"
+	s.author = "Alexey Petrushin"
+	#	s.email = ""
+	s.homepage = "http://github.com/alexeypetrushin/common-interface"
+  
+	s.platform = Gem::Platform::RUBY
+  s.has_rdoc = true
+  # s.extra_rdoc_files = ["README.rdoc"]
+	
+  # s.files = (%w{rakefile readme.md .gitignore} + Dir.glob("{app,lib,spec,.git}/**/*"))
+  s.files = (['Rakefile', 'readme.md'] + Dir.glob("{lib,spec}/**/*"))
+	
+	s.require_paths = ["lib"]
+
+  [
+    'abstract-interface',
+  ].each{|name| s.add_dependency(name)}
+
+end
+
+PACKAGE_DIR = "#{File.expand_path File.dirname(__FILE__)}/build"
+
+Rake::GemPackageTask.new(spec) do |p|
+	package_dir = PACKAGE_DIR
+#	FileUtils.mkdir package_dir unless File.exist? package_dir	
+	p.need_tar = true if RUBY_PLATFORM !~ /mswin/
+	p.need_zip = true
+	p.package_dir = package_dir
+end
+
+# CLEAN.include [ 'pkg', '*.gem']
+
+task :push do
+  dir = Dir.chdir PACKAGE_DIR do
+    gem_file = Dir.glob("common-interface*.gem").first
+    system "gem push #{gem_file}"
+  end
+end
+
+task :clean do
+  system "rm -r #{PACKAGE_DIR}"
+end
+
+task :release => [:gem, :push, :clean]

data/lib/common_interface.rb

@@ -0,0 +1,39 @@
+require 'abstract_interface'
+require 'crystal_jquery'
+
+dir = File.dirname(__FILE__)
+
+# Settings
+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}
+  
+AbstractInterface.available_themes.push *%w{default simple_organization}
+AbstractInterface.layout_configurations_dir = "/#{Crystal::Template::DIRECTORY_NAME}/layouts/config"
+
+# Helpers
+require 'common_interface/view_helper'
+Crystal::ControllerContext.include CommonInterface::ViewHelper
+
+# Initializers
+crystal.after :environment do
+  crystal.ensure_public_symlink "common_interface", "#{dir}/common_interface/public/common_interface"
+end
+
+# Assets and public folder
+require 'asset_packager'
+AssetPackager.add "#{dir}/common_interface/public/common_interface/asset_packages.yml", "#{dir}/common_interface/public"
+
+
+# Demo
+module CommonInterface
+  module Demo
+    autoload :ViewHelper, 'common_interface/demo/view_helper'
+    autoload :Basic, 'common_interface/demo/basic'
+    autoload :Site, 'common_interface/demo/site'
+  end
+end

data/lib/common_interface/README.md

@@ -0,0 +1,51 @@
+# Common Interface
+Common Interface is a tool for **Rapid Web Interface Creation**, Ruby on Rails Plugin (more exactly, it's the concrete implementation of the [Abstract Inteface][abstract-interface] plugin).
+
+Instead of trying to provide one universal user interface API (like GWT) to fit all needs, the [Abstract Interface][abstract-interface] **provides you with tools that ease creation of your own custom interface**.
+
+Define Your design only one time, in one place, and then reuse it, forget about HTML and CSS in your Views.
+
+It acts like an abstraction layer, allowing you to define your custom API (or DSL if you like) to build your user interface. Key point here - it allows you build such API **very quick and easy**.
+
+# Demo
+
+* [Sample of HomePage][sample1], [sample of page (with another design)][sample2]
+* [List of all Samples][list_of_samples]
+
+Real-life sample - [http://bos-tec.com](http://bos-tec.com), [http://bom4.com](http://bom4.com), there's no any custom template, all pages are made with the [Abstract Interface][abstract-interface] plugin.
+
+# Advantages
+
+* **Themes support** not only CSS, you can use completelly different HTML and layouts
+* **DRY**
+* **Clean views**
+* **Iterative development**
+* **Loose coupling of Logic and Design**
+* **Share the same design with many Apps**
+* **Mix two complete different themes** simultaneously, in the same page
+* Start with simple prototype and when App matures create professional design (with minimum changes in App)
+* Theme/Skin support (not only CSS but also Templates, Images, ...)
+* Outsource design without opening App code
+* Designers can go ahead and create working html/css/js
+* Programmers can go ahead and create working App with simple design
+* Both of them can do iterative prototyping that will be updated later
+
+# Usage
+
+1. sudo gem install rails-ext
+2. install this plugin in your rails App
+3. create symlink (in linux) or copy <plugin>/public/themes/ directory to <your_rails_App>/public
+4. start your rails App and go to /theme
+
+
+**Notice!** Common Interface is the interface that I build for my own need (you can also use it, by the way).
+But to create you own design you need to create your own 'Common Interface', using this code as a sample.
+
+
+Copyright (c) 2009 Alexey Petrushin [http://bos-tec.com](http://www.bos-tec.com), released under the MIT license.
+
+[abstract-interface]: http://github.com/alexeypetrushin/rails-ext
+
+[sample1]: http://bos-tec.com/theme_site/home?_layout_template=home&_theme=simple_organization
+[sample2]: http://bos-tec.com/theme/page
+[list_of_samples]: http://bos-tec.com/theme/index

data/lib/common_interface/demo/basic.rb

@@ -0,0 +1,96 @@
+module CommonInterface
+  module Demo
+    class Basic
+      inherit Crystal::HttpController
+      helper CommonInterface::Demo::ViewHelper
+      
+      before :prepare_samples, :prepare_theme
+      
+      layout '/CommonInterface/Demo/layouts/theme', :except => %w(help index)
+  
+      def help; end      
+      def dialog; end  
+      def index; end      
+      def aspects; end      
+      def basic; end      
+      def basic2; end      
+      def folder; end      
+      def items; end      
+      def list; end       
+      def page; end      
+      def selector; end      
+      def user; end
+      def style; end      
+      def popup; end
+      def tmp; end
+
+      def select_menu
+        session[:top_menu] = params[:top_menu] if params[:top_menu]
+        session[:side_menu] = params[:side_menu] if params[:side_menu]
+    
+        redirect_to :back
+      end  
+  
+      attr_reader :samples
+      
+      def title
+        workspace.method_name.humanize
+      end
+      helper_method :title
+      
+      protected        
+        def prepare_theme
+          current_theme.name = params[:_theme]
+          current_theme.layout_template = params[:_layout_template]
+        end
+      
+        def prepare_samples
+          @samples = {
+            :title => workspace.method_name.humanize,
+            
+            :top_menu_items => %w(Email Contacts Calendar Files),
+            :active_top_menu => (workspace.request.session[:top_menu] || 'Email'),
+
+            :side_menu_items => %w(control_caption_0 control_caption_1 control_caption_2),
+            :active_side_menu => (workspace.request.session[:side_menu] || 'control_caption_0'),
+
+            :tabs => %w(Compose Contacts Import Categories),
+            :active_tab => 'Compose',
+
+            :common_name => "Terminator Movie Series",
+            :common_tags => ['egypt', 'photo', 'travel'].collect{|w| "<a href='#'>#{w}</a>"},
+            :common_details => ["Today at 15:58", "by <a href='#'>admin</a>", "{7}"],
+            :comment_details => ["Today at 15:58", "by <a href='#'>admin</a>"],
+            :common_controls => %w{add edit delete}.collect{|w| "<a href='#'>#{w}</a>"},
+            
+            :model => {
+              :name => "Some Name", 
+              :active => true, 
+              :body => "Some text",
+            	:errors => {
+            		:base => ["Base Error Description", "Base Error Description 2"],
+                :name => ["Name Error Description 1", "Name Error Description 2"]
+              }
+            },
+
+            :detail_text => %(
+<p>The Terminator (1984) <a href='#'>More at IMDbPro</a></p>
+<p>Your future is in his hands.</p>      
+            ),
+
+            :note_text => %(
+<p>The Terminator (1984) <a href='#'>More at IMDbPro</a></p>
+<p>In the Year of Darkness, 2029, the rulers of this planet devised the ultimate plan. They would reshape the Future by changing the Past. The plan required something that felt no pity. No pain. No fear. Something unstoppable. They created 'THE TERMINATOR'</p>
+<p>The thing that won't die, in the nightmare that won't end. A human-looking, apparently unstoppable cyborg is sent from the future to kill Sarah Connor; Kyle Reese is sent to stop it.</p>
+<p>Your future is in his hands.</p>
+            ),
+            
+            :comment_text => %(
+<p>Although the Stack Overflow engine was always designed with a technical audience in mind, I’m intrigued to see how far we can push the boundaries of that audience.</p>
+<p>We’ve pushed a little bit when going from programmers, to sysadmins, to power computer users — and we may try pushing a tad further this year with yet another site.</p>
+            )
+          }.to_openobject
+        end
+    end
+  end
+end

data/lib/common_interface/demo/site.rb

@@ -0,0 +1,10 @@
+module CommonInterface
+  module Demo
+    class Site < Basic
+      def blog; end
+      def home; end      
+      def post; end
+      def style; end
+    end
+  end
+end

data/lib/common_interface/demo/view_helper.rb

@@ -0,0 +1,17 @@
+module CommonInterface
+  module Demo
+    module ViewHelper
+      def samples
+        @samples
+      end
+      
+      def t key, options = {}
+        key.to_s
+      end
+      
+      def metadata
+        current_theme.metadata
+      end
+    end
+  end
+end

data/lib/common_interface/public/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
+  
+  - /crystal_jquery/jquery.crystal.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
+  
+  - /crystal_jquery/jquery.crystal.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
+  
+  - /crystal_jquery/jquery.crystal.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/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});		
+	}
+});