I have to two different Site Views with different regions.
How can I in proper way write composition in beforeAction method ?
What I want
beforeAction: function(params, route) {
if (route === 'sessions#new') {
this.reuse('site', OutsideSiteView);
this.reuse('header', OutsideHeaderView);
this.reuse('footer', OutsideFooterView);
} else {
this.reuse('site', SiteView);
this.reuse('header', HeaderView);
this.reuse('footer', FooterView);
}
}
My solution was
beforeAction: function(params, route) {
if (route === 'sessions#new') {
this.reuse('site', OutsideSiteView, { outside: true });
this.reuse('header', OutsideHeaderView, { outside: true });
this.reuse('footer', OutsideFooterView, { outside: true });
} else {
this.reuse('site', SiteView);
this.reuse('header', HeaderView);
this.reuse('footer', FooterView);
}
}
But I am not sure that it is proper solution
Related
I am new in vuejs2 development. I am working in a modal development. I kept the modal body code in a component and displaying that modal in another component. I have below code in modal body component.
<script>
import SemanticModal from 'vue-ya-semantic-modal'
export default {
components: { SemanticModal: SemanticModal() },
name: 'ModalBody',
props: ['active1',],
data() {
return {
visible: false
}
},
methods: {
close() {
this.$emit('sendValue', false); //this is working
this.visible = false
},
open () {
this.visible = true
},
},
watch: {
active1 () {
if (this.active1 && !this.visible) this.open()
else if (!this.active1 && this.visible) this.close()
},
},
directives: {
'click-outside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
var modal = document.getElementsByClassName("modal");
el.addEventListener('click', function (event) {
if (!modal[0].contains(event.target)) {
vNode.context.$emit('sendValue', false); //this is not working
this.visible = false
}
})
}
}
}
}
}
I am calling that model (child) component in parent component like below
<modal-body :active1="active1" #sendValue="active1 = $event"></modal-body>
I need to change the below props active1 value to false from child to parent component.
You are handling click event by using directives.
According to your requirement , clickoutside directive should emit sendValue event from child to parent. But i feel like your code has some complications.
The proper code to accomplish your scenario is below
directives: {
'clickoutside': {
bind: function(el, binding, vNode) {
el.onclick = function(e) {
console.log("binding clicked");
vNode.context.$emit('sendValue', false);
}
}
}
}
if your objective is to use click event you can use #click binding to accomplish the same
I am using external buttons for am charts export. when i enter into annotations mode and do export, the chart gets exported with annotations. But when the chart gets reloaded , the annotations mode does not revert back.
Could somebody let me know how to go back from annotations to normal mode.
if (chart.export.drawing.buffer.enabled === true) {
// Exporting the annotated chart with out "
//chart.export.capture"
chart.export.toPNG({}, function (data) {
chartimage.postImageData(data, chart_image_name)
});
} else {
chart.export.capture({
// action: "draw"
}, function () {
this.toPNG({
}, function (data) {
images.push({
"image": data,
"fit": [523.28, 769.89]
});
pending--;
if (pending === 0) {
chart.export.toPNG({
content: images
}, function (data) {
chartimage.postImageData(data, chart_image_name)
});
}
});
});
}
}
To exit from Annotation mode, simply use Export plugin's internal API method done():
chart["export"].drawing.handler.done();
BTW, export keyword is reserved and will result in errors on some browsers. It's better to access Export instance via named key: chart["export"].toPNG() versus chart.export.toPNG().
Please find the workaround below..
First capture the events for set and cancel annotations using menu reviewer
menuReviver: function (item, li) {
if (item.format === "XLSX" || item.format === "JSON") {
li.style.display = "none";
}
$(li).click(function () {
if (item.action == "draw") {
$("#chart_annotations").val(1);
}
if (item.action == "cancel") {
$("#chart_annotations").val(0);
}
});
return li;
}
Now while exporting the chart image use $("#chart_annotations").val() value as a
flag whether to export annotated chart or a normal chart. Please find the code below...
if (window.fabric) {
if ($("#chart_annotations").val() == 1) {
chart.export.toPNG({}, function (data) {
chartimage.postImageData(data, chart_image_name)
});
} else {
chart.export.capture({
//action: "change"
}, function () {
this.toPNG({
}, function (data) {
images.push({
"image": data,
"fit": [523.28, 769.89]
});
pending--;
if (pending === 0) {
chart.export.toPNG({
content: images
}, function (data) {
//post the image data using ajax
chartimage.postImageData(data, chart_image_name)
});
}
});
});
}
I have used service for storing data in local storage using pouchDB. I would like to show ionic loading until the data are downloaded and stored locally. For now I have used timeout which is not an option for me.
My Service
function populateLocaldb() {
var count;
_localdb.info().then(function(d){
console.log(d.doc_count)
count = d.doc_count;
if(count===0) {
populateData1();
populateData2();
populateData3();
} else {
}
});
}
function populateChapter() {
$http.get('http://....').success(function(data) {
//console.log(data)
var values= data;
for(var i=0; i<values.length; i++) {
var value= {
_id: values[i].ID,
title: chapters[i].Title
}
_localdb.put(value, function callback(err, result) {
if (!err) {
console.log('Successfully posted a value!');
}
});
}
})
}
Controller
dbService.getAllinfo().then(function(data) {
if(data == ""){
//do nothing
//alert(" null Alert hello")
console.log(data)
$ionicLoading.show({
content: 'Loading',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 200,
showDelay: 0
}).then(function() {
dbService.populateLocaldb();
});
} else {
//do nothing
}
})
$timeout(function () {
$ionicLoading.hide();
}, 50000);
It looks like you might need to call $scope.$apply() in the PouchDB callback. Also, another tip: instead of doing multiple put()s inside of a forEach(), it's more efficient in PouchDB to do a single bulkDocs() operation.
I have a wrapper around the Editor provided by Draft.js, and I would like to get the tab/shift-tab keys working like they should for the UL and OL. I have the following methods defined:
_onChange(editorState) {
this.setState({editorState});
if (this.props.onChange) {
this.props.onChange(
new CustomEvent('chimpeditor_update',
{
detail: stateToHTML(editorState.getCurrentContent())
})
);
}
}
_onTab(event) {
console.log('onTab');
this._onChange(RichUtils.onTab(event, this.state.editorState, 6));
}
Here I have a method, _onTab, which is connected to the Editor.onTab, where I call RichUtil.onTab(), which I assume returns the updated EditorState, which I then pass to a generic method that updates the EditorState and calls some callbacks. But, when I hit tab or shift-tab, nothing happens at all.
So this came up while implementing with React Hooks, and a google search had this answer as the #2 result.
I believe the code OP has is correct, and I was seeing "nothing happening" as well. The problem turned out to be not including the Draft.css styles.
import 'draft-js/dist/Draft.css'
import { Editor, RichUtils, getDefaultKeyBinding } from 'draft-js'
handleEditorChange = editorState => this.setState({ editorState })
handleKeyBindings = e => {
const { editorState } = this.state
if (e.keyCode === 9) {
const newEditorState = RichUtils.onTab(e, editorState, 6 /* maxDepth */)
if (newEditorState !== editorState) {
this.handleEditorChange(newEditorState)
}
return
}
return getDefaultKeyBinding(e)
}
render() {
return <Editor onTab={this.handleKeyBindings} />
}
The following example will inject \t into the current location, and update the state accordingly.
function custKeyBindingFn(event) {
if (event.keyCode === 9) {
let newContentState = Modifier.replaceText(
editorState.getCurrentContent(),
editorState.getSelection(),
'\t'
);
setEditorState(EditorState.push(editorState, newContentState, 'insert-characters'));
event.preventDefault(); // For good measure. (?)
return null;
}
return getDefaultKeyBinding(event);
}
I have developed an OpenUI5 app ant it works fine!
But every time that I invoke the routing I have this message:
2015-07-15 16:15:45 hash format error! The current Hash: /line/01 -
log
error
onHashChange
detectHashChange
jQuery.event.dispatch
jQuery.event.add.elemData.handle
It is not a blocking problem but it is annoying because it dirty and fills thi debug console..!
To call the router I write:
this.router = sap.ui.core.UIComponent.getRouterFor(this);
this.router.navTo("activities", {
"id_line": '01'
});
and this is the routing file:
routes: [
...
{
pattern: "line/{id_line}",
name: "activities",
target: ["master_search", "detail_activities"]
},
...
],
targets: {
master_search: {
viewName: "UniversalMenu",
viewLevel: 1,
controlAggregation: "masterPages"
}
,
detail_activities: {
viewName: "DetailActivity",
viewLevel: 4
}
...
}
Edit: this is a snippet where I use jQuery.sap.history
jQuery.sap.require("jquery.sap.history");
jQuery.sap.require("sap.m.InstanceManager");
sap.ui.controller("ui5bp.view.App", {
getDefaultPage : function () {
return "Menu";
},
onInit : function () {
var historyDefaultHandler = function (navType) {
if (navType === jQuery.sap.history.NavType.Back) {
//this.navBack(this.getDefaultPage());
} else {
this.navTo(this.getDefaultPage(), null, false);
}
};
var historyPageHandler = function (params, navType) {
if (!params || !params.id) {
jQuery.sap.log.error("invalid parameter: " + params);
} else {
if (navType === jQuery.sap.history.NavType.Back) {
this.navBack(params.id);
} else {
this.navTo(params.id, params.data, false);
}
}
};
jQuery.sap.history({
routes: [{
// This handler is executed when you navigate back to the history state on the path "page"
path : "page",
handler : jQuery.proxy(historyPageHandler, this)
}],
// The default handler is executed when you navigate back to the history state with an empty hash
defaultHandler: jQuery.proxy(historyDefaultHandler, this)
});
// subscribe to event bus
var bus = sap.ui.getCore().getEventBus();
bus.subscribe("nav", "to", this.navHandler, this);
bus.subscribe("nav", "back", this.navHandler, this);
bus.subscribe("nav", "virtual", this.navHandler, this);
},
navHandler: function (channelId, eventId, data) {
if (eventId === "to") {
this.navTo(data.id, data.data, true);
} else if (eventId === "back") {
//**************************************************
// if(data && data.id){
// this.navBack(data.id);
// } else {
// jQuery.sap.history.back();
// }
var app = this.getView().app;
if(data.type==="master"){
app.backMaster();
}else if(data.type==="detail"){
app.backDetail();
}else{alert("back to master o detail?");};
//**************************************************
} else if (eventId === "virtual") {
jQuery.sap.history.addVirtualHistory();
} else {
jQuery.sap.log.error("'nav' event cannot be processed. There's no handler registered for event with id: " + eventId);
}
},
navTo : function (id, data, writeHistory) {
if (id === undefined) {
// invalid parameter
jQuery.sap.log.error("navTo failed due to missing id");
} else {
var app = this.getView().app;
// navigate in the app control
app.to(id, "slide", data);
}
},
/*
navBack : function (id) {
if (!id) {
// invalid parameter
jQuery.sap.log.error("navBack - parameters id must be given");
} else {
// close open popovers
if (sap.m.InstanceManager.hasOpenPopover()) {
sap.m.InstanceManager.closeAllPopovers();
}
// close open dialogs
if (sap.m.InstanceManager.hasOpenDialog()) {
sap.m.InstanceManager.closeAllDialogs();
jQuery.sap.log.info("navBack - closed dialog(s)");
}
// ... and navigate back
var app = this.getView().app;
var currentId = (app.getCurrentPage()) ? app.getCurrentPage().getId() : null;
if (currentId !== id) {
app.backToPage(id);
jQuery.sap.log.info("navBack - back to page: " + id);
}
}
}
*/
});
In Component.js I had 2 rows where I set up custom myNavBack and myNavToWithoutHash functions:
// 3a. monkey patch the router
var oRouter = this.getRouter();
oRouter.myNavBack = ui5bp.MyRouter.myNavBack; //to comment
oRouter.myNavToWithoutHash = ui5bp.MyRouter.myNavToWithoutHash; //to comment
I have started from an example of app skeleton for my app and then I have implemented the routing with the logic suggested from the framework.
This coexistence of two different methods to navigate produced the error in console. Tahnkyou #TimGerlach
After the comment of the two rows errors have vanished.