I have a problem with customization of Orbit from newest Foundation. From the docs:
Orbit options can only be passed in during initialization at this time.
{
timer_speed: 10000,
animation_speed: 500,
bullets: true,
stack_on_small: true,
container_class: 'orbit-container',
stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next',
prev_class: 'orbit-prev',
timer_container_class: 'orbit-timer',
timer_paused_class: 'paused',
timer_progress_class: 'orbit-progress',
slides_container_class: 'orbit-slides-container',
bullets_container_class: 'orbit-bullets',
bullets_active_class: 'active',
slide_number_class: 'orbit-slide-number',
caption_class: 'orbit-caption',
active_slide_class: 'active',
orbit_transition_class: 'orbit-transitioning'
}
Mhm, great. But how to apply it? I tried
$('#slider').orbit({...});
---
$(document).foundation().orbit({...});
But nothing works. I know it's silly, but how to do it?
"Starting in 4.0.7 you can also use the data-options attribute to pass configuration settings to Orbit."
source: foundation.zurb.com/docs/components/orbit.html
Treat it like a style property:
<ul data-orbit data-options="timer_speed:2500; bullets:false;">
...
</ul>
$(document).foundation('orbit', {bullets:false});
Related
I'm using keep-alive to maintain the state of a multi-step form in Vue3 so users can navigate back and forth as needed.
What I can't figure out, is how to force a clear of the cache. When users complete the form I give them an option to re-start and I currently clear the form submission object and return the users to page 1 of the form but keep-alive is preserving the form state so checkboxes are pre-selected. Is there a call I can make from my reset function to clear the keep-alive cache? Ideally for only some of the form steps, not all.
Hard to do.;) There's no built-in method to clear the keepAlive cache.
Looks like the form is not completely reseted but maybe could be enough to destroy the instance of components wrapped in
Are you using key="x" on the component that's wrapped with ? Like:
<KeepAlive>
<component key="x"/>
</KeepAlive >
reseting the key together with redirecting to 1st page could help.
But also to my mind came an idea that You maybe should re-initialize form initialData
ex:
<script>
const initialState = () => {
return {
name: '',
surename: '',
location: {
name: null,
},
};
};
export default {
data() {
return initialState();
},
methods: {
reset() {
Object.assign(this.$data, initialState());
},
},
};
</script>
let's dive into
https://learnvue.co/tutorials/vue-keep-alive
Found related issue:
https://stackoverflow.com/a/71766767/10900851
https://github.com/vuejs/vue/issues/6259#issuecomment-436209870
I actually ended up using an entirely different method and thought I would put it here in case it is of use to someone else.
I found it here: https://michaelnthiessen.com/force-re-render/
Basically, a reset of a component can be forced by changing its key value. This has the added benefit of letting you selectively force a re-render of any number of child components.
In the parent.
<PageOne :key="page_one_key">
<script>
export default {
...
data() {
return {
page_one_key: 0,
}
},
...
methods: {
myreset(){
this.page_one_key += 1;
}
}
}
</script>
If there are downsides to this approach I would love to know but it seems to work perfectly - allows back/forwards navigation of my form and selective resetting of the cached components.
It is also simple to implement.
I am using ember-leaflet with a new project and I've got a component which houses a map with several markers on it called embedded-map. I'm following the tutorial on their page and can set a static zoom value for my map.
I saw there is some sort of fitBounds function available for the leaflet javascript library. Is there a way to access that while using ember-leaflet? My documentation search came up short, but I did find a template helper that seems related, but not quite what I'm looking for: https://miguelcobain.github.io/ember-leaflet/docs/helpers/lat-lng-bounds.
embedded-map.js
import Component from "#ember/component";
import { computed } from "#ember/object";
import { readOnly } from "#ember/object/computed";
export default Component.extend({
tagName: "",
zoom: 10.25, /* I'd like this to initialize to fit all map markers */
lat: readOnly("trip.averageLatitude"), /* `trip` is a model passed into the component */
lng: readOnly("trip.averageLongitude"),
location: computed("trip.averageLatitude", "trip.averageLongitude", function() {
return [this.get("averageLatitude"), this.get("averageLongitude")];
}),
});
embedded-map.hbs
{{#leaflet-map lat=lat lng=lng zoom=zoom as |layers|}}
{{layers.tile url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"}}
{{#each trip.days as |day|}}
{{#each day.dayItems as |item|}}
{{#layers.marker location=item.coordinates as |marker|}}
{{#marker.popup}}
<h3>{{item.name}}</h3>
{{/marker.popup}}
{{/layers.marker}}
{{/each}}
{{/each}}
{{/leaflet-map}}
I'm not intimately familiar with the latest api, but when I used ember-leaflet in a project late 2017/early 2018, I determined at least two options for this use case. Which you choose depends on your use case and what you consider "proper".
You could leverage the onLoad action of the ember-map component
{{#leaflet-map onLoad=(action "showAllPins") }}
and handle the bounds setting logic here in the action
showAllPins(map){
let mapTarget = map.target;
let disableDrag = this.disableDrag;
// you *can* do totally store the map for later use if you want but... the
// addon author is trying to help you avoid accessing leaflet functions directly
this.set('map', mapTarget);
/* determine min/max lat and lng */
//set the bounds
mapTarget.fitBounds([[lowestLatitude, lowestLongitude], [highestLatitude, highestLongitude]]);
}
or you can use inheritance by extending LeafletMap and have your own custom version of the leaflet map that handles the zoom setting in a domain specific way (extending this class allows you to override/enhance existing methods that have access to the underlying leaflet object).
I've found a solution to the problem, thanks to an error message I saw in the console while pursuing #mistahenry's solution above.
The tutorial suggests you pass lat, lng, and zoom parameters into the leaflet-map declaration, but the error message states you can also pass in bounds instead of the above 3, and wouldn't you know it - it does exactly what I'm trying to do!
I calculate the maximum and minimum latitude and longitude using all of the map markers I have on hand, and pass this into the embedded-map component to render the map in a way that will fit all markers on-screen.
this example taken from the Cypress documentation won't work properly:
cy.getCookies().should('be.empty');
cy.setCookie('session_id', '189jd09sufh33aaiidhf99d09');
cy.getCookie('session_id').should('have.property', 'value', '189jd09sufh33aaiidhf99d09');
Every time I try to setCookie(), it appears to set it without issue but always returns this when I call getCookies():
$Chainer {chainerId: "chainer18", firstCall: false}
chainerId: "chainer18"
firstCall: false
__proto__: Object
Is there something I'm missing here?
You should use cy.getCookies() without arguments. That function returns array of cookies that you have. Than you can do:
cy.getCookies().should('have.length', 1).then((cookies) => {
expect(cookies[0]).to.have.property('session_id', '189jd09sufh33aaiidhf99d09')
})
Looks like this was related to https://github.com/cypress-io/cypress/issues/1321 and has been patched in v 3.1.2 of Cypress. All is right with the world again.
I have a koGrid configured as follows:
var myItemsGrid = {
data: myItems,
columnDefs: [
{ field: 'item.title', displayName: 'Title', cellTemplate: $("#cdfUrlCellTemplate").html() },
{ field: 'item.dueTimeUtc', displayName: 'Due', cellFormatter: formatDate, sortFn: sortDates },
{ field: 'id', displayName: 'Edit', cellTemplate: $("#editCellTemplate").html() }
],
showGroupPanel: true,
groups: ['item.title'],
showFilter: false,
canSelectRows: false
};
My problem is that the groups array, which I have tried to populate using the field name of one of the fields in my grid, causes the following error:
TypeError: Cannot read property 'isAggCol' of undefined
How should I be populating the groups array so that I can set up initial grouping for my grid?
I had the same problem and took a different approach by sending an event to the grid control to group by the first heading. Something like this:
jQuery("#symbolPickerView").find(".kgGroupIcon").first().click();
This works until there is some sort of patch generally available.
I ended up having to patch the koGrid script to get the initial grouping of columns to work.
If anyone else has the problem I'm happy to provide the patched script. I will look at making a pull request to get the fix into the koGrid repository after putting it through its paces a bit more.
I'm using django-tinymce together with the no grappelli branch of django-filebrowser running django 1.2.
I use the tinymce HTMLField model definition for the model field that I would like to have WYSIWYG.
I've added the correct javascript to my AdminModel, and the filebrowser works great, adding the image to the textarea with no problem, however, when I save, the textarea does not update (it looks like tinnymce doesn't touch it when it should). When I turn off the filebrowser plugin, everything works fine, so there must be some conflict with it and the TinyMCE onSubmit functionality.
I've been messing with it for while and just can't get anywhere - all of these pieces are pretty new to me, so even some ideas of what to mess with would be helpful.
Thanks in advance.
edit: Added bonus info - the default mode in the config for 'mode' was 'textareas'. When I remove that, everything saves correctly. Sadly, this also removes the image button that I'm doing all of this to have...
update
Here is the TinyMCE configuration I was using (the one included with django-filebrowser - this is broken):
tinyMCE.init({
mode: "textareas",
theme: "advanced",
language: "en",
skin: "o2k7",
browsers: "gecko",
dialog_type: "modal",
object_resizing: true,
cleanup_on_startup: true,
forced_root_block: "p",
remove_trailing_nbsp: true,
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "none",
theme_advanced_buttons1: "formatselect,bold,italic,underline,bullist,numlist,undo,redo,link,unlink,image,code,fullscreen,pasteword,media,charmap",
theme_advanced_buttons2: "",
theme_advanced_buttons3: "",
theme_advanced_path: false,
theme_advanced_blockformats: "p,h2,h3,h4,h5,h6",
width: '700',
height: '200',
plugins: "advimage,advlink,fullscreen,visualchars,paste,media,template,searchreplace",
advimage_styles: "Linksbündig neben Text=img_left;Rechtsbündig neben Text=img_right;Eigener Block=img_block",
advlink_styles: "internal (sehmaschine.net)=internal;external (link to an external site)=external",
advimage_update_dimensions_onchange: true,
file_browser_callback: "CustomFileBrowser",
relative_urls: false,
valid_elements : "" +
"-p," +
"a[href|target=_blank|class]," +
"-strong/-b," +
"-em/-i," +
"-u," +
"-ol," +
"-ul," +
"-li," +
"br," +
"img[class|src|alt=|width|height]," +
"-h2,-h3,-h4," +
"-pre," +
"-code," +
"-div",
extended_valid_elements: "" +
"a[name|class|href|target|title|onclick]," +
img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name]," +
"br[clearfix]," +
"-p[class<clearfix?summary?code]," +
"h2[class<clearfix],h3[class<clearfix],h4[class<clearfix]," +
"ul[class<clearfix],ol[class<clearfix]," +
"div[class],"
});
This was one of two problems I was having - going to post an answer below as well.
The issue was actually two-fold. The first problem was the included default TinyMCE configuration that came with django-filebrowser-no-grappelli (above, in the question). I'm not sure what was wrong with it, but it prevented the actual form fields from being updated when the submit button was pushed.
When I used a custom configuration for TinyMCE, form field saving worked correctly, but the filebrowsing was broken. This was because if django-tinymce sees 'filebrowser' in the installed apps list, it overrides the file_browser_callback and sets it to 'djangoFileBrowser', so even when I correctly set it to 'CustomFileBrowser' in my own config. The solution was to explicitly tell it not to set that value. I added the follwing to my settings.py:
TINYMCE_DEFAULT_CONFIG = {
'theme': 'advanced',
'theme_advanced_toolbar_location': "top",
'theme_advanced_toolbar_align': "left",
'skin': "o2k7",
"file_browser_callback" : "CustomFileBrowser",
}
TINYMCE_FILEBROWSER = False
And everything seems to be working fine. This issue seems to be fairly unique to my combination of versions.