Picture of mark cunnungs
adapt-cover-menu - error (using framework)
by mark cunnungs - Saturday, 19 March 2016, 6:13 PM
 

Hi Guys,

I am attempting to install and implement the "adapt-cover-menu" menu plugin by kineo but I am coming up against an error.

I am using the framework and have managed to install the plug-in successfully using the following command: adapt install adapt-cover-menu

The menu appears in /src/menu. So far so good.

 

I then follow the instructions in the example.json file and replace "_graphic" object with the "_coverMenu" object in the contentObjects.json. (I also placed the background images in: \src\course\en\images to ensure they exist in the path)

here is the code (this is repeated for each _id):

ContentObjects.json

{
"_id": "co-05",
"_parentId": "course",
"_type": "page",
"_classes": "",
"title": "Presentation Components",
"displayTitle": "Presentation Components",
"pageBody": "Text",
"body": "Text",

"_coverMenu":{
"_backgroundGraphic": {
"alt": "Text",
"src": "course/en/images/cover_menu_item_bg_1.jpg"
},
"_indicatorGraphic": {
"_isComplete": "course/en/images/cover_menu_item_bg_2.jpg",
"_isVisited": "course/en/images/cover_menu_item_bg_2.jpg",
"_isLocked":"course/en/images/cover_menu_item_bg_2.jpg",
"_default":"course/en/images/cover_menu_item_bg_2.jpg",
"_accessibilityEnabled": "course/en/images/cover_menu_item_bg_2.jpg"
}
}


"linkText": "View",
"durationLabel": "Duration:",
"duration": "2 mins",
"_pageLevelProgress": {
"_isEnabled": true
}
},

The error im getting when I run grunt build: 

Running "check-json" task

warning: unable to parse "c:/course_name/src/course/en/contentObjects.json" file (unexpected string).

aborted due tio warnings.

 

This is kicking my ass at the moment, I am obviously missing something but I can't see what that might be. Any help would be much appreciated.

Picture of Chuck Lorenz
Re: adapt-cover-menu - error (using framework)
by Chuck Lorenz - Saturday, 19 March 2016, 9:10 PM
 

Hi Mark,

In your code above, it looks like you are missing a comma between "linkText" and the curly brace before it. Can you check to see if it is missing from your actual code?

Chuck

Picture of mark cunnungs
Re: adapt-cover-menu - error (using framework)
by mark cunnungs - Sunday, 20 March 2016, 11:35 AM
 

Thank You!

It looks like that was it; I just copied the code from 'example.json' and the comma seems to be missing from that example. I know a little code, just enough to be dangerous.

 

The course now builds without errors although I don't get the desired effect however (see image) it is like the cover menu is appering underneath the box menu.

Do I have to edit course.json to include "_coverMenu"? or is there more code to remove from 'contentObjects.json'

Picture of Chuck Lorenz
Re: adapt-cover-menu - error (using framework)
by Chuck Lorenz - Sunday, 20 March 2016, 1:16 PM
 

I see what you mean about the missing comma; however, be warned that many repos will construct their example.json in the same way. Because JSON doesn't really care where you put this code--start, middle, or end--they'll expect you to manage your own commas. Commas and quotes: if there's an error in JSON, it's likely to be a comma or quote.

I don't think your course.json and contentObjects.json should require more changes. Make sure you have removed any other menus. Leave just cover-menu. The framework can use only one menu at a time.

Here's some other things to think about when dipping into third-party repos...
- Check the issues and PRs: there may be code hiding there that addresses your issue.
- Check the branches that the repo has in addition to master. Sometimes improved code is already available in another branch and ready for download. While this may be "risky," sometimes good code is being held up by process. Before going into production, it would be wise to contact the repo owner. This repo has a v2 branch and a develop branch. If you continue to run into troubles, you might try downloading the v2 branch and seeing if it works better. I often download two branches and do a diff to see if the code differences are likely to address my issues.

Post again if you still have problems. I'm sure you can get this working.

 

 

 

Picture of mark cunnungs
Re: adapt-cover-menu - error (using framework)
by mark cunnungs - Sunday, 20 March 2016, 8:48 PM
 

When you say " Make sure you have removed any other menus", do you mean that the only folder in mycourse/src/menus should be the menu I am trying to use (cover-menu)?

I deleted "box-menu-master" (the only other menu in src/menus) and the course builds without error but is stuck on loading screen when I try to run it.

I am going to try your suggestion of using another branch but to be honest I reckon it is something I'm doing wrong rather than the plug-in.

 

Thanks for your help.

If anyone does have an example of this menu working on the default course I would love to see the contentObjects.json code so I can compare.

Picture of Chuck Lorenz
Re: adapt-cover-menu - error (using framework)
by Chuck Lorenz - Monday, 21 March 2016, 1:46 AM
 

