Is there a way to collapse all the functions in a given php file in TextMate?
For example I have two methods:
function index() {
//Sample code
}
function beforeFilter() {
//Sample Code
}
I would like to be able to issue a command where all the methods will collapse to:
function index() { ...
function beforeFilter() { ...
Thanks!
Via the menu:
View > Toggle foldings at Level > All levels
or shortcut:
ALT + ⌘ + 0
Related
So I made a directive for a toggle (drop down) menu in AngularJS. I used the directive for multiple items within the page but I have a small problem. When one item is open and I click another one I want the previous one to close. The event.preventDefault and event.stopPropagation stops the event for the previous item and doesn't close it. Any ideas on how to fix this? Is there a way to perhaps only stop the event within the scope?
app.directive('toggleMenu', function ($document) {
return {
restrict: 'CA',
link: function (scope, element, attrs) {
var opened = false;
var button = (attrs.menuButton ? angular.element(document.getElementById(attrs.menuButton)) : element.parent());
var closeButton = (attrs.closeButton ? angular.element(document.getElementById(attrs.closeButton)) : false);
var toggleMenu = function(){
(opened ? element.fadeOut('fast') : element.fadeIn('fast'));
};
button.bind('click', function(event){
event.preventDefault();
event.stopPropagation();
toggleMenu();
opened = ! opened;
});
element.bind('click', function(event){
if(attrs.stayOpen && event.target != closeButton[0]){
event.preventDefault();
event.stopPropagation();
}
});
$document.bind('click', function(){
if(opened){
toggleMenu();
opened = false;
}
});
}
};
And here's a Fiddle: http://jsfiddle.net/JknUJ/5/
Button opens content and content should close when clicked outside the div. When clicked on button 2 however content 1 doesn't close.
Basic idea is that you need to share the state between all your dropdown submenus, so when one of them is shown, all others are hidden. The simpliest way of storing state (such as opened or closed) are... CSS classes!
We'll create a pair of directives - one for menu, and another for sumbenu. It is more expressive that just divs.
Here is out markup.
<menu>
<submenu data-caption="Button 1">
Content 1
</submenu>
<submenu data-caption="Button 2">
Content 2
</submenu>
</menu>
Look how readable is it! Say thanks to directives:
plunker.directive("menu", function(){
return {
restrict : "E",
scope : {},
transclude : true,
replace : true,
template : "<div class='menu' data-ng-transclude></div>",
controller : function ($scope, $element, $attrs, $transclude){
$scope.submenus = [];
this.addSubmenu = function (submenu) {
$scope.submenus.push(submenu);
}
this.closeAllSubmenus = function (doNotTouch){
angular.forEach($scope.submenus, function(submenu){
if(submenu != doNotTouch){
submenu.close();
}
})
}
}
}
});
plunker.directive("submenu", function(){
return {
restrict : "E",
require : "^menu",
scope : {
caption : "#"
},
transclude : true,
replace : true,
template : "<div class='submenu'><label>{{caption}}</label><div class='submenu-content' data-ng-transclude></div></div>",
link : function ($scope, $iElement, $iAttrs, menuController) {
menuController.addSubmenu($scope);
$iElement.bind("click", function(event){
menuController.closeAllSubmenus($scope);
$iElement.toggleClass("active");
});
$scope.close = function (){
$iElement.removeClass("active");
}
}
}
});
Look thar we restricted them to HTML elements (restrict : "E"). submenu requires to be nested in menu (require : "^menu"), this allows us to inject menu controller to submenu's link function. transclude and replace controls the position of original markup in compiled HTML output (replace=true means that original markup will be replaced with compiled, transclude inserts parts of original markup to compiled output).
When we've done with this, we just say to menu close all your child menus! and menu iterates over submenus, forcing them to close.
We are adding childs to menu controller in addSubmenu function. It is called in submenus link function, thus every compiled instance of submenu adds itself to menu. Now, closing all submenus is as easy as iterating over all children, this is done by closeAllSubmenus in menu controller.
Here is a full Plunker to play with.
I'm trying to send data to the server via Backbone if the users writes or paste a string inside an input text element.
in the Backbone events I thought something like this but it doesn't work:
events:{
"click .close":"closeResults",
"keypress input":"fetchData",
"paste input":"fetchData"
},
fetchData:function (e) {
var $this = this;
window.setTimeout(function () {
if ($.trim(e.target.value).length >= 3) {
console.log(e.target.value);
$this.collection.fetch({data: {limit: 10, term:$.trim(e.target.value)}});
}
}, 0);
}
If you switch to using the keyup event instead of keypress and paste, it will work for pasting via the keyboard ( ⌘ + v or Ctrl + v ) and typing normally.
If you use the input event, it will work even if you right click and paste (in addition to the same expected behavior as keyup).
More info on input:
https://developer.mozilla.org/en-US/docs/Web/API/window.oninput
use keyup and mouseleave (instead of input) event handlers so that it will also work in IE
see also How to detect right mouse click + paste using JavaScript?
events:{
"keyup input":"fetchData",
"mouseleave input":"fetchData"
},
Have a look at
e.originalEvent
_paste_plain_text : function (e) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
}
When I click on a bar of a PanelBar I both select the option as well I toggle it (open / close). Is it possible not to open it but just select and click on the icon for controlling open/close?
I am afraid this is not supported. As a partial work-around you can make the PanelBar expand and select only by clicking the expand arrow like this:
$('#panelbarName>li').on('click',function(e){
if(!$(e.target).is('.k-icon')){
e.stopPropagation();
}
})
Unfortunately there is much more logic to be handled to just select (highlight the item) without expanding it.
$("#panelbar>li").on("click", function (e) {
if ($(e.target).is(".k-i-arrow-s")) {
$("#panelbar").data("kendoPanelBar").expand($(e.target).closest("li"));
}
else if ($(e.target).is(".k-i-arrow-n")) {
$("#panelbar").data("kendoPanelBar").collapse($(e.target).closest("li"));
}
else {
$("#panelbar").data("kendoPanelBar").select($(e.target).closest("li"));
}
e.stopPropagation();
})
How to check if a button is clicked or not in prototype JavaScript?
$('activateButton').observe('click', function(event) {
alert(hi);
});
The code above is not working.
With this button:
<button id="mybutton">Click Me</button>
Use this:
$('mybutton').observe('click', function () {
alert('Hi');
});
Tested and works, here.
You might want to encase it in a document.observe('dom:loaded', function () { }) thingy, to prevent it executing before your page loads.
Also, just an explanation:
The single dollar sign in Prototype selects an element by its id. The .observe function is very similar to jQuery's .on function, in that it is for binding an event handler to an element.
Also, if you need it to be a permanent 'button already clicked' thingy, try this:
$('mybutton').observe('click', function () {
var clicked = true;
window.clicked = clicked;
});
And then, if you want to test if the button has been clicked, then you can do this:
if (clicked) {
// Button clicked
} else {
// Button not clicked
}
This may help if you are trying to make a form, in which you don't want the user clicking multiple times.
How one may do it in jQuery, just for a reference:
$('#mybutton').on('click', function () {
alert('Hi');
});
Note that, the jQuery code mentioned above could also be shortened to:
$('#mybutton').click(function () {
alert('Hi');
});
jQuery is better in Prototype, in that it combines the usage of Prototype's $ and $$ functions into a single function, $. That is not just able to select elements via their id, but also by other possible css selection methods.
How one may do it with plain JavaScript:
document.getElementById('mybutton').onclick = function () {
alert('Hi');
}
Just for a complete reference, in case you need it.
$('body').delegate('.activateButton', 'click', function(e){
alert('HI');
});
Serverside I render a hiddenfield, I then use a jquery widget called flexbox to create a combobox, it creates a input element client side and copies the selected ID (Not text) to the hidden field once you select something in the box.
The problem is that the validation code adds a classname to the hiddenfield when something is wrong with validation, I want it to be added to the input element, can I somehow listen to when the classname is added, or somehove hook into the event and move the classname to the inputfield.
This works but its ugly as hell, would like a better solution
var oldClass = $hdn.attr('class');
setInterval(function () {
if (oldClass != $hdn.attr('class')) {
$input.removeClass(oldClass);
oldClass = $hdn.attr('class');
$input.addClass($hdn.attr('class'));
}
}, 200);
Thanks.
Where I have a hidden element being validated, I add a custom attribute, data-val-visibleid. Then, in jquery.validate.js, I modify the highlight and unhighlight functions by adding the following at the end of both functions:
if ($(element).is(":hidden")) {
var targetId = $(element).attr("data-val-visibleid");
$("#" + targetId).addClass(errorClass).removeClass(validClass);
}
Some people do not like to meddle in jquery.validate.js, but it is usually the easiest method to achieve customizations like this.
UPDATE
I did some research, and discovered that jquery.validate has a nifty setDefault method, where you can override the default functions, such as highlight() and unhighlight. Add the following to your page after the other scripts have been loaded:
$.validator.setDefaults( {
highlight: function (element, errorClass, validClass) {
$(element).addClass(errorClass).removeClass(validClass);
if ($(element).is(":hidden")) {
var targetId = $(element).attr("data-val-visibleid");
$("#" + targetId).addClass(errorClass).removeClass(validClass);
}
},
unhighlight: function (element, errorClass, validClass) {
$(element).removeClass(errorClass).addClass(validClass);
if ($(element).is(":hidden")) {
var targetId = $(element).attr("data-val-visibleid");
$("#" + targetId).addClass(errorClass).removeClass(validClass);
}
}
});
This will override the default functions, without changing the underlying script.
Thanks to Counsellorben i found a good solution, I did it in a slightly different way though.
First i override the default methods in my master object contructor which is is constructed at document.ready. document.ready is however too late and your methods will not trigger when doing a triggering validation from form.valid() it will however trigg when doing a submit (very strange) this code works both for submit and triggered from script
(function() {
var highlight = $.validator.defaults.highlight;
var unhighlight = $.validator.defaults.unhighlight;
$.validator.setDefaults({
highlight: function (element, errorClass, validClass) {
if ($(element).attr("data-val-visualId") != null) {
element = $("#" + $(element).attr("data-val-visualId"))[0];
}
highlight(element, errorClass, validClass);
},
unhighlight: function (element, errorClass, validClass) {
if ($(element).attr("data-val-visualId") != null) {
element = $("#" + $(element).attr("data-val-visualId"))[0];
}
unhighlight(element, errorClass, validClass);
}
});
})();
I found both these answers to be very helpful and just wanted to add for anyone using version 1.9.0 of the Validation plugin that you will need to override the default behavior that ignores hidden fields as detailed in this other post: jQuery Validate - Enable validation for hidden fields