I have a single window that I'm moving about the map on marker click (1000s of markers). It all works fine until I press the 'x' to close the window, which seems to delete the info window from the dom instead of just hiding it. I see there's a closeClick paramater, but I'm not sure what this does and can't seem to connect it to a function in order to override the deleton.
Here's the markup:
<google-map
id="map-canvas"
draggable="true"
bounds="map.bounds"
center="map.center"
zoom="map.zoom"
options="map.options"
events="map.events"
zoom="map.zoom">
<window
show="map.infoWindow.show"
coords="map.infoWindow.coords"
closeClick="map.infoWindow.close" ng-cloak>
Testing!
</window>
<markers
models="map.mountains"
coords="'self'"
icon="'icon'"
click="'onClicked'"
options="'options'"
doCluster="false">
</markers>
</google-map>
And here's an example of the window and 'x' button:
How can I prevent the window from being deleted and just hide it instead?
Or is there a better way I should be doing this?
I'm fairly confident adding/removing from DOM is google-maps functionality, not angular-google-maps functionality. Test out your scenario on a vanilla google-maps instance and see if the same behavior is present. If so, there's not much that can be done about it.
The closeClick event is fired when the "x" on the window is clicked. You hook up to it by adding something like closeClick="scopeFunction()". This will not likely help your scenario.
EDIT: A better way to get only one window open at a time is to use only one window object, bind it to a "currentMarker" on scope and in the onclick of the markers just change "currentMarker" to reflect the currently selected marker. Hope that helps.
Related
So I have a button on my template, with a tooltip that gives some extra information about the button. I would like the tooltip to appear when the mouse hovers over the button, and then disappear when the button is clicked. Clicking the button loads a separate view.
Currently I have it so the tooltip appears on hover, but then the problem is that the tooltip sticks around after the button has been clicked. Since the button is no longer part of the current view, the tooltip jumps to the top corner of the screen for a few seconds before disappearing. I'd like it to disappear the moment the button is clicked.
So far I've tried two things to solve the problem, neither of which have worked:
I tried wrapping the JS function which opens a new view in $timeout, hoping that the tooltip would disappear before the new view loads.
I tried changing the tooltip-trigger to 'click', but now the tooltip won't appear when the mouse is hovering over it. It will appear once the button is clicked, and stay there until the view is re-loaded.
Here is my code, which includes the two failed attempts mentioned above:
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo($event)"
tooltip-trigger="'click'"
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function($event) {
$timeout(function($event) { //timeout
SystemViews.openNewView(ctrl.newView);
});
};
Is it possible to have separate triggers for a tooltip like this? If not, what is another way that I can make sure the tooltip disappears before the new view is loaded?
Thank you very much in advance for any wisdom you'd be willing to impart.
The simplest solution is to hide the tooltip before changing view.
If your tooltip is triggered by a click on your anchor, you can emulate a click in your loadNewFunction function to hide it.
Test.html:
<a id="the-button" ng-click="loadNewView($event)" uib-tooltip-html="getToolTipInfo($event)" tooltip-trigger="'click'">Click Me!</a>
Test.js
ctrl.loadNewView = function($event) {
angular.element('#the-button').trigger('click');
SystemViews.openNewView(ctrl.newView);
};
Maybe this answer can interest you since it's about a very similar question.
I found the solution (for me, at least). I learned that you can have multiple triggers if you separate them by space. For my solution, I used the value:
tooltip-trigger='mouseenter click'.
That way it always turns on when I mouse-over, and turns off when I click.
Test.html:
<a class="the-button" ng-click="loadNewView($event)"
uib-tooltip-html="getToolTipInfo()"
tooltip-trigger="'mouseenter click'
>
Click Me!
</a>
Test.js:
ctrl.loadNewView = function() {
SystemViews.openNewView(ctrl.newView);
};
Hope someone else finds this helpful!
I'm currently working on an Onsen-based application where the requirement is that the sliding menu stay open.
It works okay by setting "swipeable=false" in conjunction with manually opening the sliding menu via "application.slidingmenu.open()", but my issue is that there appears to be a click event bound somewhere that auto-closes the sliding-menu every time a click event is registered outside the sliding-menu (in the page body etc).
Anyone have any pointers?
Update: I went another route - by using ons-split-view (see official docs):
Essentialy, it's:
<ons-sliding-menu
ng-show="isMobile"
var="application.slidingmenu"
swipe-target-width="100"
main-page="page1.html"
menu-page="menu.html"
side="left"
max-slide-distance="250px">
<ons-split-view
ng-show="!isMobile"
secondary-page="menu.html"
main-page="page1.html"
main-page-width="85%"
collapse="portrait">
I'd like to do the above app Tutorial effect using Onsen UI.
However, in the Page Patterns of Onsen UI, I didn't see anything similar.
Could someone shed some light on this?
Much appreciated.
I think what you're looking for is a carousel. You can make one using the <ons-carousel> component.
In this case you want to have a swipeable fullscreen carousel so you can define it like this:
<ons-carousel swipeable overscrollable auto-scroll fullscreen>
<ons-carousel-item>
Content #1
</ons-carousel-item>
<ons-carousel-item>
Content #2
</ons-carousel-item>
</ons-carousel>
Here is a simple example of a fullscreen carousel:
http://codepen.io/onsen/pen/xbbzOQ
Please also take a look at the docs:
http://onsen.io/reference/ons-carousel.html
If you want bullets, you can use the carousel.getActiveCarouselItemIndex() in order to get the current active element.
<ons-carousel-cover>
<div class="bullets">
<span
ng-repeat="idx in indices"
ng-class="{'active': idx === carousel.getActiveCarouselItemIndex()}">
•
</span>
</div>
</ons-carousel-cover>
You also need to trigger a digest event to make Angular understand that something changed.
This is the code:
http://codepen.io/argelius/pen/RWomrz
I am using the MD-Slider with the md-discrete option to display the ticks on the track.
Strangely though the ticks of the slider within a directive template are not displayed. But outside the directive it works.
I have added a screenshot to show you. See the JADE code for this example:
div.sliding-footer-panel(ng-class="{ open: openFooter}" layout="column")
div.trigger(layout="column" layout-align="center center" ng-click="openFooter=!openFooter")
md-icon(ng-hide="openFooter" md-svg-icon="hardware:ic_keyboard_arrow_up_24px")
md-icon(ng-show="openFooter" md-svg-icon="hardware:ic_keyboard_arrow_down_24px")
md-slider.md-primary(md-discrete flex min="-0.5" max="4" step="0.5" aria-label="Change play rate")
div.footerContent(layout="column" flex)
audio-player
The directive audio-player loads the <audio> tag and the slider next to it.
The slide above the footerContent div is rendered correctly in the main view and renders the dots.
When I look at the canvas tag within the track element I see that its dimensions are 0. The one loaded outside the directive has normal dimensions.
So I recon the CANVAS tag is not loaded correctly via the directive. Anyone an idea how to fix this?
Basically all I want to do is have the dragged item have a decreased opacity so that it is slightly see through. My issue is that I can't seem to change the style of the item being dragged when it is initially started dragging.
<div class=" btn btn-droppable growBackground"
ng-repeat="folder in Folders"
data-drop="true"
ng-model='Folders'
jqyoui-droppable="{index: {{$index}}, onOver: 'moveFolderOnFolder($index)'}"
data-jqyoui-options="{accept: '.folder'}">
<div class="btn btn-draggable grow folder nospacing"
data-drag="true"
data-jqyoui-options="{revert: 'invalid', helper: 'clone'}"
ng-model="Folders"
<!-- IMPORTANT LINE HERE -->
jqyoui-draggable="{index: {{$index}}, placeholder:true, animate:false, onDrag: 'storeDraggedFolderId(folder.Id)', onStart: 'addDraggingClass()', onStop: 'removeDraggingClass()' }">
{{folder.Name}}
</div>
The important bit of this code is in the second draggable div in the jqyoui options where i apply the folderopacity class through the onstop and onstart methods.
This code has the following effect -
The bottom block is the one being currently dragged. I want THIS one to have the opacity styling, but I can't find a way of doing it (at least initially anyway. If I do not remove the class when the dragging finished it will keep the opacity next time you drag it). I seem to have tried this with a bunch of the different attributes but yet no success.
Any ideas?
if I understood you correctly you want to catch the "drag" event and accordingly use an ng-class to add/remove class right?
so you can either add a drag event that jqyoui-dragable is producing(I assume its angular-dragdrop):
http://codef0rmer.github.io/angular-dragdrop/#/
or you can just catch a mix of mousedown mouseup and mousemove events (prone to errors) and that with ng-class
the docs for the event are in the webpage.
you probably want to use onStart event catch it in the controller
onStart- callback method to be invoked (has to be defined in a
controller) when dragging starts
so in the docs it shows
<div jqyoui-draggable="{onStart:'startCallback(item)'}">
jsut add in the controller the callback:
$scope.startCallback = function(){
$scope.isDragged = true;
}
and in the box add
ng-class={'opacityClass':isDragged}
for the other option just check when mouse is down and not up and see that the mousemove has been triggered and if all those statuses occur update the ng-class.Dont see why but if you want Ill help out with that
naturally if the
During dragging, the item dragged gets ui-draggable-dragging style appended to the class attribute.
Adding this to the css will do the trick:
.ui-draggable-dragging{
opacity:0.3;
}