I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css>
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
/*connect.css*/
.connect .heading1{
padding-left: 450px;
color: #3BAAFF;
text-transform: uppercase;
font-weight: bolder;
margin-bottom: 31px;
font-size: 31px;
}
.connect .heading2{
padding-left : 512px;
color: #5ED4FF;
text-transform: uppercase;
font-weight: bold;
position: absolute;
}
.connect .results {
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
display : inline-block;
width: 786px;
position : relative;
left: 134px;
}
/*button_enyo.css*/
.button-sample {
padding: 0 20px;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 16px;
margin-top: 85px;
margin-left: 105px;
}
.button-sample .section {
padding-top: 20px;
color: #F49200;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 8px;
}
.button-sample button {
margin: 10px;
}
.button-sample .results {
margin: 20px 0;
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
}
.button-sample .image-button {
width: 200px;
height: 100px;
}
/*checkbox-sample.css*/
.checkbox-sample {
padding: 0 20px;
font-family: Segoe UI, Prelude Medium, Helvetica, Verdana, sans-serif;
font-size: 16px;
margin-top: 85px;
margin-left: 105px;
}
.checkbox-sample .section {
padding-top: 20px;
color: #F49200;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 8px;
/*position : absolute;*/
}
.checkbox-sample .enyo-checkbox {
margin: 10px;
}
.checkbox-sample .results {
margin: 20px 0;
padding: 20px;
min-height: 24px;
border-radius: 10px;
color: #FFF;
background-color: #555;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Connect 2015</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel=stylesheet href="http://enyojs.com/enyo-2.0b/enyo.css">
<link rel="stylesheet" href="button_enyo.css">
<link rel="stylesheet" href="checkbox-sample.css">
<link rel="stylesheet" href="connect .css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<script src="http://enyojs.com/enyo-2.0b/enyo.js"></script>
<script src="enyo-master/enyo.js"></script>
<script>
enyo.kind({
name: "enyo.sample.ButtonSample",
classes: "button-sample",
components: [
{content: "Buttons", classes: "section"},
{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
{content: "Grouped Buttons", classes: "section"},
{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
{kind: "enyo.Button", content: "Grouped Button 1"},
{kind: "enyo.Button", content: "Grouped Button 2"},
{kind: "enyo.Button", content: "Grouped Button 3"}
]},
{content: "Image Button", classes: "section"},
{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
//]},
]}
//{name: "results", classes: "results"}
],
buttonTapped: function(inSender, inEvent) {
//this.updateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
this.on("updateResult", {content: "The \"" + inSender.getContent() + "\" button is tapped."});
},
buttonToggleTapped: function(inSender, inEvent) {
this.buttonTapped(inSender, inEvent);
this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
},
groupButtonsActivated: function(inSender, inEvent) {
if (inEvent.originator.getParent().getActive()) {
this.updateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
}
//},
},
updateResult: function(inComponent) {
this.$.results.destroyClientControls();
this.$.results.createComponent(inComponent);
this.$.results.render();
}
});
enyo.kind({
name: "enyo.sample.CheckboxSample",
classes: "checkbox-sample",
components: [
{content: "Checkboxes", classes: "section"},
{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
{content: "Grouped Checkboxes", classes: "section"},
{kind: "enyo.Group", onActivate: "groupActivated", components: [
{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
//]},
]}
//{name: "results", classes: "results"}
//],
],
checkboxChanged: function(inSender, inEvent) {
this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
},
groupActivated: function(inSender, inEvent) {
if (inEvent.originator.getActive()) {
this.updateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
}
//},
}
});
//new enyo.sample.ButtonSample().renderInto(document.body);
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
//{ content : "Please signup for Connect", classes : "heading2"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
// ]
],
});
new connect().renderInto(document.body);
</script>
</body>
</html>
I want to perform dynamic binded actions on click of buttons and checkbox ticks all together to be reflected in a statement of the class results (name results, box-container)
On the click of button1, display should be button1 is clicked,
on click of other buttons, display should be they are clicked;
For checkbox also i have to combined the actions display triggered to that staement-result box only. on click check of checkbox, checkbox one is clicked i.e. it should be displayed after removal of button action.
one action display on the results at a time for combination of both kinds button and checkbox.
You can achieve the expected behavior using below code, where to pass data between siblings using common parent, event propagation and handling are used.
FIDDLE LINK
enyo.kind({
name: "enyo.sample.ButtonSample",
classes: "button-sample",
components: [
{content: "Buttons", classes: "section"},
{kind: "enyo.Button", content: "Action Button", ontap: "buttonToggleTapped"},
{kind: "enyo.Button", name: "toggleButton", disabled: true, content: "Disabled Button", ontap: "buttonTapped"},
{content: "Grouped Buttons", classes: "section"},
{kind: "enyo.Group", onActivate: "groupButtonsActivated", components: [
{kind: "enyo.Button", content: "Grouped Button 1"},
{kind: "enyo.Button", content: "Grouped Button 2"},
{kind: "enyo.Button", content: "Grouped Button 3"}
]},
{content: "Image Button", classes: "section"},
{kind: "enyo.Button", content: "Image Button", classes: "image-button", ontap: "buttonTapped", components: [
{kind: "enyo.Image", src: "http://enyojs.com/img/enyo-logo.png", alt: "Enyo Logo"}
]}
],
//Custom event
events: {
onUpdateResult: "",
},
buttonTapped: function(inSender, inEvent) {
//Once button tapped, propagate/bubble the event with required data
this.doUpdateResult({content: "The \"" + inSender.getContent() + "\" button is tapped."});
},
buttonToggleTapped: function(inSender, inEvent) {
//button tapped
this.buttonTapped(inSender, inEvent);
this.$.toggleButton.setDisabled(!this.$.toggleButton.getDisabled()).setContent(this.$.toggleButton.getDisabled() ? "Disabled Button" : "Enabled Button");
},
groupButtonsActivated: function(inSender, inEvent) {
if (inEvent.originator.getParent().getActive()) {
this.doUpdateResult({content: "The \"" + inEvent.originator.getParent().getActive().getContent() + "\" button is selected."});
}
}
});
enyo.kind({
name: "enyo.sample.CheckboxSample",
classes: "checkbox-sample",
components: [
{content: "Checkboxes", classes: "section"},
{kind: "enyo.Checkbox", content: "Checkbox 1", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 2", onchange: "checkboxChanged"},
{kind: "enyo.Checkbox", content: "Checkbox 3", onchange: "checkboxChanged"},
{content: "Grouped Checkboxes", classes: "section"},
{kind: "enyo.Group", onActivate: "groupActivated", components: [
{kind: "enyo.Checkbox", content: "Grouped Checkbox 1"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 2"},
{kind: "enyo.Checkbox", content: "Grouped Checkbox 3"}
]}
],
//Custom event
events: {
onUpdateResult: "",
},
checkboxChanged: function(inSender, inEvent) {
//Propagate the event with required data
this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is " + (inSender.getChecked() ? "checked": "unchecked") + "."});
},
groupActivated: function(inSender, inEvent) {
if (inEvent.originator.getActive()) {
this.doUpdateResult({content: "The \"" + inEvent.originator.getContent() + "\" checkbox is selected."});
}
}
});
enyo.kind({
name: "connect",
classes: "connect ",
components: [
{ content : "CONNECT Signup 2015", classes : "heading1"},
{name: "results", classes: "results"},
{ kind: "enyo.sample.ButtonSample" },
{ kind: "enyo.sample.CheckboxSample" },
],
//Event handled by common parent, callback executed
handlers: {
onUpdateResult: "updateResult"
},
//This callback will update the results
updateResult: function(inSender,inEvent) {
this.$.results.setContent(inEvent.content);
}
});
new connect().renderInto(document.body);
Hope that helps!
Related
Hello I am new to ionic and trying to achieve a custom tab bar as follows
Expected Output
Current Output
Bellow is my code so far
home.scss
ion-tabs {
ion-tab-bar {
bottom: 0px;
width: 100%;
position: absolute;
backdrop-filter: blur(12px);
--color: var(--ion-color-white);
--background: rgba(255, 255, 255, 0.04);
}
ion-tab-button {
ion-label {
font-weight: 500;
font-size: 14px;
line-height: 10px;
}
opacity: 0.75;
ion-icon {
font-size: 24px;
}
ion-icon[ng-reflect-name='add-circle-outline'] {
font-size: 40px;
}
}
ion-tab-button.tab-selected {
opacity: 1;
ion-label {
font-weight: 600;
}
}
}
home.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
>
<ion-icon [name]="item?.icon"></ion-icon>
<ion-label>{{item?.name}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
home.ts
navigationItems = [
{ name: 'Home', route: 'dashboard', icon: 'home' },
{ name: 'Calendar', route: 'calendar', icon: 'calendar' },
{ icon: 'add-circle-outline', click: () => this.openBottomSheet() },
{ name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
{ name: 'Settings', route: 'settings', icon: 'settings' },
];
Can someone please help me achieve as shown in the screenshot
use ion-fab-button to show big button in center.
For Example:
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1">
<ion-icon name="newspaper"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab2">
<ion-icon name="construct"></ion-icon>
</ion-tab-button>
<ion-tab-button>
</ion-tab-button>
<ion-tab-button tab="tab3">
<ion-icon name="notifications"></ion-icon>
</ion-tab-button>
<ion-tab-button tab="tab4">
<ion-icon name="settings"></ion-icon>
</ion-tab-button>
</ion-tab-bar>
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button routerDirection="root" color="warning" >
<ion-icon name="add-circle"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-tabs>
Check This Stackblitz for more info:
Stackblitz
Your button position is 2 so we will insert a custom class inside It programmatically.
home.html (changed code):
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
[ngClass]="{'add-btn':i===2 ? true : false}"
>
<ion-icon [name]="item?.icon"></ion-icon>
<ion-label>{{item?.name}}</ion-label>
</ion-tab-button>
Then add Its style to scss file :
.add-btn {
ion-icon {
color: #fcad07;
padding: 0px;
margin: 0px;
font-size: 55px !important;
position: absolute;
margin: auto;
}
}
I updated my code as follows and it worked for me
home.html
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button
*ngFor="let item of navigationItems; index as i"
[tab]="item?.route"
(click)="item?.click ? item?.click() : null"
id="tabButton-{{ i }}"
>
<ion-icon [src]="item?.src" [name]="item?.icon"></ion-icon>
<ion-label *ngIf="item.src == null">{{item?.name}}</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
home.ts
navigationItems = [
{ name: 'Home', route: 'dashboard', icon: 'home' },
{ name: 'Calendar', route: 'calendar', icon: 'calendar' },
{ src: 'assets/images/tab-bar-add.svg', click: () => this.openBottomSheet() },
{ name: 'Reports', route: 'reports', icon: 'stats-chart-outline' },
{ name: 'Settings', route: 'settings', icon: 'settings' },
];
home.scss
ion-tabs {
ion-tab-bar {
bottom: 0px;
width: 100%;
position: absolute;
backdrop-filter: blur(12px);
--color: var(--ion-color-white);
--background: var(--ion-tab-bar-background);
}
ion-tab-button {
ion-label {
padding-bottom: 5px;
font-weight: 500;
font-size: 14px;
line-height: 10px;
color: var(--ion-color-white-light);
}
ion-icon {
font-size: 24px;
color: var(--ion-color-white-light);
}
ion-icon[ng-reflect-src='assets/images/tab-bar-add.svg'] {
width: 80%;
height: 80%;
}
}
ion-tab-button.tab-selected {
ion-label {
font-weight: 600;
color: var(--ion-color-tab-selected);
}
ion-icon {
color: var(--ion-color-tab-selected);
}
}
}
I now understand how image overlays work (I am a newbie) and have no issue inserting them into a map now, however I have 4 maps on one page (image attached of how it looks) and I am wanting to overlay an image on one of them (top left). Below is my code that works - and below that code that doesn't work. Where do I need to insert the addsource() and addlayer() for this to work? Working code would be very helpful as I cannot seem to find this out myself. I spent the last 2 hours trying to figure this out.
Code that works : (nothing is added below map named "topleftmapbox" so the code works)
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>
</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.topleftmapclass {height : 50%; width : 50%; bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%; nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%; top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%; top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963]
});
var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
</script>
</body>
</html>
And this code (with code added below "topleftmapbox" does NOT work) :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:100%; bottom:100%; left:100%,right:100%, width:100%; padding:0;}
</style>
</head>
<body background="bg.jpg">
<style>
html, body, #page, #map {
height:100%;
width:100%;
margin:0;
padding:0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.topleftmapclass {height : 50%; width : 50%; bottom: 50%; right : 50%; position : absolute; z-index : 200;}
.toprightmapclass { height : 50%; width : 50%; nottom: 50%; left : 50%; position : absolute; z-index : 200;}
.bottomleftmapclass {height : 50%; width : 50%; top : 50%; right : 50%; position : absolute; z-index : 200;}
.bottomrightmapclass { height : 50%; width : 50%; top : 50%; left : 50%; position : absolute; z-index : 200;}
</style>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963]
});
topleftmapbox.addSource("dopplerimage", {"type": "image",
"url": "KEWX_L2_Z.gif",
"coordinates": [
[-98.0387, 29.7125],
[-98.0182, 29.7125],
[-98.0387, 29.6927],
[-98.0387, 29.6920]
]})
topleftmapbox.addLayer({
"id": "overlay",
"source": "dopplerimage",
"type": "raster",
"paint": {"raster-opacity": 0.85}
})
var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
</script>
</body>
</html>
You need to wait until the style for topleftmapbox is loaded before adding the source and layer.
topleftmapbox.on('load', function() {
...
});
Full code:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>Quad Pane Display</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
<style>
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 100%;
bottom: 100%;
left: 100%, right:100%, width:100%;
padding: 0;
}
</style>
</head>
<body background="bg.jpg">
<style>
html,
body,
#page,
#map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
cursor: url(cursor.gif), pointer;
overflow: hidden;
}
body * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.topleftmapclass {
height: 50%;
width: 50%;
bottom: 50%;
right: 50%;
position: absolute;
z-index: 200;
}
.toprightmapclass {
height: 50%;
width: 50%;
nottom: 50%;
left: 50%;
position: absolute;
z-index: 200;
}
.bottomleftmapclass {
height: 50%;
width: 50%;
top: 50%;
right: 50%;
position: absolute;
z-index: 200;
}
.bottomrightmapclass {
height: 50%;
width: 50%;
top: 50%;
left: 50%;
position: absolute;
z-index: 200;
}
</style>
<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />
<div id='topleftmap' class='topleftmapclass'></div>
<div id='toprightmap' class='toprightmapclass'></div>
<div id='bottomleftmap' class='bottomleftmapclass'></div>
<div id='bottomrightmap' class='bottomrightmapclass'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';
var topleftmapbox = new mapboxgl.Map({
container: 'topleftmap',
zoom: 14,
pitch: 53,
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963]
});
topleftmapbox.on('load', function() {
topleftmapbox.addSource("dopplerimage", {
"type": "image",
"url": "KEWX_L2_Z.gif",
"coordinates": [
[-98.0387, 29.7125],
[-98.0182, 29.7125],
[-98.0387, 29.6927],
[-98.0387, 29.6920]
]
})
topleftmapbox.addLayer({
"id": "overlay",
"source": "dopplerimage",
"type": "raster",
"paint": {
"raster-opacity": 0.85
}
})
});
var toprightmapbox = new mapboxgl.Map({
container: 'toprightmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomleftmapbox = new mapboxgl.Map({
container: 'bottomleftmap',
style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
var bottomrightmapbox = new mapboxgl.Map({
container: 'bottomrightmap',
style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
center: [-98.028491, 29.703963],
zoom: 7,
attributionControl: false
});
</script>
</body>
</html>
I am working on Ionic Material and I want 2 images in a row like Ionic material Demo app.It is showing only 1 now in a row. I created a https://codepen.io/anujsphinx/pen/jVqvaV
From It,So Need Help to fix this issue.
Now That issue has fixed and image is showing but main issue is tomaintain size,check updated pen on same url.
Look at this solution:
/*global angular*/
angular.module('ionicApp', ['ionic', 'ionic-material', 'ionMdInput'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('eventmenu', {
url: '/event',
abstract: true,
templateUrl: 'templates/event-menu.html'
})
.state('eventmenu.login', {
url: '/login',
views: {
'menuContent' :{
templateUrl: 'templates/login.html',
controller: 'GalleryCtrl'
}
}
});
$urlRouterProvider.otherwise('/event/login');
})
.directive('ngLastRepeat', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit('ngLastRepeat'+ (attr.ngLastRepeat ? '.'+attr.ngLastRepeat : ''));
});
}
}
}
})
.controller('MainCtrl', function($scope, ionicMaterialInk, ionicMaterialMotion, $ionicSideMenuDelegate, $timeout) {
$timeout(function(){
ionicMaterialInk.displayEffect();
ionicMaterialMotion.ripple();
},0);
})
.controller('GalleryCtrl', function($scope, $stateParams, $timeout, ionicMaterialInk, ionicMaterialMotion) {
console.log("in GalleryCtrl");
// Activate ink for controller
//ionicMaterialInk.displayEffect();
$scope.myPics= [{
"Title": "My Childhood",
"Like": "21",
"Comment" : "5",
"Image" : "http://www.magic4walls.com/wp-content/uploads/2013/12/lovely-child-blue-eyes-photo-wallpaper-2560x1600-1-694x417.jpg"
},{
"Title": "Funny me",
"Like": "21",
"Comment" : "5",
"Image" : "http://media.salemwebnetwork.com/cms/CW/family/2218-ChildLookUp.220w.tn.jpg"
},{
"Title": "Me",
"Like": "21",
"Comment" : "5",
"Image" : "http://1.bp.blogspot.com/-QDe-qthaKz0/UAWZ6aakdoI/AAAAAAAAFK4/2zlaIu1r20Q/s1600/baby.jpg"
},{
"Title": "Guitar",
"Like": "21",
"Comment" : "5",
"Image" : "http://imshopping.rediff.com/imgshop/800-1280/shopping/pixs/17369/c/caihd224_1._craft-art-india-handmade-dummy-miniature-of-guitar-gitar-code-cai-hd-0224-.jpg"
}];
$scope.$on('ngLastRepeat.mylist',function(e) {
console.log("in Last ");
ionicMaterialInk.displayEffect();
});
});
/*endglobal angular*/
/* General
==================================*/
h1 {
color: #fff;
text-shadow: 0 1px 0px #000;
font-size: 42px;
}
/* Utilities
==================================*/
.title-bordered {
border-top: solid 2px #bbb;
padding-top: 30px;
}
p {
color: #555;
margin: 0 0 25px;
}
.scroll {
height: 100%;
}
/* Menu
==================================*/
.menu .bar.bar-header.expanded {
transition: all .5s ease-in-out;
}
.menu-open .bar.bar-header.expanded {
background-color: #222;
}
.menu h2 {
bottom: 0;
font-size: 18px;
left: 16px;
position: absolute;
}
.menu .avatar {
height: 88px;
width: 88px;
}
.menu.menu-left * {
font-weight: bold;
}
.menu-open .ion-navicon {
transform: rotate(-360deg);
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.menu-open .ion-navicon:before {
content: "\f2ca";
}
/* Login
==================================*/
.app-icon {
background-color: #fff;
background: url('../img/login.PNG') center;
background-size: cover;
border-radius: 50%;
height: 125px;
margin: 0 auto;
width: 125px;
}
.social-login {
position: fixed;
bottom: 0;
}
.error{
padding: 4px 1px;
font-family: "Arial Black", Gadget, sans-serif;
font-size: 12px;
text-transform: uppercase;
color: #000000;
vertical-align: middle;
}
.red_bg{
color:red;
}
.yellow_bg{
background-color: #eae07f!important;
}
.gallery-box .card.card-gallery img {
border: none;
box-shadow: none;
display: block;
max-width: 220px;
max-height: 132px;
width: 100%;
height: 100%;
}
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Material </title>
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<link href='https://fonts.googleapis.com/css?family=RobotoDraft:400,500,700,400italic' rel='stylesheet' type='text/css'>
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/css/ion-md-input.min.css" rel="stylesheet">
<link href="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.css" rel="stylesheet">
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/dist/ionic.material.min.js"></script>
<script src="https://cdn.rawgit.com/zachsoft/Ionic-Material/master/demo/www/lib/ion-md-input/js/ion-md-input.min.js"></script>
</head>
<body ng-controller="MainCtrl">
<ion-nav-view>
</ion-nav-view>
<script id="templates/event-menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-balanced">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-assertive">
<h1 class="title">Left Menu</h1>
</ion-header-bar>
<ion-content>
<ul class="list animate-rip">
<!-- Note each link has the 'menu-close' attribute so the menu auto closes when clicking on one of these links -->
<a href="#/event/login" class="item" menu-close>Gallery</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="templates/login.html" type="text/ng-template">
<ion-view view-title="Gallery" class="gallery-box">
<ion-content ng-class="{expanded:isExpanded}" class="animate-fade-slide-in">
<div class="list col" >
<div class="item card card-gallery item-text-wrap in demo" ng-repeat="picsItem in myPics" >
<div class="ink dark-bg">
<h2>{{picsItem.Title}}</h2>
<img ng-src="{{picsItem.Image}}" class="full-image" ng-last-repeat="mylist">
</div>
<div class="item tabs tabs-secondary tabs-icon-left in demo">
<a class="tab-item stable-bg assertive">
<i class="icon ion-heart"></i>
{{picsItem.Like}}
</a>
<a class="tab-item stable-bg positive-900">
<i class="icon ion-chatbubbles"></i>
{{picsItem.Comment}}
</a>
</div>
</div>
</div>
</ion-content>
</ion-view>
</script>
</body>
</html>
I have updated my code pen codepen.io/anujsphinx/pen/jVqvaV
I used col50 and some css then i fixed it .
PDF Outputs
I am new to DOJO charts and in one of the requirement, we have to convert Dojo Chart to PDF.
To achieve this we have used "JSPDF" and "html2canvas" libraries.
It is working fine in Google Chrome and not in IE11.
Kindly suggest.
Regards,
Byreddy
Here is my code....
PDF Test
<div data-dojo-type="dojox.charting.widget.Chart" id="chart1" style="width: 600px; height: 400px; background-color:white;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.8/dojo/dojo.js" data-dojo-config="isDebug:true, async:true"></script>
<script>
require(["dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojo/ready",
"dojox/charting/widget/SelectableLegend", "dojox/gfx/utils",
],
function (Chart, Lines, Default, StackedColumns, Tooltip, ready, SelectableLegend, Utils) {
var chart1 = new Chart("chart1");
chart1.title = "stacked chart";
chart1.addPlot("stackedColumnsPlot", {
type: StackedColumns,
gap: 6,
lines: true,
areas: true,
markers: true,
labels: true,
labelStyle: "inside",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [{ "value": 1, "text": "A" }, { "value": 2, "text": "B" }, { "value": 3, "text": "C" }, { "value": 4, "text": "D" }, { "value": 5, "text": "E" }, { "value": 6, "text": "F" }]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280],
{
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF",
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 0, 800, 300, 300], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
//proxy: "https://html2canvas.appspot.com/query",
//useCORS: true,
onrendered: function (canvas) {
var img = canvas.toDataURL("image/jpeg");
pdf.addImage(canvas, 'JPEG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script async="" src="https://cdn.rawgit.com/eligrey/FileSaver.js/62d219a0fac54b94cd4f230e7bfc55aa3f8dcfa4/FileSaver.js"></script>
<script src="JSRefs/html2canvas_0.5.0-alpha1.js"></script>
Here is the working sample, make a note of the listed important things in the code, which made the difference.
gfxRenderer: "canvas"
htmlLabels: false,
Below is the working code along with Tooltip functionality.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<script>
dojoConfig = {
parseOnLoad: true, // enables declarative chart creation
gfxRenderer: "canvas" // canvas is first priority
};
</script>
<script src="https://js.arcgis.com/3.16/"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"></script>
<script src="html2canvas.js"></script>
<script>
function convertPDF() {
var pdf = new jsPDF('l', 'pt', 'letter');
html2canvas(document.getElementById('chart1'), {
onrendered: function (canvas) {
var img = canvas.toDataURL("image/png");
pdf.addImage(img, 'PNG', 15, 15);
pdf.save('PDFTest.pdf');
}
});
}
</script>
<script>
require([
"dojox/charting/Chart",
"dojox/charting/plot2d/Lines",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/StackedColumns",
"dojox/charting/action2d/Tooltip",
"dojox/charting/widget/SelectableLegend",
"dojox/gfx/utils",
"dojo/ready",
"dojo/domReady!"
], function (
Chart,
Lines,
Default,
StackedColumns,
Tooltip,
SelectableLegend,
Utils,
ready
) {
var chart1 = new Chart("chart1");
chart1.htmlLabels = false;
chart1.title = "Stacked Chart";
chart1.addPlot("stackedColumnsPlot", {
htmlLabels: false,
type: StackedColumns,
gap: 5,
lines: true,
areas: true,
markers: true,
labels: true,
labelOffset: -10,
labelStyle: "default",
tension: "2"
});
chart1.addAxis("x", {
dropLabels: false,
labelSizeChange: true,
rotation: -20,
majorTicks: true,
majorTickStep: 1,
minorTicks: false,
font: "normal normal bold 12px Tahoma",
fontColor: "black",
labels: [
{ "value": 1, "text": "A" },
{ "value": 2, "text": "B" },
{ "value": 3, "text": "C" },
{ "value": 4, "text": "D" },
{ "value": 5, "text": "E" },
{ "value": 6, "text": "F" }
]
});
chart1.addAxis("y", {
title: "Cost",
fixLower: "major",
fixUpper: "major",
includeZero: true,
majorTickStep: 500,
max: 1500,
vertical: true
});
chart1.addSeries("AC", [300, 500, 500, 600, 300, 280], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFAEAE "
});
chart1.addSeries("TV", [244, 301, 699, 620, 820, 837], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#FFEC94"
});
chart1.addSeries("ACCE", [500, 100, 100, 100, 200, 250], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#B4D8E7"
});
chart1.addSeries("OTHER", [100, 150, 100, 700, 700, 80], {
plot: "stackedColumnsPlot",
stroke: {
color: "#FFFFFF"
},
fill: "#56BAEC"
});
new Tooltip(chart1, "stackedColumnsPlot", {
text: function(chartItem) {
// console.debug(chartItem);
//return "Rating: " + chartItem.run.data[chartItem.index] + "; Total Value: " + chartItem.y;
// return "Comparision Rating: " + chartItem.y;
return "Value: " + chartItem.run.data[chartItem.index] + "; Stacked Value: " + chartItem.y;
}
});
chart1.render();
new SelectableLegend({
chart: chart1,
horizontal: true,
align: top
}, "chart1SelectableLegend");
});
</script>
</head>
<body class="claro">
<div id="chart1" style="width: 600px; height: 400px;"></div>
<div id="chart1SelectableLegend"></div>
<button id="pdfButton" onclick="convertPDF()">DownloadPDF</button>
</body>
</html>
When putting this example in a bootstrap template, the polyline and circle do not show up. When I inspect $('path'), I see that the lines are actually way up to the top left, and not visible. I've spent probably 3 hours and still haven't figured out what the issue is.
As you can see, things like markers show up fine, but polylines and circles etc. don't display on the map.
Here's the repo: https://github.com/zylajoel/polyExample
The relevant files are:
<!-- index.html -->
<div class="content-wrap">
<!-- main page content. the place to put widgets in. usually consists of .row > .col-md-* > .widget. -->
<main id="content" class="content" role="main">
<div class="map-container">
<div id='map'>
</div>
</div>
</main>
</div>
// index.js
L.mapbox.accessToken = 'pk.eyJ1Ijoiam9lbHp5bGEiLCJhIjoiZDU4YTUxMDQ4NDM3OTZkZDA5OThiMzYzNjA0ODRmN2EifQ.CWKDLwKY-bUz_6XYT5bGpg';
var map = L.mapbox.map('map',
'mapbox.satellite',
{
center: [35.2269, -80.8433],
zoom: 2,
featureLayer: true,
tileLayer: true,
gridLayer: true
});
// add some markers
L.marker([37.9, -77], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bus',
'marker-color': '#fa0'
})
}).addTo(map);
// with popup
L.marker([10.9, -50], {
icon: L.mapbox.marker.icon({
'marker-size': 'large',
'marker-symbol': 'bus',
'marker-color': '#fa0'
})
// this should be a handlebars template
}).addTo(map).bindPopup('<p>Hello world!<br />This is a nice popup.</p>');
//.openPopup();
// make a point via geojson
var geoJSONExample = { "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [102.0, 0.5]},
"properties": {"prop0": "value0"}
}
]};
var geoJSONExample1 = { "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {"type": "Point", "coordinates": [95.0, 10]},
"properties": {"prop0": "value0"}
}
]};
L.geoJson(geoJSONExample, {
pointToLayer: L.mapbox.marker.style,
}).addTo(map);
L.geoJson(geoJSONExample1, {
pointToLayer: L.mapbox.marker.style,
}).addTo(map);
// draw a line HELP
var thePolyline = L.polyline([[102.0, 0.5], [95.0, 10], [10.9, -50]], {
color: 'red'
});
thePolyline.addTo(map);
// draw a line HELP
var pointA = new L.LatLng(28.635308, 77.22496);
var pointB = new L.LatLng(28.984461, 77.70641);
var pointList = [pointA, pointB];
var firstpolyline = new L.Polyline(pointList, {
color: 'red',
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
firstpolyline.addTo(map);
var circle = L.circle([51.508, -0.11], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map);
// application.css
#map {
width: 100%;
height: 100%;
}
.map-container {
height: 500px;
padding: 10px;
width: 100%;
}
Any ideas?
The problem is that Leaflet is conflicting with the CSS of the Single App Template you're using. The CSS in css/application.css is resetting the dimensions of the svg elements.
You need to change the css/application.css and remove the width and height properties of the svg selector :
svg {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Trying to get SVG to act like a greedy block in all browsers */
display: block;
/* Remove these: */
/* width: 100%; */
/* height: 100%; */
}
If you still need to reset the dimensions of other svg elements, just use a different selector.