🔧 add radio button group example

source/Willow-Bootstrap-3/Bootstrap3ComponentSupplier.class.st

@@ -110,6 +110,19 @@ Bootstrap3ComponentSupplier >> pillsBuilder [
 	^BootstrapToggablePillsBuilder new
 ]
 
+{ #category : #'Supplying - Non Portable' }
+Bootstrap3ComponentSupplier >> radioButtonRenderingWith: anItemRenderer
+	applyingToContainer: aContainerCommand
+	applyingToLabel: aLabelCommand
+	applyingToInput: anInputCommand [
+
+	^Bootstrap3RadioButtonWebView
+		renderingWith: anItemRenderer
+		applyingToContainer: aContainerCommand
+		applyingToLabel: aLabelCommand
+		applyingToInput: anInputCommand
+]
+
 { #category : #Supplying }
 Bootstrap3ComponentSupplier >> radioRenderingWith: aRenderingBlock applyingToLabel: aLabelCommand applyingToInput: anInputCommand [
 

source/Willow-Bootstrap-3/Bootstrap3RadioButtonWebView.class.st

@@ -0,0 +1,121 @@
+Class {
+	#name : #Bootstrap3RadioButtonWebView,
+	#superclass : #SingleSelectionWebViewBehavior,
+	#instVars : [
+		'itemRenderer',
+		'containerCommand',
+		'labelCommand',
+		'inputCommand',
+		'interactionInterpreter',
+		'identifierAssigner'
+	],
+	#category : #'Willow-Bootstrap-3-WebViews'
+}
+
+{ #category : #'as yet unclassified' }
+Bootstrap3RadioButtonWebView class >> renderingWith: aItemRenderer applyingToContainer: aContainerCommand applyingToLabel: aLabelCommand applyingToInput: anInputCommand [
+
+	^ self new
+		initializeRenderingWith: aItemRenderer
+		applyingToContainer: aContainerCommand asWebComponentCommand
+		applyingToLabel: aLabelCommand asWebComponentCommand
+		applyingToInput: anInputCommand asWebComponentCommand
+]
+
+{ #category : #'private-rendering' }
+Bootstrap3RadioButtonWebView >> activeLabelCommandFor: anElement [
+
+	chosenElementOptional
+		withContentDo: [ :chosenElement | 
+			anElement = chosenElement
+				ifTrue: [ ^ [ :label | label addClass bootstrapCommon active ] ]
+			].
+
+	^ [  ]
+]
+
+{ #category : #'private-rendering' }
+Bootstrap3RadioButtonWebView >> buttonStyleCommandFor: anElement [
+
+	^ [ :label | 
+	label addClass bootstrap button + label addClass bootstrap buttonDefault
+		+ ( self activeLabelCommandFor: anElement ) + labelCommand
+	]
+]
+
+{ #category : #configuring }
+Bootstrap3RadioButtonWebView >> identifyIn: aCanvas [
+
+	^identifierAssigner identifyIn: aCanvas
+]
+
+{ #category : #initialization }
+Bootstrap3RadioButtonWebView >> initializeRenderingWith: aRenderingBlock applyingToContainer: aContainerCommand applyingToLabel: aLabelCommand applyingToInput: anInputCommand [
+
+	itemRenderer := aRenderingBlock.
+	containerCommand := aContainerCommand.
+	labelCommand := aLabelCommand.
+	inputCommand := anInputCommand.
+	interactionInterpreter := WebInteractionInterpreter forChangeInComponentValue.
+	identifierAssigner := IdentifierAssigner prefixedBy: 'radio-button'
+]
+
+{ #category : #configuring }
+Bootstrap3RadioButtonWebView >> onTrigger [
+
+	^ interactionInterpreter
+]
+
+{ #category : #rendering }
+Bootstrap3RadioButtonWebView >> renderContentOn: aCanvas [
+
+	aCanvas div
+		apply: [ :div | 
+			div addClass bootstrap3 buttonGroup
+				+ ( div setAttribute: #'data-toggle' greaseString to: #buttons greaseString )
+				+ ( div setAttribute: #role greaseString to: #group greaseString ) + containerCommand
+			];
+		with: [ :div | self renderRadioGroupOn: div ]
+]
+
+{ #category : #'private-rendering' }
+Bootstrap3RadioButtonWebView >> renderInputFor: anElement asPartOf: aRadioGroup on: aCanvas [
+
+	| radioButton |
+
+	radioButton := aRadioGroup radioButton.
+	identifierAssigner withAssignedIdentifierDo: [ :id | radioButton id: id ].
+	inputCommand applyTo: radioButton on: aCanvas.
+	interactionInterpreter applyTo: radioButton on: aCanvas.
+	radioButton value: anElement.
+	self renderLabelContentFor: anElement on: aCanvas
+]
+
+{ #category : #'private-rendering' }
+Bootstrap3RadioButtonWebView >> renderLabelContentFor: anElement on: aCanvas [
+
+	aCanvas render: ( itemRenderer value: anElement )
+]
+
+{ #category : #'private-rendering' }
+Bootstrap3RadioButtonWebView >> renderRadioButtonFor: anElement asPartOf: aRadioGroup on: aCanvas [
+
+	aCanvas label
+		apply: [ :label | 
+			label addClass bootstrap3 button + label addClass bootstrap3 buttonDefault
+				+ ( self activeLabelCommandFor: anElement ) + labelCommand
+			];
+		with: [ self renderInputFor: anElement asPartOf: aRadioGroup on: aCanvas ]
+]
+
+{ #category : #'private-rendering' }
+Bootstrap3RadioButtonWebView >> renderRadioGroupOn: div [
+
+	^ div radioGroup
+		callback: [ :element | self choose: element ];
+		with: [ :radioGroup | 
+			chosenElementOptional withContentDo: [ :chosenElement | radioGroup selected: chosenElement ].
+			availableElements
+				do: [ :element | self renderRadioButtonFor: element asPartOf: radioGroup on: div ]
+			]
+]

source/Willow-Bootstrap-4/Bootstrap4ComponentSupplier.class.st

@@ -113,6 +113,19 @@ Bootstrap4ComponentSupplier >> pillsBuilder [
 		yourself
 ]
 
+{ #category : #'as yet unclassified' }
+Bootstrap4ComponentSupplier >> radioButtonRenderingWith: anItemRenderer
+	applyingToContainer: aContainerCommand
+	applyingToLabel: aLabelCommand
+	applyingToInput: anInputCommand [
+
+	^Bootstrap4RadioButtonWebView
+		renderingWith: anItemRenderer
+		applyingToContainer: aContainerCommand
+		applyingToLabel: aLabelCommand
+		applyingToInput: anInputCommand
+]
+
 { #category : #Supplying }
 Bootstrap4ComponentSupplier >> radioRenderingWith: aRenderingBlock applyingToLabel: aLabelCommand applyingToInput: anInputCommand [
 

source/Willow-Bootstrap-4/Bootstrap4RadioButtonWebView.class.st

@@ -0,0 +1,120 @@
+Class {
+	#name : #Bootstrap4RadioButtonWebView,
+	#superclass : #SingleSelectionWebViewBehavior,
+	#instVars : [
+		'itemRenderer',
+		'containerCommand',
+		'labelCommand',
+		'inputCommand',
+		'interactionInterpreter',
+		'identifierAssigner'
+	],
+	#category : #'Willow-Bootstrap-4-WebViews'
+}
+
+{ #category : #'as yet unclassified' }
+Bootstrap4RadioButtonWebView class >> renderingWith: aItemRenderer applyingToContainer: aContainerCommand applyingToLabel: aLabelCommand applyingToInput: anInputCommand [
+
+	^ self new
+		initializeRenderingWith: aItemRenderer
+		applyingToContainer: aContainerCommand asWebComponentCommand
+		applyingToLabel: aLabelCommand asWebComponentCommand
+		applyingToInput: anInputCommand asWebComponentCommand
+]
+
+{ #category : #'private-rendering' }
+Bootstrap4RadioButtonWebView >> activeLabelCommandFor: anElement [
+
+	chosenElementOptional
+		withContentDo: [ :chosenElement | 
+			anElement = chosenElement
+				ifTrue: [ ^ [ :label | label addClass bootstrapCommon active ] ]
+			].
+
+	^ [  ]
+]
+
+{ #category : #'private-rendering' }
+Bootstrap4RadioButtonWebView >> buttonStyleCommandFor: anElement [
+
+	^ [ :label | 
+	label addClass bootstrap button + label addClass bootstrap buttonDefault
+		+ ( self activeLabelCommandFor: anElement ) + labelCommand
+	]
+]
+
+{ #category : #configuring }
+Bootstrap4RadioButtonWebView >> identifyIn: aCanvas [
+
+	^identifierAssigner identifyIn: aCanvas
+]
+
+{ #category : #initialization }
+Bootstrap4RadioButtonWebView >> initializeRenderingWith: aRenderingBlock applyingToContainer: aContainerCommand applyingToLabel: aLabelCommand applyingToInput: anInputCommand [
+
+	itemRenderer := aRenderingBlock.
+	containerCommand := aContainerCommand.
+	labelCommand := aLabelCommand.
+	inputCommand := anInputCommand.
+	interactionInterpreter := WebInteractionInterpreter forChangeInComponentValue.
+	identifierAssigner := IdentifierAssigner prefixedBy: 'radio-button'
+]
+
+{ #category : #configuring }
+Bootstrap4RadioButtonWebView >> onTrigger [
+
+	^ interactionInterpreter
+]
+
+{ #category : #rendering }
+Bootstrap4RadioButtonWebView >> renderContentOn: aCanvas [
+
+	aCanvas div
+		apply: [ :div | 
+			div addClass bootstrap4 buttonGroup + div addClass bootstrap4 buttonGroupToggle
+				+ ( div setAttribute: #'data-toggle' greaseString to: #buttons greaseString ) + containerCommand
+			];
+		with: [ :div | self renderRadioGroupOn: div ]
+]
+
+{ #category : #'private-rendering' }
+Bootstrap4RadioButtonWebView >> renderInputFor: anElement asPartOf: aRadioGroup on: aCanvas [
+
+	| radioButton |
+
+	radioButton := aRadioGroup radioButton.
+	identifierAssigner withAssignedIdentifierDo: [ :id | radioButton id: id ].
+	inputCommand applyTo: radioButton on: aCanvas.
+	interactionInterpreter applyTo: radioButton on: aCanvas.
+	radioButton value: anElement.
+	self renderLabelContentFor: anElement on: aCanvas
+]
+
+{ #category : #'private-rendering' }
+Bootstrap4RadioButtonWebView >> renderLabelContentFor: anElement on: aCanvas [
+
+	aCanvas render: ( itemRenderer value: anElement )
+]
+
+{ #category : #'private-rendering' }
+Bootstrap4RadioButtonWebView >> renderRadioButtonFor: anElement asPartOf: aRadioGroup on: aCanvas [
+
+	aCanvas label
+		apply: [ :label | 
+			label addClass bootstrap4 button + label addClass bootstrap4 buttonSecondary
+				+ ( self activeLabelCommandFor: anElement ) + labelCommand
+			];
+		with: [ self renderInputFor: anElement asPartOf: aRadioGroup on: aCanvas ]
+]
+
+{ #category : #'private-rendering' }
+Bootstrap4RadioButtonWebView >> renderRadioGroupOn: div [
+
+	^ div radioGroup
+		callback: [ :element | self choose: element ];
+		with: [ :radioGroup | 
+			chosenElementOptional withContentDo: [ :chosenElement | radioGroup selected: chosenElement ].
+			availableElements
+				do: [ :element | self renderRadioButtonFor: element asPartOf: radioGroup on: div ]
+			]
+]

source/Willow-Live-Documentation/Bootstrap3LiveDocsNavBar.class.st

@@ -86,7 +86,7 @@ Bootstrap3LiveDocsNavBar >> renderNavigationButtonsOn: aCanvas [
 Bootstrap3LiveDocsNavBar >> renderSupplierDetailsOn: aCanvas [
 
 	aCanvas paragraph
-		with: [ aCanvas render: 'Based on '.
+		with: [ aCanvas render: 'Powered By '.
 			aCanvas
 				render:
 					( self componentSupplier

source/Willow-Live-Documentation/Bootstrap4LiveDocsNavBar.class.st

@@ -94,7 +94,7 @@ Bootstrap4LiveDocsNavBar >> renderNavigationButtonsOn: aCanvas [
 Bootstrap4LiveDocsNavBar >> renderSupplierDetailsOn: aCanvas [
 
 	aCanvas span
-		with: [ aCanvas render: 'Based on '.
+		with: [ aCanvas render: 'Powered By '.
 			aCanvas
 				render:
 					( self componentSupplier

source/Willow-Live-Documentation/NonPortableBootstrap3ComponentsWebView.class.st

@@ -29,6 +29,21 @@ NonPortableBootstrap3ComponentsWebView >> initializeExamples [
 						addContent: 'col-md-1';
 						build
 					] );
+		add:
+			( CodeSnippetExampleWebView
+				titled: 'Radio Button Group'
+				describedBy: 'https://getbootstrap.com/docs/3.4/javascript/#buttons-checkbox-radio'
+				showing: [ | radio |
+
+					radio := self componentSupplier
+						radioButtonRenderingWith: [ :element | element ]
+						applyingToContainer: [ :div | div addClass bootstrap3 buttonGroupSmall ]
+						applyingToLabel: [ :label | label addClass bootstrap3 buttonPrimary ]
+						applyingToInput: [  ].
+					radio allowAnyOf: #(Left Middle Right).
+					radio choose: #Middle.
+					radio
+					] );
 		yourself
 ]
 

source/Willow-Live-Documentation/NonPortableBootstrap4ComponentsWebView.class.st

@@ -41,6 +41,21 @@ NonPortableBootstrap4ComponentsWebView >> initializeExamples [
 						buildApplying:
 								[ :card | card addClass bootstrapCommon textCenter + ( card setStyleTo: [ :style | style width: 128 px ] ) ]
 					] );
+		add:
+			( CodeSnippetExampleWebView
+				titled: 'Radio Button Group'
+				describedBy: 'https://getbootstrap.com/docs/4.1/components/buttons/#checkbox-and-radio-buttons'
+				showing: [ | radio |
+
+					radio := self componentSupplier
+						radioButtonRenderingWith: [ :element | element ]
+						applyingToContainer: [ :div | div addClass bootstrap4 buttonGroupSmall ]
+						applyingToLabel: [  ]
+						applyingToInput: [  ].
+					radio allowAnyOf: #(Left Middle Right).
+					radio choose: #Middle.
+					radio
+					] );
 		yourself
 ]