From d99cb2f75b4916211fdea60481d679b7b7c5e89a Mon Sep 17 00:00:00 2001 From: Juan Vanecek Date: Fri, 17 Feb 2023 11:18:28 -0300 Subject: [PATCH] :wrench: add radio button group example --- .../Bootstrap3ComponentSupplier.class.st | 13 ++ .../Bootstrap3RadioButtonWebView.class.st | 121 ++++++++++++++++++ .../Bootstrap4ComponentSupplier.class.st | 13 ++ .../Bootstrap4RadioButtonWebView.class.st | 120 +++++++++++++++++ .../Bootstrap3LiveDocsNavBar.class.st | 2 +- .../Bootstrap4LiveDocsNavBar.class.st | 2 +- ...rtableBootstrap3ComponentsWebView.class.st | 15 +++ ...rtableBootstrap4ComponentsWebView.class.st | 15 +++ 8 files changed, 299 insertions(+), 2 deletions(-) create mode 100644 source/Willow-Bootstrap-3/Bootstrap3RadioButtonWebView.class.st create mode 100644 source/Willow-Bootstrap-4/Bootstrap4RadioButtonWebView.class.st diff --git a/source/Willow-Bootstrap-3/Bootstrap3ComponentSupplier.class.st b/source/Willow-Bootstrap-3/Bootstrap3ComponentSupplier.class.st index 41362641..593f3bd3 100644 --- a/source/Willow-Bootstrap-3/Bootstrap3ComponentSupplier.class.st +++ b/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 [ diff --git a/source/Willow-Bootstrap-3/Bootstrap3RadioButtonWebView.class.st b/source/Willow-Bootstrap-3/Bootstrap3RadioButtonWebView.class.st new file mode 100644 index 00000000..bf276824 --- /dev/null +++ b/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 ] + ] +] diff --git a/source/Willow-Bootstrap-4/Bootstrap4ComponentSupplier.class.st b/source/Willow-Bootstrap-4/Bootstrap4ComponentSupplier.class.st index 38a3aedb..d2c30a00 100644 --- a/source/Willow-Bootstrap-4/Bootstrap4ComponentSupplier.class.st +++ b/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 [ diff --git a/source/Willow-Bootstrap-4/Bootstrap4RadioButtonWebView.class.st b/source/Willow-Bootstrap-4/Bootstrap4RadioButtonWebView.class.st new file mode 100644 index 00000000..ebf5b8e4 --- /dev/null +++ b/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 ] + ] +] diff --git a/source/Willow-Live-Documentation/Bootstrap3LiveDocsNavBar.class.st b/source/Willow-Live-Documentation/Bootstrap3LiveDocsNavBar.class.st index d8c8d222..7363eb3e 100644 --- a/source/Willow-Live-Documentation/Bootstrap3LiveDocsNavBar.class.st +++ b/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 diff --git a/source/Willow-Live-Documentation/Bootstrap4LiveDocsNavBar.class.st b/source/Willow-Live-Documentation/Bootstrap4LiveDocsNavBar.class.st index c56ba344..fc279dc3 100644 --- a/source/Willow-Live-Documentation/Bootstrap4LiveDocsNavBar.class.st +++ b/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 diff --git a/source/Willow-Live-Documentation/NonPortableBootstrap3ComponentsWebView.class.st b/source/Willow-Live-Documentation/NonPortableBootstrap3ComponentsWebView.class.st index 41285f9e..88993f08 100644 --- a/source/Willow-Live-Documentation/NonPortableBootstrap3ComponentsWebView.class.st +++ b/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 ] diff --git a/source/Willow-Live-Documentation/NonPortableBootstrap4ComponentsWebView.class.st b/source/Willow-Live-Documentation/NonPortableBootstrap4ComponentsWebView.class.st index 5ac7baac..1628ab5c 100644 --- a/source/Willow-Live-Documentation/NonPortableBootstrap4ComponentsWebView.class.st +++ b/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 ]