How to design a dynamic menu - javascript

Basically, I'm making a google drive-esqe web app, that handles storage of user's notebooks and notes that are created in the app.
For my home screen, the user will see all of their notebooks rendered out and they will be clickable. When a user clicks on the item, the item highlights, as well as checking its respective checkbox (why we have both, I don't know.) and then a menu bar is supposed to appear at the top, giving the user options to perform upon that notebook/note.
The menu bar is par of a app-wide navigational bar, but the menu is strictly for the home page only.
The problem is in the functionality of some of the menu options. The way the app currently stands is that the user may select multiple items, but some menu options will disappear when doing so (e.g. Open will disappear as we only want one note opening at a time). I currently have no idea how to go about designing this. Mainly, I have no idea how to keep track of the number of highlighted items (will provide a snippet for the highlighting below), and no idea how to get the appropriate menu options to appear/disappear when appropriate. Right now, I have a menubar.ejs that holds all the menu titles, and it is included (<%-includemenubar.ejs %>) in the navigation bar that all screens have access too.
MenuBar.ejs
<ul class="menu">
<li>Home</li>
<li>Create</li>
<li>Open</li>
<li>Download</li>
<li>Share</li>
<li>Delete</li>
</ul>
Highlighting:
var itemSelect = function(){
$('.searchResult').click(function(){
$(this).toggleClass("highlighted");
var check= $(this).find('.checkbox');
check.prop('checked', !check.prop("checked"));
}
While this probably not the best way to go about this, its the only way I could think of at the time.
I'm really VERY new to all of these languages etc, so this is a pretty daunting task for me. Any help much appreciated! Hopefully I've provided enough information, but if I haven't, I'll do my best to specify more or add more where needed.

To get all items which are highlighted you can use the jquery selector:
$('.highlighted'); // returns an array of hightlighted items
$('.highlighted').length; // number of highlighted items
The questions a little vague but in terms of designing, try to think of the app in terms of views/contexts, if I have a note open what should be able to see do?

Related

UINavigationController type menu in HTML

I'm trying to create a popup menu with some kind of navigation inside it. For this, I'd like to mimic the style of the UINavigationController on iOS. If you're not familiar with it, it creates a hierarchal menu with sliding pages, like this:
(source: apple.com)
I'd like to make something similar in HTML and JavaScript. The elements I'd like to take from iOS design are
the sliding animation that occurs when going between pages.
the back button that appears once navigation has occurred
I need something that doesn't involve page refreshes or moving between pages, but the menu only needs to be one level deep. Has anyone created this type of menu in JavaScript? I'd prefer vanilla JS, but it's not a requirement.
Build an hash from that menu, then iterate trough it like this.
At first you display the first level of the hash.
When the user clicks a link navigate in the hash at that position, fetch all it's children's and populate another instance of the menu behind the visible one.
Then it's a simple job of moving the new menu to a side so that it's visible.
And repeat...
As for the back button, you just fetch the parent of the current position i the hash...

Is Backbone.js or Spine.js only for "offline" apps where you actively change records client side?

I'm making a website where you have a pretty thin vertical bar all the way to the left that has the main menu on it. This is the only contents you have on the website. Then, when you click a menu item, another bar pops up to the right of the main menu bar. This is the sub-menu. Then you can click on the sub-menu, and the last menu appears. When you click an item on this menu, you get a big box to the right of the last menu that contains the contents of the page. This box often contains a picture gallery or a list of videos (like when you search YouTube).
But, I want this to be very responsive, so I need to cache the menus in localStorage. And so I want to use a kind of MVC pattern. And trying with Spine.js, I loaded the menus into a model MenuModel. Now, I don't want to load in all 1000 menu objects that are available at once, so I need a way to preload just the ones I need.
As I see it, Spine.js isn't a good fit. Am I doing something wrong, or isn't Spine.js made for loading menus etc. like I do here? I mean, no record is ever added client side, neither modified or deleted. Only fetched from the server and stored in the model. Is Spine.js more for apps where you actively change records and syncronize with the server than what I need?
Is it a better idea just to write my own classes?
Not sure about Spine.js but you can do something like in Backbone by creating a model Menu.
Each Menu has reference to parent menu (apart from the one which is on the top).
Whenever you fetch menu items, you store them in local storage.
Whenever user clicks on a menu item, you first check if it's stored in local storage. If yes, show them from local storage else fetch them from server.
Saying that you'll have to think of a strategy to find out when to update your local storage.

One Accordion to multiple views

I may be trying to do things using a "handy hammer" methodology, but hopefully somebody out there has tried this as well.
Basically, I have one page with multiple views, I would like to use the jQuery accordion feature to be able to toggle them on and off.
For example:
There is a view entitled "Press Releases" and other called "Recent Blog Posts"
I would like clicking on these headers to open and close the view contents.
I guess I want to have step back from the views-accordion so that instead of the interior content items being expandable, that all the content items would expand.
Hope this makes sense!
If there is a softer and easier way of doing this, I am all ears!

Hover over something for information to appear in another

I have been trying to find ways to to hover over something so that more information will appear in a different section. I have been looking at similar questions that were posted but I am still not sure how to do it.
I want "Recently on Sale" to show up first, then as I hover over the others, more information will appear for them respectively. Here is the link to what I have been working on: http://jsfiddle.net/saikirakiva/jVaLd/
I have been using just css, is javascript more suitable for what I am trying to do?
Thank you!
JavaScript is useful because it allows you to delay hiding the second element when the mouse moves away from the first element. This feature is especially important in nested drop down menus, because users frequently leave a menu item for a short time while navigating to its submenu.
you can do it like this: http://jsfiddle.net/mnbayazit/Vhg6p/9/

Can chrome.contextMenus.update be used to disable a menu item?

I'm developing a Google Chrome extension that makes heavy use of the context menu, and I would like to make certain menu items available only on some domains.
Currently, I am using chrome.tabs.onUpdated and chrome.tabs.onSelectionChanged to check the tab url, and then I add or remove menu items based on a check against a domain list.
Is it possible to just disable the menu items, instead of removing them? I'm hoping for something like this:
chrome.contextMenus.update(id, {"disabled": true});
It's possible now: https://developer.chrome.com/extensions/contextMenus#property-createProperties-enabled
chrome.contextMenus.update('your-id', {
enabled: false
});
Unfortunately you cannot. That would be a neat feature I suppose. Feel free to submit a feature request http://crbug.com (Make sure you mention any valid use cases for it).
An old post but maybe someone will find this answer useful.
As of Chrome 62 the following works (puts cleaner logic on large context menus):
https://developer.chrome.com/apps/contextMenus#method-update
After the menu has been created, update the menu as follows:
chrome.contextMenus.update(intId-or-stringId, {"visible": true});
with toggle:
chrome.contextMenus.update(intId-or-stringId, {"visible": false});
Removing and creating menus will mess the order of the menu (new menus get placed at the bottom). Enabling and disabling still leaves the menu cluttered up. The visible option keeps the original order of the menu intact.

Categories