nice 0.0.4 → 0.0.5

data/README.md

@@ -3,11 +3,8 @@
 ## What?
 
 *Nice* is a light-weight engine which puts some *magic* into JS/AJAX driven Rails pages with the aim to ease the development of rich and interactive restful web applications.
-The idea is about state defintions as they are known in Adobe Flex for a while which represent one visiual status displayed to the user. In response to an event (typically user interaction), this state can change. 
-Think of page states as of one visual view presented to the user - or for RESTful applications, one state is tied to one route.
-While plain HTML requires a page refresh to update the visual presentation, Javascript introduced a possiblity to define a transitition to the next state by adding or removing elements on the fly. Although this is an enhancement with regards to user experience, but the source code gets messed up easily, because the view will be generated both on the server and dynamically in the browser. Furthermore rendering code will be written twice and we all know that this leads to incoherence. Finally, the idea of *Nice* is to put the view generation entirely on the backend side (where it should be for several reasons!) and let the state transitions happen auto-magically. Instead of coding the changes between different states you will simply code your states by annotating which page elements belong to which state and *Nice* generates the glue code to transit between states - no matter how many states you have. Specially if you consider having multiple states you have to write a lot of code in plain javascript to handle all possible state changes, *Nice* can handle this easily and consistently.
 
-The whole framework is aimed to be non-intrusive as much as possible, so the way you regulary write your rails apps won't change dramatically.
+Go [here](http://nice.codebility.com) for an example and a detailed description.
 
 ## How to use
 
@@ -87,6 +84,41 @@ This restriction is imposed by the way how the middleware calculates reference p
 
 All links in your application should now use the ```:remote => :true``` attribute to ensure the requests will be sent using javascript by default.
 
+### State Transitions
+
+Nice offers the ability to make your state changes even smoother by using either JS and/or CSS. Every element inside a <code>data-state</code> with <code>data-state-transition=\"default\"</code> will be animated using the corresponding transition configuration. By default, a linear fade-in over 200ms is used, but you can override or configure any other property animation. You need to provide your configuration by creating some JS functions. I recommend using [coffee-script](http://coffeescript.org) and name the file *nice-transitions.js.coffee*:
+
+```
+class this.NiceTransitions
+	@default = 
+		duration: 1000
+		easing: "linear"
+		properties:
+			opacity: 0.0
+	
+	@fade_slow = 
+		duration: 2000
+		easing: "linear"			
+		properties:
+			opacity: 0.0
+			
+	@slide_top =
+		duration: 1000
+		easing: "swing"			
+		properties:
+			"top": "-200px"
+```			
+
+The body class gets the always a CSS class with the following naming convention assigned: <code>state-\{current_state_name\}</code>. You can use this to configure your styles per state like this:
+
+```
+.state-get_basic_a{
+	.set2, .set3{
+		opacity: 0.4;
+	}
+}
+```
+
 ### Features
 
 *Nice* is still in early stages and there is truly a lot to do. If you feel intrested and want to contribute, please don't hestitate to start work on one of the following features or enhance existing ones. 
@@ -104,7 +136,7 @@ Nice is a middleware which processes all HTML and JS requests by either removing
 
 ## Roadmap / Contribute
 
--  better example application
+-  css class manipulation and css3 transition support
 -  test cases
 -  customization of state names
 -  customization of HTML5 attribute names

data/lib/assets/javascripts/nice_imp_jquery.js.coffee

@@ -1,5 +1,15 @@
 ## default event handler
 class NiceJquery
+	
+	# css top class manipulation
+	@change_top_css: (event) ->
+		# remove global state class and add new one
+		reg = /// ^
+				state-\S+
+		///
+		matches = $("body").attr("class")?.match(reg)
+		$("body").removeClass(c_name) for c_name in matches if matches?
+		$("body").addClass("state-#{event.new_state_name}")	
 
 	# insert element after referencing node
 	@insert_after: (event) ->
@@ -34,8 +44,6 @@ class NiceJquery
 		)
 	
 	
