I have tried solution given here on the site but it didn't work.
Setting up volume control vertical in video.js
Where I can get best tutorial about video.js.. Any link?
For version 6.2.0:
var options = {
controlBar: {
volumePanel: {inline: false}
},
};
videojs('my-video', options);
Video.js 7.10.2
var player = videojs('my-video', {
controlBar: {
volumePanel: {
inline: false
}
},
});
For video.js 5.x:
var options = {
controlBar: {
volumeMenuButton: {
inline: false,
vertical: true
}
}
};
videojs('player', options);
const options: VideoJsPlayerOptions = {
controlBar: {
volumePanel: {
inline: false,
volumeControl: {
vertical: true
}
}
}
};
This can be done. Please see:
http://jsbin.com/nidevo/2/edit?html,css,output
and
https://github.com/videojs/video.js/issues/942
The howto you cite is for videojs 2.0
Related
I'm trying to set the inactivityTimeout on my video element to shorten the time it takes for the control bar to hide. However, the following doesn't seem to change it:
const opts = {
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
},
inactivityTimeout: 100,
};
videojs(myVideoEl, opts);
When I do this it does work, but I get a warning:
player.options().inactivityTimeout = 500;
VIDEOJS: WARN: this.options() has been deprecated and will be moved to
the constructor in 6.0
Does anyone know why I can't seem to set it using the options?
var player = videojs("sessionsimple-player",{
inactivityTimeout: 100,
controlBar: {
volumePanel: {
inline: false,
vertical: true
},
}
});
Note: Do not use both data-setup and an options object.
https://docs.videojs.com/tutorial-setup.html#options
I have the popup working but sometimes a user clicks the back button on their browser to close the popup.
How can I make the browser back button close a 'magnific-popup' that is already open?
Thanks
After some digging found history.js and then the following
var magnificPopup = null;
jQuery(document).ready(function ($) {
var $img = $(".img-link");
if ($img.length) {
$img.magnificPopup({
type: 'image',
preloader: true,
closeOnContentClick: true,
enableEscapeKey: false,
showCloseBtn: true,
removalDelay: 100,
mainClass: 'mfp-fade',
tClose: '',
callbacks: {
open: function () {
History.Adapter.bind(window, 'statechange', closePopup);
History.pushState({ url: document.location.href }, document.title, "?large");
$(window).on('resize', closePopup);
magnificPopup = this;
},
close: function () {
$(window).unbind('statechange', closePopup)
.off('resize', closePopup);
var State = History.getState();
History.replaceState(null, document.title, State.data["url"]);
magnificPopup = null;
}
}
});
}
});
function closePopup () {
if (magnificPopup != null)
magnificPopup.close();
}
I'm using this solution:
callbacks: {
open: function() {
location.href = location.href.split('#')[0] + "#gal";
}
,close: function() {
if (location.hash) history.go(-1);
}
}
And this code:
$(window).on('hashchange',function() {
if(location.href.indexOf("#gal")<0) {
$.magnificPopup.close();
}
});
So, on gallery open I add #gal hash. When user closes I virtually click back button to remove it. If user clicks back button - everything works fine olso.
This solution does not break back button behavior and does no require any additional plugins.
Comments are welcome.
Just to add to your answer, these are the meaningful lines that I got to work for me.
callbacks:
open: ->
History.pushState({ url: document.location.href }, null, "?dialogOpen")
History.Adapter.bind(window, 'statechange', attemptToCloseDialog)
close: ->
$(window).unbind('statechange', attemptToCloseDialog)
History.replaceState(null, null, History.getState().data['url'])
With attempt being:
attemptToCloseDialog = ->
$.magnificPopup.close() if $.magnificPopup.instance
Since tinyMCE 4 has a big change compared with the previous version, is somebody already tried to integrate extjs 4.* to the new version of the tinyMCE?
Basic integration is quite straightforward to achieve:
Ext.define('TinyMceField', {
extend: 'Ext.form.field.TextArea'
,alias: 'widget.tinymce'
/**
* TinyMCE editor configuration.
*
* #cfg {Object}
*/
,editorConfig: undefined
,afterRender: function() {
this.callParent(arguments);
var me = this,
id = this.inputEl.id;
var editor = tinymce.createEditor(id, Ext.apply({
selector: '#' + id
,resize: false
,height: this.height
,width: this.width
,menubar: false
}, this.editorConfig));
this.editor = editor;
// set initial value when the editor has been rendered
editor.on('init', function() {
editor.setContent(me.value || '');
});
// render
editor.render();
// --- Relay events to Ext
editor.on('focus', function() {
me.previousContent = editor.getContent();
me.fireEvent('focus', me);
});
editor.on('blur', function() {
me.fireEvent('blur', me);
});
editor.on('change', function(e) {
var content = editor.getContent(),
previousContent = me.previousContent;
if (content !== previousContent) {
me.previousContent = content;
me.fireEvent('change', me, content, previousContent);
}
});
}
,getRawValue: function() {
var editor = this.editor,
value = editor && editor.initialized ? editor.getContent() : Ext.value(this.rawValue, '');
this.rawValue = value;
return value;
}
,setRawValue: function(value) {
this.callParent(arguments);
var editor = this.editor;
if (editor && editor.initialized) {
editor.setContent(value);
}
return this;
}
});
Example usage (see fiddle):
Ext.widget('window', {
width: 400
,height: 350
,layout: 'form'
,items: [{
xtype: 'textfield'
,fieldLabel: 'Foo'
}, {
xtype: 'tinymce'
,id: 'tinyEditor'
,fieldLabel: 'Bar'
,value: '<p>Foo</p><p><strong>Bar</strong></p>'
,listeners: {
change: function(me, newValue, oldValue) {
console.log('content changed: ' + oldValue + ' => ' + newValue);
}
,blur: function() { console.log('editor blurred'); }
,focus: function() { console.log('editor focused'); }
}
}]
,bbar: [{
text: 'Get value'
,handler: function() {
var e = Ext.getCmp('tinyEditor');
alert(e.getValue());
}
}]
});
I've created an Ext 4.2.1 plugin for TinyMCE 4.0.20 as well as an associated Sencha Architect extension to easily plug TinyMCE into your Ext 4 apps.
Full details are explained here, along with links to GIT repository:
http://druckit.wordpress.com/2014/03/30/integrating-ext-js-4-and-the-tinymce-4-rich-text-wysiwyg-editor/
ExtJS4: I am having problems while upgrading my application ExtJs version from 3.4.0 to 4.1.1a.
My 3.4.0 version code:
this.jsonStore = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
url: 'rs/environments',
disableCaching: true
}),
restful : true,
storeId : 'Environments',
idProperty: 'env',
fields : [
'ConnectionName', 'Type'
]
});
this.colmodel = new Ext.grid.ColumnModel({
defaults: {
align: 'center'
},
columns: [{
header: Accero.Locale.text.adminlogin.connectionsHeading,
width : 140,
dataIndex: 'ConnectionName'
},
{
header: Accero.Locale.text.adminlogin.connectionTypeHeader,
width : 120,
dataIndex: 'Type'
}]
});
config = Ext.apply({
enableHdMenu: false,
border : true,
stripeRows : true,
store : this.jsonStore,
view : new Ext.grid.GridView(),
header : false,
colModel : this.colmodel,
sm : new Ext.grid.RowSelectionModel({singleSelect: true}),
loadMask: {
msg: Accero.Locale.text.adminlogin.loadingmask
}
}, config);
I made below changes to make application work with ExtJs4.1.1:
var sm = new Ext.selection.CheckboxModel( {
listeners:{
selectionchange: function(selectionModel, selected, options){
// Must refresh the view after every selection
myGrid.getView().refresh();
// other code for this listener
}
}
});
var getSelectedSumFn = function(column){
return function(){
var records = myGrid.getSelectionModel().getSelection(),
result = 0;
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
}
var config = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: this.jsonStore,
defaults: { // defaults are applied to items, not the container
sortable:true
},
selModel: sm,
columns: [
{header: Accero.Locale.text.adminlogin.connectionsHeading, width: 140, dataIndex: 'ConnectionName'},
{header: Accero.Locale.text.adminlogin.connectionTypeHeader, width: 120, dataIndex: 'Type'}
],
loadMask: {
msg: Accero.Locale.text.adminlogin.loadingmask
},
viewConfig: {
stripeRows: true
}
}, config);
With these changes, I am getting the error at my local file 'ext-override.js' saying 'this.el is not defined'.
I debug the code and found that, in the current object this, there is no el object.
ext-override.js code:
(function() {
var originalInitValue = Ext.form.TextField.prototype.initValue;
Ext.override(Ext.form.TextField, {
initValue: function() {
originalInitValue.apply( this, arguments );
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
}
);
})();
Kindly suggest where am I going wrong?
Thanks in advance...
Seriously, use more lazy initialization! Your code is a hell of objects, all unstructured.
First of all, you can override and use the overridden method more easily with something like that (since 4.1)
Ext.override('My.Override.for.TextField', {
override : 'Ext.form.TextField',
initValue: function() {
this.callOverridden(arguments);
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
});
But: The method initValue is called in initField (and this in initComponent) so that you cannot have a reference to this.me because the component is actually not (fully) rendered.
So, this should help (not tested):
Ext.override('My.Override.for.TextField', {
override : 'Ext.form.TextField',
afterRender: function() {
this.callOverridden(arguments);
if (!isNaN(this.maxLength) && (this.maxLength *1) > 0 && (this.maxLength != Number.MAX_VALUE)) {
this.el.dom.maxLength = this.maxLength *1;
}
}
});
But I'm strongly recommend not to use such things within overrides. Make dedicated components which will improve code readibility.
I have used check box model in the grid panel. When i checked the check box i am the checked column value. Now what i need is when i unchecked i need to get that same unchecked value.
var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
selectionchange: function(model, records) {
if (records[0]) {
id = records[0].get('id');
alert(id);
}
}
}
});
Thanks in advance.
Regards,
Riyaz
This is the answer:
var selModel = Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
listeners: {
deselect: function(model, record, index) {
id = record.get('id');
alert(id);
},
select: function(model, record, index) {
id = record.get('id');
alert(id);
}
}
})