commit 436c05ae050ffa17a3c682c21bdffe5490908996 Author: buttle Date: Mon May 31 20:28:57 2021 +0200 renders source link and subtitle diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9bd6b00 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2018 Neo-Inspiration + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/Module.php b/Module.php new file mode 100644 index 0000000..3da17ce --- /dev/null +++ b/Module.php @@ -0,0 +1,14 @@ +=e&&(this.perPage=this.config.perPage[e])}}},{key:"prev",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments[1];if(!(this.innerElements.length<=this.perPage)){var i=this.currentSlide;if(this.config.loop){if(this.currentSlide-e<0){this.disableTransition();var r=this.currentSlide+this.innerElements.length,n=this.perPage,s=r+n,l=(this.config.rtl?1:-1)*s*(this.selectorWidth/this.perPage),o=this.config.draggable?this.drag.endX-this.drag.startX:0;this.sliderFrame.style[this.transformProperty]="translate3d("+(l+o)+"px, 0, 0)",this.currentSlide=r-e}else this.currentSlide=this.currentSlide-e}else this.currentSlide=Math.max(this.currentSlide-e,0);i!==this.currentSlide&&(this.slideToCurrent(this.config.loop),this.config.onChange.call(this),t&&t.call(this))}}},{key:"next",value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,t=arguments[1];if(!(this.innerElements.length<=this.perPage)){var i=this.currentSlide;if(this.config.loop){if(this.currentSlide+e>this.innerElements.length-this.perPage){this.disableTransition();var r=this.currentSlide-this.innerElements.length,n=this.perPage,s=r+n,l=(this.config.rtl?1:-1)*s*(this.selectorWidth/this.perPage),o=this.config.draggable?this.drag.endX-this.drag.startX:0;this.sliderFrame.style[this.transformProperty]="translate3d("+(l+o)+"px, 0, 0)",this.currentSlide=r+e}else this.currentSlide=this.currentSlide+e}else this.currentSlide=Math.min(this.currentSlide+e,this.innerElements.length-this.perPage);i!==this.currentSlide&&(this.slideToCurrent(this.config.loop),this.config.onChange.call(this),t&&t.call(this))}}},{key:"disableTransition",value:function(){this.sliderFrame.style.webkitTransition="all 0ms "+this.config.easing,this.sliderFrame.style.transition="all 0ms "+this.config.easing}},{key:"enableTransition",value:function(){this.sliderFrame.style.webkitTransition="all "+this.config.duration+"ms "+this.config.easing,this.sliderFrame.style.transition="all "+this.config.duration+"ms "+this.config.easing}},{key:"goTo",value:function(e,t){if(!(this.innerElements.length<=this.perPage)){var i=this.currentSlide;this.currentSlide=this.config.loop?e%this.innerElements.length:Math.min(Math.max(e,0),this.innerElements.length-this.perPage),i!==this.currentSlide&&(this.slideToCurrent(),this.config.onChange.call(this),t&&t.call(this))}}},{key:"slideToCurrent",value:function(e){var t=this,i=this.config.loop?this.currentSlide+this.perPage:this.currentSlide,r=(this.config.rtl?1:-1)*i*(this.selectorWidth/this.perPage);e?requestAnimationFrame(function(){requestAnimationFrame(function(){t.enableTransition(),t.sliderFrame.style[t.transformProperty]="translate3d("+r+"px, 0, 0)"})}):this.sliderFrame.style[this.transformProperty]="translate3d("+r+"px, 0, 0)"}},{key:"updateAfterDrag",value:function(){var e=(this.config.rtl?-1:1)*(this.drag.endX-this.drag.startX),t=Math.abs(e),i=this.config.multipleDrag?Math.ceil(t/(this.selectorWidth/this.perPage)):1,r=e>0&&this.currentSlide-i<0,n=e<0&&this.currentSlide+i>this.innerElements.length-this.perPage;e>0&&t>this.config.threshold&&this.innerElements.length>this.perPage?this.prev(i):e<0&&t>this.config.threshold&&this.innerElements.length>this.perPage&&this.next(i),this.slideToCurrent(r||n)}},{key:"resizeHandler",value:function(){this.resolveSlidesNumber(),this.currentSlide+this.perPage>this.innerElements.length&&(this.currentSlide=this.innerElements.length<=this.perPage?0:this.innerElements.length-this.perPage),this.selectorWidth=this.selector.offsetWidth,this.buildSliderFrame()}},{key:"clearDrag",value:function(){this.drag={startX:0,endX:0,startY:0,letItGo:null,preventClick:this.drag.preventClick}}},{key:"touchstartHandler",value:function(e){-1!==["TEXTAREA","OPTION","INPUT","SELECT"].indexOf(e.target.nodeName)||(e.stopPropagation(),this.pointerDown=!0,this.drag.startX=e.touches[0].pageX,this.drag.startY=e.touches[0].pageY)}},{key:"touchendHandler",value:function(e){e.stopPropagation(),this.pointerDown=!1,this.enableTransition(),this.drag.endX&&this.updateAfterDrag(),this.clearDrag()}},{key:"touchmoveHandler",value:function(e){if(e.stopPropagation(),null===this.drag.letItGo&&(this.drag.letItGo=Math.abs(this.drag.startY-e.touches[0].pageY)=this.innerElements.length)throw new Error("Item to remove doesn't exist 😭");var i=ethis.innerElements.length+1)throw new Error("Unable to inset it at this index 😭");if(-1!==this.innerElements.indexOf(e))throw new Error("The same item in a carousel? Really? Nope 😭");var r=t<=this.currentSlide>0&&this.innerElements.length;this.currentSlide=r?this.currentSlide+1:this.currentSlide,this.innerElements.splice(t,0,e),this.buildSliderFrame(),i&&i.call(this)}},{key:"prepend",value:function(e,t){this.insert(e,0),t&&t.call(this)}},{key:"append",value:function(e,t){this.insert(e,this.innerElements.length+1),t&&t.call(this)}},{key:"destroy",value:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(this.detachEvents(),this.selector.style.cursor="auto",e){for(var i=document.createDocumentFragment(),r=0;r [ + 'template_path_stack' => [ + dirname(__DIR__) . '/view', + ] + ], + 'block_layouts' => [ + 'factories' => [ + 'carousel' => Service\BlockLayout\CarouselFactory::class, + ], + ], + 'form_elements' => [ + 'invokables' => [ + Form\CarouselBlockForm::class => Form\CarouselBlockForm::class, + ], + ], + 'DefaultSettings' => [ + 'CarouselBlockForm' => [ + 'height' => '500px', + 'duration' => 200, + 'perPage' => 1, + 'loop' => true, + 'draggable' => true, + 'subTitle' => '', + 'renderSourceLink' => true, + 'autoSlide' => false, + 'autoSlideInt' => 5000, + 'wrapStyle' => 'overflow-y: hidden;display: flex;flex-direction: column;justify-content: center;', + 'imgStyle' => '', + 'ui_background' => 'rgba(0,0,0,0.1)', + ] + ] +]; diff --git a/config/module.ini b/config/module.ini new file mode 100644 index 0000000..93bed85 --- /dev/null +++ b/config/module.ini @@ -0,0 +1,12 @@ +[info] +name = "Simple Carousel" +description = "Display carousels into pages" +tags = "" +license = "MIT" +author = "ESnark" +author_link = "https://github.com/ESnark" +module_link = "https://github.com/Neo-Inspiration/Omeka-S-SimpleCarousel" +support_link = "https://github.com/Neo-Inspiration/Omeka-S-SimpleCarousel/issues" +configurable = false +version = "1.3.0" +omeka_version_constraint = "^3.0.0" \ No newline at end of file diff --git a/src/Form/CarouselBlockForm.php b/src/Form/CarouselBlockForm.php new file mode 100644 index 0000000..1921730 --- /dev/null +++ b/src/Form/CarouselBlockForm.php @@ -0,0 +1,119 @@ +add([ + 'name' => 'o:block[__blockIndex__][o:data][height]', + 'type' => Element\Text::class, + 'options' => [ + 'label' => 'Carousel height', + 'info' => 'Please enter a number with CSS units.', + ], + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][duration]', + 'type' => Element\Number::class, + 'options' => [ + 'label' => 'Duration (milliseconds)', + 'info' => 'Slide transition duration in milliseconds.' + ], + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][perPage]', + 'type' => Element\Number::class, + 'options' => [ + 'label' => 'Image Per page', + 'info' => 'The number of slides to be shown.' + ], + 'attributes' => [ + 'min' => 1, + 'max' => 10, + ] + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][loop]', + 'type' => Element\Checkbox::class, + 'options' => [ + 'label' => 'Loop', + ] + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][draggable]', + 'type' => Element\Checkbox::class, + 'options' => [ + 'label' => 'Draggable', + ] + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][autoSlide]', + 'type' => Element\Checkbox::class, + 'options' => [ + 'label' => 'Auto Slide', + ] + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][autoSlideInt]', + 'type' => Element\Text::class, + 'options' => [ + 'label' => 'Slide Interval (milliseconds)', + 'info' => 'Shows next slide every given millisecond.' + ] + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][wrapStyle]', + 'type' => Element\Text::class, + 'options' => [ + 'label' => 'image wrapper Style', + ] + ]); + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][imgStyle]', + 'type' => Element\Text::class, + 'options' => [ + 'label' => 'img tag Style', + ] + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][ui_background]', + 'type' => Element\Text::class, + 'options' => [ + 'label' => 'siema UI style', + 'info' => 'Styling #siema-ui including UI element. commonly used for background setup.' + ] + ]); + + $this->add([ + 'type' => Element\Checkbox::class, + 'name' => 'o:block[__blockIndex__][o:data][renderSourceLink]', + 'options' => [ + 'label' => 'Display a link to the item', + //'use_hidden_element' => true, + 'checked_value' => true, + 'unchecked_value' => false, + ], + ]); + + $this->add([ + 'name' => 'o:block[__blockIndex__][o:data][subTitle]', + 'type' => Element\Text::class, + 'options' => [ + 'label' => 'Sub-title', + ] + ]); + + } +} diff --git a/src/Service/BlockLayout/CarouselFactory.php b/src/Service/BlockLayout/CarouselFactory.php new file mode 100644 index 0000000..fb3c52a --- /dev/null +++ b/src/Service/BlockLayout/CarouselFactory.php @@ -0,0 +1,18 @@ +get('FormElementManager'), + $services->get('Config')['DefaultSettings']['CarouselBlockForm'] + ); + } +} +?> \ No newline at end of file diff --git a/src/Site/BlockLayout/Carousel.php b/src/Site/BlockLayout/Carousel.php new file mode 100644 index 0000000..20b0d92 --- /dev/null +++ b/src/Site/BlockLayout/Carousel.php @@ -0,0 +1,111 @@ +formElementManager = $formElementManager; + $this->defaultSettings = $defaultSettings; + } + + public function getLabel() { + return 'SimpleCarousel'; + } + + public function form(PhpRenderer $view, SiteRepresentation $site, + SitePageRepresentation $page = null, SitePageBlockRepresentation $block = null + ) { + $form = $this->formElementManager->get(CarouselBlockForm::class); + $data = $block + ? $block->data() + $this->defaultSettings + : $this->defaultSettings; + $form->setData([ + 'o:block[__blockIndex__][o:data][height]' => $data['height'], + 'o:block[__blockIndex__][o:data][duration]' => $data['duration'], + 'o:block[__blockIndex__][o:data][perPage]' => $data['perPage'], + 'o:block[__blockIndex__][o:data][loop]' => $data['loop'], + 'o:block[__blockIndex__][o:data][draggable]' => $data['draggable'], + 'o:block[__blockIndex__][o:data][subTitle]' => $data['subTitle'], + 'o:block[__blockIndex__][o:data][autoSlide]' => $data['autoSlide'], + 'o:block[__blockIndex__][o:data][autoSlideInt]' => $data['autoSlideInt'], + 'o:block[__blockIndex__][o:data][wrapStyle]' => $data['wrapStyle'], + 'o:block[__blockIndex__][o:data][imgStyle]' => $data['imgStyle'], + 'o:block[__blockIndex__][o:data][ui_background]' => $data['ui_background'], + 'o:block[__blockIndex__][o:data][renderSourceLink]' => $data['renderSourceLink'], + ]); + $form->prepare(); + + $html = ''; + $html .= $view->blockAttachmentsForm($block); + $html .= '

