You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
ga('send','pageview');</script><linkhref="visual.css" rel="stylesheet" type="text/css"></head><body><divid="header" class="cf"><aid="logo" href="/"><span>POP</span><span>SCRIPT</span></a><divid="nav" class="cf"><ahref="/v2/docs/index.html"><spanclass="icon-book"></span> DOCS</a><ahref="/v2/demo.html"><spanclass="icon-hand-up"></span> DEMO</a><aid="download" href="/v2/download.html"><spanclass="icon-download"></span> DOWNLOAD</a></div></div><divid="content" class="cf demo"></div><ulclass="visual-tests"><li><p>Non binder pop</p><PSclass="pop"></PS><buttonid="vt-non-binder"></button></li><li><p>binder pop (single in event)</p><PSclass="pop">(with binder)</PS><buttonid="vt-binder-1"></button></li><li><p>binder pop (multiple in event: 'click', 'contextmenu')</p><PSclass="pop">(with binder)</PS><buttonid="vt-binder-2"></button></li><li><p>This should display hello world in bold;</p><PSclass="pop">(parameter:content)</PS><buttonid="vt-basic-1"></button></li><li><p>This should display hello world in bold;</p><PSclass="pop">(parameter:content)</PS><buttonid="vt-basic-2"></button></li><li><p>This should display hello world in bold;</p><PSclass="pop">(parameter:content)</PS><buttonid="vt-basic-3"></button></li><li><p>This should display hello world in bold;</p><PSclass="pop">(parameter:content)</PS><buttonid="vt-basic-4"></button></li><li><p>This pop will check for `beforePopOut` where the developer's decision is to not let the pop be outed (therefore the pop will NOT destroy).</p><i>beforePopOut</i><buttonid="vt-beforepopout-1"></button></li><li><p>This pop will check for `beforePopOut` where the developer's decision is to let the pop be outed.</p><i>beforePopOut in extra_dict</i><buttonid="vt-beforepopout-2"></button></li><li><p>This pop will check for `beforePopIn` where the developer's decision is to not let the pop be created (for a binder) (therefore the pop will not be created).</p><i>beforePopIn</i><buttonid="vt-beforepopin-1"></button></li><li><p>This pop will check for `beforePopIn` where the developer's decision is to let the pop be created (non-binder).</p><i>beforePopIn</i><buttonid="vt-beforepopin-2"></button></li><li><p>This pop will check for `afterPopOut` and that its invoked at the correct moment, and with the correct paramters (curPop and out_type). This also tests the successive manipulation of (animation and animation duration) through inline popscript. There will be dispatch of a pop as soon as the pop is destroyd/hidden.</p><i>afterPopOut, inline popscript</i><buttonid="vt-afterpopout-1"></button></li><li><p>This invoke multiple callbacks for `afterPopOut` with the help of an array of function callbacks as opposed to a single function.</p><i>afterPopOut</i><buttonid="vt-afterpopout-2"></button></li><li><p>This pop will check if a pop can be hidden and shown, with its inner content preserved.</p><i>popHide, popShow</i><buttonid="vt-hide-and-show"></button></li><li><p>This pop will check if a pop can be toggled, with its inner content preserved.</p><i>popToggle</i><buttonid="vt-toggle"></button></li><li><p>This pop will change to a success pop in 1 second, then to an error pop in 2 seconds, then finally back to this original no class (basic) pop in 3 seconds. The transition will be: undefined (which means that the in animation default 'zap-in' should play) for the first, 0ms for the second, and 500ms for the third.</p><i>Pop.changeClass</i><buttonid="vt-change-class"></button></li><li><p>This pop will move: top left -> top right -> bottom right -> bottom left -> auto auto, of the screen. The transitions will be of 400ms each.</p><i>Pop.changeProperties</i><buttonid="vt-inline-and-macros"></button></li><li><p>This will change its position to: right -> left -> right, with no transition</p><i>Pop.changeProperty</i><buttonid="vt-change-pop-prop"></button></li><li><p>Timeline: after 1 second the cancel button disappears, after 2 seconds the cover disappears, finally after 3 seconds both reappear.</p><i>Pop.changeProperty, Pop.changeProperties</i><buttonid="vt-change-pop-prop-n-inline"></button></li><li><p>This is fully draggable</p><i>full_draggable</i><buttonid="vt-drag-1"></button></li><li><p>Drag particular sub element of pop. This pop should be draggable by its header.</p><i>popscript-drag</i><buttonid="vt-drag-2"></button></li><li><p>Drag particular sub element of pop. This pop should be draggable by its footer.</p><i>popscript-drag</i><buttonid="vt-drag-3"></button></li><li><p>Out a pop using a sub element using the popscript-out class.</p><i>popscript-out (class)</i><buttonid="vt-sub-out-1"></button></li><!--lip Out a pop using a sub element using the popOut event handler.
Task Accepts the CSS animation for the entrance of the pop's box. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <http://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma.Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
350
+
Task Accepts the CSS animation for the entrance of the pop's box. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <https://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma.Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
351
351
352
352
Example 'zap-in 2s, fade-in' (yes, no duration is mentioned for the second animation 'fade-in', please read on)
353
353
Default ''
@@ -360,7 +360,7 @@ Click on properties (in red) to view its role.
Task Accepts the CSS animation for the entrance of the pop's cover. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <http://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma. Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
363
+
Task Accepts the CSS animation for the entrance of the pop's cover. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <https://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma. Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
364
364
365
365
Example 'fade-in 1s'
366
366
Default ''
@@ -390,7 +390,7 @@ Click on properties (in red) to view its role.
Task Accepts the CSS animation for the exit of the pop's box. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <http://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma. Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
393
+
Task Accepts the CSS animation for the exit of the pop's box. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <https://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma. Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
394
394
395
395
Example 'zap-in 2s, fade-in' (yes, no duration is mentioned for the second animation 'fade-in', please read on)
396
396
Default ''
@@ -404,7 +404,7 @@ Click on properties (in red) to view its role.
Task Accepts the CSS animation for the exit of the pop's cover. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <http://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma. Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
407
+
Task Accepts the CSS animation for the exit of the pop's cover. The input of the animation is of same format of that of the standard CSS3 animation property. There are multiple ways of entering a CSS3 animation inclusive of all animation subproperties such as keyframe name, delay, curving, duration and more. Refer to the `w3 docs <https://dev.w3.org/csswg/css-animations/>`_ for further details. Remember that multiple animations can be specified with the delimiter of a comma. Please note that supplying a duration for the animation is optional in case you specify the ``duration`` property. And if no animation is desired then input the empty string ''.
0 commit comments