Merge branch 'development'

Conflicts:
	README.md

.gitignore

@@ -0,0 +1,5 @@
+**/.DS_Store
+.DS_Store
+
+**/.sass-cache/
+**/.idea

.smalltalk.ston

@@ -0,0 +1,9 @@
+SmalltalkCISpec {
+  #loading : [
+    SCIMetacelloLoadSpec {
+      #baseline : 'SeasideComponents',
+      #directory : 'src',
+      #platforms : [ #pharo ]
+    }
+  ]
+}

.travis.yml

@@ -0,0 +1,10 @@
+language: smalltalk
+sudo: false
+
+os:
+  - linux
+  - osx
+
+smalltalk:
+  - Pharo-6.0
+  - Pharo-5.0

README.md

@@ -1,3 +1,84 @@
 # SeasideComponents
-[![Build Status](https://travis-ci.org/jecisc/SeasideComponents.svg?branch=development)](https://travis-ci.org/jecisc/SeasideComponents)
-For now this is just a little Bazard for some on my Seaside components. If I have many I might push it in the seaside community.
+Master: [![Build Status](https://travis-ci.org/jecisc/SeasideComponents.svg?branch=master)](https://travis-ci.org/jecisc/SeasideComponents) | Development: [![Build Status](https://travis-ci.org/jecisc/SeasideComponents.svg?branch=development)](https://travis-ci.org/jecisc/SeasideComponents)
+
+For now this is just a little Bazard for some on my Seaside components.
+If I have many I might push it in the seaside community.
+
+This project is supported *at least* in Pharo 5 and 6.
+
+## Installation
+
+Install in your Pharo image:
+
+    Metacello new
+    	githubUser: 'jecisc' project: 'SeasideComponents' commitish: 'master' path: 'src';
+    	baseline: 'SeasideComponents';
+    	load
+    	
+Add to your project configuration:
+
+    spec
+    	baseline: 'SeasideComponents'
+    	with: [ spec repository: 'github://jecisc/SeasideComponents:master/src' ]
+
+Or
+
+    spec
+    	baseline: 'SeasideComponents'
+    	with: [ spec repository: 'github://jecisc/SeasideComponents:development/src' ]
+    	
+Then includes the file library to your application.
+
+	(WAAdmin register: self asApplicationAt: 'myApplication')
+		addLibrary: JQDeploymentLibrary;
+		addLibrary: MDLLibrary;
+		addLibrary: SCLibrary 
+    	
+## MDL Extensions
+
+Those components depend on the [Material Design Lite project](http://smalltalkhub.com/#!/~KevinLanvin/MaterialDesignLite) and implements some components are not covered by the `Material Design` standard.
+
+### How to use
+
+The components should all work as a normal Seaside component. 
+All components have some examples in there class comments. 
+
+I order to use the components you should define some colors specific rules for your application in your css. To do so, just define:
+
+    .mdl-pagination__current{
+        box-shadow: inset 0px -4px 0px 0px #XXXXXX !important;
+    }
+
+Where `XXXXXX` is the hex code of the accent color of your MDL application. 
+To find your code you can select the #500 color in the following page: [https://www.materialui.co/colors](https://www.materialui.co/colors) 
+
+### Pagination Widget
+
+The pagination widget allow the user to easily paginate some content on his page. 
+You can either use it to just manage the pages then use the #currentPage to manage your page on the refresh or pass a block that will have the responsibility to update your page with some ajax. 
+
+Here is a screen of the component in use: 
+
+![Pagination Widget](https://raw.githubusercontent.com/jecisc/SeasideComponents/master/Resources/Screens/Pagination.png)
+
+For more information look at the class comment of `SCPaginationWidget`.
+
+Examples:
+
+
+	| myColl |
+	myColl := 1 to: 150.
+	(SCPaginationComponent numberOfPages: [ myColl size / 24 roundUpTo: 1 ]) 	"Note the use of a block. If my collection change, the number of pages will be updated."
+		adjacentsPagesToShow: 3;
+		yourself
+
+----------			
+			
+Using Ajax to refresh the page:
+
+	SCPaginationComponent
+		numberOfPages: [ self numbersOfPages ]
+		updateBlock: [ :s :html | 
+			(s << (html jQuery id: #'main-content') load)
+				html: [ :ajaxHtml | self renderMainContentOn: ajaxHtml ];
+				onComplete: 'componentHandler.upgradeDom();' ] "The onComplete will update réinitialize the MDL elements"

Resources/Css/Pagination.sass

@@ -0,0 +1,46 @@
+@import "Variables.sass"
+
+// TODO: Move it into the right project
+
+.mdl-pagination
+  height: 60px
+  text-align: center
+  width: 100%
+
+  .mdl-textfield
+    padding: 20px 0 0 0
+
+  .mdl-textfield__label::after
+    bottom: 0
+
+  form
+    margin-left: 10px
+    display: initial
+
+  .mdl-pagination__pages
+    padding-top: 10px
+
+  .mdl-pagination__container
+    display: inline-flex
+
+  .mdl-pagination__pages-buttons
+    display: inline-block
+
+    button
+      margin: 0
+      padding: .5em 1em
+      border: 0
+      background-color: transparent
+      box-shadow: inset 0px -2px 0px 0px $grey400
+      color: $grey400
+      font: inherit
+
+      &:hover
+        box-shadow: inset 0px -4px 0px 0px $grey400
+
+      &[disabled]
+        box-shadow: inset 0px -2px 0px 0px $grey300
+        color: #e6e6e6
+
+    .mdl-pagination__current
+      font-weight: bold !important

Resources/Css/SeasideComponents.sass

@@ -0,0 +1 @@
+@import "Pagination.sass"

Resources/Css/Variables.sass

@@ -0,0 +1,104 @@
+// Colors
+$red50: #ffebee
+$red: #f44336
+$red500: $red
+$red700: #d32f2f
+$purple: #9C27B0
+$purple500: $purple
+$purple700: #7B1FA2
+$deepPurple: #673AB7
+$deepPurple500: $deepPurple
+$blue: #2196F3
+$blue500: $blue
+$blue700: #1976D2
+$cyan: #00BCD4
+$cyan500: $cyan
+$cyan700: #0097A7
+$green: #4CAF50
+$green500: $green
+$green700: #388E3C
+$orange200: #FFCC80
+$orange300: #FFB74D
+$orange: #FF9800
+$orange500: $orange
+$orange700: #F57C00
+$grey100: #F5F5F5
+$grey200: #EEEEEE
+$grey300: #E0E0E0
+$grey400: #BDBDBD
+$grey: #9E9E9E
+$grey500: $grey
+$grey900: #212121
+$blueGrey200: #B0BEC5
+$blueGrey: #607D8B
+$blueGrey500: $blueGrey
+
+$accentColor: $orange
+$borderColor: $grey300
+
+// Paths
+$root: "../"
+$background: $root + "background.png"
+$pokemonHeader: $root + "/header.png"
+
+// Fonts
+$mainFonts: "Roboto", "Helvetica", "Arial", sans-serif
+
+// Mixins
+=heightWidthSize($size: 100%)
+  height: $size
+  width: $size
+
+=css3($property, $value)
+  @each $prefix in -webkit-, -moz-, -ms-, -o-, ''''
+    #{$prefix}#{$property}: $value
+
+=border-radius($radius)  // Always a handy mixin. Set border radius without worrying about all those prefixes.
+  +css3(border-radius, $radius)
+  background-clip: padding-box  // stops bg color from leaking outside the border
+
+=box-sizing($box-model) // Reset your elements box model with ease.
+  +css3(box-sizing, $box-model)
+
+=transform($transforms)
+  +css3(transform, $transforms)
+
+=transition($args...)
+  +css3(transition, $args)
+
+=opacity($opacity) // Set the opacity for all browsers and provide a filter fallback for IE8.
+  opacity: $opacity
+  $opacity-ie: $opacity * 100
+  filter: alpha(opacity=$opacity-ie) //IE8
+
+=center-block // Quickly center any element within its parent. Requires width or max-width to be set.
+  display: block
+  margin:
+    left: auto
+    right: auto
+
+=text-truncate // An easy way to truncate text with an ellipsis. Requires the element to be block or inline-block.
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+=abs-pos ($top: auto, $right: auto, $bottom: auto, $left: auto) // Pass in the desired location of your target element to produce all the necessary positioning code.
+  top: $top
+  right: $right
+  bottom: $bottom
+  left: $left
+  position: absolute
+
+=font-size($size: 14, $base: 14 ) //  This mixin sets the font size in rem''s with a px fallback.
+  font-size: $size + px //fallback for old browsers
+  font-size: ($size / $base) * 1rem
+
+=line-height($height: 12, $base: 12 ) // This mixin sets the line height in rem''s with a px fallback.
+  line-height: $height + px //fallback for old browsers
+  line-height: ($height / $base) * 1rem
+
+=centered
+  position: absolute
+  top: 50%
+  left: 50%
+  transform: translate(-50%, -50%)

src/BaselineOfSeasideComponents.package/BaselineOfSeasideComponents.class/instance/projectClass.st

@@ -0,0 +1,15 @@
+accessing
+projectClass
+	self flag: #clean.	"This is a hack that need to be remove after the default version of Metacello includes Cypress suport."
+	^ [ #MetacelloCypressBaselineProject asClass ]
+		on: NotFound
+		do: [ Metacello new
+				baseline: 'Metacello';
+				repository: 'github://dalehenrich/metacello-work:master/repository';
+				get.
+			Metacello new
+				baseline: 'Metacello';
+				repository: 'github://dalehenrich/metacello-work:master/repository';
+				onConflict: [ :ex | ex allow ];
+				load.
+			self projectClass ]

src/SeasideComponents-MDLExtensions.package/SCLibrary.class/class/importCss.st

@@ -0,0 +1,9 @@
+scripts
+importCss
+	"This is specific to me (Cyril Ferlicot). Since I am the only one to commit for now it is enough."
+
+	<script>
+	| file |
+	file := FileSystem workingDirectory / '..' / '..' / 'GitRepositories' / 'SeasideComponents' / 'Resources' / 'Css' / 'SeasideComponents.css'.
+	self addFileNamed: file basename contents: file contents.
+	self class methods detect: [ :m | m selector = (self default asSelector: file basename) ] ifFound: [ :m | m protocol: #css ]

src/SeasideComponents-MDLExtensions.package/SCLibrary.class/instance/SeasideComponentsCss.st

@@ -0,0 +1,5 @@
+uploaded
+SeasideComponentsCss
+	^ '.mdl-pagination{height:60px;text-align:center;width:100%}.mdl-pagination .mdl-textfield{padding:20px 0 0 0}.mdl-pagination .mdl-textfield__label::after{bottom:0}.mdl-pagination form{margin-left:10px;display:initial}.mdl-pagination .mdl-pagination__pages{padding-top:10px}.mdl-pagination .mdl-pagination__container{display:inline-flex}.mdl-pagination .mdl-pagination__pages-buttons{display:inline-block}.mdl-pagination .mdl-pagination__pages-buttons button{margin:0;padding:.5em 1em;border:0;background-color:transparent;box-shadow:inset 0px -2px 0px 0px #BDBDBD;color:#BDBDBD;font:inherit}.mdl-pagination .mdl-pagination__pages-buttons button:hover{box-shadow:inset 0px -4px 0px 0px #BDBDBD}.mdl-pagination .mdl-pagination__pages-buttons button[disabled]{box-shadow:inset 0px -2px 0px 0px #E0E0E0;color:#e6e6e6}.mdl-pagination .mdl-pagination__pages-buttons .mdl-pagination__current{font-weight:bold !important}
+/*# sourceMappingURL=SeasideComponents.css.map */
+'

src/SeasideComponents-MDLExtensions.package/SCLibrary.class/instance/selectorsToInclude.st

@@ -0,0 +1,3 @@
+accessing
+selectorsToInclude
+	^ #( #SeasideComponentsCss )

src/SeasideComponents-MDLExtensions.package/SCLibrary.class/properties.json

@@ -0,0 +1,14 @@
+{
+	"category" : "SeasideComponents-MDLExtensions-Core",
+	"classinstvars" : [
+		 ],
+	"classvars" : [
+		 ],
+	"commentStamp" : "",
+	"instvars" : [
+		 ],
+	"name" : "SCLibrary",
+	"pools" : [
+		 ],
+	"super" : "WAFileLibrary",
+	"type" : "normal" }

src/SeasideComponents-MDLExtensions.package/SCPaginationComponent.class/README.md

@@ -1,4 +1,4 @@
-I am a component to display a pagination bar.
+I am a component to display a pagination widget.
 
 Description
 ------------------
@@ -7,6 +7,8 @@ I display buttons to navigate between pages on a component. I just need to know
 
 I will not display all the pages buttons, but the adjecents buttons of the current page. By default I show 2 buttons before and after the current button.
 
+I offer the possibility to the user to define a block to update the page without refreshing the page via ajax.
+
 Public API and Key Messages
 -----------------
 
@@ -16,14 +18,21 @@ Public API and Key Messages
 - #lastPage 			select the last page
 - #currentPage 		return the number of the current page. This should be use by my container to know what to show for the current page.
 
-Example
+Examples
 -----------------
 
 	| myColl |
 	myColl := 1 to: 150.
 	(SCPaginationComponent numberOfPages: [ myColl size / 24 roundUpTo: 1 ]) 	"Note the use of a block. If my collection change, the number of pages will be updated."
 		adjacentsPagesToShow: 3;
 		yourself
+		
+	SCPaginationComponent
+		numberOfPages: [ self numbersOfPages ]
+		updateBlock: [ :s :html | 
+			(s << (html jQuery id: #'main-content') load)
+				html: [ :ajaxHtml | self renderMainContentOn: ajaxHtml ];
+				onComplete: 'componentHandler.upgradeDom();' ] "The onComplete will update réinitialize the MDL elements"
 
 Internal Representation and Key Implementation Points.
 -----------------
@@ -32,3 +41,4 @@ Internal Representation and Key Implementation Points.
 	adjacentsPagesToShow:		<anInteger>			The number of pages to show before and after the current page
 	currentPage:					<anInteger>			The current page
 	numberOfPages:				<anIntegerOrBlock>	The maximum number of page or a block returning it
+	updateBlock: 				<aBlock>			An optional block. If the block is not nil then the pagination widget will not refresh the page but update it with ajax. The block takes 2 parameters: a stream and a html canvas. See previous examples for more details.

src/SeasideComponents-MDLExtensions.package/SCPaginationComponent.class/class/numberOfPages.updateBlock..st

@@ -0,0 +1,6 @@
+instance creation
+numberOfPages: aBlockOrInteger updateBlock: aBlock
+	^ self new
+		numberOfPages: aBlockOrInteger;
+		updateBlock: aBlock;
+		yourself