# Image Slider Element: Output Rendering
# http://www.typo3lexikon.de/typo3-tutorials/typoscript/referenz/stdwrap.html
# http://www.wiki-cms.com/TypoScript-Register
# https://docs.typo3.org/typo3cms/TyposcriptReference/Functions/Index.html

/*
tt_content.gridelements_pi1.20.10.setup.custom_element_imageslider {

	# Basis-HTML für Image-Slider erstellen
	stdWrap {
		outerWrap(
			<div id="image-slider">
				<div class="container">
					<div id="carousel-slider" class="carousel slide carousel-fade" data-ride="carousel">|
						<!-- Controls -->
						<a class="left carousel-control" href="#carousel-slider" role="button" data-slide="prev">
							<span class="icon-prev" aria-hidden="true"></span>
							<span class="sr-only">Vorwärts</span>
						</a>
						<a class="right carousel-control" href="#carousel-slider" role="button" data-slide="next">
							<span class="icon-next" aria-hidden="true"></span>
							<span class="sr-only">Rückwärts</span>
						</a>
					</div>
				</div>
			</div>
		)
	}

	columns.0 {
		renderObj = COA
		renderObj {

		    # Bilderzähler mit -1 initialisieren, damit "data-slide-to" mit 0 beginnen kann
			5 = LOAD_REGISTER
			5.imgCounter2 = -1

			# Bilder-Indikator erstellen
		    10 = FILES
			10 {

			    # Quelle: https://docs.typo3.org/typo3cms/TyposcriptReference/7.6/ContentObjects/Files/Index.html#special-key-references
				# http://www.typo3forum.net/discussion/77745/imageslider-via-ts
				references {
					table = tt_content
					uid.field = uid
					#fieldName = image
					fieldName = assets
				}

				renderObj = COA
				renderObj {

					# Bilderzähler laden
				    10 = LOAD_REGISTER
					10 {
						imgCounter2.cObject = TEXT
						imgCounter2.cObject.data = register:imgCounter2
						imgCounter2.cObject.wrap = |+1
						imgCounter2.prioriCalc = intval
					}

				    # Indikatoren ausgeben
					20 = IMAGE
					20 {
						stdWrap.dataWrap = <li data-target="#carousel-slider" data-slide-to="{register:imgCounter2}"></li>

						# Erster Indikator als "active" setzen
						stdWrap.dataWrap.override = <li data-target="#carousel-slider" data-slide-to="{register:imgCounter2}" class="active"></li>
						stdWrap.dataWrap.override.if {
							equals.data = register:imgCounter2
							value = 0
						}
					}

				}
				stdWrap.wrap = <ol class="carousel-indicators">|</ol>
			}

		    # Bilder, Link-Button und Text erstellen
			20 = FILES
			20 {
				references {
					table = tt_content
					uid.field = uid
					#fieldName = image
					fieldName = assets
				}
				renderObj = COA
				renderObj {

				    # Bilderzähler laden
				    10 = LOAD_REGISTER
					10 {
						imgCounter.cObject = TEXT
						imgCounter.cObject.data = register:imgCounter
						imgCounter.cObject.wrap = |+1
						imgCounter.prioriCalc = intval
					}

				    # Link-Button vorbereiten
					20 = LOAD_REGISTER
					20 {
						imageCaption.cObject = COA
						imageCaption.cObject {

							10 = TEXT
							10 {
								required = 1
								data = file:current:description
								wrap = <h2>|</h2>
							}

							20 = TEXT
							20 {
								required = 1
								data = file:current:title
								typolink.parameter.data = file:current:link
								typolink.ATagParams = class="link-button"
								#typolink.title.data = file:current:title
							}
							wrap = <div class="carousel-caption">|</div>
						}
					}

				    # Bild mit Link-Button ausgeben
				    30 = IMAGE
				    30 {
						file.import.data = file:current:publicUrl
						#titleText.data = file:current:title
						altText.data = file:current:alternative
						params = class="img-responsive"
						stdWrap.dataWrap = <div class="item">|{register:imageCaption}</div>

						# Das erste Bild als "active" setzen, damit der Slider überhaupt starten kann
						stdWrap.dataWrap.override = <div class="item active">|{register:imageCaption}</div>
						stdWrap.dataWrap.override.if {
							equals.data = register:imgCounter
							value = 1
						}
					}

				}
				stdWrap.wrap = <div class="carousel-inner" role="listbox">|</div>
			}
		}
	}

}
*/


