Giter Club home page Giter Club logo

neos-slick's Introduction

Packagist Code Climate maintainability Packagist semantic-release

Slick Content Element for Neos CMS

This is a ready-to-use implementation of the JavaScript package slick.

Installation

Most of the time you have to make small adjustments to a package (e.g., the configuration in Settings.yaml). Because of that, it is important to add the corresponding package to the composer manifest in your theme package. Mostly this is the site package located under Packages/Sites/. To install it correctly, go to your theme package (e.g. Packages/Sites/Foo.Bar) and run following command:

composer require unikka/neos-slick --no-update

The --no-update command prevents the automatic update of the dependencies. After the package was added to your theme composer.json, go back to the root of the Neos installation and run composer update. Your desired package is now installed correctly.

Content editing inside slides

Usage

This package uses background images as slides. If you want to use a fixed height for the slider you can use the following CSS to override the defaults:

.slick-slide {
    min-height: <your-slide-height>;
}

Disabling / enabling features

The Slide and the Slider element have a few mixins, which you can use to enable/disable and to add/remove a feature.

Example

If you want to disable the autoplay option in the backend, you can do this:

'Unikka.Slick:Content.Slider':
  superTypes:
    'Unikka.Slick:Mixin.Autoplay': false

Unikka.Slick:Content.Slider Mixins

Mixin Default value Description
Unikka.Slick:Mixin.Autoplay true Autoplay option
Unikka.Slick:Mixin.SlidesToScroll true How many slides scroll
Unikka.Slick:Mixin.Infinite false Infinite scrolling
Unikka.Slick:Mixin.Draggable true Draggable
Unikka.Slick:Mixin.PauseOnHover true Pause on hover
Unikka.Slick:Mixin.AnimationSpeed true Animation speed
Unikka.Slick:Mixin.Fade false Fade
Unikka.Slick:Mixin.Arrows true Arrows shown
Unikka.Slick:Mixin.Dots false Dots shown
Unikka.Slick:Mixin.SlidesToShow true Number of slides shown at once
Unikka.Slick:Mixin.AdditionalClass true Additional CSS-Class
Unikka.Slick:Mixin.Repsonsive.Sm true Responsive group mobile
Unikka.Slick:Mixin.Repsonsive.Md true Responsive group tablet
Unikka.Slick:Mixin.Repsonsive.Lg true Responsive group laptop
Unikka.Slick:Mixin.Repsonsive.Xl true Responsive group desktop

Unikka.Slick:Content.Slide Mixins

Mixin Default value Description
Unikka.Slick:Mixin.BackgroundImage true Background image for Slide
Unikka.Slick:Mixin.AdditionalClass true Additional CSS-Class
Unikka.Slick:Mixin.LazyLoading true Enables layz loading
Unikka.Slick:Mixin.ContentBackground true Enables dark translucend background

Fade option

The fade options is disabled by default, because if you enable fade, the "slides to show" option isn't working. But you can simply enable it like this:

'Unikka.Slick:Content.Slider':
  superTypes:
    'Unikka.Slick:Mixin.Fade': true 
    'Unikka.Slick:Mixin.SlidesToShow': false

Configuration

Unikka:
  Slick:
    # include the theme css file from slick
    theme: true
    backend:
      # disables autoplay in backend
      disableAutoplay: true
    # breakpoints for the responsive tab
    responsive:
      sm: 576px
      md: 768px
      lg: 992px
      xl: 1200px

Contribution

We'd love you to contribute to neos-slick. We try to make it as easy as possible. We are using semantic versioning to have more time to concentrate on important stuff instead of struggling in the dependency or release hell.

Therefore the first rule is to follow the eslint commit message guideline. It is really easy if you always commit via yarn commit. Commitizen will guide you.

All PRs will be merged into the master branch. Travis and semantic release will check the commit messages and start building a new release when the analysis of the latest commits will trigger that.

If you have questions just ping us on Twitter or Github.

About

