I'm making my first open source JS plugin for NPM and want to make it well documented.
But the generated documentation of the class constructor looks too large and goes out of my screen.
class Karaoke {
/**
* Magic happen here.
* #constructor
* #param {HTMLElement} element DOM HTML element that used as a Karaoke instance root element.
* #param {object} options Options for the Karaoke instance.
* #param {object[]} options.tracks An array of tracks for the karaoke.
* #param {string} options.tracks[].url Audio file URL.
* #param {string} options.tracks[].bgImg Background image URL for the current track.
* #param {object[]} options.tracks[].lyrics An array of a track lyrics lines.
* #param {string} options.tracks[].lyrics[].text The text of the lyrics line.
* #param {number} options.tracks[].lyrics[].start The time in milliseconds when lyrics line playing must to begin.
* #param {number} options.tracks[].lyrics[].duration The lyrics line playing duration in milliseconds.
* #param {object[]} options.tracks[].lyrics[].keyframes An array of keyframes for the lyrics line CSS playing animation.
* #param {string} options.tracks[].lyrics[].keyframes[].key A key for the lyrics line CSS playing animation.
* #param {number} options.tracks[].lyrics[].keyframes[].value A value for lyrics line CSS playing animation.
*/
constructor( element, options = {} ) {
What I'm doing wrong? Is there some way to make it more readable?
You could leverage the #typedef (type definition) tag
/**
* #typedef {Object} Keyframe
* #property {string} key A key for the lyrics line CSS playing animation.
* #property {number} value A value for lyrics line CSS playing animation.
*/
/**
* #typedef {object} Lyric
* #property {string} text The text of the lyrics line.
* #property {number} start The time in milliseconds when lyrics line playing must to begin.
* #property {number} duration The lyrics line playing duration in milliseconds.
* #property {Keyframe[]} keyframes An array of keyframes for the lyrics line CSS playing animation.
*/
/**
* #typedef {object} Track
* #property {string} url An array of tracks for the karaoke.
* #property {string} bgImg Background image URL for the current track.
* #property {Lyric[]} lyrics An array of a track lyrics lines.
*/
/**
* #typedef {object} Options
* #property {Track[]} tracks An array of tracks for the karaoke.
*/
class Karaoke {
/**
* Magic happen here.
* #constructor
* #param {HTMLElement} element DOM HTML element that used as a Karaoke instance root element.
* #param {Options} options Options for the Karaoke instance.
*/
constructor( element, options = {} ) {
}
}
Which will generate the following HTML documentation:
When you click on the Options link:
Related
#Override
public void createInitialLayout(IPageLayout layout) {
String editor = layout.getEditorArea();
layout.setEditorAreaVisible(true);
layout.addView(VIEW_EXLPORER, IPageLayout.LEFT, 0.20f, editor);
layout.getViewLayout(VIEW_EXLPORER).setCloseable(false);
IFolderLayout bottom = layout.createFolder("bottom", IPageLayout.BOTTOM, 0.80f, editor);
bottom.addView(VIEW_PROGRESS);
bottom.addView(IPageLayout.ID_TASK_LIST);
bottom.addView(IPageLayout.ID_OUTLINE);
bottom.addView(IPageLayout.ID_PROBLEM_VIEW);
//shows debug view area here
layout.addView("org.eclipse.debug.ui.DebugView", IPageLayout.LEFT, (float) 0.40, layout.getEditorArea());
}
As you see from my code i already have debug view in my custom perspective but eclipse keep promting me to switch to debug perspective when i start debugging automatically which i would like to avoid this programatically since i do now want to confuse my users.
Any way to follow?
You can try to use DebugUITools.setLaunchPerspective to either let the prompt open your custom perspective instead of the default one or disable the prompt at all.
From its Javadoc:
/**
* Sets the perspective to switch to when a configuration of the given type
* is launched in the given mode. <code>PERSPECTIVE_NONE</code> indicates no
* perspective switch should take place. <code>PERSPECTIVE_DEFAULT</code> indicates
* a default perspective switch should take place, as defined by the associated
* launch tab group extension.
*
* In 3.3 this method is equivalent to calling <code>setLaunchPerspective(ILaunchConfigurationType type, Set modes, ILaunchDelegate delegate, String perspectiveid)</code>,
* with the parameter 'mode' used in the set modes, and null passed as the delegate
*
* #param type launch configuration type
* #param mode launch mode identifier
* #param perspective identifier, <code>PERSPECTIVE_NONE</code>, or
* <code>PERSPECTIVE_DEFAULT</code>
* #since 3.0
*/
I want to change the block comment, globally, from
/*
*
*
*/
to
/*
*/
but keep this style:
/**
*
*
*/
How can I do it?
I want to reposition the params docs, I had written the docs for my code earlier. Now I have rearranged the arguments of my method, I want the same to reflect in my docs written above my method. How can I do this, is there any shortcut keys? I don't want to do it manually. I have too many methods.
Earlier code and docs
/** Places the spinner on the screen on specified co-ordinates and customized drop down menu.It can be used for various option selection purpose.
* #param options The list of items the that is to be shown in the spinner's drop down menu.
* #param xCordinate The start point of the this view along x [To be given in cell number].
* #param yCordinate The start point of the this view along y [To be given in cell number].
* #param spinnerTextSize Text size of the text that is displayed on the spinner.
* #param spinnerTextColorCode The color of the text on the spinner,stored in database.[HTML color codes or Hex codes].
* #param spinnerWidth The width of the spinner.
* #param fontSize Text size of the text that is displayed on the spinner's drop down menu.
* #param fontColorCode The color of the text(stored in database) on the spinner's drop down menu.[HTML color codes or Hex codes].
* #param dropDownBackgroundColorCode The background color of the spinner's drop down menu,stored in database.[HTML color codes or Hex codes].
*/
public void spinner( int[] options, int xCoordinate, int yCoordinate, final float spinnerTextSize, int spinnerTextColorCode, int spinnerWidth, float fontSize, int fontColorCode, int dropDownBackgroundColorCode);
Repositioned arguments in the above method
public void spinner(int spinnerId, int xCordinate, int yCordinate, int spinnerWidth, final int spinnerTextSize, float fontSize, int spinnerTextColorCode, int fontColorCode, int dropDownBackgroundColorCode, int[] options)
You can do this using Eclipse's refactoring feature. Here is how:
Right-click on the method you want to change. Refactor -> Change Method Signature... or simply use Alt-Shift-C. In the menu that pops up you can change you method any way you want. In your case you will want to move parameters around. Select a parameter and use the Up and Down buttons to rearrange the list of parameters. This will also rearrange the documentation as long as the parameter names match up.
I would also like to issue some advice. You might want to look into the telescoping anti-pattern and the use of the Builder pattern to get around this pitfall.
Edittted to ad clarity
I am looking to create an HTML5 Video playback that triggers events at specific regularly timed cue-points. For example, I'd like an event to fire every second during video playback that checks the contents of a textbox (i.e. at second1 textbox contained; at second2 textbox contained). The 'tricky' part is that I need it to work across all major platforms/browsers, and that includes IPhones and IPads.
IPhones particularly seem to be a problem in that no matter the player, the setting, the hack I've tried - when a video starts playing, the browser goes to the background and the video is played in a full-screen container (Quicktime?). When the video stops playing and control is back with the browser, I see that the cuepoint events fired, but that's of no use if the textbox is unreachable during video playback!
I am very familiar with FlowPlayer and have already done a bunch of work to ensure it works for playback across most relevant platforms; the cuepoint feature of its API seems to be exactly what we need BUT there's a warning/restriction specific to it:
Be aware that cuepoints are subject to device restrictions regarding the HTML5 video API. On devices which do not support inline video
because they delegate playback to a system component (e.g. QuickTime
on iPhone) the effect of cuepoints is next to none in real world
setups
Has anyone worked with Flowplayer cuepoints OR alternate tech on iPhones/iPads? Obviously, if I can maintain one code base that would be preferrable to having multiple platform-specific versions.
Here is a simple controller for the video element which tracks the timeupdate event fired by the video element to trigger callback functions at the specified timecodes.
It allows you to attach multiple callbacks for the same timecode.
The timeupdate event is fired at different rates on different devices, because of this there is a limitation in that cuepoints can only be attached at integer values so at 5 seconds not 5.5, you can potentially remove this but then there is a risk that the cuepoints will not be triggered
/**
* Function which allows you to register cuepoints to trigger callbacks
* at specific timecodes
* #param {HTMLElement} video_el The video element you want to track
*/
var VideoController = function(video_el){
/**
* The video element this controller is for
* #type {HTMLElement}
*/
this.element = video_el; //
/**
* Object containing all the cuepoints
* #type {Object}
*/
this.cuepoints = {};
/**
* The last processed_timecode so we dont fire events more than once
* #type {Number}
*/
this.processed_timecode = undefined;
/**
* Allows you to trigger a callback at a specific timecode
* #param {Number} timecode The timecode you want to trigger your callback
* #param {Function} callback Your callback function
*/
this.addCuepoint = function(timecode, callback){
//
timecode = Math.floor(timecode);
//
if(this.cuepoints[timecode] === undefined){
this.cuepoints[timecode] = [];
}
this.cuepoints[timecode].push(callback);
return this;
}
/**
* Internal method to track the videos current timecode and to trigger
* the cuepoints when neccesary
* #param {[type]} e A timeupdate event from the video
*/
this.timeupdate = function(e){
var timecode = Math.floor(e.target.currentTime);
// check to see if there is a callback registered for this timecode
if(this.cuepoints.hasOwnProperty(timecode) && this.cuepoints[timecode] !== undefined && this.processed_timecode !== timecode){
//if there is it loops through the array of callbacks and triggers them
for(var i = 0,l=this.cuepoints[timecode].length;i<l;i++){
this.cuepoints[timecode][i]();
}
}
//updates the processed_timecode so we do not fire these callbacks again
this.processed_timecode = timecode;
}.bind(this);
// add addEventListener to the video element to track the video timecode
this.element.addEventListener('timeupdate', this.timeupdate);
return this;
}
var video = document.getElementById('myVideoElement');
var video_controller = new VideoController(video);
video_controller.addCuepoint(2,function(){
console.log('do something at 2 seconds');
});
video_controller.addCuepoint(2,function(){
console.log('do something else at 2 seconds');
});
I've adapted #Irfan 's answer above to use requestAnimationFrame instead of relying on the timeupdate event.
This will allow for a more granular triggering of events on a half second etc, just adjust the .tofixed(1) as appropriate.
This will not likely help you with the iPhones web video restrictions, but for other use cases it should be helpful to anyone else who needs precise triggering or events based on video time.
// Request Animation Frame Shim
// Source: https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var VideoController = function(video_el){
this.element = video_el;
this.cuepoints = {};
this.processed_timecode = undefined;
var self = this;
this.addCuepoint = function(timecode, callback){
var timecode = timecode.toFixed(1);
if(this.cuepoints[timecode] === undefined){
this.cuepoints[timecode] = [];
}
this.cuepoints[timecode].push(callback);
return this;
}
this.rafUpdate = function(timestamp){
var timecode = video_el.currentTime.toFixed(1);
if(!video_el.duration){
requestAnimFrame(self.rafUpdate);
}else if( timecode < video_el.duration ){
requestAnimFrame(self.rafUpdate);
}
if( self.cuepoints.hasOwnProperty(timecode) && self.cuepoints[timecode] !== undefined && self.processed_timecode !== timecode ){
for(var i = 0,l=self.cuepoints[timecode].length;i<l;i++){
self.cuepoints[timecode][i]();
}
}
self.processed_timecode = timecode;
}
requestAnimFrame( this.rafUpdate ); // keeps better time than video.timeupdate
return this;
}
var video = document.getElementById('myvideo');
globalVars['video'] = video;
var video_controller = new VideoController(globalVars['video']);
video_controller.addCuepoint(10.2,function(){
endframe.play();
});
Is it there a property to arrange menu items horizontally AndEngine?
The default layout is vertical, do you know a way to set it horizontal?
There isn't a built it functionality that would arrange menu items horizontally, but check the MenuSceneAnimator class, especially getMenuItemX and getMenuItemY methods. It should be pretty easy to implement your own positioning that will suit your needs.
This is the solution I came up with, I know it can be optimized, but it works.
/**
* Sets menu items layout to horizontal
* #author Lucas Massuh
* #version 1.0
* #since 2015-05-28
* #return returns the "horizontalised" menu, just in case.
* #param menu This should be the menu scene containing all the Menu Items to be set horizontal
* #param padding This is the horizontal padding between each Menu Item
*/ private static MenuScene setMenuLayoutToHorizontal(MenuScene menu, int padding){
if (menu.getChildCount()<=1) return menu;
// Starts at 1 since child[0] position won't be changed
for(int i=1; i<menu.getChildCount();i++){
menu.getChildByIndex(i).setPosition(
//it can be optimized by pre-calculating item's width if they are all equal
menu.getChildByIndex(i-1).getX()+menu.getChildByIndex(i).getWidth()+padding,
menu.getChildByIndex(0).getY());
}
return menu;
}