We Keep Coding

How can I select image in Semantic-UI-React Dropdown menu?

I made an language select Dropdown on my page by using semantic-ui-react dropdown like following.
And the js code is shown below.
import React from "react";
import {CustomDropListStyle} from './style.js'
import { Dropdown } from 'semantic-ui-react'
const options = [
{
key: 'English',
text: 'English',
value: 'English',
image: { avatar: true, src: 'src/images/avatar/hawk.png' },
},
{
key: 'Chinese',
text: 'Chinese',
value: 'Chinese',
image: { avatar: true, src: 'src/images/avatar/hawk.png' },
},
{
key: 'Spanish',
text: 'Spanish',
value: 'Spanish',
image: { avatar: true, src: 'src/images/avatar/hawk.png' },
},
{
key: 'French',
text: 'French',
value: 'French',
image: { avatar: true, src: 'src/images/avatar/gra.png' },
},
{
key: 'German',
text: 'German',
value: 'German',
image: { avatar: true, src: 'src/images/avatar/hawk.png' },
},
{
key: 'Portuguese',
text: 'Portuguese',
value: 'Portuguese',
image: { avatar: true, src: 'src/images/avatar/hawk.png' },
},
]
class CustomDropList extends React.Component {
render() {
return (
<CustomDropListStyle>
<Dropdown>
fluid
selection
toggleItem
options={options}
</Dropdown>
</CustomDropListStyle>
);
}
}
export default CustomDropList;
And then I tried to use Dropdown properties such as 'icon' and 'item' to show image in the header, but it didn't work.
Please help me to work out this issue.

