cgkineo / adapt-articleblockslider Goto Github PK

It would be great if this displayed dots at the bottom to indicate how many blocks there are and highlight the one the user is on. This would give the user a better understanding of how many blocks there are in total. I am thinking similar to how the narrative component includes these type of dots.

• Re-write to be backward compatible with pre ES6 but to be less complicated.
• Move animations into CSS - use covermenu as a foundation.
• Use proper prototype modification to do Article extensions.
• Improve accessibility as currently broken.

Drop down menus within components--for example matching question answer options--do not open when using article Block Slider. Is there a solution for this or is there a particular setting that would allow functionality? Thanks!

because it never triggers the "articleView:render" event - which is what headings.js is listening to in order to know when to add the heading ARIA labels

If the ABS plugin is added to an existing course, when trying to edit a block the screen is blank. However if a new course is created with the ABS plugin everything works fine.

rtl ('dir-rtl') works fine in Chrome, but not in Firefox and Safari. In these (others not tested) the current block is not displayed. It is not improperly styled as 'visibility=hidden'. It is because the current block is not scrolled into view. Apparently there is a dispute among browsers about how rtl should be interpreted and this impacts what scrollLeft returns: positive vs negative numbers.

if you include a media component in ABS and the user initiates playback then attempts to navigate to another block in ABS, you can get an issue with ABS trying to scroll back to the media component, leaving you with what looks like no content in the ABS (it's actually just hidden).

Caused by ABS attempting to a11y_focus the block, need to change it so that it only does so if user has activated accessibility

hi, I wanna know the number of the current block in another extension. I do that method:
_getCurrentBlock: function(){
var a = this.model.get("_currentBlock");
return a;
}

but when i call this method form outside, I recive the entire block, and I only want a number, it is possible?

Thank you for all

When using this with the new AT0.2.0 and FW2.0.11 there is a Required property of Minimum Height which is causing articles not to save if you are not using block slider in that article.

I'm not sure if you can just change Required-true to Required-false without causing issues when you do actually want to use it?

Just a heads-up. Looks like the readme.pdf doesn't belong to blockslider.

It would be more elegant to remove the left arrow when you are on the first block and remove right arrow when on the last block as the disabled state is not ideal - the arrow has a rollover state when disabled. Having the option to disable or hide would be even better.

as not only does this add an unnecessary level of navigation for users of assistive technology but some components (I'm looking at you, adapt-contrib-media!) cause issues with JAWS when used inside ABS

Whenever you change other settings it always wants a min height in the Authroing tool even if you are not using it on that article. Can it be set to 0 by default or maybe optional?

This should read medium rather than large to reflect the breakpoint changes in core

ABS version 3.1.1
FW version 5.17.1
On a few occasions I've had clients coming back to me to say the 2nd block of an ABS isn't displaying. The 2nd block is wrapping under the first (thus disappearing completely), rather than being displayed to the right. The effect can be replicated by changing .abs .block {float: none;} (as opposed to 'left'). Tried to force float left by adding !important but still no joy.

Occurs in varying browsers and devices. Today I've had this issue reported where the client is running the same (most recent) version of Chrome that I am - it doesn't break for me, but it does for her.

If it helps, I have a 5.15.2 FW course running ABS 3.1.1 that has been tested widely with no reported issues.

Chuck has identified a number of issues when using aBS with Trickle - please see the attached PDF for details.

trickle-and-blockSlider_01.pdf

Appreciate this extension is a work in progress but for the record, FW 5 version of it worked great in 5.6.1. I jumped to FW 5.14.0 and it breaks.

In my console I'm getting 2 errors:

Uncaught TypeError: firstQuestionBlock is undefined in adapt.min.js

and

Source map error: Error: request failed with status 404
Resource URL: http://localhost:9001/libraries/regenerator-runtime.min.js

Hello

When this plugin is added I keep getting the following error, the course previews fine without the plugin added to the course:

Command failed: grunt server-build:prod --outputdir=courses/5f6c6871010e4a0306ac5270/5f6c86cf5f46340277f0c487/build --theme=5f6c697a010e4a0306ac528b --menu=adapt-contrib-boxMenu

Fatal error: {
"message": "variable @block-padding-top is undefined",
"type": "Name",
"filename": "src/extensions/adapt-articleBlockSlider/less/articleBlockSlider-article.less",
"index": 172,
"line": 6,
"column": 12,
"callLine": null,
"extract": [
"\t\t\tmax-width: @device-width-large;",
"\t\t\tpadding: @block-padding-top 0 @block-padding-bottom;",
"\t\t\t// reduce padding as screen width decreases"
]
}�

Slider animation currently disabled for medium devices but then enables again for small devices.

When the learners loads the page they see the nav buttons animate in from the bottom. Would be better to just disable animations until the page has fully loaded.

as you can see here:

having done a bit of digging, it seems the height of .article-block-toolbar isn't being calculated correctly in _blockSliderPostRender.

with the debugger on, it's easy to see why:

Could be fixed either by checking the height of all the buttons to see which is tallest - or by making the call to _blockSliderSetButtonLayout before doing any height checking - the latter seems easiest since the height of the buttons changes after the call to _blockSliderSetButtonLayout, changing when that is called is definitely the way forward!

if i install and enable this extension and have an accordion on my page, on mobile, as expected the articleBlockSlider does not activate, still if i click on an accordion item, the page scroll to the top.

If i change the "_startIndex": 0 to another value, it jumps lower than the top.

_blockSliderScrollToCurrent report the right sizes on mobile and desktop, but it does not seems to be disabled on the other sizes.

i made a simple test repo here
https://github.com/gorhgorh/articleBlockSlider-test

Adapt version : latest (2.0.8)
device : iphone 4 latest ios / android : chrome latest

Please see https://github.com/cgkineo/adapt-sideways for an alternative.

Current behaviour: ABS instruction text is generic
Desired behaviour: Mobile specific instruction text displayed for phones (and generic instruction hidden)

Is there a way to lock each block in the block slider, so that you cannot progress without completion of the components in the preceding blocks?

Trickle doesn't seem to work with this.

cd3e661#commitcomment-22400116.

When trickle is set at the article level, an extra empty tab is displayed requiring the user to click the tab and then the trickle button to move on. The trickle button should show up on the last block and then allow the user to move on.

I made a properties.schema for anyone that wants to get the Article Block Slider working with version 2.0 on the Authoring Tool...

//proerties.schema FILE

{
  "type":"object",
  "$schema": "http://json-schema.org/draft-04/schema",
  "id": "http://jsonschema.net",
  "required":false,
  "properties":{
    "pluginLocations": {
      "type":"object",
      "required":true,
      "properties":{
        "config": {
          "type":"object"
        },
        "course": {
          "type":"object"
        },
        "contentobject": {
          "type":"object"
        },
        "article": {
          "type":"object",
          "properties":{
            "_articleBlockSlider": {
              "type":"object",
              "required":false,
              "legend": "BlockSlider",
              "properties":{
                "_isEnabled": {
                  "type":"boolean",
                  "required":true,
                  "title": "Enabled",
                  "inputType": { "type": "Boolean", "options": [false, true]},
                  "validators": [],
                  "help": "Turns Article Block Slider on and off. Acceptable values are true and false."
                },
                "_slideAnimationDuration": {
                  "type":"number",
                  "required":true,
                  "default":"600",
                  "title": "Slide Animation Duration",
                  "inputType":"Number",
                  "validators": ["required", "number"],
                  "help": "Sets the slide duration, in milliseconds, of the animation between blocks."
                },
                "_heightAnimationDuration": {
                  "type":"number",
                  "required":true,
                  "default":"300",
                  "title": "Height Animation Duration",
                  "inputType":"Number",
                  "validators": ["required", "number"],
                  "help": "Sets the duration, in milliseconds, of the animation between varying blocks heights."
                },
                "_isEnabledOnScreenSizes": {
                  "type": "string",
                  "required": true,
                  "default": "large",
                  "title": "Enabled On Screen Sizes",
                  "inputType": "Text",
                  "validators": [],
                  "help": "Defines which screen sizes the Article Block Slider displays the navigation elements on. Acceptable values are large, medium and small."
                },
                "_hasTabs": {
                  "type":"boolean",
                  "required":true,
                  "default": "false",
                  "title": "Has Tabs",
                  "inputType": { "type": "Boolean", "options": [false, true]},
                  "validators": [],
                  "help": "Turns the tab navigation on and off. If _hasTabs is set to true, you must set _hasArrows to false. Acceptable values are true and false."
                },
                "_hasArrows": {
                  "type":"boolean",
                  "required":true,
                  "default": "true",
                  "title": "Has Arrows",
                  "inputType": { "type": "Boolean", "options": [false, true]},
                  "validators": [],
                  "help": "Turns the arrow navigation on and off. If _hasArrows is set to true, you must set _hasTabs to false. Acceptable values are true and false."
                },
                "_startIndex": {
                  "type":"number",
                  "required":true,
                  "default": 0,
                  "title": "Start on what block",
                  "inputType": "Number",
                  "validators": ["required", "number"],
                  "help": "Sets which block displays on page load."
                },
                "_hasUniformHeight": {
                  "type":"boolean",
                  "required":true,
                  "default": "true",
                  "title": "Has a uniform height",
                  "inputType": { "type": "Boolean", "options": [false, true]},
                  "validators": [],
                  "help": "Sets all elements within the Article Block Slider to use the highest blocks height. Acceptable values are true and false."
                },
                "_minHeight": {
                  "type":"number",
                  "required":true,
                  "default": null,
                  "title": "Min Height",
                  "inputType": "Number",
                  "validators": ["required", "number"],
                  "help": "Sets a minimum height on the .article-block-slider container class."
                }
              }
            }
          }
        },
        "block": {
          "type":"object"
        },
        "component": {
          "type":"object"
        }
      }
    }
  }
}

Love this extension but just now experiencing an issue since upgrading my authoring tool. Where I have multiple blocks in a slider, all non-optional, the trickle Continue button consistently goes active on the 2nd last block viewed instead of the last. e.g. where there are 2 required blocks in an article, trickle enables on the 1st instead of 2nd; where there are 3 blocks, trickle enables on the 2nd block viewed instead of 3rd, etc.
Any ideas what might be the cause?
.. Just worked out that the issue occurs on full width components only. Where there's 2 components per block trickle responds fine. I was testing on the original Vanilla theme using Chrome.

In a course I'm working on the blocks in the ABS do not have titles assigned. As a result the aria-labels for the navigation dots are blank, causing the screen reader to read out "unlabelled x button".

Giving the blocks a title solves the aria-label, but with the default styling part of the title is rendered in each of the navigation dots.

Would it make sense to change the template to aria-label="{{displayTitle}}" to give flexibility for cases like this?

I use this a lot for Step-by-step preocedures and it would be great to have the option somehow to "go to first block" once you reach the last block.

Any thoughts?

We would like to have the option to prevent the learner from viewing blocks before they have completed the previous one. We tried to use Trickle and this seems have issues as posted adapt_framework/adapt-contrib-blockslider Issue #1689. Can we build this functionality in this component?

I've got this working well in the arrows format but tabs is letting me 'cheat' by skipping to the last tab to enable trickle. I've made sure content in all tabs is non-optional and it still lets me skip ahead. Is there a simple fix for this one? I've been testing in the latest authoring tool with 2.0.3 version of the extension.