Dynamic panels

API-Reference
Axure Page | Masters | Dynamic panels | Button shapes and rich text panels | Image map regions

Methods

setVisibility(visibility, easing, duration)

Set dynamic panel's visibility.

Parameters:

• visibility - string value identyfying visibility state: 'hidden' for hiding, empty string or 'visible' for showing
• easing - string identifier of an easing method used (the same as in Axure)
• duration - duration time of a transition in miliseconds (ignored when easing is 'none')
• Default parameters: setVisibility('', 'none', 500)

        // flash panel contents
        var dp = scriptContext.get('dynamic-panel-1');
        // show this panel
        dp.setVisibility();
        // now hide fading
        dp.setVisibility('hidden', 'fade');

setState(state, easingOut, directionOut, durationOut, easingIn, directionIn, durationIn)

Change current state of dynamic panel.

Parameters:

• state - String or numeric value indicating one of panel's states.
• easingOut, easingIn - string identifiers of easing methods used (the same as in Axure)
• directionOut, directionIn - 'left', 'right', 'up' or 'down' (ignored when corresponding easing method is 'none' or 'fade')
• durationOut, durationIn - duration time of a transition in miliseconds (ignored when corresponding easing method is 'none')
• Default parameters: setState(0, 'none', 'up', 500, 'none', 'up', 500)

Example 1.

        // just change to different state
        var dp = scriptContext.get('dynamic-panel-1');
        dp.setState('active');

Example 2.

        // apply a simple state rotator
        var dp = scriptContext.get('dynamic-panel-1');
        var state = 0;
        var stateCount = 5;
        var transitionTime = 500;
        var waitingTime = 1000;

        function rotateStates() {
            dp.setState(state++, 'slide', 'up', transitionTime, 'slide', 'down', transitionTime);
            if (state < stateCount) {
                // schedue next state change iteration
                // we should wait before all transitions complete
                // and add an extra waiting time
                // before starting another turn
                setTimeout(rotateStates, transitionTime * 2 + waitingTime);
            }
        }

        rotateStates();

setNextState(loop, easingOut, directionOut, durationOut, easingIn, directionIn, durationIn)

Change current state of dynamic panel to it's next state.

Parameters:

• loop - Boolean value indicating continuous looping from the last state to the first.
• easingOut, easingIn, directionOut, directionIn, durationOut, durationIn - the same as denoted in the setState()
• Default parameters: setNextState(false, 'none', 'up', 500, 'none', 'up', 500)

        var dp = scriptContext.get('dynamic-panel-1');
        dp.setNextState(true, 'fade');

setPreviousState(loop, easingOut, directionOut, durationOut, easingIn, directionIn, durationIn)

Change current state of dynamic panel to it's next state.

Parameters:

• loop - Boolean value indicating continuous looping from the last state to the first.
• easingOut, easingIn, directionOut, directionIn, durationOut, durationIn - the same as denoted in the setState()
• Default parameters: setPreviousState(false, 'none', 'up', 500, 'none', 'up', 500)

        var dp = scriptContext.get('dynamic-panel-1');
        dp.setPreviousState();

getState()

Returns current state of the dynamic panel as string

        var state = scriptContext.getState();
        if (state === 'idle') {
            scriptContext.setState('active');
        }

getStates()

Returns the array of all possible states for dynamic panel.

        var states = scriptContext.getStates();
        var state = scriptContext.getState();
        // scriptContext.setNextState(true) different way
        scriptContext.setState((states.indexOf(state) + 1) % states.length);

moveTo(x, y, easing, duration)

Changes dynamic panel's absolute position.

Parameters:

• x, y - horizontal and vertical coordinates of new absolute position
• easing - string identifier of an easing method used (the same as in Axure)
• duration - duration time of a transition in miliseconds (ignored when easing is 'none')
• Default parameters: moveTo(0, 0, 'none', 500)

        scriptContext.get('dynamic-panel-1').moveTo(380, 20);

moveBy(x, y, easing, duration)

Changes dynamic panel's position relatively.

Parameters:

• x, y - horizontal and vertical translations of the current position
• easing - string identifier of an easing method used (the same as in Axure)
• duration - duration time of a transition in miliseconds (ignored when easing is 'none')
• Default parameters: moveBy(0, 0, 'none', 500)

        scriptContext.get('dynamic-panel-1').moveBy(0, -50);
        scriptContext.get('dynamic-panel-2').moveBy(200, 100, 'bounce', 1000);

getRect()

Returns a Rectangle object representing dynamic panel's coordinates and dimmensions

Rectangle properties:

• x, y - top left corner coordinates
• width, height - dimmensions
• right, bottom - bootom right corner coordinates
• IntersectsWith(rect) - method evaluating if another Rectangle is intersecting with

        var dragTarget = scriptContext.page.get('bucket/target-area');
        var dragObject = scriptContext;
        if (dragTarget.getRect().intersectsWith(dragObject.getRect()) {
            dragTarget.get('title').setText(dragObject.get('value').getText());
            dragTarget.getOwner().fireEvent('OnCollision', dragObject);
        }