I'm trying to rebuild a basic app in Famo.us (including it's magic of course). The problem I have is while creating the navigation. Every guide I've seen it only updates the content of the same Surface. In famo.us you can create a navigation but I think it would get very difficult to keep track of the history as the HTML5 history API does. Also the "back" button of Phonegap implement this functionality so it's something we should consider. At last, not less the Angular/Famo.us doesn't include a Router. So my question is, How should we be implementing a navigation system using Famo.us?
You are going to need (well... need...) to use hashbangs for this, or at least, that's how I'm doing it. You're basically using window.location.hash to do the navigation and editing this (even in a browser), does not trigger a page reload but just sends an event to notify the app that the hash has changed, and then you can let the app act on it. Changing the hash also adds a history element, so window.history can be used to navigate to the previous (or next) page(s)!
This is also (sort-of) the way www.famo.us does it:
http://www.famo.us/university/lessons/#/famous-101/displaying/4
Related
I'd like to automate a video-player on a webpage using Selenium in Python.
I cannot locate the interactive parts of the player with driver.find_element_by_... I've decided to try and accomplish this by making browser specific logic that knows how to navigate the page and player via keyboard navigation (count tabs for Chrome, vs Safari, vs Firefox, etc.).
driver.find_element_by_tag_name('body').send_keys(Keys.TAB))
I am able to select each of the controls of the player with tab (play/pause, current position, mute-volume control, full-screen, and additional options) and have had moderate success manipulating the player's controls with ActionChains once selected with TAB navigation
actions = ActionChains(driver)
actions.send_keys(Keys.DOWN) # to reduce volume or
actions.send_keys(Keys.LEFT) # to rewind playback
An example of something that doesn't work as expected with this method is sending a Key.SPACE to the MUTE button when selected. Instead the space is applied as a page navigation action and scrolls down the page like pressing page down. I'm looking for a method that either makes the controls work as expected when manually navigating the page with a keyboard, ex. space on highlighted object interacts and would normally mute the video in this context, or a workaround that lets me accomplish the same thing. To that end I was thinking if I could get the windows coordinates of the TAB selected object within the video-player and simply perform a click that would at least let me interact with the control.
Also if I'm going about this all the wrong way let me know. Thanks!
What you're really looking for is how to navigate the Shadow DOM. Those are the web elements inside the video player.
I answered how to reach inside the Shadow DOM in an other question, albeit for Java. However the principle is the same.
You can read the whole thing at the link, but the basics are you create a "starting point" WebElement at the Shadow DOM via JavaScript, then all future look-ups reference it:
WebElement button = startingPoint.findElement(By.cssSelector("..."));
I'm setting up a carousel in Sitecore using Glass Mapper. In the foreach loop to generate each carousel item, I can get the items out easily enough and make them editable with the #Editable command. What this doesn't give, however, is finer control over the edit process. For example, I want to edit the background image using a custom button in the Experience Editor, but I need to set that up in a rendering.
If I was using straight Sitecore, it looks like I'd use Html.Sitecore().ItemRendering and pass in the carousel item as a regular Sitecore item. In this case, I have my strongly-type class from Glass Mapper, which can't be passed in that way.
Is there a comparable method in Glass Mapper for setting up an item rendering? Or is there another way to affect the Experience Editor buttons for the carousel items? I've also experimented with setting up a separate edit mode, which would work fine, but I wanted to put together a cleaner editing experience with a more WYSIWYG approach to the item.
You'll have to use Custom User Experience Buttons which will allow you to edit in Page Editor Mode.
I just googled and found couple of good article which might help you.
http://www.nishtechinc.com/Blog/2015/March/A%20Better%20Approach%20at%20Carousel%20Management
http://www.awareweb.com/awareblog/11-25-14-custombuttonspageeditor
Try Html.Glass().BeginEditFrame() functionality built into Glass Mapper, wrapped in a #using block.
It allows you to specify the fields you wish to edit directly as params. Or if you're feeling adventurous, it can point to a full edit frame configuration in the core DB.
Is it good practice to have multiple statemanagers for the purpose of splitting up multiple outlets that need to maintain separate functionality?
Examples:
iPad style popover windows (http://metalabdesign.com/images/screenshots/flow-inside.png) - this is a separate controller and view then the current state. It makes sense to me to have a "popover statemanager" - that way the router still stays in its current state when the popover is opened - all the other buttons and actions on the page still work...
Modal windows, dynamic sidebars, etc...
My thinking is to have a router the controls the main interaction and it simply fires off commands to statemanagers that break up certain "sections" of the current "screen" to isolated parts.
You should have only one router. Then architect your whole application as a series of states interacting between each other through the router. This way your whole application is much more manageable and easier to test.
You might want to look at This presentation for further insight on the subject.
On one of my pages I'm showing about 60 items I would like to be "likeable" via facebook. The problem is that I can not use several pages to show the items since this would reduce the usability of the page. But when loading / showing 60 like buttons is just too much for my browser. The page is not usable anymore because even scrolling takes several seconds because of the impact of showing 60 likte buttons.
Does anybody know of an alternative way of using the like button? Would it be possible to build a custom like button which loads the like count from my local database and somehow triggers the facebook like mechanism when the user clicks on my own like button?
This could be done by building a custom like button which on click loads the real like button, hides it and automatically triggers the click on the real like button? Would this even be allowed or is forbidden by the facebook guidelines? If that is the case, is there any other way?
Best regards,
Daniel
Use a placeholder image and load them lazily via javascript when the user hovers on it. That's what Techcrunch does.
There are a few things you can do here that may speed up load times:
Make sure you're only loading the JS SDK once - the latest code from the Like button configurator takes care of this for you.
Load the JS SDK asynchronously, as described on the JS SDK overview page
Use the XFBML version of the Like button
You should use xFBML version of Like button and load the SDK asynchronously.
http://developers.facebook.com/docs/reference/javascript/
You cannot trigger the click of a like button in javascript.
You can however, hide the like button until the user hovers over the like button and create it then.
Something like this might be helpful:
http://www.reddit.com/r/programming/comments/k6kzy/german_publisher_heise_creates_a_privacy/
So I have been looking around for a couple hours for a solid solution to handling site navigation in CakePHP. Over the course of a dozen projects, I have rigged together something that works for each one, but what I'm looking for is ideally a CakePHP plugin that handles the following:
Navigation Model
Component for handing off to the view
Element View Helper for displaying the navigation (with control over sublevels displayed and automatically determining the "active" item based on URL and/or controller/model/slug
Admin pages for managing a tree of navigation
Any suggestions for an all-in-one solution or even the individual components would be very appreciated! Or even suggestions on how you have handled it in the past
We had this issue at work recently and i ended up whiping up a helper that would take query from the contents table and convert that into a menu. As it needed to become more flexible the code got worse and worse up to the point where i am currently rewriting it.
Don't hold your breath though as i will be taking my time to make it work right as it needs to be very flexible but it cant be confusing to use.