-	
-	
 	# each DOM Manipulation should call this method which will apply the transition animation start values 
 	# to the elements before inserting into the DOM tree and the trigger the animation
 	@perform_transition: (elem_ref, elem_new, action) ->
@@ -65,7 +73,8 @@ class NiceJquery
 			# if no custom definitions exist - generate a default to do something at least
 			if( !transition_def? )
 				if transition?
-					console.log("Custom Transition Definition for \"#{transition}\" is missing! Please create a NiceTransitions class and configure your transitions.")
+					console.log("Custom Transition Definition for \"#{transition}\" is \
+					missing! Please create a NiceTransitions class and configure your transitions.")
 		
 				# rescue default transition		
 				transition_def = 
@@ -97,5 +106,7 @@ class NiceJquery
 document.addEventListener "nice.dom.InsertAfterEvent", NiceJquery.insert_after, false
 document.addEventListener "nice.dom.InsertInsideEvent", NiceJquery.insert_inside, false
 document.addEventListener "nice.dom.RemoveStateEvent", NiceJquery.remove_state_elements, false
+document.addEventListener "nice.dom.ChangeTopCssEvent", NiceJquery.change_top_css, false
 document.addEventListener "nice.hist.ChangeURLEvent", NiceJquery.move_to_url, false
 document.addEventListener "nice.hist.PopHistoryEvent", NiceJquery.insert_or_update_back_listener, false
+

data/lib/nice/html_parser.rb

@@ -114,7 +114,11 @@ module Nice
 
   		doc
   	end
-	
+
+	  def self.add_top_css doc, current_state
+	    doc.css("body").add_class("state-#{current_state}")
+	    doc
+	  end
 	
   	private
 	

data/lib/nice/js/caller.rb

@@ -30,9 +30,9 @@ module Nice
 				"NiceEventDispatcher.dispatch_event(\'nice.ui.StateDidChangeEvent\',{prev_state:\'#{prev_state}\', new_state:\"#{new_state}\"});"
 			end
 			
-			# State Transition Animations
-			def self.perform_transition_animations
-			  "NiceEventDispatcher.dispatch_event(\'nice.trsn.AnimateEvent\');"
+			# Change Body Css Class to reflect current state
+			def self.change_top_css new_state_name
+			  "NiceEventDispatcher.dispatch_event(\'nice.dom.ChangeTopCssEvent\',{new_state_name:\'#{new_state_name}\'});"
 			end
 			
 		end

data/lib/nice/logic.rb

@@ -39,7 +39,7 @@ module Nice
       	# case 1
       	if !is_js then   
 
-      		cleaned_doc.to_html
+          Nice::HtmlParser.add_top_css(cleaned_doc, current_state).to_html
 
       	# case 2
       	else   
@@ -56,6 +56,8 @@ module Nice
       		js_stack << "// inform ui on state change"
       		js_stack << Nice::Js::Caller.state_did_change(prev_state,current_state)
 
+      		js_stack << Nice::Js::Caller.change_top_css(current_state)      		
+
       		js_stack.join("\n")
       	end
     end

data/lib/nice/version.rb

@@ -1,3 +1,3 @@
 module Nice
-  VERSION = "0.0.4"
+  VERSION = "0.0.5"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: nice
 version: !ruby/object:Gem::Version
-  version: 0.0.4
+  version: 0.0.5
   prerelease: 
 platform: ruby
 authors:
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2012-06-18 00:00:00.000000000 Z
+date: 2012-06-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -97,7 +97,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2243244646297613030
+      hash: 3643352142035015313
 required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
   requirements:
@@ -106,10 +106,10 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
       segments:
       - 0
-      hash: -2243244646297613030
+      hash: 3643352142035015313
 requirements: []
 rubyforge_project: 
-rubygems_version: 1.8.22
+rubygems_version: 1.8.24
 signing_key: 
 specification_version: 3
 summary: Nice / Nizza is a posh little town in south France.