hirse / brackets-outline-list Goto Github PK
View Code? Open in Web Editor NEWExtension for Brackets and Phoenix to display a list of the functions or definitions in the currently opened document.
License: MIT License
Extension for Brackets and Phoenix to display a list of the functions or definitions in the currently opened document.
License: MIT License
Hi, is it possible to add .jsx to the recognised script. It is the same as JavaScript but for Adobe Application.
Thanks, this function list is what was missing from Brackets.
Could be handy for some, if you could outline the differences between this extension and the extension this is based on, https://github.com/crabcode/brackets-outline.
Right now, the only obvious difference is the icons, are there other differences?
Please add ES6 Generators support.
Are not available in the list.
The title is self explanatory. I understand that you're using regex to determine if a string is a function declaration, and the semantics of arrow functions introduce a high level of complexity, but browsers and JS environments are already starting to support arrow functions natively, so this extension should keep up with that.
The extension does not work on .sass files as it doesn't show any CSS selectors in the list (i.e. just some &:hover or backgorund-image entries)
Can you add sorting capability so I can sort by name the functions list. It is much easier for me to find specific function if the functions list is sorted.
I've become dependent on this extension (it's great!), but now that I have to write something in python it seems outline list doesn't work π
Could you please add outline support for python too?
Thank you!
Along this lines, there's a few call to jQuery.off.
As the handler isn't specified, it unbind all others handlers from others extensions. For example, it makes Brackets-git unusable.
Mind a PR for this one?
I could not understand how to make a plugin for the Outline.
So, I opened this issue, as Stylus use, like to have the features as css.
Thanks =D
i.e. when sort is enabled, all functions that start with capital letters go above functions that start with lower case letters
When working with multiple larger functions in a file it would help if the current function you're working on in the editor was highlighted in the Outline.
I've made and example implementation build upon the most recent commit. It probably needs some optimalization, but it clearly shows what I mean.
CSS:
.outline-entry.active {
background: #0F1114;
font-weight: 700;
}
javascript:
var editor_lines = 0;
var onKeyActivity = function ($event, editor, event) {
selectCurrentFunction(editor);
}
var onCursorActivity = function ($event, editor) {
selectCurrentFunction(editor);
}
function selectCurrentFunction(editor) {
var pos = editor.getCursorPos();
if (editor_lines != editor.getLastVisibleLine())
{
console.log('changed');
createList();
}
editor_lines = editor.getLastVisibleLine();
var remove_entries = $("#outline-list ul li");
remove_entries.removeClass('active');
var entry = $("#outline-list ul li").filter(function() {
var id = $(this)[0].id;
var splitted = id.split('_');
var line_start = splitted[splitted.length-2];
var line_eind = splitted[splitted.length-1];
return line_start <= pos.line && line_eind >= pos.line;
});
entry.addClass('active');
}
function updateOutline() {
var currentEditor = EditorManager.getActiveEditor();
$(currentEditor).on('keyup', onKeyActivity);
$(currentEditor).on('cursorActivity', onCursorActivity);
$(currentEditor).on('cursorActivity', onCursorActivity);
showOutline();
createList();
}
function createList() {
var doc = DocumentManager.getCurrentDocument();
if (!doc) {
hideOutline();
return;
}
var lang = languages[doc.getLanguage().getName()];
if (!lang) {
hideOutline();
return;
}
var lines = doc.getText(false).split("\n");
var list = lang.getOutlineList(lines, prefs.get("args"), prefs.get("unnamed"));
if (prefs.get("sort") && lang.compare) {
list.sort(lang.compare);
}
list.reverse();
var last_line = 999999999;
list.forEach(function (entry) {
entry.end_line = last_line;
last_line = entry.line - 1;
});
list.reverse();
$("#outline-list ul li").remove();
list.forEach(function (entry) {
var $entry = $(document.createElement("li"));
$entry.addClass("outline-entry");
$entry.addClass(entry.classes);
$entry.append(entry.$html);
$entry[0].id = 'outline_line_' + entry.line + '_' + entry.end_line;
$entry.click({
line: entry.line,
ch: entry.ch
}, goToLine);
$("#outline-list ul").append($entry);
last_line = entry.line;
});
}
Brackets version : Release 1.3 experimental build 1.3.0-16022 (release cd0a6aae5)
build timestamp: Fri Apr 24 2015 05:29:46 GMT-0700
plugin version : 0.5.1
reproduce : Open Brackets outline panel and resize it vertically.
On latest brackets, mac os x yosemite, can't scroll outline when attached to sidebar, works fine in the other mode though
I have suggestion. Can you do something what is in Sidebar Plus? I mean when i edit some file outline is hidden on right, but i can click on it when i want and select what i want and then when i click again in file to edit something and it hides again. As hidden i mean there are a small bar what you can expand. It could be awesome !
Hey there,
first thanks for this great plugin!
Let's come to the point: When you switch outline position to the left side and you don't maximize your window, you can't scroll down in the way you want to. At first nothing works, but in the second I just can scroll down to a specific position but not to the most bottom place. So few methods at the bottom are missing. If I increase the window height, they come back and appear.
Sometimes I don't want to have a to high height, so if this would work at this behaviour too, it would be perfect.
thumps up
I have problem, the functions like this:
public function findByStatusGreaterThan($status, $criteria = array())
with parameters with default value for example as array() are not listed in outline list.
Amazing extension!
As in you own screenshot to see, the identation dots disapear from the Code Editor.
Maybe related to #3
Hi!
Can you add a top toolbar with outline dropdown?
First of all, thank you very much for this useful plugin!!
i have some kind of issue when listing one of my classes, this class contains this method:
public static function htmlSimplifyWord($text, $allowed_tags = '<h1><h2><h3><h4><h5><p><br><b><i><sub><sup><ul><ol><li>', $allowed_attributes = array('alt', 'href', 'title', 'rowspan', 'colspan', 'src', 'summary', 'class', 'id', 'name', 'title', 'target', 'nowrap', 'rel')) {}
This method is not listed in the plugin, I've copy pasted it in another classes and none could be listed.
I've seen the problem are the tags, removing them it works properly, just in case you need to know it!
Thank you for your work!
When i have for example function like:
public function setCalendarEntry(\XYZ\CoreBundle\Entity\CalendarEntry $calendarEntry = null)
{
$this->calendarEntry = $calendarEntry;
return $this;
}
then its not detected in outline, i guess its cuz of object with namespace in argument ?
I would like to export outline to a text file. Anyway of doing that?
Love this plugin! Nice work! Is there an easy way to add support to show methods within ColdFusion CFC files?
Methods all use the same format:
<cffunction name="myMethod">
<cfargument name="myargument" />
</cffunction>
Hello,
it should be awesome if you could implement PHP objects support to show outline of whole classes for example, something like code explorer in other softwares.
For example:
The Outline List disappears after switching to another Project.
In my case, i switch to a different Project with the top left Project Button.
The Outline List hides, Brackets loads the previously opened Files, but the Outline List is now gone, even if the current selected file could use the Outline List.
A switch to another file and back again is a workaround.
Outline List should check after a Project Switch if the currently opened File in the Editor uses the Outline List.
Especially for javascript, it would be much nicer to have an indented view, so it's easier to see functions defined inside another function.
Hello,
Thank you for this plugin, it is very useful :)
I have a request: when I work with PHP files, every methods are listed like functions.
It would be nice to display it under the class name (or near, or whatever).
David
Know those handy pragma marks you can use in applications like Xcode that show op in the outliner? It really helps to group your functions and make searching through them easier. Could this be implemented with maybe a default comment pattern like a triple forward slash or something? Thanks!
Would like to see in the outline list object (or perhaps just returned objects from a module?) properties that are functions.
Often modules will return an object of the form:
return {
function1: function(foo) {
_doStuff();
},
function2: _doStuff2
};
At the moment, the function1 will appear in the outline, but not function2. Would be great to have both.
Loving this extension, BTW!
Like a markdown but instead of using # for heading it uses =
http://asciidoctor.org/
Hi,
I saw a very important slowdown from keyboard to display on screen with this extension active...
I use a JS file which have a lot of comment...
Is it known issue ?
I could not understand how to make a plugin for the Outline.
So, I opened this issue, as Jade use, like to have the features as html.
Thanks =D
in PHP, javascript, and likely other languages.
Currently, the outline is very limited. The function defined inside a class is not described properly. Each constructor in a PHP is defined as the same name. It may make users confused.
In order to support hierarchical code structure, I suggest a parser instead of using regexp to build such code structure.
Here's an idea for supporting HTML.
It might be possible to support HTML by displaying "key" elements, like only the head, body, and first-level elements within the body, and then keep adding more nesting levels until the outline has become N items long at most. You could do a similar with for SVG.
Just an idea. Other/better ideas are welcome I'm sure.
PHP functions prefixed with an & return their result by reference. Such functions are not currently presented in the outline list.
Hello!
I installed the extension in Ubuntu 14.04, I reloaded Brackets and then, when I try to use the extension, surprise!, didn't work (extension error). How can I solve that?
Thanks for your help :).
In PHP a function declared with a referenced parameter is not shown in the outline sidebar.
// This won't be outlined
private static function getObject(&$item)
// This will be outlined
private static function getObject($item)
This plugin crashes brackets when using long base64-encoded images in e.g. an icons.css
Brackets version: Release 1.2 Build 1.2.0-15697 (release 8f82e2a97)
System: OSX
example with PHP:
public function myFunction(
$param1,
$param2,
$param3
) {
//awesome code
}
this function is not shown in the outline list
I would like to have javascript functions organized by "Class"
For example :
function Person(name,age) {
this.name = name;
this.age = age;
}
Person.prototype.sayHello = function() {
console.log("Hi, my name is " + this.name);
};
Person.prototype.sayAge = function() {
console.log("I am " + this.age + " years old");
};
Is it possible to organize them like this :
Person(name,age)
- Person.sayHello()
- Person.sayAge()
I think your plugin is awesome, but...
It is causing Adobe Extract not to load properly. I uninstalled your plugin and the Extract plugin icon showed back up on the right tool bar. Have posted at Extract repo too.
FYI
Would be a nice touch if the Outline pane would auto-hide when editing a file for which it's unsupported, such as html, markdown (friendly hint ;)), htaccess, plain text, etc.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.