Expanding input

Expanding input allows you to add hidden content, that will be shown on input's click/focus event, to an input element.

Base

Place hidden content within the .expanding-input-content container.

To create a button that will automatically collapse the .expanding-input on click, add the data-collapse="true" attribute to the <button>.
 
 

Sizes

 
  

Initializing

PxExpandingInput plugin has no custom options.

PxExpandingInput plugin is initialized on pre-existing markup.


$('.expanding-input').pxExpandingInput();

Usage


require(['jquery', 'px/plugins/px-expanding-input'], function($) {
  ...
});

Methods

You can call a public method of PxExpandingInput instance using the syntax: 


$('.expanding-input').pxExpandingInput('methodName');

Method name Description
expand Show the .expanding-input-content element.
collapse Hide the .expanding-input-content element.
destroy Destroy the PxExpandingInput instance.

Events

You can subscribe on expanding input events using the syntax: 


$('.expanding-input').on('event.px.expanding-input', function(e) {
  // ...

  // Preventable events can be prevented:
  // e.preventDefault();
});

Events marked with * are preventable.
Event Description
expand* This event is fired immediately when the expand() method is called.
expanded This event is fired when the expanding input has expanded.
collapse* This event is fired immediately when the collapse() method is called.
collapsed This event is fired when the expanding input has collapsed.

Usage

To use PxExpandingInput plugin, you need to include the next scripts:


<script src="path/to/js/pixeladmin/plugins/px-expanding-input.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-expanding-input.js"></script>

Then inject the plugin into your angular application:

angular.module('yourApp', ['px-expanding-input']);

Alternatively, you can include PxExpandingInput plugin using ocLazyLoad plugin:


$ocLazyLoad.load([
  {
    name: 'px-expanding-input',
    files: [
      'path/to/js/pixeladmin/plugins/px-expanding-input.js',
      'path/to/js/pixeladmin/directives/angular-px-expanding-input.js',
    ],
  },
]);

px-expanding-input directive

You can use px-expanding-input directive where you want. And when the scope is destroyed the directive will be destroyed.

 

Instance

You can define instance attribute to get a pointer to PxExpandingInput element: 


<px-expanding-input instance="ctrl.$expandingInput">...</px-expanding-input>
        

function SomeController() {
  // Pointer
  this.$expandingInput = null;

  // ...

  // Then, after the initialization, you can call plugin methods:
  this.$expandingInput('expand');
  this.$expandingInput('collapse');
});

expand

expand option have an angular $watch listener applied to it.

Values:


<px-expanding-input expand="ctrl.expanded">...</px-expanding-input>

Events

Event handlers can be bound using attributes:

  • on-collapse
  • on-collapsed
  • on-expand
  • on-expanded

<px-expanding-input on-collapse="ctrl.collapse" on-expanded="ctrl.expanded">
  ...
</px-expanding-input>
        

function SomeController() {
  this.collapse = function(e) { ... };
  this.expanded = function(e) { ... };
});