# Link Box: Output Rendering
tt_content.gridelements_pi1.20.10.setup.custom_container_linkbox {
	columns.0 {
		renderObj = COA
		renderObj {

			# Bild ausgeben
			10 = FILES
			10 {
				references {
					table = tt_content
					#uid.field = uid
					fieldName = assets
				}

				renderObj = IMAGE
				renderObj {
					file.width = 720
					file.height = 375c
					file.import.data = file:current:publicUrl
					file.crop.data = file:current:crop
					//titleText.data = file:current:title
					altText.data = file:current:alternative
					params = class="img-responsive"
					//stdWrap.typolink.parameter.data = file:current:link
				}
			}

			# Header ausgeben
			20 = TEXT
			20 {
				field = header
				wrap = <div class="link-box-title"><h2>|</h2></div>
				if.isTrue.field = header
			}

			# Link aus Header um Bild und Überschrift wrappen
			stdWrap.typolink.parameter.field = header_link
			stdWrap.wrap = <div class="col-sm-6">|</div>
		}


		/*
		# # Nur auf Home Latest News ausgeben
		stdWrap.append = CONTENT
		stdWrap.append {
			table = tt_news
			select.pidInList = 22
			select.orderBy = datetime DESC
			select.max = 1

			renderObj = COA
			renderObj {

				10 = TEXT
				10.field = datetime
				#10.date_stdWrap.strftime = %d. %B %Y
				10.strftime = %d. %B %Y
				10.wrap = <div class="link-box-description"><p>|</p>

				20 = TEXT
				20.field = title
				20.wrap = <h3>|</h3>

				30 = TEXT
				30.field = bodytext
				30.crop = 175|...|1
				30.wrap = <p class="teaser">|</p></div>

				40 = TEXT
				40.value = <div class="link-box-title"><h2>News</h2></div>


				# Link um Latest News wrappen
				stdWrap.typolink {
					# link to single view
					parameter = 21

					# create an cacheable link, that does not depend on cooluri or realurl.
					useCacheHash = 1

					# add the additional params
					additionalParams.wrap = &tx_ttnews[tt_news]=|

					# data expects special commands
					# "&my_extra_param=something" cannot work on .data
					additionalParams.data = field:uid
				}
			}
			wrap = <div class="col-sm-6 news-latest">|</div>
		}
		*/

		wrap = <div class="row link-box">|</div>
	}
}



[traverse(page, "uid") == 1]
# # Nur auf Home Latest News ausgeben
tt_content.gridelements_pi1.20.10.setup.custom_container_linkbox.columns.0.stdWrap.append = CONTENT
tt_content.gridelements_pi1.20.10.setup.custom_container_linkbox.columns.0.stdWrap.append {
	table = tx_news_domain_model_news
	select.pidInList = 22
	select.orderBy = datetime DESC
	select.max = 1

	renderObj = COA
	renderObj {

		10 = TEXT
		10.field = datetime
		#10.date_stdWrap.strftime = %d. %B %Y
		10.strftime = %d. %B %Y
		10.wrap = <div class="link-box-description"><p>|</p>

		20 = TEXT
		20.field = title
		20.wrap = <h3>|</h3>

		30 = TEXT
		30.field = bodytext
		30.crop = 175|...|1
		30.wrap = <p class="teaser">|</p></div>

		40 = TEXT
		40.value = <div class="link-box-title"><h2>News</h2></div>


		# Link um Latest News wrappen
		stdWrap.typolink {
			# link to single view
			parameter = 21

			# create an cacheable link, that does not depend on cooluri or realurl.
			useCacheHash = 1

			# add the additional params
			## OLD tt_news: additionalParams.wrap = &tx_ttnews[tt_news]=|
			additionalParams.wrap = &tx_news_pi1[action]=detail&tx_news_pi1[controller]=News&tx_news_pi1[news]=|

			# data expects special commands
			# "&my_extra_param=something" cannot work on .data
			additionalParams.data = field:uid
		}
	}
	wrap = <div class="col-sm-6 news-latest">|</div>
}
[END]


