How to prevent a button to be a dropdown menu in tinymce - html

I want to have an editor, that only allows bulleted "disc" lists. Since I only need a single list type, the button should not be a dropdown. How do I specify, that the list button should be a button, not a dropdown?
Current code:
<script>
tinyMCE.PluginManager.add('stylebuttons', function (editor, url) {
['pre', 'p', 'code', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].forEach(function (name) {
editor.addButton("style-" + name, {
tooltip: "Toggle " + name,
text: name.toUpperCase(),
onClick: function () { editor.execCommand('mceToggleFormat', false, name); },
onPostRender: function () {
var self = this, setup = function () {
editor.formatter.formatChanged(name, function (state) {
self.active(state);
});
};
editor.formatter ? setup() : editor.on('init', setup);
}
})
});
});
tinymce.init({
selector: 'textarea',
plugins: "link advlist code stylebuttons",
advlist_bullet_styles: "disc",
target_list: false,
link_title: false,
menubar: false,
statusbar: false,
height: 600,
valid_elements: "p,br,b,i,a,h1,ul,li",
toolbar: 'undo redo | bold, italic | style-h1, bullist | link | code'
});
</script>

Related

How to add listeners to components that are defined within itemTpl?

How to add listeners to components that are defined within itemTpl? For example, if I have a dataview (Ext.view.View) that is bound to a store, and I have defined itempTpl that includes a button and an image, like:
itemTpl: ['<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span>Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg"></div>',
'</div>']
how can I detect that button or image of an item is clicked? I know ho to add listeners to the item, but I would like to detect click event on some inner div or span element of an item.
In addition, I found writing these templates with html very difficult. One of the main advantages of extjs framework is claimed to be exactly hiding html part from the developer. So, I am wondering if there is some better way to display these information with dataview, like including panel or container component as an dataview item.
You can use element delegation:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [{
name: 'src',
type: 'string'
}, {
name: 'caption',
type: 'string'
}]
});
Ext.create('Ext.data.Store', {
id: 'imagesStore',
model: 'Image',
data: [{
src: 'http://www.sencha.com/img/20110215-feat-drawing.png',
caption: 'Drawing & Charts'
}, {
src: 'http://www.sencha.com/img/20110215-feat-data.png',
caption: 'Advanced Data'
}, {
src: 'http://www.sencha.com/img/20110215-feat-html5.png',
caption: 'Overhauled Theme'
}, {
src: 'http://www.sencha.com/img/20110215-feat-perf.png',
caption: 'Performance Tuned'
}]
});
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
itemTpl: new Ext.XTemplate(
'<div class="card" style="padding-left: 32px;">',
'<div><button type="button" class="btn"><span class="btnSpan">Button</span></button></div>',
'<div class="img"><img src="https://www.w3schools.com/css/paris.jpg" class="imgClass"></div>',
'</div>',
),
itemSelector: 'div.card',
emptyText: 'No images available',
listeners: {
itemClick: function (view, record, item, index, e, eOpts) {
console.log(e.target);
const classList = e.target.classList;
if (classList.contains('btn')) {
console.log('btn is clicked');
} else if (classList.contains('btnSpan')) {
console.log('Span in Button is clicked');
} else if (classList.contains('imgClass')) {
console.log('ImgClass is clicked');
}
}
},
renderTo: Ext.getBody(),
});
}
});

Add "Select All'' button to ion-select

