I am trying to create an inline CKEditor view in ember, which can be toggled on or off by the user using an "edit" button. The idea is that certain users have permission to edit content, so they have the option of clicking an "Edit" button which changes the <blockquote> element into a CKeditor instance. Clicking "Save" should deactivate the editor and restore the original element. I have it half working with the following code, but the problem is that clicking "Edit" a second time does not recreate the editor, it just sets contenteditable on the <blockquote>.
App.CkEditor = Ember.View.extend({
tagName: 'blockquote',
attributeBindings: ['contenteditable'],
value: '',
editor: null,
enabled: false,
contenteditable: function() {
if (this.get('enabled')) {
return 'true';
} else {
return 'false';
}
}.property('tagName', 'enabled'),
enabledObserver: function() {
var editor = this.get('editor');
if (this.get('enabled') && Ember.isNone(editor)) {
this.createElement();
} else if (!this.get('enabled') && !Ember.isNone(editor)) {
editor.destroy();
this.createElement();
}
}.observes('enabled'),
createElement: function() {
if (this.get('enabled')) {
// Create a CKEDitor
var configOption = this.get('configOptions')[this.get('config')];
var _this = this;
CKEDITOR.disableAutoInline = true;
this.$().ckeditor(function(element) {
var editor = $(element).ckeditor().editor;
_this.set('editor', editor);
editor.setData(_this.get('value'));
editor.on('change', function(event) {
if (editor.checkDirty()) {
_this.set('value', editor.getData());
}
});
});
} else {
// Just create a basic element
this.$().html(this.get('value'));
}
},
didInsertElement: function() {
this.createElement();
}
});
Related
I have a model say 'my.attendance' , also have a form view for this which contains some attendance details.What i need is when i open this form view it should always open in Edit mode.So i can directly enter the attendance without clicking Edit button each time.
You have to extend the ViewManager to achieve this.
odoo.define('my_module.view_manager', function (require) {
"use strict";
var ViewManager = require('web.ViewManager');
ViewManager.include({
custom_events: {
execute_action: function(event) {
var data = event.data;
this.do_execute_action(data.action_data, data.env, data.on_closed)
.then(data.on_success, data.on_fail);
},
search: function(event) {
var d = event.data;
_.extend(this.env, this._process_search_data(d.domains, d.contexts, d.groupbys));
this.active_view.controller.reload(_.extend({offset: 0}, this.env));
},
switch_view: function(event) {
if ('res_id' in event.data) {
this.env.currentId = event.data.res_id;
}
var options = {};
console.log(event.data)
if (event.data.view_type === 'form' && !this.env.currentId) {
options.mode = 'edit';
} else if (event.data.mode) {
options.mode = event.data.mode;
}
// Extra added code
if (event.data.model){
if (event.data.model == 'my.model'){ // Checking the particular model.
options.mode = 'edit';
}
}
this.switch_mode(event.data.view_type, options);
},
env_updated: function(event) {
_.extend(this.env, event.data);
},
push_state: function(event) {
this.do_push_state(event.data);
},
get_controller_context: '_onGetControllerContext',
switch_to_previous_view: '_onSwitchToPreviousView',
},
});
});
I am using "VMenu" as a jQuery plugin to show a huge accordion on a HTML site, because it supports a very simple structure with only <u> and <li> tags.
Now, I want to close all the open accordion tabs with an event/button/...
The plugin creator didn't answer questions so I need your help.
I put the whole code in jsfiddle but it didn't work: https://jsfiddle.net/ekbLLcLd/3/
(function($) {
$.fn.vmenuModule = function(option) {
var obj,
item;
var options = $.extend({
Speed: 220,
autostart: true,
autohide: 1
},
option);
obj = $(this);
item = obj.find("ul").parent("li").children("a");
item.attr("data-option", "off");
item.unbind('click').on("click", function() {
var a = $(this);
if (options.autohide) {
a.parent().parent().find("a[data-option='on']").parent("li").children("ul").slideUp(options.Speed / 1.2,
function() {
$(this).parent("li").children("a").attr("data-option", "off");
})
}
if (a.attr("data-option") == "off") {
a.parent("li").children("ul").slideDown(options.Speed,
function() {
a.attr("data-option", "on");
});
}
if (a.attr("data-option") == "on") {
a.attr("data-option", "off");
a.parent("li").children("ul").slideUp(options.Speed)
}
});
if (options.autostart) {
obj.find("a").each(function() {
$(this).parent("li").parent("ul").slideDown(options.Speed,
function() {
$(this).parent("li").children("a").attr("data-option", "on");
})
})
}
}
})(window.jQuery || window.Zepto);
I think it's a simple task but I'm not sure how to do it.
Add this function and trigger it on any button click :
function closeAll()
{
// obj will be your div(wrapper) within your all accordion is exist;
var item2 = $(".u-vmenu").find("ul").parent("li").children("a");
item2.attr("data-option", "off");
item2.each(function(){
$(this).attr("data-option", "off");
$(this).parent("li").children("ul").slideUp(200);
});
}
This function will close all the opened accordion.
I am developing a windows desktop application using node.js and backbone.js.
I want to perform an action when the user closes the app by clicking on the close button on the title bar or right clicking on the application from windows taskbar.
My app.js looks like this,
var app = module.exports = require('appjs');
app.serveFilesFrom(__dirname + '/content/assets/');
var menubar = app.createMenu([ {
label : '&File',
submenu : [ {
label : 'E&xit',
action : function() {
window.close();
}
},{
label : 'New',
action : function() {
window.test();
}
} ]
}, {
label : '&Window',
submenu : [ {
label : 'Fullscreen',
action : function(item) {
window.frame.fullscreen();
console.log(item.label + " called.");
}
}, {
label : 'Minimize',
action : function() {
console.log("df");
window.frame.minimize();
}
}, {
label : 'Maximize',
action : function() {
console.log("nnnnnnlaaaaaaaaaaaaaaa");
window.frame.maximize();
}
}, {
label : ''// separator
}, {
label : 'Restore',
action : function() {
window.frame.restore();
}
} ]
} ]);
menubar.on('select', function(item) {
console.log("menu item " + item.label + " clicked");
});
var trayMenu = app.createMenu([ {
label : 'Show',
action : function() {
window.frame.show();
},
}, {
label : 'Minimize',
action : function() {
window.frame.hide();
}
}, {
label : 'Exit',
action : function() {
window.close();
}
} ]);
var statusIcon = app.createStatusIcon({
icon : './data/content/icons/32.png',
tooltip : 'AppJS Hello World',
menu : trayMenu
});
var window = app.createWindow({
width : 1024,// 640
height : 768,
showChrome: true,
icons : __dirname + '/content/icons'
});
window.on('create', function() {
console.log("Window Created");
window.frame.show();
window.frame.center();
window.frame.maximize();
window.frame.setMenuBar(menubar);
});
window.on('ready', function() {
console.log("Window Ready");
window.require = require;
window.process = process;
window.module = module;
//window.frame.openDevTools();
window.fileAssoc = process.mainModule.filename;
//window.readMyFile();
function F12(e) {
return e.keyIdentifier === 'F12'
}
function Command_Option_J(e) {
return e.keyCode === 74 && e.metaKey && e.altKey
}
});*/
window.addEventListener('keydown', function(e) {
console.log("hi");
if (F12(e) || Command_Option_J(e)) {
window.frame.openDevTools();
}
});
});
Please find the attached screenshot. I am able to perform actions on custom added functionalities inside "File" & "Windows".
But i don't know how to capture the event when the default app close button in the title bar is clicked or closed by right clicking on the application from windows task bar. Please help.
Thanks in Advance
UPDATED (added a few more code lines to show proper way for event to fire)
You should do like this:
var gui = require("nw.gui");
var win_main = gui.Window.get();
win_main.on('close', function () {
this.hide(); // Pretend to be closed already
alert("Closing...");
// here you detect if data is saved, and if not, ask user if they want to save
this.close(true); // if this line executes the app closes, if not,
// app stays opened
});
I tried the above and it works perfect. It catches both "Close button" clicks and key shortcuts like "Ctrl+F4" in Windows.
For further reading (moved from comments):
http://tutorialzine.com/2015/01/your-first-node-webkit-app/
https://nodesource.com/blog/node-desktop-applications
https://gist.github.com/LeCoupa/80eca2716a2b13c37cce
https://github.com/nwjs/nw.js/
https://github.com/nwjs/nw.js/wiki/window
Finally I have done this by hiding the default title bar and adding a custom one.
For that, I set "showChrome" attribute in appJs to false during the window creation, which is by default true.
The code change is
var window = app.createWindow({
width : 1024,// 640
height : 768,
**showChrome: false**,
icons : __dirname + '/content/icons'
});
But when the 'showChrome' attribute is set to false task bar also will be hidden until we minimise or restore the app.
I'm having problem connecting my Dialog box with a clickable button. I want to show a dialogbox when I click a button but unfortunately, I can't do the function very well. This is my code, I know its really bad and I need some idea or a hand:
define: function () {
var dialog = new Ext.LayoutDialog('test', {
modal: true;
height: 500;
width: 500;)
};
var button = new Ext.Button("btn", {
text: "検索実行",
handler: this.showdialog.createDelegate(this)
});
}
},
I think, when creating an Ext.LayoutDialog, the id that will be used should be taken from a div tag then you'll simply add the method, addButton, so that the layoutdialog will have buttons. Don't use semicolons when adding configurations to the layoutdialog, you'll only use commas then the last config should no longer have a comma. Visit this link to know more about ext >> http://dev.sencha.com/deploy/ext-1.1.1/docs/ :)
var sample = Class.create();
sample.prototype = {
initialize: function () {
this.define();
}
define: function () {
var createDialog = function () {
var dialog = new Ext.LayoutDialog('test', {
modal: true,
height: 500,
width: 500,
center: {
autoscroll: true
}
});
button = dialog.addButton({ text: "検索実行" });
button.on('click', function() {
//name of the dialog that you want to display
showdialog.show();
});
var layout = dialog.getLayout();
layout.beginUpdate();
var center = layout.getRegion('center');
center.add(new Ext.ContentPanel("test", { titlebar: false }));
layout.endUpdate();
}
}
}
I am currently developing a calendar where activities can be drag&dropped to other days.
When an activity is dropped into a different day, I show a custom modal using durandal's dialog plugin. The problem is when an user closes the modal, the activity has to revert to its original position. When an activity is dropped the following code is called:
function showDroppedActivityModal(obj) {
require(['modals/droppedActivityModal/droppedActivityModal', 'moment'], function(droppedActivityModal, moment) {
droppedActivityModal.show(obj).then(function(response) {
if(response !== false) {
...
}
// dialog closes
else {
calendarView.revertActivity.notify({ revert: true})
}
});
});
}
In my calendarView I implemented the revertActivity event to set revert to true but the function never re-evaluates itself but i'm able to receive the new revert value (true).
$(activity).draggable({
revert: function() {
var revert = false;
self.revertActivity.attach(function(sender, args) {
revert = args.revert;
});
return revert;
}
});
Custom event code:
function CalendarEvent(sender) {
this._sender = sender;
this._listeners = [];
}
CalendarEvent.prototype = {
attach : function (listener) {
this._listeners.push(listener);
},
notify : function (args) {
var index;
for (index = 0; index < this._listeners.length; index += 1) {
this._listeners[index](this._sender, args);
}
},
remove : function (listener){
this._listeners.remove(listener);
}
};
this.revertActivity = new CalendarEvent(this);