I am setting up protractor tests for my angularJs 1.14 app.
We have a video player that displays subtitles. Each subtitle is in a div. When the player is playing, our code sets the class of the current subtitle to "currentSubtitle" This way, we can highlight the subtitle. In addition, we have code that causes the current subtitles's div to be scrolled to. How can I create a test that tests if the subtitle scroll is working?
I think you can do 2 things, depending on how fast the automation and the page self is.
Have you tried validating which text is visible with element(by.css('. currentSubtitle').getText(). getText() will give you the visible text, see here
Use browser.driver.executeScript('//some JS code') to determine if it scrolled, take for example this post. Then you can calculate with JS if the subtitle scroll is working
Hope it helps finding your answer
Related
In wagtail, I need to make a Struct/Stream Block
There is a dropdown on the top of the block(Image/Video)
If editor choose Image, VideoChooserBlock should be hidden.
And if editor choose Video, ImageChooserBlock should be hidden.
class MyBlock(StruckBlock):
category = ChoiceBlock(choices=(("image", "image"),("video", "video")))
image = ImageChooserBlock()
video = videoChooserBlock()
Here, editor should be able to choose only image or video depending on category.
Any help is appriciated.
Thanks
You may find it useful to review the code of wagtail-link-block which does something similar.
Main files to focus on:
blocks.py for displaying fields conditionally based on a ChoiceBlock
static/link_block/link_block.js and static/link_block/link_block.css to handle the DOM manipulation and styling with JavaScript and CSS
wagtail_hooks.py to insert JS and CSS
I'm about to try to create a walkthrough for a web app created using React. I'm trying to think of the best way to do it, and have been thinking of using things like Material UI's modal component. I'm thinking I should also include some kind of arrow component that points the user to whichever element (button, link, etc) on my page I want them to click next. Also I will want to create a backdrop to fade the screen except for whichever element I want the users attention to be drawn to.
I feel like this must have been done many times before, but I can't find anything from searching. Obviously whenever I Google "react walkthrough/guide/intro" I just get suggestions for teaching basic React.
(NB: I'm not looking to do one of those intro sliders, as I want to provide a more detailed step-by-step)
The keyword your need to search for is 'tour'. Searching on google for 'react tour', I found 2 libraries for you:
React Joyride: https://github.com/gilbarbara/react-joyride | Live Demo
reactour: https://github.com/elrumordelaluz/reactour | Live Demo
Both seem to have similar features:
Instruction modal that explains about an element on the page.
The modal is positioned next to the highlighted element.
The window will scroll down to the highlighted element if it's outside of the viewport.
The element is highlighted to bring more attention while the rest of the page is in the backdrop.
There are steppers on the modal to indicate which step you're on.
I have a question concerning scroll positions/behavior in AngularJS.
I have a fixed sidebar with div classes with text (three items no menu) and would like to achieve an opacity change on those classes based upon the current scroll position of the window.
For example, if I reach
<div class="example1">
My goal would be to have the opacity changed on the first item in the sidebar which for example would be called
<div class="sidebar1">
I've found plugins via github for this, but would like to achieve this purely with angular. Does anybody know how to approach this best to avoid messy code and a bloated application?
There's a module you can get via npm here: https://www.npmjs.com/package/ng-inview named ngInView. It will let you call an event whenever an item comes into view. This should get you going in the right direction.
Also on github at: https://github.com/iamssurya/angular-inview
I spent the last 5 hours trying to get this animation to work with no luck. I wanted to create a cool animation whenver the user click on a button, the idea is to display a list of ul elements in a flip animation, pretty much like what http://lab.hakim.se/scroll-effects/mobile.html is doing (if you selected flip from the gear icon and changed chrome device mode to a mobile device).
Im using ngAnimate along with Angular and Ionic, I created the snippet here http://play.ionic.io/app/4ae65754fc64 (try to click the Add to Cart button). I want to display each li item as if they are flip and cascading whenever they are displayed. For some reason all the animation classed are ignored.
Ok, I think I achieved what you were wanting to achieve. I provided you two demos below.
But first of all the ng-animate directive is not supported anymore in AngularJS >= 1.2. And for ng-show based animations you have to use the ng-hide-add, ng-hide-remove CSS classes not the CSS classes described in the ngRepeat documentation.
The ionic demo (first link below) is basicly just a mockup of your code and is not perfect by any means.
The codepen demo is a bit more modified example and generic example. I used <ion-list> and <ion-item> instead of <ul> and <li>.
Hopefully this gets you in the right direction when implementing your final solution.
Ionic demo: http://play.ionic.io/app/3c0e90238fe8
Codepen demo (more generic): http://codepen.io/thepio/pen/KMPeZo
I'm currently developing a mobile web application with AngularJS, ngAnimate, Angular-Material and UI-Router. I'm following Google Material Design specifications for the UI/UX part.
I'd like to animate a state change 'the Angular way' and especially this 'Parent to child' animation
I've no idea on how to achieve this 'lift & expand' animation.
Thanks for your help !
You have to do it yourself, I guess.
Angular-material is not a magic wand that replicates the animation guidelines of Material Design. Material Design guidelines are simply guidelines, and are loose enough to be hacked — or strictly followed, in the case of Google's Android apps (in-house or not).
My feeling is the angular material team is already pushing like maniacs to bring this awesome tool to 1.0, and will take advantage of the new routing system in Angular 2 to provide some animations like the one you wish to attain out of the box.
But it's the bleeding edge of the bleeding edge, at least for the time being.
Good news seem to be that routes will have their own viewports and sibling viewports.
AngularJS somewhat starts to embrace Polymer's web components concept.
Scroll to "Show me the magic!" on this page, and check these demos. Polymer's ecosystem provides a lot of already-made components to build your app with. It's quite large, and makes you wonder why Polymer doesn't get the same momentum as AngularJS. But I digress...
Option 1
create a custom-made function that gets triggered on a list element being clicked/tapped, to place in your controller (or directive).
Once the user clicks/taps the list element, it triggers the function (console test).
The function should :
retrieve the id of the clicked/tapped item (pass it to the function)
animate : here you have several choices, but here's one : use a ui-router absolute named view (#view_name), and wrap it in a div container with overflow:hidden, that has inital dimensions corresponding to the dimensions of a list item.
Detect the x-y position of the list element that has been clicked (an example, assuming you use AngularJS with jQuery), and you pass it to the "item detail" route (see above), so the rectangle grows with origins corresponding exactly to where the UI is a the moment of the click/tap. The animation shown in the video seems pretty complex: the "item detail page" grows slower on the bottom and faster on the top, when the bottom item is clicked.
Why an absolute named view? Because it will allow, with z-indexing, for the list to stay underneath the "item detail" view, so when the user closes/leaves it, you can roll back your animation, and the rectangle will shrink back to exactly the dimensions and position of the list item. Finally, you transition the opacity:0 and leave the route.
Option 2
Here's a rough mockup of a technique stretching/scrolling an ion-item. It would require to detect the y position of the item, and use ionicScrollDelegate to scroll to it. Also, you would freeze the main scroll so the user get "stucked", until he closes the "detail view", which then releases the scroll.
$scope.toggleStretchedMode = function(itemID) {
$scope.stretched = $scope.stretched === false ? true: false;
if(!$scope.stretched){
$('ion-item').removeClass('stretched');
$ionicScrollDelegate.freezeAllScrolls(false);
}
else
{
$location.hash(itemID);
$ionicScrollDelegate.$getByHandle('mainScroll').anchorScroll(true);
$ionicScrollDelegate.freezeAllScrolls(true);
$('#'+itemID).addClass('stretched');
};
}
A very basic JSFiddle, which needs to be refined (clicked item should scroll to the middle of the screen, then expand).
Note that the JSFiddle only blocks the mousewheel scroll. If seems to block the first swipe, but then the ng-click releases it, so as it is it's far from perfect. You should not only block the list scrolling, but the up and down swipe events.
Also it initalizes badly, only works the second time. But the concept could be something like this.