I posted this on the Ionic forum, but I never seem to have luck on their forums, so I thought I'd try here.
I'd like to have options for a "dark" and "light" theme that a user can choose in their settings. What's the best way to go about that? Can I programmatically switch between ionic themes, like dark and stable?
Thanks in advance.
You can you ng-style to pass a css options object to an element. This will toggle font color on the element. Following this pattern you would have dark and light theme objects that you toggle between.
<div ng-style="style" class="item">
This is a basic Card.
<button ng-click="toggle()">Toggle</button>
</div>
And in your controller
.controller('AppCtrl', function($scope) {
$scope.style = {
color: '#000'
};
$scope.toggle = function() {
$scope.style.color = ($scope.style.color === '#000' ? '#fff' : '#000');
};
});
Demo
Here is a simple example where you want to change the color of your header dynamically:
<ion-header-bar ng-class="'bar-' + appTheme">
<h1 class="title">Ionic - Switch Themes</h1>
</ion-header-bar>
In your controller:
var selectedTheme = $window.localStorage.appTheme;
if (selectedTheme) {
$scope.appTheme = selectedTheme;
} else {
$scope.appTheme = 'positive';
}
$scope.themeChange = function (theme) {
// save theme locally
$window.localStorage.appTheme = theme;
// reload
$window.location = '';
}
Live demo and full example #: http://techiedreams.com/ionic-custom-and-dynamic-theming/
Related
I have a SAPUI5 Fiori application.
I use theme sap_fiori_3 as the base theme.
I customized this theme and only attached a background image to the theme.
The interesting part is when I activate this customized theme (that only has an extra background image in comparison to original sap_fiori_3 theme), the dialog are not centered in my app anymore.
The dialog are made with sap.m.dialog class.
I wrote a small snippet of code to center the dialog like following:
onAfterDialogOpen: function(oEvent){
var oDialog = oEvent.getSource(),
$Dialog = oDialog.$(),
oPosition = $Dialog.position(),
iTop = oPosition.top,
iLeft = oPosition.left,
iDialogWidth = $Dialog.width(),
iDialogHeight = $Dialog.height(),
iScreenWidth = sap.ui.Device.resize.width,
iScreenHight = sap.ui.Device.resize.height,
iNewTop = Math.floor((iScreenHight-iDialogHeight)/2),
iNewLeft = Math.floor((iScreenWidth-iDialogWidth)/2);
if(Math.abs(iNewLeft-iLeft) > 10 & Math.abs(iNewTop-iTop) > 10){
$Dialog.offset({top: iNewTop, left: iNewLeft});
}
},
But it is not a good solution. Why? Because it makes a motion on my screen like following:
Now the question is, how can I center the dialog without Java Script and by settings or some other tricks that when the dialog is opened, it be already centered.
Please note that using onBeforeOpen event is not possible as I need the size and position of the dialog!
I finally found out what is the source of the problem. It seems the Theme Designer of SAP is buggy and some part of the theme code does not transfer to the exported file.
When I use the theme designer to customize the theme it not only made the mentioned error, but also some other strange behavior appear in the deployed applications in the fiori launchpad which use the customized theme. However, we don't have those errors in the development time in the WEB IDE.
Therefore as I only needed to customize the following items:
background image
logo
favicon
I tried to use the standard theme like sap_fiori_3 and work around for setting these properties.
So for the first 2 issues I used the CSS hack:
div.sapUShellFullHeight {
background-image: url(../images/myBackgroundImage.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: right;
}
a#shell-header-logo > img#shell-header-icon {
content:url(../images/logo.svg);
}
And for the favicon I used the promise solution. Please notice in the fiori launchpad each time that you switch between the applications fiori will reset the favicon, so I used the JavaScript promise to set it.
// Set the favicon dynamically to get read of blinking
function waitForElementAppear(selector) {
return new Promise(function(resolve, reject) {
var element = document.querySelector(selector);
if(element) {
resolve(element);
return;
}
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
var nodes = Array.from(mutation.addedNodes);
for(var node of nodes) {
if(node.matches && node.matches(selector)) {
observer.disconnect();
resolve(node);
return;
}
};
});
});
observer.observe(document.documentElement, { childList: true, subtree: true });
});
}
//
function waitForElementRemoved(selector) {
return new Promise((resolve) => {
var element = document.querySelector(selector);
if(!element) {
resolve();
return;
}
var observer = new MutationObserver((mutations, observer) => {
for (const mutation of mutations) {
for (const removedNode of mutation.removedNodes) {
if (removedNode === element) {
observer.disconnect();
resolve();
}
}
}
});
observer.observe(element.parentElement, { childList: true });
});
}
//
function changeFavIcon(selector) {
waitForElementAppear(selector).then(function(element) {
element.setAttribute("href", "icon/favicon.ico");
waitForElementRemoved(selector).then(function() {
changeFavIcon(selector);
});
});
};
changeFavIcon("link[rel='shortcut icon']");
It recursively checks when the favicon is injected then it will set its href and as soon as it is removed, this function will observe the next injection!
As I know somebody may says why not used sapui5 its original solution for setting the favicon, like this:
jQuery.sap.setIcons({
'phone': '/images/cimt-logo.png',
'phone#2': '/images/cimt-logo.png',
'tablet': '/images/cimt-logo.png',
'tablet#2': '/images/cimt-logo.png',
'favicon': '/icon/favicon.ico',
'precomposed': true
});
I must say it was not working in my case!
i have the slider like this:
<ion-slides #promoSlider [options]="homeOptions" (change)="onPromoSlideChanged()" >
<ion-slide *ngFor="let promo of promos">
<img *ngIf="promo" src="{{promo.image}}" style="width:300px;height:300px;margin:auto;display:block" >
</ion-slide>
</ion-slides>
I have use this options to keep my slide playing using auto play:
homeOptions = {
initialSlide: 0,
loop: true,
autoplay:2000
};
But the problem is when i swipe the slider the auto play is stopped and the slider is not sliding again. How to keep the slider playing even i swipe the slider. I have try this code:
onPromoSlideChanged() {
alert('ABC');
this.promoSlider.options = this.homeOptions;
this.promoSlider.rapidUpdate();
//What should i do in this method?
};
What event i need to keep the slider slide again (keep playing) when i swipe the slider ? Thanks...
You can find your answer here => https://forum.ionicframework.com/t/how-to-keep-slides-auto-play-when-the-slides-is-swiped/54025/6
The official docs reference the component Swiper as the base of the ion-slides component, so the API should be the same as the one described in http://idangero.us/swiper/api/11.
You could use the option autoplayDisableOnInteraction to avoid disabling auto play after the user interaction.
Your options array should be:
homeOptions = {
initialSlide: 0,
loop: true,
autoplay:2000,
autoplayDisableOnInteraction: false
};
Hope it helps.
$scope.images = {"status":true,"msg":"2 record(s) found","sliders":[{"title":"slider 1","content":"test
value","weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/a\/m\/test.jpg"},{"title":"Slider
2","content":null,"weblink":null,"image":"http:\/\/192.168.8.54\/test\/media\/mbimages\/
a\/m\/test.png"}]}
<ion-slide-box delegate-handle="img-viewer" options="options" does-continue="true" loop="true" auto-play="true" slide-interval="5000" >
<ion-slide ng-repeat="nt in images" ng-if="nt.slider_position == '1'" >
<div class="box"><img ng-src="{{nt.image}}" style="width:400px;height:200px;margin:auto;display:block"/></div>
</ion-slide>
</ion-slide-box>
**Controller**
$scope.counter = 0;
$interval(function ()
{
if($scope.counter == $ionicSlideBoxDelegate.$getByHandle('img-viewer').currentIndex() + 1)
{
$ionicSlideBoxDelegate.$getByHandle('img-viewer').slide(0);
}
else{
$ionicSlideBoxDelegate.$getByHandle('img-viewer').update();
}
}, 2000);
angular.forEach($scope.images, function(value, key){
if(value.slider_position == "1")
{
$scope.counter++;
}
Using Observable works for your scenario. You can use it as -
import {Observable} from 'Rxjs/rx';
// in class -
#ViewChild(Slides) slides: Slides;
ionViewDidEnter() {
//you get slider data from any web service
this.sliderObservable = Observable.interval(3000).subscribe(x => {
this.autoPlaySlider();
// or you can do this, it will start autoplay at every 3 seconds
// this.slides.startAutoplay();
});
}
autoPlaySlider(){
var slider_index = this.slides.getActiveIndex();
if(slider_index < this.sliderData.length){
this.slides.slideTo(slider_index+1);
}
else{
this.slides.slideTo(0);
}
}
ionViewDidLeave(){
this.sliderObservable.unsubscribe();
}
You can find more reference Here
I am trying to create a web-page where some elements (forms and buttons) become visible or are being hidden when some other elements (buttons) are clicked.
I try to find a way to manage this, that is re-usable, and easy to maintain.
My current solution is shown below, but I hope someone has a more elegant solution.
The problem with my own solution is that it will become difficult to read when the number of dependencies increase. It will then also require a lot of editing when I add another button and form.
My current solution is to use an observable to manage the state of the forms, like this:
HTML:
<button id="button-A">Show form A, hide button A and B</button>
<button id="button-B">Show form B, hide button A and B</button>
<form id="form-A">
...this form is initially hidden
...some form elements
<button id="cancel-A">Hide form A, show button A and B</button>
</form>
<form id="form-B">
...this form is initially hidden
...some form elements
<button id="cancel-B">Hide form B, show button A and B</button>
</form>
Dart:
import 'dart:html';
import 'package:observe/observe.dart';
final $ = querySelector;
final $$ = querySelectorAll;
Map<String, bool> toBeObserved = {
"showFormA" : false,
"showFormB" : false
};
// make an observable map
ObservableMap observeThis = toObservable(toBeObserved);
// start managing dependencies
main() {
// add click event to buttons
$('#button-A')
..onClick.listen((E) => observeThis["showFormA"] = true);
$('#button-B')
..onClick.listen((E) => observeThis["showFormB"] = true);
// add click events to form buttons
$('#cancel-A')
..onClick.listen((E) {
E.preventDefault();
E.stopPropagation();
observeThis["showFormA"] = false;
});
$('#cancel-B')
..onClick.listen((E) {
E.preventDefault();
E.stopPropagation();
observeThis["showFormB"] = false;
});
// listen for changes
observeThis.changes.listen((L) {
L.where((E) => E.key == 'showFormA').forEach((R) {
$('#form-A').style.display = (R.newValue) ? 'block' : 'none';
$('#button-A').style.display = (R.newValue || observeThis['showFormB']) ? 'none' : 'inline-block';
$('#button-B').style.display = (R.newValue || observeThis['showFormB']) ? 'none' : 'inline-block';
});
L.where((E) => E.key == 'showFormB').forEach((R) {
$('#form-B').style.display = (R.newValue) ? 'block' : 'none';
$('#button-A').style.display = (R.newValue || observeThis['showFormA']) ? 'none' : 'inline-block';
$('#button-B').style.display = (R.newValue || observeThis['showFormA']) ? 'none' : 'inline-block';
});
});
}
You can use basic CSS to show/hide the elements.
HTML
<div id="container" class="show-buttons">
<button id="button-A" class="btn" data-group="a">...</button>
<button id="button-B" class="btn" data-group="b">...</button>
<form id="form-A" class="form group-a">...</button>
<form id="form-B" class="form group-b">...</button>
</div>
CSS
.btn, .form {
display: none;
}
.show-buttons .btn,
.show-a .form.group-a,
.show-b .form.group-b {
display: block;
}
In Dart just get the data-group (or whatever you want to call this) attribute from the button. Toggle the CSS classes (show-buttons, show-a and show-b) on the container element to switch between the buttons and the specific forms.
This solution is very easy to extend on.
You can use something like this to handle all the elements in a generic way :
final Iterable<ButtonElement> buttons = querySelectorAll('button')
.where((ButtonElement b) => b.id.startsWith('button-'));
final Iterable<ButtonElement> cancels = querySelectorAll('button')
.where((ButtonElement b) => b.id.startsWith('cancel-'));
final Iterable<FormElement> forms = querySelectorAll('form')
.where((FormElement b) => b.id.startsWith('form-'));
buttons.forEach((b) {
b.onClick.listen((e) {
// name of clicked button
final name = b.id.substring(b.id.indexOf('-') + 1);
// hide all buttons
buttons.forEach((b) => b.hidden = true)
// show the good form
querySelector('#form-$name').hidden = false;
});
});
cancels.forEach((b) {
b.onClick.listen((e) {
// show all buttons
buttons.forEach((b) => b.hidden = false);
// hide all forms
forms.forEach((b) => b.hidden = true);
// prevent default
e.preventDefault();
});
});
// hide all form at startup
forms.forEach((f) => f.hidden = true);
You could use polymer's template functionality like
<template if="showA">...
This should work without embedding your elements within Polymer elements too.
This discussion provides some information how to use <template> without Polymer elements.
Using Polymer elements could also be useful.
It all depends on your requirements/preferences.
Angular.dart is also useful for such view manipulation.
If you want to use plain Dart/HMTL I don't have ideas how to simplify your code.
Is there an example on how to implement Drag and Drop with Ember.js ? I have tried using jQuery UI, but the integration seems to be somewhat complex.
I've seen this jsFiddle: http://jsfiddle.net/oskbor/Wu2cu/1/ but haven't been able to implement this successfully in my own app.
What are the options for a rather simple drag&drop implementation using Ember.js ?
I took a look at the post by Remy Sharp and implemented a basic example in Ember.js, see http://jsfiddle.net/pangratz666/DYnNH/.
Handlebars:
<script type="text/x-handlebars" >
Drag and drop the green and red box onto the blue one ...
{{view App.Box class="box green"}}
{{view App.Box class="box red"}}
{{view App.DropTarget class="box blue"}}
</script>
JavaScript:
DragNDrop = Ember.Namespace.create();
DragNDrop.cancel = function(event) {
event.preventDefault();
return false;
};
DragNDrop.Dragable = Ember.Mixin.create({
attributeBindings: 'draggable',
draggable: 'true',
dragStart: function(event) {
var dataTransfer = event.originalEvent.dataTransfer;
dataTransfer.setData('Text', this.get('elementId'));
}
});
DragNDrop.Droppable = Ember.Mixin.create({
dragEnter: DragNDrop.cancel,
dragOver: DragNDrop.cancel,
drop: function(event) {
var viewId = event.originalEvent.dataTransfer.getData('Text');
Ember.View.views[viewId].destroy();
event.preventDefault();
return false;
}
});
App.Box = Ember.View.extend(DragNDrop.Dragable);
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);
Looking for some insight into this problem.
I have dynamically generated links on a page that launch a lightbox ie they use a rel="lightbox[...]" I'm also putting a class on the hyperlink to make a tooltip work.
<a id="a_-1_6" class="Tips2" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
And in the dom ready event
var Tips2 = new Tips($$('.Tips2'), {
initialize: function() { this.tip.fade('hide'); },
onShow: function(tip) { tip.fade('in'); },
onHide: function(tip) { tip.fade('out'); }
});
This all works fine except the tip uses the rel attribute to store data, i'm presuming as its a pre-html5 - so my question is would this mean I need to make my own version of the Tips class in mootools to work off the data.* attributes? I'd like to see I'm not barking up the wrong tree before I try that.
Thanks
Could you make another element inside the Ahref, like:
<a id="a_-1_6" href="/media/63/forest_150.jpg" rel="lightbox[examples]" data-title="Tractor" data-desc="description..." data-rel="std" title="" style="opacity: 1; visibility: visible;">
<span class="Tips2">blah</span>
</a>
This way, you can avoid the conflict.
Tips' documentation states that you can change which property is checked for the tip text. By default, it is rel or href, but you can change it when initializing the new Tip:
var Tips2 = new Tips($$('.Tips2'), {
initialize: function() { this.tip.fade('hide'); },
onShow: function(tip) { tip.fade('in'); },
onHide: function(tip) { tip.fade('out'); },
text: 'data-text' // Will now check the data-text property for tooltip text
});