I am using ember.js and handlebars. I need to pass a string to a component and that string needs to have line breaks. I am struggling trying to get the line breaks to work. I have tried using
\n, \ , + `' + none of these seem to work
Here is my computed property where the string is getting returned:
scoreMessage: Ember.computed(function scoreMessage () {
const model = this.get('model')
return Ember.String.htmlSafe(`Advocacy Post: ${model.total_advocacy_posts_count}\n
Assets Submitted: ${model.total_assets_submitted_count}\n Engagement from asset:
${model.total_engagement_from_assets_count}`);
}),
Here is the handlebars file where the scoreMessage is passed into the ui-tooltip-on-mouseover component
<li class="item-cell flex-end score">
{{#ui-tooltip-on-mouseover
message=scoreMessage
tooltipLocation="top"
class="action"
}}
Score
{{/ui-tooltip-on-mouseover}}
</li>
Hmm, can you try white-space: pre-line; CSS to the tooltip? with this approach, you don't need to specify \n, you just press enter.
i.e.
scoreMessage: Ember.computed(function scoreMessage () {
const model = this.get('model')
return Ember.String.htmlSafe(
`Advocacy Post: ${model.total_advocacy_posts_count}
Assets Submitted: ${model.total_assets_submitted_count}
Engagement from asset: ${model.total_engagement_from_assets_count}`
);
}),
var model = { total_advocacy_posts_count: 3, total_assets_submitted_count: 4, total_engagement_from_assets_count: 7 }
var text = `Advocacy Post: ${model.total_advocacy_posts_count}
Assets Submitted: ${model.total_assets_submitted_count}
Engagement from asset: ${model.total_engagement_from_assets_count}`
window.onload = function() {
document.querySelector('.tooltip.other').innerHTML = text;
}
.tooltip {
white-space: pre-line;
padding: 20px;
}
body {
background: white;
}
<div class="tooltip">
Some
Text that does take
line breaks without specifying them
</div>
<div class="tooltip other"></div>
`
Related
Potion of my html code do do style
<script type="text/javascript">
function our_Layers (map, options){
var datasets = new L.GeoJSON.AJAX("{% url 'owner' %}",{
style: function colors(feature){
switch(feature.properties.lr){
case "{{LR}}":
return{
color: 'red'
};
break
}
},
onEachFeature: function(feature, layer){
//layer.bindPopup(feature.properties.lr.toString());
layer.bindPopup('<strong>LR No.: </strong>'+ feature.properties.lr.toString()
);
}
});
datasets.addTo(map);
}
</script>
{% leaflet_map "parcels" callback="window.our_Layers" %}
my view in django
def Usermap(request):
plots1 = request.user.person.Persona.all()
for Registration in plots1:
LR=(Registration.parcels.lr)
context = {'plots':plots1,'LR':LR}
return render(request, 'Cadastre/Usermap.html', context)
Have used that for loop in django to show me available lr which are 3 but i cant use django for loop tags inside the leaflet function any help
I found a way to go around it..first i perform a for loop in django views and append my result in a list.
example
def Usermap(request):
plots1 = request.user.person.Persona.all()
LR =[]
for Registration in plots1:
LR.append(Registration.parcels.lr)
context = {'plots':plots1,'LR':LR}
return render(request, 'Cadastre/Usermap.html', context)
then do another loop in html to access the list items and use it to style my map dynamically.
example
<script type="text/javascript">
datasets = new L.GeoJSON.AJAX("{% url 'Plots' %}",{
style: function colors(feature){
var LRS = {{LR|safe}};
var x;
for (x of LRS){
switch(feature.properties.lr){
case x:
return{
color: 'red'
};
break
}
}
},
onEachFeature: onEachFeature
}).addTo(map);
</script>
I hope this help someone with same issue since there is no other answer thank you.
I am working on an app which was created with the Vue loader's webpack template.
I included testing with Karma as an option when creating the project, so it was all set up and I haven't changed any of the config.
The app is a Github user lookup which currently consists of three components; App.vue, Stats.vue and UserForm.vue. The stats and form components are children of the containing app component.
Here is App.vue:
<template>
<div id="app">
<user-form
v-model="inputValue"
#go="submit"
:input-value="inputValue"
></user-form>
<stats
:username="username"
:avatar="avatar"
:fave-lang="faveLang"
:followers="followers"
></stats>
</div>
</template>
<script>
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import _ from 'lodash'
import UserForm from './components/UserForm'
import Stats from './components/Stats'
Vue.use(VueAxios, axios)
export default {
name: 'app',
components: {
UserForm,
Stats
},
data () {
return {
inputValue: '',
username: '',
avatar: '',
followers: [],
faveLang: '',
urlBase: 'https://api.github.com/users'
}
},
methods: {
submit () {
if (this.inputValue) {
const api = `${this.urlBase}/${this.inputValue}`
this.fetchUser(api)
}
},
fetchUser (api) {
Vue.axios.get(api).then((response) => {
const { data } = response
this.inputValue = ''
this.username = data.login
this.avatar = data.avatar_url
this.fetchFollowers()
this.fetchFaveLang()
}).catch(error => {
console.warn('ERROR:', error)
})
},
fetchFollowers () {
Vue.axios.get(`${this.urlBase}/${this.username}/followers`).then(followersResponse => {
this.followers = followersResponse.data.map(follower => {
return follower.login
})
})
},
fetchFaveLang () {
Vue.axios.get(`${this.urlBase}/${this.username}/repos`).then(reposResponse => {
const langs = reposResponse.data.map(repo => {
return repo.language
})
// Get most commonly occurring string from array
const faveLang = _.chain(langs).countBy().toPairs().maxBy(_.last).head().value()
if (faveLang !== 'null') {
this.faveLang = faveLang
} else {
this.faveLang = ''
}
})
}
}
}
</script>
<style lang="stylus">
body
background-color goldenrod
</style>
Here is Stats.vue:
<template>
<div class="container">
<h1 class="username" v-if="username">{{username}}</h1>
<img v-if="avatar" :src="avatar" class="avatar">
<h2 v-if="faveLang">Favourite Language: {{faveLang}}</h2>
<h3 v-if="followers.length > 0">Followers ({{followers.length}}):</h3>
<ul v-if="followers.length > 0">
<li v-for="follower in followers">
{{follower}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'stats',
props: [
'username',
'avatar',
'faveLang',
'followers'
]
}
</script>
<style lang="stylus" scoped>
h1
font-size 44px
.avatar
height 200px
width 200px
border-radius 10%
.container
display flex
align-items center
flex-flow column
font-family Comic Sans MS
</style>
And here is UserForm.vue:
<template>
<form #submit.prevent="handleSubmit">
<input
class="input"
:value="inputValue"
#input="updateValue($event.target.value)"
type="text"
placeholder="Enter a GitHub username..."
>
<button class="button">Go!</button>
</form>
</template>
<script>
export default {
props: ['inputValue'],
name: 'user-form',
methods: {
updateValue (value) {
this.$emit('input', value)
},
handleSubmit () {
this.$emit('go')
}
}
}
</script>
<style lang="stylus" scoped>
input
width 320px
input,
button
font-size 25px
form
display flex
justify-content center
</style>
I wrote a trivial test for UserForm.vue which test's the outerHTML of the <button>:
import Vue from 'vue'
import UserForm from 'src/components/UserForm'
describe('UserForm.vue', () => {
it('should have a data-attribute in the button outerHTML', () => {
const vm = new Vue({
el: document.createElement('div'),
render: (h) => h(UserForm)
})
expect(vm.$el.querySelector('.button').outerHTML)
.to.include('data-v')
})
})
This works fine; the output when running npm run unit is:
UserForm.vue
✓ should have a data-attribute in the button outerHTML
However, when I tried to write a similarly simple test for Stats.vue based on the documentation, I ran into a problem.
Here is the test:
import Vue from 'vue'
import Stats from 'src/components/Stats'
// Inspect the generated HTML after a state update
it('updates the rendered message when vm.message updates', done => {
const vm = new Vue(Stats).$mount()
vm.username = 'foo'
// wait a "tick" after state change before asserting DOM updates
Vue.nextTick(() => {
expect(vm.$el.querySelector('.username').textContent).toBe('foo')
done()
})
})
and here is the respective error when running npm run unit:
ERROR LOG: '[Vue warn]: Error when rendering root instance: '
✗ updates the rendered message when vm.message updates
undefined is not an object (evaluating '_vm.followers.length')
I have tried the following in an attempt to get the test working:
Change how the vm is created in the Stats test to be the same as the UserForm test - same error is returned
Test individual parts of the component, for example the textContent of a div in the component - same error is returned
Why is the error referring to _vm.followers.length? What is _vm with an underscore in front? How can I get around this issue to be able to successfully test my component?
(Repo with all code: https://github.com/alanbuchanan/vue-github-lookup-2)
Why is the error referring to _vm.followers.length? What is _vm with an underscore in front?
This piece of code is from the render function that Vue compiled your template into. _vm is a placeholder that gets inserted automatically into all Javascript expressions when vue-loader converts the template into a render function during build - it does that to provide access to the component.
When you do this in your template:
{{followers.length}}
The compiled result in the render function for this piece of code will be:
_vm.followers.length
Now, why does the error happen in the first place? Because you have defined a prop followers on your component, but don't provide any data for it - therefore, the prop's value is undefined
Solution: either you provide a default value for the prop:
// Stats.vue
props: {
followers: { default: () => [] }, // function required to return fresh object
// ... other props
}
Or you propvide acual values for the prop:
// in the test:
const vm = new Vue({
...Stats,
propsData: {
followers: [/* ... actual data*/]
}
}).$mount()
I am using rails and algolia gem with mongoid datastore.
I am sending data to algolia for a model Question. One of the doc example in Algolia system is
objectID: 5691e056410213a381000000
text: "what is #cool about your name Mr. John? #name #cool"
asked_to: ["565571704102139759000000", "i7683yiq7r8998778346q686", "kjgusa67g87y8e7qtwe87qwe898989"]
asked_by: "564a9b804102132465000000"
created_at: "2016-01-10T04:38:46.201Z"
card_url: "http://localhost:3000/cards/5691e056410213a381000000"
answerers: []
has_answer: false
requestor_count: 0
status: "active"
popularity_point: 0
created_at_i: 1452400726
_tags: ["cool", "name"]
I want to find all those documents, where it meets these two conditions:
1) text contains your name
2) asked_to contains i7683yiq7r8998778346q686
I am using Twitter's typeahead javascript library. And my UI's javascript to implement algolia search is as follows:
<input class="typeahead ui-widget form-control input-md search-box tt-input" id="typeahead-algolia" placeholder="Search questions" spellcheck="false" type="text" autocomplete="off" dir="auto" style="position: relative; vertical-align: top;">
$(document).on('ready page:load', function () {
var client = algoliasearch("APPLICATION_ID", "SEARCH_KEY");
var index = client.initIndex('Question');
$('#typeahead-algolia').typeahead(
{
hint: false,
highlight: true,
minLength: 1
},
{
source: index.ttAdapter({hitsPerPage: 10}),
displayKey: 'text'
}
).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#typeahead-algolia').typeahead('close');
window.location.href = "/?keyword="+encodeURIComponent($('#typeahead-algolia').val());
}
});
$('.typeahead').bind('typeahead:select', function(ev, suggestion) {
window.location.href = suggestion.card_url;
});
});
So my question is:
This code works perfectly. But how to add condition for asked_to contains i7683yiq7r8998778346q686 in above javascript to filter out result.
You can use a facet filter on the asked_to attribute in your query.
You first need to declare the attribute asked_to as an attribute for faceting in your index settings and then pass asked_to:i7683yiq7r8998778346q686 as a facet filter in your query via the facetFiltersquery parameter.
When your index settings are changed, you can change your source to add the facetFilters parameter:
$('#typeahead-algolia').typeahead(
{
hint: false,
highlight: true,
minLength: 1
},
{
source: index.ttAdapter({hitsPerPage: 10, facetFilters: "asked_to:i7683yiq7r8998778346q686"}),
displayKey: 'text'
}
).on('keyup', this, function (event) {
if (event.keyCode == 13) {
$('#typeahead-algolia').typeahead('close');
window.location.href = "/?keyword="+encodeURIComponent($('#typeahead-algolia').val());
}
});
I'd like to transition one element as it changes to another element.
I've got 3 examples:
one that works, but uses a list of items that are kept around (jsfiddle)
one that doesnt work, and only keeps one item around, depending on the state (jsfiddle)
another one that doesn't work, that keeps both items around and hides/shows them (jsfiddle using hide/show)
What I want is more like the second one, which is a very slight variation of the first attempt that works.
Option 1:
/** #jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var TodoList = React.createClass({
getInitialState: function() {
return {items: ['hello', 'world', 'click', 'me']};
},
handleAdd: function() {
var newItems =
this.state.items.concat([prompt('Enter some text')]);
this.setState({items: newItems});
},
handleRemove: function(i) {
var newItems = this.state.items;
newItems.splice(i, 1)
this.setState({items: newItems});
},
render: function() {
var items = this.state.items.map(function(item, i) {
return (
<div key={item} onClick={this.handleRemove.bind(this, i)}>
{item}
</div>
);
}.bind(this));
return (
<div>
<div><button onClick={this.handleAdd} /></div>
<ReactTransitionGroup transitionName="example">
{items}
</ReactTransitionGroup>
</div>
);
}
});
var app = React.renderComponent(<TodoList />, document.body);
Option 2:
JSX that doesn't work, but is closer to what I'd like to do (really, hide one view, and show another)
/** #jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var Test = React.createClass({
getInitialState: function() {
return {showOne:true}
},
onClick: function() {
this.setState({showOne:! this.state.showOne});
},
render: function() {
var result;
if (this.state.showOne)
{
result = <div ref="a">One</div>
}
else
{
result = <div ref="a">Two</div>
}
return (
<div>
<div><button onClick={this.onClick}>switch state</button></div>
<ReactTransitionGroup transitionName="example">
{result}
</ReactTransitionGroup>
</div>
);
}
});
var app = React.renderComponent(<Test />, document.body);
Option 3:
Uses hide/show to keep the 2 views around, but still doesn't work.
/** #jsx React.DOM */
var ReactTransitionGroup = React.addons.TransitionGroup;
var Test = React.createClass({
getInitialState: function() {
return {showOne:true}
},
onClick: function() {
this.setState({showOne:! this.state.showOne});
},
render: function() {
var result;
var c1 = this.state.showOne ? "hide" : "show";
var c2 = this.state.showOne ? "show" : "hide";
return (
<div>
<div><button onClick={this.onClick}>switch state</button></div>
<ReactTransitionGroup transitionName="example">
<div className={c1}>One</div>
<div className={c2}>Two</div>
</ReactTransitionGroup>
</div>
);
}
});
var app = React.renderComponent(<Test />, document.body);
So long story short - How can I make a transition execute on switching from one main "component" to another? I don't get why option 1 works, but option 2 doesn't!
React is just changing the content of the DOM because that's all that changed. Give the elements unique keys to make them animate.
if (this.state.showOne)
{
result = <div key="one">One</div>
}
else
{
result = <div key="two">Two</div>
}
JSFiddle
I used Michelle Treys answer to solve a similar problem using React-Router (1.0.1). Its not clear from the api that the key is needed. I was following React-routers suggestion to render a routes children in a parent as follows:
render() {
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{this.props.children}
</ReactTransitionGroup>
</div>
);
}
However the componentWillEnter only triggered on page load. Following Michelle's solution, I cloned a the children as per the react-router updates and added a key as follows:
render() {
const { location } = this.props;
return (
<div id='app-wrapper'>
<ReactTransitionGroup component='div' className='transition-wrapper'>
{React.cloneElement(this.props.children, {
key: location.pathname,
})}
</ReactTransitionGroup>
</div>
);
}
Thanks for the fix. Cheers
I quite like the filter feature of django admin views (list_filter).
But, on views with a lot of fields, I would really like the ability to minimize/expand it with a click, to save screen real-estate and also because it sometimes actually hides stuff.
Is there an easy way to add a collapse button (some already existing plugin I haven't found or something similar)?
Given that you now have jQuery in django admin, it's easy to bind a slideToggle() to the titles in the List Filter.
This seems enough Javascript for it to work:
// Fancier version https://gist.github.com/985283
;(function($){ $(document).ready(function(){
$('#changelist-filter').children('h3').each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
});
});
})(django.jQuery);
Then in the ModelAdmin subclass you want to activate that set the Media inner class:
class MyModelAdmin(admin.ModelAdmin):
list_filter = ['bla', 'bleh']
class Media:
js = ['js/list_filter_collapse.js']
Make sure to drop the list_filter_collapse.js file in a 'js' folder inside your STATIC_DIRS or STATIC_ROOT (Depending on your Django version)
I changed Jj's answer to collapse the whole filter when clicking on the 'filter' title, adding it here for completeness, a gist is available here:
(function($){
ListFilterCollapsePrototype = {
bindToggle: function(){
var that = this;
this.$filterTitle.click(function(){
that.$filterContent.slideToggle();
that.$list.toggleClass('filtered');
});
},
init: function(filterEl) {
this.$filterTitle = $(filterEl).children('h2');
this.$filterContent = $(filterEl).children('h3, ul');
$(this.$filterTitle).css('cursor', 'pointer');
this.$list = $('#changelist');
this.bindToggle();
}
}
function ListFilterCollapse(filterEl) {
this.init(filterEl);
}
ListFilterCollapse.prototype = ListFilterCollapsePrototype;
$(document).ready(function(){
$('#changelist-filter').each(function(){
var collapser = new ListFilterCollapse(this);
});
});
})(django.jQuery);
I have written a small snippets downloadable on bitbucket for the purpose.
The state of the filters are stored in a cookie and the selected filters stay visible.
Thanks to #JJ's idea.
I added toggles for the whole window, simpler than #abyx's implement.
Toggle the whole filter by clicking "Filter" title
Toggle each list by clicking list title
This is the js file content:
;(function($){ $(document).ready(function(){
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
});
var toggle_flag = true;
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter > ul').each(function(){
$(this).toggle(toggle_flag);
});
});
});
})(django.jQuery);
Made another change to this so that the H3's are hidden, as well as the filter lists, when you click on the top H2. This will get the entire list of filters out of the way if you click on the top "Filters".
This is the js file content
;(function($){ $(document).ready(function(){
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
});
var toggle_flag = true;
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter').find('> ul, > h3').each(function(){
$(this).toggle(toggle_flag);
});
});
});
})(django.jQuery);
Modified fanlix solution to:
Show cursor as pointer on hover
Be folded by default
Code
(function($){ $(document).ready(function(){
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.next().toggle();
$title.css("cursor","pointer");
$title.click(function(){
$title.next().slideToggle();
});
});
var toggle_flag = false;
$('#changelist-filter > h2').css("cursor","pointer");
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter > ul').each(function(){
$(this).slideToggle(toggle_flag);
});
});
});
})(django.jQuery);
Combined Tim's and maGo's approaches, with some tweaks:
Pros:
Allows user to hide the entire list (added "click to hide/unhide" to the filter list title so user knows what to do).
Maintains folded filter categories by default
Cons:
The page refresh after a filter is selected causes the filter categories to fold once again; ideally the ones you're working with would stay open.
The code:
(function($){ $(document).ready(function(){
// Start with a filter list showing only its h3 subtitles; clicking on any
// displays that filter's content; clicking again collapses the list:
$('#changelist-filter > h3').each(function(){
var $title = $(this);
$title.next().toggle();
$title.css("cursor","pointer");
$title.click(function(){
$title.next().slideToggle();
});
});
// Add help after title:
$('#changelist-filter > h2').append("<span style='font-size: 80%; color: grey;'> (click to hide/unhide)</span>");
// Make title clickable to hide entire filter:
var toggle_flag = true;
$('#changelist-filter > h2').click(function () {
toggle_flag = ! toggle_flag;
$('#changelist-filter').find('> h3').each(function(){
$(this).toggle(toggle_flag);
});
});
});
})(django.jQuery);
I wrote a snippets for menu collapse and single element menu collapse.
It's a fork from abyx code, I've just extended it.
If a filter was previously activated the element menu related to this will start as opened.
The filter menu starts closed as default.
Hope this helps
https://github.com/peppelinux/Django-snippets/tree/master/django-admin.js-snippets
Giuseppe De Marco's snippet works best. So i am adding his code snippet here for easy access. It even solves the problem (Cons) discussed above by joelg:
// Copied from
// https://github.com/peppelinux/Django-snippets/tree/master/django-admin.js-snippets
(function($){
var element_2_collapse = '#changelist-filter';
var element_head = 'h2'
var filter_title = 'h3'
// this is needed for full table resize after filter menu collapse
var change_list = '#changelist'
ListFilterCollapsePrototype = {
bindToggle: function(){
var that = this;
this.$filterTitle.click(function(){
// check if some ul is collapsed
// open it before slidetoggle all together
$(element_2_collapse).children('ul').each(function(){
if($(this).is(":hidden"))
{
$(this).slideToggle();
}
})
// and now slidetoggle all
that.$filterContentTitle.slideToggle();
that.$filterContentElements.slideToggle();
that.$list.toggleClass('filtered');
});
},
init: function(filterEl) {
this.$filterTitle = $(filterEl).children(element_head);
this.$filterContentTitle = $(filterEl).children(filter_title);
this.$filterContentElements = $(filterEl).children('ul');
$(this.$filterTitle).css('cursor', 'pointer');
this.$list = $(change_list );
// header collapse
this.bindToggle();
// collapsable childrens
$(element_2_collapse).children(filter_title).each(function(){
var $title = $(this);
$title.click(function(){
$title.next().slideToggle();
});
$title.css('border-bottom', '1px solid grey');
$title.css('padding-bottom', '5px');
$title.css('cursor', 'pointer');
});
}
}
function ListFilterCollapse(filterEl) {
this.init(filterEl);
}
ListFilterCollapse.prototype = ListFilterCollapsePrototype;
$(document).ready(function(){
$(element_2_collapse).each(function(){
var collapser = new ListFilterCollapse(this);
});
// close them by default
$(element_2_collapse+' '+element_head).click()
// if some filter was clicked it will be visible for first run only
// selezione diverse da Default
$(element_2_collapse).children(filter_title).each(function(){
lis = $(this).next().children('li')
lis.each(function(cnt) {
if (cnt > 0)
{
if ($(this).hasClass('selected')) {
$(this).parent().slideDown();
$(this).parent().prev().slideDown();
// if some filters is active every filters title (h3)
// should be visible
$(element_2_collapse).children(filter_title).each(function(){
$(this).slideDown();
})
$(change_list).toggleClass('filtered');
}
}
})
});
});
})(django.jQuery);
Django 4.x, here is how I do.
create admin template as below
{% extends "admin/change_list.html" %} {% block extrastyle %}
{{ block.super }}
function toggle_filter() {
$("#changelist-filter").toggle("slow");
};
$(document).ready(function(){
// close them by default
$("#changelist-filter").toggle("fast");
}); {% endblock %}
enhance admin/base_site.html to add button
<button onclick="toggle_filter()" class="btn btn-warning btn-sm" type="submit">Toggle Filter</button>