I solved this issue with tag like as following.
I think that if there is no way to insert object in same field, then try to insert it in other field and change its position.
The body of js code is:
import React from "react";
import {CustomDropListStyle} from './style.js';
import {Dropdown} from 'semantic-ui-react';
import strings from "../../consts/string";
import PropTypes from 'prop-types';
const options = [
{
key: 'English',
text: 'English',
value: 'en',
image: { avatar: true, src: 'img/images/avatar/en.png' },
},
{
key: 'Chinese',
text: 'Chinese',
value: 'ch',
image: { avatar: true, src: 'img/images/avatar/ch.png' },
},
{
key: 'Spanish',
text: 'Spanish',
value: 'sp',
image: { avatar: true, src: 'img/images/avatar/sp.png' },
},
{
key: 'French',
text: 'French',
value: 'fr',
image: { avatar: true, src: 'img/images/avatar/fr.png' },
},
{
key: 'German',
text: 'German',
value: 'ge',
image: { avatar: true, src: 'img/images/avatar/ge.png' },
},
{
key: 'Portuguese',
text: 'Portuguese',
value: 'pt',
image: { avatar: true, src: 'img/images/avatar/pt.png' },
},
];
class CustomDropList extends React.Component {
constructor(props) {
super(props);
this.state = {
sel_lang:strings.getLanguage()
};
}
exposedCampaignOnChange = (e, {value}) => {
e.persist();
this.setState({
sel_lang: value,
});
console.log(this.state.sel_lang);
strings.setLanguage(value);
localStorage.setItem('lang', value);
};
render() {
if( this.props.isLogged ){
let label_lang = 'English';
switch (this.state.sel_lang) {
case 'en':
label_lang = 'English';
break;
case 'ch':
label_lang = '汉语';
break;
case 'sp':
label_lang = 'English';
break;
case 'fr':
label_lang = 'English';
break;
case 'pt':
label_lang = 'English';
break;
case 'ge':
label_lang = 'English';
break;
default:
break;
}
return (
<CustomDropListStyle>
<h1 className="sellang_lbl_logged">{label_lang}</h1>
<img className="sellang_img_logged" src={`img/images/avatar/${this.state.sel_lang}.png`}/>
</CustomDropListStyle>
);
}else {
return (
<CustomDropListStyle>
<img className="sellang_img" src={`img/images/avatar/${this.state.sel_lang}.png`}/>
<Dropdown
fluid
options={options}
onChange={this.exposedCampaignOnChange}
defaultValue={strings.getLanguage()}
/>
</CustomDropListStyle>
);
}
}
}
CustomDropList.propTypes = {
isLogged: PropTypes.bool,
};
export default CustomDropList;
And css code is:
import styled from "styled-components";
export const CustomDropListStyle = styled.label`
.ui.fluid.dropdown, .ui.fluid.dropdown:hover .ui.upward.dropdown>.menu {
display: block;
width: 100%;
min-width: 170px;
max-width: 170px;
font-size:16px;
border:0;
}
.ui.selection.active.dropdown:hover {
box-shadow:none;
font-size:16px;
border-radius:0;
}
.ui.active.visible.fluid.selection.dropdown {
font-size:14px;
border-radius:0;
}
.ui.dropdown .menu {
left: 0;
position:relative;
}
.ui.dropdown{
margin-top:6%;
margin-right:1%;
text-align:center;
}
.ui.selection.dropdown {
border-bottom:1px solid #97a5ad;
border-radius:0;
}
.ui.selection.active.dropdown {
border-bottom:0px solid #97a5ad;
}
.ui.avatar.image {
border-radius:50%;
}
.visible.transition{
border:1px solid #97a5ad !important;
}
.ui.selection.dropdown .menu, .ui.selection.dropdown .menu:hover {
border-radius: 6px;
margin:4px 0 4px 0;
border:1px solid #97a5ad !important;
}
.ui.upward.selection.dropdown.visible {
border-radius:0 !important;
}
.ui.upward.dropdown>.menu, .ui.upward.dropdown>.menu:hover {
border-radius: 6px;
margin:16px 0 4px 0;
border:1px solid #97a5ad !important;
}
i.af.flag::before{
display: inline-block;
width: 16px;
height: 16px;
border-radius:50%;
}
i.icon.dropdown::before, .ui.dropdown>.dropdown.icon:before {
border-width: 5px 5px 0;
content: ' ';
display: block;
margin-top: -ceil(2.5);
position: absolute;
right: 1%;
width: 9px;
height: 9px;
border: solid #97a5ad;
border-width: 0 1px 1px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
vertical-align:middle !important;
}
.ui.dropdown>.dropdown.icon {
margin: 2px 0 0 1em;
}
.ui.dropdown .menu>.item, .active selected item {
position: relative;
cursor: pointer;
display: block;
border: none;
height: auto;
text-align: left;
border-top: none;
line-height: 1em;
color: rgba(0,0,0,.87);
padding: .78571429rem 1.14285714rem!important;
font-size: 15px;
text-transform: none;
font-weight: 400;
-webkit-box-shadow: none;
box-shadow: none;
-webkit-touch-callout: none;
}
.sellang_img {
width:20%;
height:20%;
float:left;
}
.sellang_img_logged {
float:right;
width:40%;
height:40%;
}
.sellang_lbl_logged {
vertical-align:middle;
margin:-25% 12%;
}
`;
And then the result is:
enter image description here

something wrong while getting data from url app made in vue js and axios

