Removing a fMath image properties dialog in ckeditor - drupal-7

I am a bit stuck with this so it would be great if you could help.
I am using Drupal 7 and Ckeditor 4.3. I am developing a site which has fmath equation editor integrated.
I have disabled the image button, as I don't want end users being able to upload their own images. On the other hand, users can use fMath to insert equations. The way fMath handles equation insertion is by inserting a img tag.
When users double click this image or when they right click over the image, they access the image properties dialog, where they can change source url of the image and few other things. On the url input text, they could change the source of the image so that they could insert their own images on the page, which is something I don't want.
The have been working with two different unsuccessful approaches until now trying to solve this problem:
Removing elements from the dialog, as the URL input text on the dialog (and the alt text as well).
Trying to disable the dialog itself.
I'd like to use a custom plugin to accomplish the desired behavior as I have different CKeditor profiles in Drupal.
I haven't been successful. Do you know how could I handle this undesirable behavior?

Ok, I ended up with something like this in the plugin.js file:
CKEDITOR.plugins.add( 'custom_doubleclick',
{
init: function( editor )
{
// First part, dialogDefinition allow us to remove the
// "Link" and "Advanced" tabs on the dialog
CKEDITOR.on( 'dialogDefinition', function( ev ) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
if ( dialogName == 'image' ) {
dialogDefinition.removeContents( 'Link' );
dialogDefinition.removeContents( 'advanced' );
}
});
// Second part, it disables the textUrl and txtAlt input text boxes
editor.on( 'dialogShow', function( ev ) {
var dialog = ev.data;
var dialogName = dialog.getName();
if ( dialogName == 'image' ) {
//var dialog = CKEDITOR.dialog.getCurrent();
// Get a reference to the Link Info tab.
console.log(dialog)
dialog.getContentElement( 'info','txtUrl' ).disable();
dialog.getContentElement( 'info','txtAlt' ).disable();
}
});
}
});
As you can see I didn't disable the dialog itself, but the non useful elements. I hope this can help to someone else.

Related

Issue opening an Abp Modal that has scripts inside, it clear the below page

I have a strange issue with Abp.Io and opening a modal that has a script file inside (which loads data). The issue is that is clears the below grid. I've understood that the problem is with the Layout = null of the modal.
Here's what's happening.
Modal with Layout not null: (so it takes the scripts section):
Then I click the lens
You see the popup opens and load data correctly (now they're mocked), but below the Grid disappeared.
Instead if I put the layout of the modal to null:
You see in this case that it keep the grid below , but It doesn't load any data (since I think it doesn't know what to do with #script section.
Here's my modal:
#page
#using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
#model IlDiamante.Web.Pages.Shared.MetalliUtilizzatiInSemilavoratiModel
#{
Layout = null;
string headerName = $"Semilavorati che utilizzano il metallo '{Model.NomeMetallo}'";
}
#section scripts
{
<abp-script src="/Pages/Shared/MetalliUtilizzatiInSemilavorati.js" />
}
<input id="metalloGuid" hidden="true" value="#this.Model.Id"/>
<abp-modal>
<abp-modal-header title="#headerName"></abp-modal-header>
<abp-modal-body>
<abp-table striped-rows="true" id="SemilavoratiTable"></abp-table>
</abp-modal-body>
<abp-modal-footer buttons="#(AbpModalButtons.Close)"></abp-modal-footer>
</abp-modal>
Any advice?
Thanks
Layout should be null for modals, there is no problem there. However, if you want the script to be loaded, you must declare it where you opened the modal.
For instance:
When opening the modal, you need to specify a modal class as below:
var productInfoModal = new abp.ModalManager({
viewUrl: '/Products/ProductInfoModal',
modalClass: 'ProductInfo' //Matches to the abp.modals.ProductInfo
});
Then the modal class you specify should match inside your modal script as in the code below:
abp.modals.ProductInfo = function () {
function initModal(modalManager, args) {
// your logic
};
return {
initModal: initModal
};
};
Then add the modal to the script of the page you opened as follows:
#section scripts{
<abp-script-bundle>
<abp-script src="/Pages/Products/ProductInfoModal.js"/> // modal script
<abp-script src="/Pages/Products/Index.js"/> // page script
</abp-script-bundle>
}
For more information see here: https://docs.abp.io/en/abp/latest/UI/AspNetCore/Modals#modals-with-script-files
Since script files are loaded while opening the page, it is normal that it does not work even if you declare the script in the modal.cshtml(ProductInfo.cshtml) file. However, you can still use lazy load if you want. For that, I recommend you look here.

Ask to confirm when changing tabs in angular bootstrap

