As discussed in the other issue based on 7.x-2.x Here is my suggestion for the initial 8.x-1.x branch.
I thought a rather simple codebase would be better. I followed KISS.

When this codebase is pushed to 8.x-1.x we could supply patches for optionesets, views plugin, lazy loading, extra theme function for sync slider based on this.
I kicked out all of functions that are more or less site specific features.

Included is a slick_demo module which shows various sliders based on the github doc. (Same slider without the lazy loader). Maybe rename this to slick_example and add docs like the example module in 7.x-2.x? Create a different Issue for this?
Example:

What do you think of this approach?

Comments

valkum’s picture

gausarts’s picture

Looks good. Thank you.
Much appreciated with demo, may be later can be integrated with example module, or kept separated depending on further discussions/ suggestions.

One tiny issue, though, if you can address them, that will be great, but please ignore if too much trouble.
Regarding some BEM syntax. I know some people think ugly, but worth the efforts in the long run:
https://www.drupal.org/node/1887918
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-s...

slick-item.html.twig

slick-slide to slick__slide
slide-content to slide__content

slick.html.twig

slick-carousel to slick--carousel
slick-slider to slick--slider
'slick-' ~ attributes.id to 'slick--' ~ attributes.id, no sure if this is needed, but let's keep it now

We can address other things as we go, so it's good as a starter, I think.

Hi, Arshad, or anyone, any suggestion? Thanks.

gausarts’s picture

Title: [meta] 8.x-1.x Version » 8.x-1.x Port
Status: Needs review » Needs work

In the mean time, let's change the status and title.

valkum’s picture

Allright. in terms of slick-slider and slick-slide: The component css of slick don't use the BEM style. We have to mirror the slick.css then.
What about slick-carousel? I think we can drop that: What is the difference between slider and carousel? infinite: true?

'slick--' ~ attributes.id we should keep this, as most core themes also use unique classes for js etc.

gausarts’s picture

The mentioned BEM thingy is Drupal standard.
The core library slick.css is a jQuery plugin which is not adhered to Drupal standard.
However as long as we are building a Drupal module we'd better stick to its standard whenever we can.
What do you think?

What is the difference between slider and carousel? infinite: true?

Carousel is meant to have multiple visible slides at one display.
Advanced usage example is you want to display each visible slide one at a time sequentially using extra tools like jquery inView, jquery.appear, etc.
Slideshow is a single slide visible at a time.
infinite: true is if you want to go from the last slide to the first continuously. Otherwise reaching the last slide will get stuck.

valkum’s picture

Status: Needs work » Needs review
StatusFileSize
new38.68 KB

Okay. It seems slick.js will add slick-slider and slick-slide by itself so there is no need to serve additional css files for that. I changed the classes to BEM style and added some fixes for hiding the slider before the js part is initialized, like done in the slick.css

Here is a new patch.

gausarts’s picture

Thanks.
In the meantime, let's see if the maintainer, Arshad, has suggestion in this regard before we make a move.
He said been busy, but will be in touch to provide help with the port.

valkum’s picture

Let's discuss some points in the meantime.

items: As the renderarray handles all entries which don't start with # as children. Should we stick with my implementaion of '#items' or should we move it to 'items'. I don't know what the proper way is.

Images: use the Image theme rather than #markup for slick_demo. Implement the lazyload demo, based on drupal8 new features.