trying to replace customer js with
export default[
{ id: 0, name: 'some one', title: 'zero' },
{ id: 1, name: 'test last', title:'one'},
{ id: 2, name: 'test first', title:'two'},
{ id: 3, name: 'test second', title:'three'},
{ id: 4, name: 'test third', title:'four'},
{ id: 5, name: 'test fourth', title:'five'},
{ id: 6, name: 'test fifth', title:'six'}
];
My app is fine while using the above raw json.
since i am trying to get the date using axios in same file as per below code
Something i am missing to get the data into app.
import axios from 'axios';
export default {
data () {
return {
info: []
}
},
mounted () {
axios
.get('http://localhost/json/test.json')
.then(response => (this.info = response))
}
}
for getting data from url into customer.js
not working in case.
while my app.vue is
<template>
<div id="app">
<Autocomplete :items="customers"
filterby="name"
#change="onChange"
title="Look for a customer"
#selected="customerSelected"/>
</div>
</template>
<script>
import customers from './assets/customers';
import Autocomplete from './components/Autocomplete'
export default {
name: 'App',
mounted() {
this.customers = customers;
},
data() {
return {
customers: []
};
},
methods: {
customerSelected(customer) {
console.log(`Customer Selected:\nid: ${customer.id}\nname: ${customer.name}\ntitle:${customer.title}`);
},
onChange(value) {
// do something with the current value
}
},
components: {
Autocomplete
}
}
</script>
<style>
#app {
margin: 0px auto;
margin-top: 60px;
width: 400px;
}
</style>
and Autocomplete.vue is
<template>
<div class="autocomplete">
<div class="input" #click="toggleVisible" v-text="selectedItem ? selectedItem[filterby] : ''"></div>
<div class="placeholder" v-if="selectedItem == null" v-text="title"></div>
<button class="close" #click="selectedItem = null" v-if="selectedItem">x</button>
<div class="popover" v-show="visible">
<input type="text"
ref="input"
v-model="query"
#keydown.up="up"
#keydown.down="down"
#keydown.enter="selectItem"
placeholder="Start Typing...">
<div class="options" ref="optionsList">
<ul>
<li v-for="(match, index) in matches"
:key="index"
:class="{ 'selected': (selected == index)}"
#click="itemClicked(index)"
v-text="match[filterby]"></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
items: {
default: [],
type: Array
},
filterby: {
type: String
},
title: {
default: 'Select One...',
type: String
},
shouldReset: {
type: Boolean,
default: true
}
},
data() {
return {
itemHeight: 39,
selectedItem: null,
selected: 0,
query: '',
visible: false
};
},
methods: {
toggleVisible() {
this.visible = !this.visible;
setTimeout(() => {
this.$refs.input.focus();
}, 50);
},
itemClicked(index) {
this.selected = index;
this.selectItem();
},
selectItem() {
if (!this.matches.length) {
return;
}
this.selectedItem = this.matches[this.selected];
this.visible = false;
if (this.shouldReset) {
this.query = '';
this.selected = 0;
}
this.$emit('selected', JSON.parse(JSON.stringify(this.selectedItem)));
},
up() {
if (this.selected == 0) {
return;
}
this.selected -= 1;
this.scrollToItem();
},
down() {
if (this.selected >= this.matches.length - 1) {
return;
}
this.selected += 1;
this.scrollToItem();
},
scrollToItem() {
this.$refs.optionsList.scrollTop = this.selected * this.itemHeight;
}
},
computed: {
matches() {
this.$emit('change', this.query);
if (this.query == '') {
return [];
}
return this.items.filter((item) => item[this.filterby].toLowerCase().includes(this.query.toLowerCase()))
}
}
}
</script>
<style scoped>
.autocomplete {
width: 100%;
position: relative;
}
.input {
height: 40px;
border-radius: 3px;
border: 2px solid lightgray;
box-shadow: 0 0 10px #eceaea;
font-size: 25px;
padding-left: 10px;
padding-top: 10px;
cursor: text;
}
.close {
position: absolute;
right: 2px;
top: 4px;
background: none;
border: none;
font-size: 30px;
color: lightgrey;
cursor: pointer;
}
.placeholder {
position: absolute;
top: 11px;
left: 11px;
font-size: 25px;
color: #d0d0d0;
pointer-events: none;
}
.popover {
min-height: 50px;
border: 2px solid lightgray;
position: absolute;
top: 46px;
left: 0;
right: 0;
background: #fff;
border-radius: 3px;
text-align: center;
}
.popover input {
width: 95%;
margin-top: 5px;
height: 40px;
font-size: 16px;
border-radius: 3px;
border: 1px solid lightgray;
padding-left: 8px;
}
.options {
max-height: 150px;
overflow-y: scroll;
margin-top: 5px;
}
.options ul {
list-style-type: none;
text-align: left;
padding-left: 0;
}
.options ul li {
border-bottom: 1px solid lightgray;
padding: 10px;
cursor: pointer;
background: #f1f1f1;
}
.options ul li:first-child {
border-top: 2px solid #d6d6d6;
}
.options ul li:not(.selected):hover {
background: #8c8c8c;
color: #fff;
}
.options ul li.selected {
background: orange;
color: #fff;
font-weight: 600;
}
</style>