Yes, you should have only src/menu/adapt-cover-menu/. Good that you deleted "box-menu-master". (FYI--If you download zips from the repo, it tacks on the name of the branch. You can feel free to delete that part of the name if you'd like.)

Since adapt-contrib-boxmenu is Adapt's core menu bundled by default, the core theme, adapt-contrib-vanilla contains styles for it. You will want to delete those, too, since some of the styles interfere with cover-menu. Delete src/theme/adapt-contrib-vanilla/less/src/boxmenu.less. 

When using the master branch of cover-menu, I was getting the endless loading gif. It was accompanied by a console error: Uncaught TypeError: could not read property 'nthChild' of undefined (adapt-cover.js line 209). In the v2 branch, this.options.nthChild has been replaced with this.model.get('_nthChild'). So I replaced cover-menu master branch with cover-menu v2 branch and reran grunt build. The course loaded and worked properly.

Optional things to do:
1. adapt-cover-menu comes with cover_menu_asset_pack. Think of this folder and the two in it as models for your design, not as a folder that should be referenced in the contentsObject.json. You didn't reference it, so I think you understand this already. However, I think you'll be happier with your efforts if you reference different images for your _indicatorGraphic. How cover-menu works will become clearer if you model your JSON like this:

"_indicatorGraphic": {
"_isComplete": "assets/menu_btn1_complete.png",
"_isVisited": "assets/menu_btn1_started.png",
"_isLocked": "assets/menu_padlock.png",
"_default": "assets/menu_btn1_notStarted.png",
"_accessibilityEnabled": "assets/menu_btn1_notStarted.png"
}

2. My image paths above reference assets. This is a folder within the build directory. How did the images get there? As part of grunt build, grunt copies src/theme/*/assets into build/assets. It does the same thing for src/menu/*/assets if the folder exists. So I copied all the images out of the cover_menu_assets_pack folder and paster them into a new assets folder I created at src/menu/adapt-cover-menu. Then I deleted the assets pack, but you might want to save it in some other location for future design work. What's the advantage of this doing this? Primarily image organization. It's easier to copy your customized menu into other courses without having to pick the menu buttons out of the course/en/images folder.

3. After I deleted boxmenu.less, I copied src/menu/adapt-cover-menu/less/cover-menu.less and pasted it into src/theme/adapt-contrib-vanilla/less/src where boxmenu.less was. If I edit any of the styles of cover-menu, I'm going to do it in this copy, not in the original src/menu/adapt-cover-menu/less/cover-menu.less. Adapt will compile the CSS from both Less files; but if they are named exactly the same, the one found within vanilla will override the styles found within the menu's folder. This works for the Less files of components and extensions, too. It is the styles that override each other, not the files; so you could skip this step until you know you needed to make an alteration and then only include that new style in the 'override' file within vanilla. What's the advantage of this doing this? It will preserve the original Less in case you have to "start from scratch".

Hope this helps.
- Chuck

 

Picture of mark cunnungs
Re: adapt-cover-menu - error (using framework)
by mark cunnungs - Monday, 21 March 2016, 7:14 PM
 

Excellent!

As you said, once I moved to V2 things clicked into place and it's all up and running now. Thanks for your help on this, and the extra tips came in handy too.

 

Sushil Vispute
Re: adapt-cover-menu - error (using framework)
by Sushil Vispute - Thursday, 2 June 2016, 1:38 PM
 

I have faced another error this.options undefined,  so that replaced “this.options.siblingsLength” to “this.model.siblingsLength” in adapt-cover.js and it’s work.

Picture of Juan Pérez
Re: adapt-cover-menu - error (using framework)
by Juan Pérez - Thursday, 1 December 2016, 10:49 PM
 

Hi, how are you?

Please i need your help because i can´t to get work fine this menu.

I have followed this steps but nothing i have endless image.gif.

Can you help me.

 

Thanks

 

Picture of Mike Stevens
Re: adapt-cover-menu - error (using framework)
by Mike Stevens - Friday, 2 December 2016, 2:38 PM
 

Hi You can try the Carousel Menu, I built it is based off of the cover menu but rebuilt from the ground up with some tweeks to work just slightly different. Might help you with your pains. Back in the day I had them too, as I couldn't get the cover menu to work properly in the authoring tool. At that point I decided to build my own version. Here is the link...

https://github.com/mike-st/adapt-carousel-menu

Picture of Juan Pérez
Re: adapt-cover-menu - error (using framework)
by Juan Pérez - Friday, 2 December 2016, 9:06 PM
 

Hi Mike.

Thank you very much.

Everything OK, with carrousel menu.

Thanks again

 

JUAN

Picture of Juan Pérez
Re: adapt-cover-menu - error (using framework)
by Juan Pérez - Monday, 19 December 2016, 9:41 PM
 

Hi chuck:

I have still problems with this plugin. I got a endless gif.

Exist another version for this plugin. I don understand the v2 branch.

Please need your help.

 

Thanks