# Image-Gallery: Output Rendering
tt_content.gridelements_pi1.20.10.setup.custom_elements_img-gallery-4 {
	# item wrap
	stdWrap {
		outerWrap = <div class="flow-thumbnail-gallery">|</div>
	}

	columns.0 {
		#wrap = <div class="row">|</div>

        renderObj = COA
        renderObj {
            wrap = <div class="row">|</div>

            #Ausgabe aller übrigen Bilder als kleine Thumbnails, damit kB reduziert wird
            10 = FILES
            10 {
				references {
					table = tt_content
					#fieldName = image
					fieldName = assets
				}
				begin = 0

                renderObj = COA
                renderObj {

					10 = IMAGE
					10 {
						file {
							#treatIdAsReference = 1
							#width = 720
							#height = 474c
							#Verhältnis w : h = 1.519
							#width = 220
							#height = 145c
							#Verhältnis w : h = 1.333
							#width = 350
							#height = 262c
							#Verhältnis w : h = 1.25
							width = 345
							height = 275c
							import.data = file:current:publicUrl
						}

						altText.data = file:current:alternative // file:current:title
						params = class="img-responsive"
						imageLinkWrap = 1
						imageLinkWrap {
							enable = 1
							JSwindow = 0
							directImageLink = 1
							linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lightbox{field:uid}" title="{file:current:description // file:current:title}"
							width = 1024
							height = 1024m
						}
					}

					20 = TEXT
					20 {
					    data = file:current:description
						wrap = <div class="caption"><p>|</p></div>
					}
					# Jedes einzelne Bildelement wrapen (äusserster Container im Bild Loop)
					stdWrap.wrap = <div class="col-xs-3">|</div>
                }
            }
        }
    }
}

# Logo-Gallery: Output Rendering
tt_content.gridelements_pi1.20.10.setup.custom_elements_logo-gallery {
	# item wrap
	stdWrap {
		outerWrap = <div class="flow-logo-gallery">|</div>
	}

	columns.0 {
		#wrap = <div class="row">|</div>

        renderObj = COA
        renderObj {
            wrap = <div class="row">|</div>

            #Ausgabe aller übrigen Bilder als kleine Thumbnails, damit kB reduziert wird
            10 = FILES
            10 {
				references {
					table = tt_content
					#fieldName = image
					fieldName = assets
				}
				begin = 0

                renderObj = COA
                renderObj {

					10 = IMAGE
					10 {
						file {
							#treatIdAsReference = 1
							#width = 720
							#height = 474c
							#Verhältnis w : h = 1.519
							#width = 220
							#height = 145c
							#Verhältnis w : h = 1.333
							#width = 350
							#height = 262c
							#Verhältnis w : h = 1.25
							width = 200
							height = 200
							import.data = file:current:publicUrl
						}

						altText.data = file:current:alternative // file:current:title
						params = class="img-responsive"
						/*
						imageLinkWrap = 1
						imageLinkWrap {
							enable = 1
							JSwindow = 0
							directImageLink = 1
							linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lightbox{field:uid}" title="{file:current:description // file:current:title}"
							width = 800
							height = 800m
						}
						*/

						imageLinkWrap = 1
						imageLinkWrap {
							enable = 1
							typolink.parameter.data = file:current:link
						}
					}

					20 = TEXT
					20 {
					    data = file:current:description
						wrap = <div class="caption"><p>|</p></div>
					}
					# Jedes einzelne Bildelement wrapen (äusserster Container im Bild Loop)
					stdWrap.wrap = <div class="col-xs-6 col-sm-6 col-md-4 col-lg-3 ">|</div>
                }
            }
        }
    }
}



/*
# Icon-Gallery: Output Rendering
tt_content.gridelements_pi1.20.10.setup.custom_elements_icon-gallery {
	# item wrap
	stdWrap {
		outerWrap = <div class="icon-thumbnail-gallery">|</div>
	}

	columns.0 {
		#wrap = <div class="row">|</div>

        renderObj = COA
        renderObj {
            wrap = <div class="row">|</div>

            #Ausgabe aller übrigen Bilder als kleine Thumbnails, damit kB reduziert wird
            10 = FILES
            10 {
				references {
					table = tt_content
					#fieldName = image
					fieldName = assets
				}
				begin = 0

                renderObj = COA
                renderObj {

					10 = IMAGE
					10 {
						file {
							#treatIdAsReference = 1
							width = 50
							height = 50c
							import.data = file:current:publicUrl
						}

						altText.data = file:current:alternative // file:current:title
						params = class="img-responsive"
						titleText.data = file:current:title

#						imageLinkWrap = 1
#						imageLinkWrap {
#							enable = 1
#							JSwindow = 0
#							directImageLink = 1
#							linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lightbox{field:uid}" title="{file:current:description // file:current:title}"
#							width = 800
#							height = 800m
#						}

					}

					20 = TEXT
					20 {
					    data = file:current:description
						wrap = <div class="caption"><p>|</p></div>
					}
					# Jedes einzelne Bildelement wrapen (äusserster Container im Bild Loop)
					stdWrap.wrap = <div class="col-lg-2 col-md-3 col-sm-3 col-xs-3">|</div>
                }
            }
        }
    }
}
*/

# Icon-Gallery: Output Rendering
tt_content.gridelements_pi1.20.10.setup.custom_elements_info-box {
	columns.0 {
		wrap = <div class="info-box">|</div>
		
		renderObj = COA
        renderObj {
			
			# Ausgabe Header
			10 = TEXT
			10 {
				field = header
				wrap = <h3>|</h3>
				if.isTrue.field = header
			}
			
			# Ausgabe Bodytext
			20 = TEXT
			20 {
				field = bodytext
				parseFunc < lib.parseFunc_RTE
			}
		}
    }
}

# One-Single-Thumbnail-Gallery: Output Rendering
tt_content.gridelements_pi1.20.10.setup.custom_elements_one-single-thumbnail-gallery {
    # item wrap
    stdWrap {
        outerWrap = <div class="one-single-thumbnail-gallery">|</div>
    }

    columns.0 {
        #wrap = <div class="row">|</div>

        renderObj = COA
        renderObj {
            wrap = <div class="row">|</div>

            #Ausgabe des ersten Bildes als Thumbnail
            10 = FILES
            10 {
                references {
                    table = tt_content
                    fieldName = assets
                }
                begin = 0
                maxItems = 1

                renderObj = COA
                renderObj {

                    10 = IMAGE
                    10 {
                        file {
                            #treatIdAsReference = 1
                            width = 760
                            height = 570c
                            import.data = file:current:publicUrl
                            crop.data = file:current:crop
                        }

                        altText.data = file:current:alternative // file:current:title
                        params = class="img-responsive"
                        imageLinkWrap = 1
                        imageLinkWrap {
                            enable = 1
                            JSwindow = 0
                            directImageLink = 1
                            linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lightbox{field:uid}" title="{file:current:description // file:current:title}"
                            width = 1024
                            height = 1024m
                        }
                    }

                    20 = TEXT
                    20 {
                        data = file:current:description
                        wrap = <div class="caption"><p>|</p></div>
                    }
                    # Bildelement wrapen (äusserster Container im Bild Loop)
                    stdWrap.wrap = <div class="col-xs-12">|</div>
                }
            }

            #Ausgabe übrigen Bilder versteckt ausgeben, sie sollen nur in der Grossbildansicht erscheinen
            20 = FILES
            20 {
                references {
                    table = tt_content
                    fieldName = assets
                }
                begin = 1

                renderObj = COA
                renderObj {

                    10 = IMAGE
                    10 {
                        file {
                            #treatIdAsReference = 1
                            width = 50
                            height = 50c
                            import.data = file:current:publicUrl
                            crop.data = file:current:crop
                        }

                        altText.data = file:current:alternative // file:current:title
                        params = class="img-responsive"
                        imageLinkWrap = 1
                        imageLinkWrap {
                            enable = 1
                            JSwindow = 0
                            directImageLink = 1
                            linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lightbox{field:uid}" title="{file:current:description // file:current:title}"
                            width = 1024
                            height = 1024m
                        }
                    }

                    20 = TEXT
                    20 {
                        data = file:current:description
                        wrap = <div class="caption"><p>|</p></div>
                    }
                }
                stdWrap.wrap = <div class="col-xs-12 do-not-display">|</div>
            }
        }
    }
}