In most of the cases, response consists of several properties and you will need response.data.
if this didn't work then print the response, using console.log(response) and inspect it such that which key holds the JSON data.

Why does not work this code with knockout.js tacken fro jsfiddle?

I took an example of Paged grid from jsfiddle.net ( http://jsfiddle.net/rniemeyer/QSRBR/ ) and put it into one *.html file
But it does not work - I got an error in the browser console:
Uncaught TypeError: Cannot read property 'viewModel' of undefined
at new PagedGridModel (knockout pagination.html:72)
at knockout pagination.html:83
Here is the html file content:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }
.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */
li { list-style-type: disc; margin-left: 20px; }
</style>
</head>
<body>
<div class='liveExample'>
<div data-bind='simpleGrid: gridViewModel'> </div>
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
</div>
<script type="text/javascript">
var initialData = [
{ name: "Well-Travelled Kitten", sales: 352, price: 75.95 },
{ name: "Speedy Coyote", sales: 89, price: 190.00 },
{ name: "Furious Lizard", sales: 152, price: 25.00 },
{ name: "Indifferent Monkey", sales: 1, price: 99.95 },
{ name: "Brooding Dragon", sales: 0, price: 6350 },
{ name: "Ingenious Tadpole", sales: 39450, price: 0.35 },
{ name: "Optimistic Snail", sales: 420, price: 1.50 }
];
var PagedGridModel = function(items) {
this.items = ko.observableArray(items);
this.addItem = function() {
this.items.push({ name: "New item", sales: 0, price: 100 });
};
this.sortByName = function() {
this.items.sort(function(a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function() {
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{ headerText: "Item Name", rowText: "name" },
{ headerText: "Sales Count", rowText: "sales" },
{ headerText: "Price", rowText: function (item) { return "$" + item.price.toFixed(2) } }
],
pageSize: 4
});
};
ko.applyBindings(new PagedGridModel(initialData));
</script>
</body>
</html>
This code works fine at jsfiddle but why doesn't it work when I put it all together an a single file?

Switch layers in JavaScript

I followed this Mapbox GL JS example step by step to make our map layers show and hide.
However, in this case, if our visitors forget to close the layers on top, like with "April" on, when they click on "June", the layers of June cannot be seen, cause they are under April layers.
Is there any ways I can switch between layers? Or if I have one button on the others will be turned off automatically?
My code is below.
HTML:
<div id='map'></div>
<nav id="menu"></nav>
JavaScript:
mapboxgl.accessToken = 'pk.eyJ1IjoibWFyY3VzcGciLCJhIjoiY2l2NmdtZjdyMDAwMjJ6bDVhb2JndDlrMiJ9.EopxTk2v-1WrWsgbLmL_XA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/marcuspg/cj6xc2cb49xpg2sqpuuwbob0u', // stylesheet location
//center:[]
//zoom:13
});
// add a map layer_3d buildings
map.on('load', function() {
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': {
'type': 'identity',
'property': 'height'
},
'fill-extrusion-base': {
'type': 'identity',
'property': 'min_height'
},
'fill-extrusion-opacity': .6
}
});
});
// group two layers into one
toggleLayer(['April','April_2'], 'April');
toggleLayer(['June','June_2'], 'June');
toggleLayer(['September', 'September_2'], 'September');
toggleLayer(['December','December_2'], 'December');
function toggleLayer(ids, name) {
var link = document.createElement('a');
link.href = '#';
link.className = 'active';
link.textContent = name;
link.onclick = function (e) {
e.preventDefault();
e.stopPropagation();
for (layers in ids){
var visibility = map.getLayoutProperty(ids[layers], 'visibility');
if (visibility === 'visible') {
map.setLayoutProperty(ids[layers], 'visibility', 'none');
this.className = '';
} else {
this.className = 'active';
map.setLayoutProperty(ids[layers], 'visibility', 'visible');
}
}
};
var layers = document.getElementById('menu');
layers.appendChild(link);
}
CSS:
body {
margin: 0;
padding: 0;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
#menu {
background: #fff;
position: absolute;
z-index: 1;
top: 10px;
right: 10px;
border-radius: 3px;
width: 120px;
border: 1px solid rgba(0, 0, 0, 0.4);
font-family: 'Open Sans', sans-serif;
}
#menu a {
font-size: 13px;
color: #404040;
display: block;
margin: 0;
padding: 0;
padding: 10px;
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
text-align: center;
}
#menu a:last-child {
border: none;
}
#menu a:hover {
background-color: #f8f8f8;
color: #404040;
}
#menu a.active {
background-color: #3887be;
color: #ffffff;
}
#menu a.active:hover {
background: #3074a4;
}
Here is a fiddle: https://jsfiddle.net/tianyiy/Ljujba4b/7/