Should we start with a roadmap of what we need to port over based on this patch? Maybe create some subissues? Which features from the 7.x-2.x branch (Optionsets, Views, Grid (Don't even know what is meant by this))?

gausarts’s picture

Yes, good idea.

Items:
It is a bit out of the scope to explain, sorry. Please refer:
https://www.drupal.org/node/930760
http://randyfay.com/content/drupal-7-render-arrays-and-new-render-example

I can only recommend to follow what is there, and improve.
If you have more energy and deeper understanding of best practices, feel free to change it whatever you feel better. If you are still unsure, following what is done is okay too.

Renderable array is mostly recommended for various reasons, mostly its caching capability, and ease of overrides for themers. You can investigate Flexlider, and learn issues they face with non-renderable array approach.
We only have 3 keys so far, so it is not hell-like arrays anyway:
#items, #settings, #attached

Images:
Yes, that is great to explore it to some extent.

Roadmap:
Yes, feel free to create one. Sorry I can't do it myself these days.

Grid (Don't even know what is meant by this))?

It is in slick_example. Perhaps you want to test it to get a better idea about it ;)
There is also a feature request:
https://www.drupal.org/node/2392193
This is what it looks like:
Grid display

valkum’s picture

I did some more work.
Changed the whole thing to use Element::children instead of #item. After reading some guides etc. i think this is the better way. Devs can decide by themself what they want to be in the slides (Even Forms). slick_item is now an wrapper. Look at slick_demo for syntax. Updated Readme.md too.

gausarts’s picture

Feel free to elaborate. Please find my reviews inline.

  1. +++ b/js/slick.load.js
    @@ -0,0 +1,21 @@
    +(function ($, Drupal, window) {
    

    Please change settings to new drupalSettings:
    https://www.drupal.org/node/1793334

  2. +++ b/js/slick.load.js
    @@ -0,0 +1,21 @@
    +        t.slick(merged);
    

    Only breakpoints need merging with default options. The main settings has already been merged with default by core and should only care for 2: configs and globals.

  3. +++ b/slick.module
    @@ -2,346 +2,27 @@
    +    'slick_item_wrapper' => $base + array(
    

    Please change the function name slick_item_wrapper to be similar to the name of template file slick-item to avoid problem/ confusion with preprocess.

  4. +++ b/slick.libraries.yml
    @@ -0,0 +1,24 @@
    +      css/slick.module.css: {}
    

    Please change slick.module.css to slick.theme.css.

  5. +++ b/slick_demo/src/Controller/SlickDemoController.php
    @@ -0,0 +1,454 @@
    +        '#settings' => array(
    

    Please change all occurances of #settings to #options to match both 1x and 2x to allow smooth transition for coded options.
    I made a note on slick.theme.inc line #11:
    * Elements:
    * - #settings is set via sub-modules and serves various purposes, and not
    * related to JS settings, mostly slide layouts or attaching assets.
    * - #options is set programmatically, or hand-crafted, and only accepts direct
    * key|value pairs related to JS settings, or at least optionset name.

gausarts’s picture

Status: Needs review » Needs work

Let's change the status in the meantime.

valkum’s picture

Status: Needs work » Needs review
StatusFileSize
new39.38 KB

Okay here my new patch an thoughts.
1. Done
2. I removed the merged part. Maybe added back later when there is more need for a feature (Maybe optionset). At the moment it is not need i think.
3. As the slick-item is now used as a #theme_wrapper i renamed the template to slick-item-wrapper.html.twig rather than renaming the theme_function back to slick-item.
4. The file only contains functionality css code that is need because auf the BEM Style changes. (Hide slides before JS is init.) https://www.drupal.org/node/1887922 says those files should be named module_name.module.css
5. Done

valkum’s picture

Noticed there were some codingstyle issues in the last patch.

gausarts’s picture

Thank you. Less basic issues, I think.

Regarding slick.module.css vs slick.theme.css.
That is fine since you created a new file on your own.

However in case you are not aware of, the slick.theme.css is 85% styling, and 15% basic layout.
It modifies the slick appearance at some extent with extra styling if you read it closely.
So it is still slick.theme.css, or we can always move the 15% to slick.module.css later, or even drop slick.module.css if that should reduce a file for people overriding it when slick.theme.css gets back.
At any rate both should always be optional, and easy to remove.

I can't RTBC now yet, because no "T" yet, but it looks better now. I can set aside other issues if any.
In the mean time, let's keep it open to suggestions from the maintainer, and friends.

camoa’s picture

I tried to take this a while ago while learning D8, maybe there is smething in there you may use, maybe there isn't. Just wanted to give you the link:

I just did a config entity and a plugiin for the skins, more than a port I was trying to do everything from scratch. Hope it is useful for something.

https://www.drupal.org/sandbox/camoatech/2366333

gausarts’s picture

Thank you. I checkout you sandbox, but empty. Anything I am not aware of?

camoa’s picture

I may have not pushed any change until yesterday....

There is the branch for 8.x there.

gausarts’s picture

Sorry, it must be the issue at my end. I upgraded msysgit yesterday, and now I checkout at least 2 sandbox projects empty, unless those with a dev release. I will need to resolve my own issue before I can see your work.

However my main concern now is to have the permission from the maintainer to push the patch here, perhaps after a proper re-check with the latest beta9 I should be able to help push it. I am not sure if he has already started, or not with it by now.

samuel.mortenson’s picture

Any updates on this issue? I am interesting in helping out but am not able to cleanly apply the most recent patch to 7.x-2.x. Perhaps it's best to convert the module on Github first as a group or for the maintainer to do an initial commit?

valkum’s picture

I started at my github page with the 8.x port and provided the patch here to get a 8.x branch started on d.o but as the patch doesn't recieved a RTVC it was not commited to the d.o git repo.

gausarts’s picture

Status: Needs review » Needs work

Beta cycles run as we "keep it open to suggestions from the maintainer, and friends". And the Slick library has changed a lot since then.

I haven't got a go from the maintainer. He said he'd help with it, and I still keep it now.

@samuel.mortenson, last time I reviewed, it applied to 1.x as the project issue suggested, not 2.x.

@valkum, sorry for the delay about it.
I did test it last time, and failed on the last beta9 cycle. I left it open for public reviews to measure the interests on it, and also on your attention with the beta cycle changes.

I didn't want to commit yours then I have to chase the head on my own. I have to make sure you are still chasing it as I had clearly stated at the other thread #2412863: [meta] Drupal 8.x Version: ".. I got no energy to chase the head."

Let's mark it "Need work" if there is still an interest in it.

I don't recommend it, but feel free to update it to the latest beta11 _only if you are willing to.
Once confirmed working with at least beta11, I will commit it this time in the hope you will keep chasing the head later on.

Hopefully Arshad is okay with the move.

I recommend waiting for at least an RC, if you will turn out tired of chasing betas, like me.
I still recommend to do the port as the title said, as it will be easier for us both. Please refrain from re-inventing the wheels if you can and you want the maintainers to approve it easily without unnecessary extra delayed tests.

Betas are moving targets, and unless you have some energy, any moving target will exhaust you, I am really nicely warning you.

Thanks.

valkum’s picture

yeah sry for the late reply to this.
I haven't had the time to keep my basic version up to the beta cycle.
I hope i have time to update my version to the latest changes when rc hits public.
After that we can add back the 7.x functions.

gausarts’s picture

Status: Needs work » Postponed
valkum’s picture

As the rc1 window is opend for October, I updated my 7.x-1.x port on my Github repo. Runs fine on Drupal-8.0.0-beta15.
I don't think rc1 will break it.

Remember its just basic thinks. Just implemented rough support to show all examples from wheelers page.
Do you want a patch anyway for the new branch? Basically there is not many in common anymore, stripped a lot for the basic start.
After that we can port feature by feature from 7.x-1.x to this new branch.

gausarts’s picture

Feel free to change status should you have a working patch. Thanks.

gausarts’s picture

Status: Postponed » Needs work

Let's finish the task....

gausarts’s picture

StatusFileSize
new8.11 KB

I just created the 8.x branch.

I'll commit your work with a few adjustments to match the latest library and slick direction.
Hopefully you and Arshad are okay ;)

The following are changes since your last patches:

  • Slick demo is dropped. It can go into slick_extras along with slick_example if you are still willing to get it in.
  • Fixed the broken JS.
  • Renamed library 'drupal.slick' into 'slick.load' to match the latest slick.
  • Fixed the missing library dependencies.
  • Changed theme_slick_item_wrapper() into theme_slick_slide() to match the actual library 'slick-slide' children.

Still a lot to do, hopefully fair for a start.

The rest may go another thread later on.
Please let me know if anything I should be aware of. Thanks.

gausarts’s picture

Status: Needs work » Needs review

gausarts’s picture

Status: Needs review » Fixed

Committed to get the ball rolling.
Feel free to re-open, or create a new issue if anything.
Thanks for your contribution.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.