' . $view->translate('Options'). '

'; + $html .= '
'; + $html .= $view->formCollection($form); + $html .= '
'; + return $html; + } + + public function render(PhpRenderer $view, SitePageBlockRepresentation $block) + { + $attachments = $block->attachments(); + if (!$attachments) { + return ''; + } + + $urls = []; + + foreach ($attachments as $attachment) + { + foreach($attachment->item()->media() as $media) + { + $mediaType = $media->mediaType(); + $mediaRenderer = $media->renderer(); + if ((strpos($mediaType, 'image/') !== false) || (strpos($mediaRenderer, 'youtube') !== false)) { + array_push($urls, $media->thumbnailUrl('large')); + } + } + } + + return $view->partial('common/block-layout/simple-carousel', [ + 'height' => $block->dataValue('height'), + 'duration' => $block->dataValue('duration'), + 'perPage' => $block->dataValue('perPage'), + 'loop' => $block->dataValue('loop'), + 'draggable' => $block->dataValue('draggable'), + 'subTitle' => $block->dataValue('subTitle'), + 'urls' => $urls, + 'autoSlide' => $block->dataValue('autoSlide'), + 'autoSlideInt' => $block->dataValue('autoSlideInt'), + 'wrapStyle' => $block->dataValue('wrapStyle'), + 'imgStyle' => $block->dataValue('imgStyle'), + 'ui_background' => $block->dataValue('ui_background'), + 'item_url' => $attachments[0]->item()->url(), + //'item_title' => $attachments[0]->item()->title(), + 'renderSourceLink' => $block->dataValue('renderSourceLink'), + ]); + } +} diff --git a/view/common/block-layout/simple-carousel.phtml b/view/common/block-layout/simple-carousel.phtml new file mode 100644 index 0000000..d8c0194 --- /dev/null +++ b/view/common/block-layout/simple-carousel.phtml @@ -0,0 +1,73 @@ +
+ headLink()->appendStylesheet($this->assetUrl('css/carousel.css', 'SimpleCarousel')); + $this->headScript()->appendFile($this->assetUrl('js/siema.min.js', 'SimpleCarousel')); + + $title = false; + + + $caret = sprintf('', $this->assetUrl('caret.png', 'SimpleCarousel')); + $caret_r = sprintf('', $this->assetUrl('caret.png', 'SimpleCarousel')); + ?> + +
+ + +
+ Source +
+ + +
+
', $wrapStyle, $imgStyle, $url); + echo $html; + } + ?> +
+
+
+ +
+ +
+ + + + +