The package is based on the Noerdisch/Slick package. We thank the Noerdisch team for all the efforts. Part of the development has been sponsored by the Danske Folkekirken, we are proud that the Folkekirken is using the slider package and supports open source software.

License

The MIT License (MIT). Please see License File for more information.

neos-slick's People

Contributors

abteilung avatar andrehoffmann30 avatar daniellienert avatar dependabot-preview[bot] avatar dependabot-support avatar dependabot[bot] avatar greenkeeper[bot] avatar lorenzulrich avatar markusguenther avatar semantic-release-bot avatar virtim avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar avatar

Forkers

lorenzulrich visol-forks punktdeforks kleisli sebastiansommer soee

neos-slick's Issues

Change focus to main slider

Description

When creating content on slides (not the first slide) or when changing the settings of a slide.
The guestframe reloads and try to focus the node of the slide.

But when reloading the slide is maybe not selected.
So the focus is on an element in the nirvana.

Steps to Reproduce

  1. Create a slide
  2. Create a second slide
  3. Change for instance the background image on slide 2

Expected behavior

Page reloads and does not scroll right into the nirvana to focus the not selected slide 2.
Maybe focus the parent node instead.

Actual behavior

Page reloads and scrolls to the right where the slide 2 is hidden but the ui tried to focus the element.

[What actually happened]

Affected Versions

Slick: 3.1

Remove Scrollbar

When you use windows based browsers the content slider renders a scrollbar

The automated release is failing 🚨

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

No npm token specified.

An npm token must be created and set in the NPM_TOKEN environment variable on your CI environment.

Please make sure to create an npm token and to set it in the NPM_TOKEN environment variable on your CI environment. The token must allow to publish to the registry https://registry.npmjs.org/.

Good luck with your project ✨

Your semantic-release bot 📦🚀

Replace slick carousel

The library is pretty old and comes with jquery as dependency. Would be better to use vanilla js or a pretty small library like preact ⚛️

Replace TravisCI with CircleCI

After TravisCI has been acquired and the company fired a lot of the awesome developers we should switch to CircleCI. Don´t want to support such behavior.

An in-range update of style-loader is breaking the build 🚨

☝️ Important announcement: Greenkeeper will be saying goodbye 👋 and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io

The devDependency style-loader was updated from 1.1.3 to 1.1.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

style-loader is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details
  • ❌ ci/circleci: build: Your tests failed on CircleCI (Details).
Release Notes for v1.1.4

1.1.4 (2020-04-15)

Chore

  • update deps
Commits

The new version differs by 3 commits.

  • 171a747 chore(release): 1.1.4
  • af1b4a9 chore(deps): update
  • a003f05 docs: add links for the options table (#460)

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

Your Greenkeeper Bot 🌴

Typos in responsive mixin (file) names

Description

The responsive mixins have a typo in their files and node type names:

NodeTypes.Mixin.Repsonsive.Lg.yaml instead of NodeTypes.Mixin.Responsive.Lg.yaml (and so on)

I intended to fix this via a PR, but it is a breaking change, so I don't know if it can be fixed without releasing a major version.

It is not possible to add an slide element on neos 5.2.2

Description

After the installation with composer it is not possible to add an slide to the silder element.
Because the "slide element" is not showing up after i have created and slider element on my document tree.
It seem that the slider element is also not an content collection.

Steps to Reproduce

  1. install it with composer and neos 5.0
  2. open some page and add a slider element
  3. try to add an slide element

Expected behavior

After i have added an slider it should be possible to add an slide element.

Actual behavior

[What actually happened]

Affected Versions

Neos: 5.2.2

Slick: v3.3.2

You can get this information by running composer show or using the package management module within Neos.

Upgrade toolchain

Description

We still use webpack 4 and some dependencies are outdated as the amout of dependabot PRs shows.
So we should upgrade the whole toolchain.

Change license

As it is a neos package and neos is under GPL-3 so se need to use the license as well.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.