I have tabs with forms and I want ask the user to confirm or discard their changes when changing tabs. My current code works
<uib-tab heading="..." index="3" deselect="main.onDeselect($event)" ... >
this.onDeselect = function($event) {
if(...isDirty...) {
if($window.confirm("Do you want to discard?")) {
... discard (and go to new tab) ...
} else {
$event.preventDefault(); //stays on current tab
}
}
}
The problem is I want to change confirm to javascript dialog and I will get result in callback.
I planed to preventDefault() all and then switch manually, but I cannot figure out where to get new tab id.
Any solution is appreciated. Even if it is easier in other tab implementations.
I use AngularJS v1.4.7, ui-bootstrap-tpls-1.3.3.min.js
You can make use of $selectedIndex and the active property for that purpose. See this Plunk
One thing to be noted here is that when we manually change the active property, it again fires the deselect event which needed to be handled. Otherwise it seems to do what you wanted.
Edit
Indeed as noted in the comments, the deselect carries the HTML index rather than what is passed in in the tab index property. A workaround could be in this: Another Plunk. Here I'm pulling the actual index from the HTML index.
And a little research indicates that this issue might as well be fixed already with 3.0 bootstrap tpl See this.
I spent some time with different approaches and this one is stable for some time. What I do is to prevent deselect at the beginning and set the new tab in callback if confirmed to loose changes...
this.onDeselect = function($event, $selectedIndex) {
var me = this;
if(this.tabs.eventDirty || this.tabs.locationDirty || this.tabs.contractDirty) {
$event.preventDefault();
var alert = $mdDialog.confirm({
title: 'Upozornění',
textContent: 'Na záložce jsou neuložené změny. Přejete si tyto změny zrušit a přejít na novou záložku?',
ok: 'Přijít o změny',
cancel: 'Zůstat na záložce'
});
$mdDialog
.show( alert )
.then(function() {
$rootScope.$emit("discardChanges");
me.tabs.activeTab = $selectedIndex;
})
}
};

Angularjs Dom Manipilation in a Table

i have a table where i can turn pages, you can choose a color for a user and that color is shown in the circle, but when i turn one page, the color is gone!
I read about dom manipluation in directives, but that still didnt solve my problem:
the tutorials mostly show one with a click funktion, and i dont to click the circle
they also werent "permanent"
maybe i did something wrong? please can someone help or give me a hint?
i made also a plnkr :
Here's the link!
You need to save chosen color to currect user object. Maybe like this:
$scope.showColorPicker = function(user) {
data = $scope.colors;
dlg = $dialogs.create('/dialogs/pickColor.html','pickColorCtrl',$scope.colors,{},{key:false ,back:'static'});
dlg.result.then(function(data) {
var colnr = data;
var user_circle = angular.element(document.getElementById('color_' + user.id));
user_circle.context.style.backgroundColor = $scope.colors[colnr-1].color;
user.color = $scope.colors[colnr-1];
});
};
HTML for color circle:
<span class="smallcircle" ng-bind="color_{{user.id}}" id="color_{{user.id}}" name="color_{{user.id}}" style="background-color: {{user.color.color || 'lightgray'}};"></span>
Make sure you pass user object to showColorPicker function:
Change Color
Demo: http://plnkr.co/edit/em0ZUHjbXUNa7MYgpC5f?p=info

Extjs checkbox selection issue

i am working in extjs4. i have grid with checkbox selection model. Grid is displaying files and folders. If folder get selected then i want to hide some menu. So have written code as-
selectionchange:function( model, selected, eOpts ){
var centralPanel = me.up();
var actionBtn = centralPanel.queryById('libraryactionBtn');
if(selected.length > 1) {
actionBtn.show();
//var i=0;
for(i=0;i<selected.length;i++)
{
if(selected[i].data.isLeaf)
{
centralPanel.queryById('library-action-menu-view').hide();
centralPanel.queryById('library-action-menu-viewOrAddTag').hide();
centralPanel.queryById('library-action-menu-viewOrAddNotes').hide();
centralPanel.queryById('library-action-menu-copyToCompaign').hide();
centralPanel.queryById('library-action-menu-copyToProject').hide();
centralPanel.queryById('library-action-menu-sendLink').hide();
centralPanel.queryById('library-action-menu-addtofavorite').hide();
centralPanel.queryById('library-action-menu-downloadItem').hide();
}
}
} else {
actionBtn.hide();
}
where selected.data.isLeaf is false for folder. Its executing correctly only first time. Next time when i am selecting file,then also its hiding menu for file. And if folder is deselected then also its hiding menu. So what modifications i need to do
first of all I don't see any code that shows the menu..You are just hiding the menu.
Secondly make sure selected[i].data.isLeaf is false and not "false".

ExtJS window dynamically add GridPanel items and show it

I want to show only one GridPanel,which I dynamically add by switch click button event, in window.
var event_menu = new Ext.menu.Menu( {
id : "event_menu",
items : [ {
text : 'record1',
handler : function() {
win.add(item_list_panel);//dynamica add GridPanel to show server data
win.doLayout();
item_list_store.load();
}
}, {
text : 'record2',
handler : function() {
win.remove(item_list_panel);//I want to remove it inorder to show the item_list_panel2 and only show one panel.
win.add(item_list_panel2);
win.doLayout();
item_list_store.load();
}
} ]
});
and this menu belong to my window tbar.
when I click record win will show item_list_panel and I want to when I click record2 the item_list_panel2 will show in win and item_list_panel will hide.
If I win.remove(item_list_panel) will have an error :
c.getPositionEl().dom is undefined
How can I do it,Thanks
I can barely understand your question, but if I understand correctly you can do it several ways.
you can destroy the component directly
item_list_panel.destroy()
you can go through your items and select it by id
win.items.item('item_id').destroy()
There are also ways to remove it without completely destroying it, depends what you want to do

Resources