I'm using ionic 4 and I want to set custom buttons on ion-select through interfaceOptions
HTML
<ion-item>
<ion-label>Lines</ion-label>
<ion-select multiple="true" [(ngModel)]="SelectedLines" [interfaceOptions]="customAlertOptions">
<ion-select-option [value]="line" *ngFor="let line of Lines">{{linea.Name}}</ion-select-option>
</ion-select>
</ion-item>
TS
customAlertOptions: any = {
buttons: [
{
text: 'Select All',
handler: (blah) => {
console.log('Select All Clicked');
},
{
text: 'No',
handler: (blah) => {
console.log('Confirm Cancel: blah');
}
}, {
text: 'Okay',
handler: () => {
console.log('Confirm Okay');
}
}
]
};
However, only the default buttons are showing (Ok and Cancel)
Docs say it should be possible
https://ionicframework.com/docs/api/select
I can see this has been reported for previous versions of Ionic
https://forum.ionicframework.com/t/custom-button-for-ion-select-through-selectoptions-not-working/157305
Is it possible to make this work on Ionic 4? Is there a workaround?
EDIT: I tried with the PopOver interface with the same results
What you are trying to do isn't possible from what I can see.
The documentation actually only says you can set the buttons text:
ion-select#select-buttons - Ionic Documentation
By default, the alert has two buttons: Cancel and OK. Each button's text can be customized using the cancelText and okText properties.
It doesn't say that the buttons can be customised.
You can pass in the interfaceOptions but its overridden later by the default button set:
https://github.com/ionic-team/ionic/blob/master/core/src/components/select/select.tsx#L339
The code looks like this:
const alertOpts: AlertOptions = {
mode,
...interfaceOptions,
header: interfaceOptions.header ? interfaceOptions.header : labelText,
inputs: this.createAlertInputs(this.childOpts, inputType),
buttons: [
{
text: this.cancelText,
role: 'cancel',
handler: () => {
this.ionCancel.emit();
}
},
{
text: this.okText,
handler: (selectedValues: any) => {
this.value = selectedValues;
}
}
],
cssClass: ['select-alert', interfaceOptions.cssClass,
(this.multiple ? 'multiple-select-alert' : 'single-select-alert')]
};
return alertController.create(alertOpts);
So as you can see the ...interfaceOptions, is passed in at the start, then the buttons are set to the defaults, with the only customisation options being the ok or cancel text.
i am working with AlertController from ionic and i can custom it, just take a look at my screen .
You just need to import AlertController and after you can do something like this for exemple :
home.page.ts
async addAlertHome(adresse: string, lat: string, lon: string) {
const alert = await this.alertController.create({
header: 'Ajouter aux favoris',
message: 'Êtes vous sûr de vouloir ajouter cette adresse à vos favoris ?',
buttons: [
{
text: 'Non',
role: 'cancel',
cssClass: 'secondary'
}, {
text: 'Oui',
handler: () => {
alert.dismiss().then(() => {
this.addFavoriteHome(adresse, lat, lon);
});
console.log('Confirm Okay');
}
}
]
});
await alert.present();
}
And use it where you want on html :
home.page.html
<ion-icon name="heart-empty" (click)="addAlert(location.display_name, location.lat, location.lon)" end>
</ion-icon>
And don't forget on your constructor :
public alertController: AlertController

Ionic project, randomly create an input tag at the top of the screen?

I was developing an ionic project, and when I implement native into my application, when I run the action sheet function it will automatically pop up an input tag in my title bar. why ? Below is my code
problem.html :
<button ion-button (click)="openMenu()"> Upload Photo</button>
<ion-card ng-show="showstartCard" >
<ion-slides pager="true" class="slides">
<ion-slide *ngFor="let photo of photos; let id = index">
<ion-icon ios="ios-add-circle" md="md-add-circle" class="deleteIcon" (click)="deletePhoto(id)"></ion-icon>
<img style="width:30px;height:30px;" [src]="photo" *ngIf="photo" />
</ion-slide>
</ion-slides>
</ion-card>
problem.ts
openMenu() {
let actionSheet = this.actionSheetCtrl.create({
title: 'Choose from',
cssClass: 'action-sheets-basic-page',
buttons: [
{
text: 'Camera',
icon: !this.platform.is('ios') ? 'trash' : null,
handler: () => {
this.takePhoto();
console.log('Delete clicked');
}
},
{
text: 'Album',
icon: !this.platform.is('ios') ? 'share' : null,
handler: () => {
this.takeGallery();
console.log('Share clicked');
}
},
{
text: 'Cancel',
icon: !this.platform.is('ios') ? 'close' : null,
handler: () => {
console.log('Cancel clicked');
}
}
]
});
actionSheet.present();
}
deletePhoto(index) {
let confirm = this
.alertCtrl
.create({
title: 'Sure you want to delete this photo? There is NO undo!',
message: '',
buttons: [
{
text: 'No',
handler: () => {
console.log('Disagree clicked');
}
}, {
text: 'Yes',
handler: () => {
console.log('Agree clicked');
this
.photos
.splice(index, 1);
//return true;
}
}
]
});
confirm.present();
}
takePhoto() {
const options: CameraOptions = {
quality: 50,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
this
.camera
.getPicture(options)
.then((imageData) => {
this.base64Image = "file://" + imageData;
this
.photos
.push(this.base64Image);
this
.photos
.reverse();
}, (err) => {
console.log(err);
});
}
takeGallery() {
this.camera.getPicture({
sourceType: this.camera.PictureSourceType.SAVEDPHOTOALBUM,
destinationType: this.camera.DestinationType.DATA_URL
}).then((imageData) => {
this.base64Image = 'data:image/jpeg;base64,' + imageData;
this
.photos
.push(this.base64Image);
this
.photos
.reverse();
}, (err) => {
console.log(err);
});
}
When I click on the Upload Photo button, it will pop up an action sheet
When i click on the album, it supposed to be run the album at pop up..but I don't know why the project pop an input tag at the top of my html, the Choose Files button. Anyone know what is the reason ??
Here is my console log.
Can anyone know what's make this error ? Please. Thanks !!

FullCalendar doesn't load without window resizing

I am trying to load fullcalendar on tab click. when I click the tab fullcalendar does not load and it load after I resize the window (or click the F12,or open the chrome inspector).
I tried some function like view rendering but it does not work..
how can I refresh view or resize fullcalendar..
or how can I load the fullcalendar on tab click without resizing..
I need help..
I use;
myGenericCalendar: function (id, ajaxSourceUrl, data, eventDataTransform, eventRenderFnc, callbackFnc) {
$(id).fullCalendar('destroy');
$(id).fullCalendar({
eventLimit: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
views: {
agenda: {
eventLimit: 6 // adjust to 6 only for agendaWeek/agendaDay
}
},
draggable: false,
allDayDefault: true,
selectable: true,
selectHelper: true,
ignoreTimezone: false,
select: function (start, end, allDay) {
if (callbackFnc)
callbackFnc();
$(id).fullCalendar('refetchEvents');
},
editable: true,
monthNames: ['Ocak', 'Şubat', 'Mart', 'Nisan', 'Mayıs', 'Haziran', 'Temmuz', 'Ağustos', 'Eylül', 'Ekim', 'Kasım', 'Aralık'],
monthNamesShort: ["Ocak", "Şub", "Mar", "Nis", "May", "Haz", "Tem", "Ağu", "Eyl", "Ekim", "Kas", "Ara"],
dayNames: ["Pazar", "Pazartesi", "Salı", "Çarşamba", "Perşembe", "Cuma", "Cumartesi"],
dayNamesShort: ["Pzr", "Pts", "Sal", "Çrş", "Prş", "Cum", "Cts"],
titleFormat: { month: "MMMM yyyy", week: "MMM d[ yyyy]{ '—'[ MMM] d yyyy}", day: " d MMM yyyy , dddd" },
eventDataTransform: function (eventData) {
if (eventDataTransform)
eventDataTransform(eventData);
return eventData;
},
events: ({
url: ajaxSourceUrl,
data: data
}),
eventRender: function (calEvent, $event) {
if (eventRenderFnc)
eventRenderFnc(calEvent, $event)
return $event;
////$event.find("div.fc-event-inner").prepend('<button class="edit btn btx-xs btn-danger btn-icon tip" data-modelid="' + calEvent.id + '" data-placement="bottom" title="Git" style="width: 20px; height: 17px;" type="button"><i class="icon-remove2"></i></button>');
$(id).fullCalendar('refetchEvents');
},
eventClick: function (event, element) {
if (callbackFnc)
callbackFnc(event, element);
$(id).fullCalendar('refetchEvents');
}
});
},

Jquery Mobile when redirecting or changing url, pages does not have any css

I am working with a backbone, jquery mobile, express app. Everything looks fine when the app starts and works correctly, however, when I click a link or change the url the html renders correctly but no jquery mobile magic appears. It only renders in the login part with a header and footer and format, but when the url changes and I come back, the page loses its css or jquery mobile magic.
define(['views/index', 'views/register', 'views/login', 'views/forgotpassword', 'views/profile',
'views/vinbookDoc', 'models/Account', 'models/Vinbook', 'models/vinBooksCollection'],
function(IndexView, RegisterView, LoginView, ForgotPasswordView, ProfileView,
vinbookDocView, Account, Vinbook, vinBooksCollection) {
var AppRouter = Backbone.Router.extend({
currentView: null,
routes: {
"index": "index",
"login": "login",
"desk/:id": "desk",
"profile/:id": "profile",
"register": "register",
"forgotpassword": "forgotpassword",
"vinbook/:id": "showVinbook"
},
initialize: function(){
$('.back').live('click', function(event) {
window.history.back();
return false;
});
this.firstPage = true;
},
showVinbook: function(id) {
var getCollection = new vinBooksCollection();
getCollection.url = '/accounts/me/vinbook';
this.changeView( new vinbookDocView({
collection: getCollection,
id: id
}));
getCollection.fetch();
},
changeView: function(page) {
this.currentView = page;
$(this.currentView.el).attr('data-role', 'page');
this.currentView.render();
$('body').append($(this.currentView.el));
var transition = $.mobile.defaultPageTransition;
// We don't want to slide the first page
if (this.firstPage) {
transition = 'none';
this.firstPage = false;
}
$.mobile.changePage($(this.currentView.el), {changeHash:false, transition: transition});
},
index: function() {
this.changeView(new IndexView() );
},
desk: function (id){
var model = new Account({id:id});
this.changeView(new ProfileView({model:model}));
model.fetch({ error: function(response){ console.log ('error'+JSON.stringify(response)); } });
console.log('works');
},
profile: function (id){
this.changeView(new IndexView() );
},
login: function() {
this.changeView(new LoginView());
},
forgotpassword: function() {
this.changeView(new ForgotPasswordView());
},
register: function() {
this.changeView(new RegisterView());
}
});
return new AppRouter();
});
require
require.config({
paths: {
jQuery: '/js/libs/jquery',
jQueryUIL: '/js/libs/jqueryUI',
jQueryMobile: '/js/libs/jqueryMobile',
Underscore: '/js/libs/underscore',
Backbone: '/js/libs/backbone',
models: 'models',
text: '/js/libs/text',
templates: '../templates',
jqm: '/js/jqm-config',
AppView: '/js/AppView'
},
shim: {
'jQueryMobile': ['jQuery', 'jqm' ],
'jQueryUIL': ['jQuery'],
'Backbone': ['Underscore', 'jQuery', 'jQueryMobile', 'jQueryUIL'],
'AppView': ['Backbone']
}
});
require(['AppView' ], function(AppView) {
AppView.initialize();
});
login
define(['AppView','text!templates/login.html'], function(AppView, loginTemplate) {
window.loginView = AppView.extend({
requireLogin: false,
el: $('#content'),
events: {
"submit form": "login"
},
initialize: function (){
$.get('/login', {}, function(data){});
},
login: function() {
$.post('/login', {
email: $('input[name=email]').val(),
password: $('input[name=password]').val()
},
function(data) {
console.log(data);
if (!data.error){window.location.replace('#desk/me');}
}).error(function(){
$("#error").text('Unable to login.');
$("#error").slideDown();
});
return false;
},
render: function() {
this.$el.html(loginTemplate);
$("#error").hide();
return this;
}
});
return loginView;
});
Just some more details:
When I change from page or the url to another page, a flash of the rendered website appears and then the css or design disappears.
I think this can solve your problem:
$(document).bind('pagechange', function() {
$('.ui-page-active .ui-listview').listview('refresh');
$('.ui-page-active :jqmData(role=content)').trigger('create');
});