knowkout js grid example not working

I am newbe in knowkout js and i am trying Paged grid example of knowkout from
http://knockoutjs.com/examples/gridEditor.html
Here is my code :
Its giving error TypeError: ko.simpleGrid is undefined
Please help me in this thanx in adv.
<html>
<head>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.1.0.js" type="text/javascript"></script>
<script src='http://knockoutjs.com/examples/resources/knockout.simpleGrid.js'></script>
<script src="http://knockoutjs.com/downloads/knockout-3.0.0.debug.js" type="text/javascript"></script>
<script>
var initialData = [
{name: "Well-Travelled Kitten", sales: 352, price: 75.95},
{name: "Speedy Coyote", sales: 89, price: 190.00},
{name: "Furious Lizard", sales: 152, price: 25.00},
{name: "Indifferent Monkey", sales: 1, price: 99.95},
{name: "Brooding Dragon", sales: 0, price: 6350},
{name: "Ingenious Tadpole", sales: 39450, price: 0.35},
{name: "Optimistic Snail", sales: 420, price: 1.50}
];
var PagedGridModel = function (items) {
this.items = ko.observableArray(items);
this.addItem = function () {
this.items.push({name: "New item", sales: 0, price: 100});
};
this.sortByName = function () {
this.items.sort(function (a, b) {
return a.name < b.name ? -1 : 1;
});
};
this.jumpToFirstPage = function () {
this.gridViewModel.currentPageIndex(0);
};
this.gridViewModel = new ko.simpleGrid.viewModel({
data: this.items,
columns: [
{headerText: "Item Name", rowText: "name"},
{headerText: "Sales Count", rowText: "sales"},
{headerText: "Price", rowText: function (item) {
return "$" + item.price.toFixed(2)
}}
],
pageSize: 4
});
};
ko.applyBindings(new PagedGridModel(initialData));
</script>
<style>
body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; }
.ko-grid { margin-bottom: 1em; width: 25em; border: 1px solid silver; background-color:White; }
.ko-grid th { text-align:left; background-color: Black; color:White; }
.ko-grid td, th { padding: 0.4em; }
.ko-grid tr:nth-child(odd) { background-color: #DDD; }
.ko-grid-pageLinks { margin-bottom: 1em; }
.ko-grid-pageLinks a { padding: 0.5em; }
.ko-grid-pageLinks a.selected { background-color: Black; color: White; }
.liveExample { height:20em; overflow:auto } /* Mobile Safari reflows pages slowly, so fix the height to avoid the need for reflows */
li { list-style-type: disc; margin-left: 20px; }
</style>
</head>
<body>
<div data-bind='simpleGrid: gridViewModel'> </div>
<button data-bind='click: addItem'>
Add item
</button>
<button data-bind='click: sortByName'>
Sort by name
</button>
<button data-bind='click: jumpToFirstPage, enable: gridViewModel.currentPageIndex'>
Jump to first page
</button>
</body>
</html>