Class: Pafera

Pafera()

Master namespace for all Pafera webpage functions. Note that there are quite a few additions to array and string in paferalib.js that JSDoc doesn't pick up, so be sure to check the source if you don't know where a function is coming from.

Constructor

new Pafera()

Initializes all namespace variables.
Source:

Methods

AbsoluteRect(selector)

Gets the absolute coordiates rect for selector with page offsets
Parameters:
Name Type Description
selector string CSS selector
Source:

Add(selector, html)

Appends the HTML string as the last child of selector
Parameters:
Name Type Description
selector string CSS selector
html string HTML code fragment to append
Source:

AddDelayedEvent(eventname, e, delay)

Adds a delayed event, which is an event that is called only afer a period where no other events have been triggered. This is handy for repeated actions such as the user resizing or scrolling the window.
Parameters:
Name Type Default Description
eventname string The name of the event
e event The event to pass along
delay int 250 The number of milliseconds to delay.
Source:

AddFullScreen(classes, styles, contentlist, options)

Adds an animated layer that covers the entire viewport: the web browser equivalent of a modal dialog. Note that this will not cover up any sidebars. If you don't want sidebars visible, hide them with P.SetLayout() before calling this function. Consistently used by EditPopup(), since many forms take up the whole screen.
Parameters:
Name Type Description
classes string Additional CSS classes for the layer
styles string Additional CSS styles for the layer
contentlist string A string or list of strings containing the content of the layer
options object An optional object which may contain
noanimation
Set to true to have the layer appear instantly rather than slide in from the left
Source:

AddHandler(eventname, func, priority)

Adds a handler for custom events such as pageload or orientationchange
Parameters:
Name Type Default Description
eventname string The custom event to listen for
func function The handler with signature func(event)
priority int 0 An int indicating the order in which this handler should be called relative to other handlers.
Source:

AddLayer(selector)

Helper functions for stack control of popups and fullscreen layers.
Parameters:
Name Type Description
selector string Adds the selector to the top of the stack
Source:

AddLazyLoad()

Uses the Intersection Observer API to handle lazy loading. Thanks to https://web.dev/lazy-loading-images/#:~:text=Chrome%20and%20Firefox%20both%20support%20lazy-loading%20with%20the,other%20images%20when%20the%20user%20scrolls%20near%20them.
Source:

AddTimer(name, timeout, func)

Adds an explicitly named timer. Handy if you need a bunch of simultaneous timers.
Parameters:
Name Type Description
name string The name for the timer
timeout int The timeout in milliseconds
func function The function to call
Source:

(async) AddUserToGroup(userid, group)

Adds the userid to the current user's groups for easy communication.
Parameters:
Name Type Description
userid string The ID code of the user to add
group string The name of the group, which should be acquaintances, friends, favorites, or blacklist.
Source:

AJAX(url, data, settings)

The underlying function for all API calls, which is basically a wrapper around XMLHttpRequest().
Parameters:
Name Type Description
url string The API url
data object The data to send to the server
settings object An optional dict containing
method
get or post
timeout
The number of seconds to wait for a reply before failing
Source:

Animate(updatefunc, duration, timing)

Uses requestAnimationFrame() to smoothly animate an element. Thanks to javascript.info for the basic idea.
Parameters:
Name Type Description
updatefunc function The function to call to do the animation
duration int How long the animation will last in milliseconds
timing function One of the Pafera timing functions such as P.LinearTiming
Source:

(async) API(url, data, options)

Sends a request to url with data as the payload. Will return a JSON dict while checking for connection timeout and HTTP status error codes. If something doesn't work, then this will throw an Error object. By default, this will use POST, but if you set options.method to GET, then this function will automatically append anything in data as a query string to the end of url. The returned data will automatically be converted to a JSON dict, and the 'error' key will be checked to see if an error needs to be thrown. This version has no visual indication at all, so you should use P.LoadingAPI() or P.DialogAPI() if you want the user to know that something is happening.
Parameters:
Name Type Description
url string The API url
data object The data to send to the server
options object An optional dict containing settings to pass to the underlying fetch() API, and the additional settings
timeout
The number of seconds to wait for a reply before failing
Source:

ArcTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

AutoSetGridColumns(selector, griditemwidth)

For some dynamically created elements, it seems that CSS rules aren't automatically applied as usual. Call this function to manually update the number of CSS grid columns inside this element.
Parameters:
Name Type Description
selector string CSS selector of the grid
griditemwidth int How wide each item should be in ems
Source:

BestTranslation(translations, langcode)

Return the best possible translation from a dict of translations. If nothing is found, then returns double hyphens to indicate that the text has not been translated yet.
Parameters:
Name Type Default Description
translations object An object containing language codes as the keys and the translation texts as the values
langcode string 0 An explicit langcode to look for
Source:

BounceTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

Busy(selector, func)

A utilty function to show a busy icon when a selector is clicked. Useful for long operations when you want to tell the user that the operation has started but might take some time to finish. You must have a blank image with the class BusyIcon within the selector.
Parameters:
Name Type Description
selector string CSS selector
func function The click handler with the signature func(event, element)
Source:

CancelBubble(e)

Stops the default behavior for the current event.
Parameters:
Name Type Description
e event event to cancel
Source:

CancelRecording()

Cancels a previously started recording
Source:

CaptureMousePos(e)

Helper function used by the popup handlers for the closeonmouseout functionality
Parameters:
Name Type Description
e event
Source:

ChooseFileField(el)

Helper function to show a chooser for the file field. Requires /system/paferachooser.js to be loaded.
Parameters:
Name Type Description
el DOMElement The file field element
Source:

(async) ChooseLanguage(langcode)

Sets the current language and reloads the page with the right language code.
Parameters:
Name Type Description
langcode string A language code enabled in the system.
Source:

(async) ChooseLanguagePopup(e)

Shows a popup with the most dominant flags for each language. Yes, I know that languages and flags aren't the same thing, but that is the most common way for visitors to notice a language, so that's what we're sticking with.
Parameters:
Name Type Default Description
e event 0 An event to show the popup next to the target, or false to show the popup in the center of the screen like normal.
Source:

ChoosePage(start, limit, count, listfunc)

A helper function for P.PageBar() that shows a popup for manual page entry.
Parameters:
Name Type Description
start int The current position
limit int items per page
count int The total number of items
listfunc string a function name with the signature func(newstart) that will be called whenever the user chooses a new chunk.
Source:

ClearFileField(fieldname, newvalue, additionalids, fileobjs)

Helper function for the EditPopup() file fields to show a newly chosen file.
Parameters:
Name Type Description
fieldname string The name for the file field
newvalue string The short code for the new file
additionalids list A list of short codes for multiple select file lists
fileobjs list A list of objects containing the information for each file.
Source:

ClearHandlers(eventname)

Clear all handlers for eventname, or leave eventname blank to clear every registered handler on the page.
Parameters:
Name Type Description
eventname string
Source:

ClearTimer(name)

Removes the timer created by P.AddTimer()
Parameters:
Name Type Description
name string The name for the timer
Source:

ClosePopup(selector)

Closes the popup with a nice animation
Parameters:
Name Type Description
selector string CSS selector of the popup
Source:

ClosePopupOnMouseOut(elements, closefunc)

Helper function to automatically close the popup in elements when the mouse cursor moves out of its boundaries or the user taps somewhere else.
Parameters:
Name Type Description
elements list A list of DOM elements to examine
closefunc function An option handler that is triggered when an element is closed with the signature func(element)
Source:

ClosePopupOrFullScreen(selector)

A convenience function to close a popup or remove a full screen layer depending on the selector class.
Parameters:
Name Type Description
selector string CSS selector of the element.
Source:

CloseThisPopup(selector)

Closes the popup containing selector
Parameters:
Name Type Description
selector string CSS selector of the popup or an element inside the popup
Source:

CloseTopLayer(closeall)

Closes the topmost layer. Normally bound to the escape key. Helper functions for stack control of popups and fullscreen layers
Parameters:
Name Type Default Description
closeall bool 0 Set to true to close all layers instead of just the topmost one.
Source:

CodeDir(code)

Separates a short code into segments of three character directory names. Useful for not having millions of files in a single directory.
Parameters:
Name Type Description
code shortcode
Source:

ComboBox(selector, name, dict, defaultkey)

Creates a combobox widget in selector, which is basically a text control with a select beside it allowing the user to choose the value from a list of options or manually type in the value.
Parameters:
Name Type Description
selector string CSS selector
name string name for the input element
dict object A set of value: displayname pairs to populate the select with.
defaultkey string The default value for the select
Source:

(async) ConfirmDeletePopup(objname, deletefunc)

Your typical "Do you *really* want to delete this?" confirmation dialog.
Parameters:
Name Type Description
objname string The name of the object to delete
deletefunc function The function called to do the actual deletion with a signature func(resultsdiv)
Source:

CosTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

Debug(message)

Old fashioned printf() style debugging at the bottom of the page.
Parameters:
Name Type Description
message string message to print.
Source:

(async) DialogAPI(apiurl, data, options)

A version of P.API() which will show a loading indicator in a popup and displays any errors inside of the same popup. In case of error, this will return undefined instead of throwing an error.
Parameters:
Name Type Description
apiurl string The server URL to send the data
data object The data to send
options object An options object to pass to P.API(). Set the key dontshowsuccess if you want to handle your own visual effects.
Source:

DoneTyping(selector, func, timeout)

Calls func with the selector element timeout milliseconds after the last input event. Useful for confirming user actions without having them explicitly pushing a confirm button.
Parameters:
Name Type Description
selector string The CSS selector to bind to
func function The function to run with the signature func(element, event)
timeout int How long to delay before triggering the function.
Source:

(async) EditPopup(fields, onsuccess, options)

The main function to interface with the database API, EditPopup() has a variety of options to faciliate entering data through a web interface. This will also automatically convert DATETIME fields from UTC time to local time when displaying, and local time to UTC time when sending data, so be aware of this automatic conversion.
Parameters:
Name Type Description
fields list fields are a list of arrays in the format 
   [
     fieldname, 
     fieldtype, 
     displayname, 
     value, 
     placeholdertext, 
     additionalattributes
   ]

fieldtype can be one of the following

text
Your garden variety single line text input
multitext
A textarea
int
Integer values
float
Real number values
select
Choose values from a list
combobox
Select/text combination
datetime
Local date/time: the only datetime control left in HTML 5
newlinelist
A list where every line is a different value
json
Standard JSON format in a textbox
rating
Choose how many stars to give
file
Choose a file from the filesystem
imagefile
Choose from uploaded images or upload your own
soundfile
Choose from uploaded sounds or upload your own
videofile
Choose from uploaded video or upload your own
filelist
Choose multiple files to include
translation
Write different values for each language with a handy select control
bitflags
Turn flags on or off with toggle buttons
radioflags
Turn flags on or off with toggle buttons where only one value is valid
custom
Make your own field after the form is displayed. There will be a selector with the class fieldname + 'Div' for you to use.
onsuccess function A handler when the user presses the finished button with the signature async func(formelement, formdata, resultsdiv, event, saveandcontinue) onsuccess should return true if it was successful so that this function may automatically close any popups or fullscreen layers.
options object The most commonly used ones are
enabletranslation
Set to true to enable translation fields
formdiv
Places the form inside of this selector instead of creating a new popup
classes
Extra CSS classes for the form element
fullscreen
Enable to use a full screen form instead of a regular popup
cancelfunc
Handler for when the user cancels the form
afterdisplayfunc
Place your custom field logic here
beforesavefunc
A handler to alter the data before it's sent to the server
extrabuttons
Extra buttons to place alongside the normal Finished, Reset, and Back buttons
headertext
A header bar for the form
Please look at the code to see what else is available.
Source:

EditThis(selector, onsuccess)

A convenience function to show a popup to change the innerText of a selector. Useful for spreadsheet interfaces.
Parameters:
Name Type Description
selector string CSS selector
onsuccess function handler when the user confirms the change with the signature func(element, newvalue)
Source:

Emit(element, eventName, options)

Emulates an event and dispatches it on element. Thanks to http://stackoverflow.com/questions/6157929/how-to-simulate-a-mouse-click-using-javascript
Parameters:
Name Type Description
element DOMElement The element to receive the event
eventName string The event to emulate. Look at the source for all of the possible names.
options object All of the normal event properties such as x and y position, keys, buttons, and so forth. See the source for a comprehensive list.
Source:

EMSize(selector)

Gets the size of an em for sizing calculations. Note that this function will not work until the page has fully loaded, so use it only after the pageload event.
Parameters:
Name Type Description
selector string An optional CSS selector to examine instead of the page body.
Source:

Enable(selectors, enable)

Convenience function to add or remove Disabled from a set of elements.
Parameters:
Name Type Description
selectors list A set of strings containing CSS selectors to search for.
enable bool Set to true to remove the Disabled class, whereas false will add the Disabled class.
Source:

ErrorPopup(content, options)

A popup with a nice error icon.
Parameters:
Name Type Description
content string The contents of the popup
options object Options to pass to P.MessageBox(), or an empty object by default.
Source:

EscapeHTML(html)

Returns a string where HTML entities are converted.
Parameters:
Name Type Description
html string HTML text fragment
Source:

EvalScripts(d)

Used for AJAX pages, this function resets all handlers, shows or hides sidebars, and loads new scripts, essentially creating a new page without completely reloading.
Parameters:
Name Type Description
d object An object containing the new page
Source:

FileURL(idcode)

Convenience function to return the base path for an already uploaded file given its short code. Note that you must add the extension to the returned path.
Parameters:
Name Type Description
idcode string The short code of the file.
Source:

Fill(selector, ls)

Fills the selectors' innerText with the text or list in ls.
Parameters:
Name Type Description
selector string CSS selector.
ls string string or list of strings to replace innerText with.
Source:

FlagToToggle(value, onflag, offflag)

Utility function used for bitflag datasets.
Parameters:
Name Type Description
value value The value of the field
onflag value The bit value considered on
offflag value The bit value considered off
Source:

FlexInput(selector)

Creates a textarea which automatically resizes itself as you type. Handy for minimal forms which can expand for more complex content.
Parameters:
Name Type Description
selector string The CSS selector to place the textarea in
Source:

ForceReloadPage()

Force reload of the page
Source:

FormToArray(selector, overwrite)

Converts all input elements in a form to a JavaScript object. Will even convert dotted multilevel names such as <input name="animals.felines.numcats" value="5"> into obj['animals']['felines']['numcats'] = 5
Parameters:
Name Type Default Description
selector string CSS selector
overwrite bool 0 If enabled, the value to store will be added to a list containing all previous values. Otherwise, it will overwrite the previous value.
Source:

FullScreenRect()

Calculates the dimensions of a fullscreen layer, taking into account the different sidebars present.
Source:

GetEditor(name)

Gets an existing CKEDITOR instance by name
Parameters:
Name Type Description
name string The name of the CKEDITOR instance
Source:

GetLocation(callback)

For use on mobile devices, returns the current position of the user.
Parameters:
Name Type Description
callback function A handler which receives the coordinates with signature func(coordinates)
Source:

GetQueryStrings(url)

Returns a dict object of all of the query parameters for url, or the current page's URL if nothing is passed.
Parameters:
Name Type Description
url string An URL to parse
Source:

GetSelectedRadioButton(selector, buttons, onchangefunc)

Creates a group of radio buttons, which is a set of buttons where clicking on one turns all of the other buttons off. When more than eight buttons are used, this will automatically turn into a select control instead.
Parameters:
Name Type Description
selector string CSS selector
buttons list A list in the format [title, value, selected, classes]
onchangefunc function An optional handler with the signature func(element, newvalue)
Source:

GetSelectorObj(selector)

Retrieves the object with an ID stored in the element's dataset.objid property. Used by EditPopup() to simplify saving object data that is not easily stuffed in input elements.
Parameters:
Name Type Description
selector string CSS selector
Source:

GotoPage(limit, listfunc)

Helper function for P.ChoosePage() which goes straight to the page requested in the popup
Parameters:
Name Type Description
limit int The number of items per page
listfunc string The name of a function with signature listfunc(newstart) that is called to load the next page.
Source:

HasGroup(group)

Check if the current user is part of the current group.
Parameters:
Name Type Description
group string The game of the group to test for
Source:

HeadShotImg(idcode, classes)

Returns an img tag for the headshot of an user.
Parameters:
Name Type Description
idcode string The user's short code
classes string extra classes for the image.
Source:

HeadShotURL(idcode, classes)

Returns an img tag for the headshot of an user.
Parameters:
Name Type Description
idcode string The user's short code
classes string extra classes for the image.
Source:

Hide(selector)

Removes a selector from view
Parameters:
Name Type Description
selector string CSS selector
Source:

HideThisDiv(e)

Helper function for MakeAccordion()
Parameters:
Name Type Description
e event
Source:

HideTopBar(e)

Helper function to automatically hide the topbar when the user scrolls down, then show it again when the user scrolls up like how Chrome on Android works. Unfortunately, it seems that certain browsers don't play well with this code, so we leave it disabled for now.
Parameters:
Name Type Description
e event The scroll event
Source:

HighlightTab(selector)

Helper function for navigation bar tabs which automatically highlight the current URL
Parameters:
Name Type Description
selector string CSS selector of the navbar
Source:

HTML(selector, ls)

Fills the selectors' innerHTML with the text or list in ls.
Parameters:
Name Type Description
selector string CSS selector.
ls string string or list of strings to replace innerText with.
Source:

HTMLToDOM(html)

Turns a HTML text fragment into DOM objects
Parameters:
Name Type Description
html string HTML text fragment
Source:

ImgFile(idcode, classes, attrs)

Returns an img tag given the short code of a file.
Parameters:
Name Type Description
idcode string The short code of the file.
classes string extra classes for the img tag.
attrs string extra attributes for the img tag.
Source:

(async) InputPopup(title, onfinished, inputelement, options)

A generic popup for getting one single input from the user.
Parameters:
Name Type Description
title string Title for the popup's title bar
onfinished function Function to be called when the user clicks on "Finished" with signature func(value). If the user cancels, then this function is never called.
inputelement string HTML code for the input element, or blank for the default text input. The input element must have the CSS class "InputPopupInput".
options object Extra options to pass to the Popup() function
Source:

InterceptHREF()

Overrides all normal links in favor of AJAX page handling. If you want a link to proceed normally, set data-nointercept on the a tag.
Source:

InverseArcTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

InversePowTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

IsAdmin()

Returns true if the current user is an administrator.
Source:

IsVisible(selector)

Returns true if the selector is currently visible
Parameters:
Name Type Description
selector string CSS selector
Source:

LanguageSelect(name, value, classes)

Creates a select with all of the languages enabled in the system. Used by the enabletranslation option in P.EditPopup()
Parameters:
Name Type Description
name string Name of the input
value string The current value of the field
classes string CSS classes to add to the select
Source:

(async) LazyLoad()

For large pages, lazy loading allows the page to appear faster by loading resources only as they come into view.
Source:

LinearTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

Loading(selectr, text)

Shows a centered loading image in the selector to indicate that the user should wait for an operation to complete.
Parameters:
Name Type Description
selectr string CSS selector
text string Optional text to display along with the loading GIF
Source:

(async) LoadingAPI(resultsdiv, apiurl, data, options)

A version of API which will show a loading indicator in selector, and displays any errors inside of the same selector. In case of error, this will return a failed promise.
Parameters:
Name Type Description
resultsdiv string A selector to show the loading indicator and results
apiurl string The server URL to send the data
data object The data to send
options object An options object to pass to P.API(). Set the key dontshowsuccess if you want to handle your own visual effects.
Source:

(async) LoadingDialog(extraclasses)

Displays a dialog with a loading indicator. Will return the CSS selector of the popup so that you can call P.ClosePopup() on it when you are done with your operation.
Parameters:
Name Type Description
extraclasses string CSS classes for the loading dialog
Source:

(async) LoadURL(url, contentonly, options)

Used for AJAX pages, this function will load only what is needed to change the page to its new state.
Parameters:
Name Type Description
url string The URl to get information for the new page
contentonly bool To refresh the whole page or only new content
options object An optional dict containing
title
The new page title
content
The main content for the new page
contentfunc
A function to call to get the content for the new page with signature func(data, contentdiv)
data
An object containing page information
contentdiv
A custom selector to fill with page information rather than the standard .PageBodyGrid
nopushstate
Enable to keep the URL the same instead of changing it with history.pushState()
Source:

MakeAccordion(selector)

Accordions are widgets that hide or show their contents when clicked like Wikipedia uses. This is the Pafera version.
Parameters:
Name Type Description
selector string CSS selector
Source:

MakeButtonBar(selector, buttons)

An alternative way to create the standard Pafera toolbar by placing the controls into selector.
Parameters:
Name Type Description
selector string CSS selector
buttons list a list of arrays in the format [buttontext, buttontype, buttoncolor, buttonclasses]
Source:

MakeCalendar(selector, datestring, onchangemonthfunc, ondayclickfunc)

Creates a clickable, changeable calendar widget
Parameters:
Name Type Description
selector string The selector to create the calendar in
datestring string A string containing the date to display
onchangemonthfunc function A handler for when the user chooses another month with signature func(selector, monthnumber)
ondayclickfunc function A handler for when the user clicks on a day with signature func(element, datenumber, event)
Source:

(async) MakeCaptcha(selector)

Pafera captchas consist of clicking a button that says "I'm human." The magic is getting a randomized prompt from the server to send to the JavaScript eval() function for verification.
Parameters:
Name Type Description
selector string The CSS selector to place the captcha.
Source:

MakeContextMenu(items, options)

Creates a standard gray context menu function which accepts an event and popups up a context menu at its location.
Parameters:
Name Type Description
items list A list of text strings to display or a function that returns a list of a elements with the "ContextMenuItem" class and has signature func(element, event)
options object An optional object which may contain
topclass
The topmost CSS class of the popup
width
the width of the popup
Source:

MakeDraggable(selector)

A simple function to make a popup draggable. The selector must have position: absolute set.
Parameters:
Name Type Description
selector string CSS selector of the popup
Source:

MakeDrawableCanvas(selector)

Converts a canvas into a drawing surface where the mouse or a finger can be used to make crude drawings. See /learn/classroom.js for an implementation of this with colors. Be aware the canvas coordinates must match its page client rect, so if you resize the canvas element, you must resize the canvas dimensions as well.
Parameters:
Name Type Description
selector string CSS selector of the canvas
Source:

MakeEditTags(selector, taglist, savefunc)

System level tagging functions. Usable for any object.
Parameters:
Name Type Description
selector string CSS selector for the tags
taglist list Existing tags for the object
savefunc function Handler for saving the updated tags with signature func(selector, taglist)
Source:

MakeEditTagsContent(selector, taglist)

Helper function for MakeEditTags to show more tags on click
Parameters:
Name Type Description
selector string CSS selector of the tags widget
taglist list A list of strings depicting the new list of tags to render.
Source:

(async) MakeFileFields(selector)

Helper function for EditPopup() which handles the imagefile, soundfile, videofile, and filelist fields
Parameters:
Name Type Description
selector string The selector containing the file field
Source:

MakeFileProgressHandler(filenum)

Helper functions for UploadFilePopup() to show progress
Parameters:
Name Type Description
filenum int The number of the file to update
Source:

(async) MakeFloatingButton(selector, content, onclick)

Creates a button that floats above the normal page and can be moved around by the user. Handy for quick action access.
Parameters:
Name Type Description
selector string CSS selector
content string The contents of the button
onclick function A handler with the signature func(event)
Source:

MakeFullEditor(selector, options)

Creates a CKEDITOR instance in selector
Parameters:
Name Type Description
selector string The CSS selector to use
options object Options to pass to the CKEDITOR instance
Source:

(async) MakePlayButtons(selector)

Turns a selector into an audio control.
Parameters:
Name Type Description
selector string CSS selector
Source:

MakeProgressBar(selector, options)

Creates a progressbar widget in selector. Use P.SetProgressBarValue() to change the value after creation.
Parameters:
Name Type Description
selector string CSS selector
options object Set title to give the progressbar a label. Set showvalue to show a numerical value in addition to the bar.
Source:

MakeRadioButtons(selector, buttons, onchangefunc)

Creates a group of radio buttons, which is a set of buttons where clicking on one turns all of the other buttons off. When more than eight buttons are used, this will automatically turn into a select control instead.
Parameters:
Name Type Default Description
selector string CSS selector
buttons list A list in the format [title, value, selected, classes]
onchangefunc function 0 An optional handler with the signature func(element, newvalue)
Source:

MakeRange(selector, classes, min, max, value, title, onchange)

Creates a clickable range widget in selector.
Parameters:
Name Type Default Description
selector string CSS selector to use
classes string Extra classes for the meter element
min number The minimum value
max number The maximum value
value number The current value
title string An optional title for the control
onchange function 0 A handler when the user clicks on the widget with the signature func(element, newvalue)
Source:

MakeSlideShow(selector, options)

Creates that ever popular website feature, the slideshow.
Parameters:
Name Type Description
selector string CSS selector to put the slideshow in
options object An optional dict which may contain
keycontrol
Enable to permit the user to use the keyboard to switch between slides.
Source:

MakeSortableTable(selector, onchangefunc)

Adds an event handler to a table where you can click buttons to move rows up or down. You should add and style the up or down tds yourself such as <td data-action="up">Move Up</td> <td data-action="down">Move Down</td>
Parameters:
Name Type Default Description
selector string CSS selector
onchangefunc object 0 An optional handler when the change has finished with the signature func(element, event)
Source:

MakeTabs(selector, tabs)

Similar to MakeRadioButtons(), this function will create a tab widget on medium or large screens, and a select element on small screens. You'll need to have a set of elements each with the class value + 'Tab' for this widget to show and hide depending on the user input.
Parameters:
Name Type Description
selector string CSS selector to put the tabs in
tabs list A list of [value, display] arrays. When the user selects a tab, every element with the '.Tab' class will be hidden, and the element with class value + 'Tab' will be shown.
Source:

MakeTimeTicker(selector)

Utility function to make a countdown display.
Parameters:
Name Type Description
selector string The element to display the countdown time in. The remaining time in seconds should be placed in data-value attribute.
Source:

MakeToggleButtons(selector, buttons, options)

Creates a set of toggle buttons inside selector.
Parameters:
Normally, toggle buttons are either on or unset. Tritoggle buttons have an additional off state.
ontoggle
A handler called whenever a button is togged with the signature func(element, buttonname, newstate)
noicon
Disable the default icons showing the button state
classes
Extra CSS classes for all buttons
Name Type Description
selector string The CSS selector to use
buttons list An array such as 
   [
     [displaytext, buttonname, bitflagvalue, state, extraclasses]
   ]
Value is the bit for this name used in normal bitflags. For advanced use, state can be used to manually set 'on', 'off', or 'unset'. extraclasses are CSS classes to add to the button.
options object A dict containing optional settings
tritoggle
Source:

MakeWizard(selector, pages)

Creates an old Win95 style wizard for complicated tasks.
Parameters:
Name Type Description
selector string CSS selector to put the wizard in
pages list A list of arrays in the format [id, headertext, content, onselectfunc] id is used for the pages' CSS selector, so only characters allowed in selectors should be used. onselectfunc is optional, but is called when the page appears and has signature func(selector, id).
Source:

(async) MessageBox(content, buttons, options)

A generic messagebox for informing the user that something has happened.
Parameters:
Name Type Description
content string The contents of the messagebox
buttons list A list of buttons in the format [buttontext, onclickfunc]
options object Set popupclass to explicitly set the class for the popup.
Source:

MousePos()

Returns the last position of the mouse as recorded by the system
Source:

MoveDown(el, selector, onfinished)

Moves the child element down one position. Useful for rearranging table rows or cards.
Parameters:
Name Type Description
el DOMElement The element to be moved
selector string An optional parent class to be moved instead of el like a tr or card
onfinished function An optional handler when the move is complete with the signature func(element)
Source:

MoveOnDrag(e)

Helper function to create draggable elements
Parameters:
Name Type Description
e event
Source:

MoveUp(el, selector, onfinished)

Moves the child element up one position. Useful for rearranging table rows or cards.
Parameters:
Name Type Description
el DOMElement The element to be moved
selector string An optional parent class to be moved instead of el like a tr or card
onfinished function An optional handler when the move is complete with the signature func(element)
Source:

NoPaste(selector)

A handy function to disable all non-typing input events. Very useful when you're trying to stop a student from copying and pasting his or her way to looking smart.
Parameters:
Name Type Description
selector string CSS selector for the input element
Source:

ObjectToSelect(selector, classlist)

Converts a JavaScript to
Parameters:
Name Type Description
selector string The CSS selector of the DOM elements
classlist variable A string or list of the CSS classes to remove
Source:

Off(selector, events, func, options)

The inverse of On(), removing event handlers from a selector
Parameters:
Name Type Description
selector string CSS selector
events string event names separated by spaces
func function event handler
options dict options to pass to addEventListener()
Source:

On(selector, events, func, options)

Adds an event handler to selector
Parameters:
Name Type Description
selector string CSS selector
events string event names separated by spaces
func function event handler
options dict options to pass to addEventListener()
Source:

OnAccordion(e)

Helper function for MakeAccordion()
Parameters:
Name Type Description
e event
Source:

OnAltEnter(selector, func)

An advanced form of OnEnter() that requires the user to press Alt+Enter instead. Thanks to http://stackoverflow.com/questions/30467263/handling-alt-enter-key-press-in-javascript
Parameters:
Name Type Description
selector string CSS selector for the input
func function The handler with signature func(selector, event)
Source:

OnCanvasEvent(e)

Helper function for P.MakeDrawableCanvas(), this converts mouse and touch events into drawing commands.
Parameters:
Name Type Description
e event
Source:

OnClick(selector, button, clickfunc, doubleclickfunc, holdfunc)

An advanced click function using hammer.js as a backend that supports single click, double click, and hold functions along with touch support and multiple button mice.
Parameters:
Name Type Description
selector string The CSS selector to bind to
button int One of the Pafera button constants such as P.LBUTTON
clickfunc function Handler for single clicks with the signature func(event)
doubleclickfunc function Handler for double clicks with the signature func(event)
holdfunc function Handler for tap and hold with the signature func(event)
Source:

OnComboBoxChange(selector, comboboxname)

Helper function for the custom combobox control
Parameters:
Name Type Description
selector string CSS selector
comboboxname string The name for the combobox
Source:

OnEnter(selector, func)

Convenience function to call func when the user pushes enter inside of selector
Parameters:
Name Type Description
selector string CSS selector of the input element
func function The handler with signature func(event)
Source:

OnMediaLoaded(func)

Helper function for the audio loader queue, this adds a function to be called when the file has finished downloading.
Parameters:
Name Type Description
func function The handler with signature func(filename)
Source:

OnPauseButton(medianame)

A helper function for play/pause functionality on custom media controls.
Parameters:
Name Type Description
medianame string The name of an already loaded sound file through P.Play()
Source:

OnPlayTimer(medianame)

Helper function for playing the current audio position
Parameters:
Name Type Description
medianame string The name of an already loaded sound file through P.Play()
Source:

(async) OnPopState(e)

Helper function for AJAX pages to return to the previous state.
Parameters:
Name Type Description
e event
Source:

OnReadyStateChange()

Runs the pageload handler after everything has finished loading
Source:

OnResize(e)

Utility function to emit the resize event whenever the window has finished resizing.
Parameters:
Name Type Description
e event
Source:

OnScroll(e)

Enables the system to process a final scroll event when the user stops scrolling.
Parameters:
Name Type Description
e event
Source:

OnUserSwitch(onleave, onreturn)

Fires when the user switches tabs. Useful for detecting turning off music or low intelligence cheaters on tests. ;)
Parameters:
Name Type Description
onleave function Handler when the user leaves the tab with signature func(event)
onreturn function Handler when the user returns to the tab with signature func(event)
Source:

OpenInNewTab()

Convenience function to make code more readable.
Source:

PageBar(count, start, limit, numonpage, listfunc)

A common Pafera utility, this displays a set of buttons for the user to select what chunk out of the total set of items he or she wishes to see.
Parameters:
Name Type Description
count int The total number of items
start int The current position
limit int items per page
numonpage int how many items are on the current page
listfunc string a function name with the signature func(newstart) that will be called whenever the user chooses a new chunk.
Source:

Parent(el, searchselector)

Retrieves the parent element of el, or a parent element that matches the selector specified in searchselector to do multilevel searching.
Parameters:
Name Type Description
el string CSS selector or HTML element
searchselector string name of a particular class that you're looking for, or a function with the signature func(element) that returns true when the proper parent is found.
Source:

Play(filename, url, options)

Plays the audio file specified by url. Supports queuing and autoplay
Parameters:
Name Type Description
filename string The name to refer to this sound by
url string The URL to load the sound from
options object An optional object with
onloadfunc
A handler called when the file has finished downloading with signature func(filename, howl)
autoplay
Set to true to start playing the file immediately after download.
Source:
Create a popup window that animates into view with a variety of options, automatically sized to the current screen width. The window will position itself at the center of the screen by default, or next to an selector if options.parent is specified. Set options.closeonmouseout to 1 if you want the popup to disappear when the mouse cursor leaves the popup or if the user taps somewhere else on the screen. Set options.noanimation to 1 if you want the popup to instantly appear.
Parameters:
Name Type Description
content string The contents for the popup
options object The standard options dict. This function has a multitude of options, so please look at the source to see all of them.
Source:

PowTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

PreloadImage(urls)

Creates a DOM image to ensure the image requested is already being downloaded and the user won't have to wait too long to use it.
Parameters:
Name Type Description
urls string The URL of the image or a list of URLs
Source:

RecordOpus(displayel, onfinished, maxrecordtime)

Records sound using Chris Rudmin's opus-recorder library so that we don't have to send a huge WAV file to the server. Thanks to https://github.com/chris-rudmin/opus-recorder
Parameters:
Name Type Description
displayel string CSS selector to place the recording status in
onfinished function A handler for the opus data with signature func(element, typedarray)
maxrecordtime int Although the user can stop the recording by click on the status display, this function will also automatically cease recording after this number of seconds.
Source:

Remove(name)

Explicitly deletes an object from the global registry.
Parameters:
Name Type Description
name string name of an object which was previously stored
Source:

RemoveClasses(selector, classlist)

Remove all classes in classlist from the DOM elements in selector.
Parameters:
Name Type Description
selector string The CSS selector of the DOM elements
classlist variable A string or list of the CSS classes to remove
Source:

RemoveFullScreen()

Removes the topmost fullscreen layer with animation.
Source:

RemoveLayer(selector)

Helper functions for stack control of popups and fullscreen layers.
Parameters:
Name Type Description
selector string Removes the selector from the stack
Source:

RenderFileInfo(r)

Helper function for displaying a system file from returned JSON results.
Parameters:
Name Type Description
r object The information for the file
Source:

RenderFileObjects(selector, fileobjs)

Used by the file list to permit the user to easily download chosen files
Parameters:
Name Type Description
selector string The selector for the file list
fileobjs list A list of objects containing the information for each file.
Source:

RenderSessionVars()

Returns true if the current user is an administrator.
Source:

ResizeImage(inputname, largestdimension, onsuccess)

Resize an image into a data URL.
Parameters:
Name Type Description
inputname string A selector for the file input that contains the image, or the file input itself.
largestdimension int The biggest width or height that the new image is allowed to have.
onsuccess function The function that receives the data URL with signature func(string)
Source:

RestoreNextCanvas()

Helper function for P.MakeDrawableCanvas(), this cancels out a previous undo command.
Source:

RestorePreviousCanvas()

Helper function for P.MakeDrawableCanvas(), this restores a previously saved canvas, allow undo and redo functionality.
Source:

Retrieve(name)

Retrieves an object from the global registry, or returns an empty object otherwise.
Parameters:
Name Type Description
name string name of an object which was previously stored
Source:

RotateImage(selector, deg)

Convenience function for simplifying CSS transforms.
Parameters:
Name Type Description
selector string CSS selector of the image
deg int The number of degrees to rotate
Source:

RunHandlers(eventname, e)

Manually run handlers for an event. Used for AJAX pages.
Parameters:
Name Type Description
eventname string The name of the event
e event The event to pass to the handler
Source:

ScrollTo(selector)

An advanced form of the scrollIntoView() function which scrolls smoothly and uses the minimum amount of scrolling needed.
Parameters:
Name Type Description
selector string CSS selector
Source:

Selected(selector)

Returns the option element that is currently chosen in a select.
Parameters:
Name Type Description
selector string CSS selector that you want to search for.
Source:

SendFile(filenum, url, file, options)

Sends file to URL as a POST request, automatically updating the progress in P.UploadFilePopup()
Parameters:
Name Type Description
filenum int The number of the file in the current popup
url string The URL to upload the file to
file File The file input to read from
options object An optional object which may contain
onfinished
a function with the signature onfinished(event, xhr, filename)
Source:

(async) SendMessage(userid, group)

Adds the userid to the current user's groups for easy communication.
Parameters:
Name Type Description
userid string The ID code of the user to add
group string The name of the group, which should be acquaintances, friends, favorites, or blacklist.
Source:

SetFlexInputText(selector, newtext)

Directly set the text inside of a flexinput
Parameters:
Name Type Description
selector string CSS selector of the flex input
newtext string
Source:

SetLayout(areas)

The normal template for Pafera consists of a center area called .PageBodyGrid with four drawers on every side called TopBarGrid, RightBarGrid, BottomBarGrid, and LeftBarGrid. This function lets you hide and show these drawers, where the main content area will automatically resize itself to fit the leftover area.
Parameters:
Name Type Description
areas object An object containing optional top, right, bottom, and left properties, each containing the size of the drawer.
Source:

SetProgressBarValue(selector, value)

Sets the value of a progressbar widget created by P.MakeProgressBar()
Parameters:
Name Type Description
selector string CSS selector
value number The new value for the bar
Source:

(async) SetWallpaper(filename)

Sets the wallpaper for the current user. The user must have the wallpaper enabled in their settings.
Parameters:
Name Type Description
filename string The name of the wallpaper file
Source:

Show(selector, display)

Restores a hidden selector to its previous display mode or specified display.
Parameters:
Name Type Default Description
selector string CSS selector
display string block Manually set the display CSS property
Source:

ShowError(selector, error)

Convenience function to show an error message inside of a selector.
Parameters:
Name Type Description
selector string A CSS selector to use
error error The error to display
Source:

ShowFullScreenPicker(title, items, onfinished)

A convenience function for touchscreens where you can use the whole screen to pick one value from a grid.
Parameters:
Name Type Description
title string The title to show on the fullscreen layer
items list A list of arrays in the format [displaytext, cssclass]
onfinished function The handler when the user clicks on one of the items with signature func(itemtext, resultsdiv)
Source:

ShowLocation(latitude, longitude)

Opens the user's default app to view the coordinates provided. Only works well on mobile devices with built-in map apps.
Parameters:
Name Type Description
latitude number
longitude number
Source:

ShowSlide(selector, pos, diff)

Helper function for P.MakeSlideShow() to switch slides.
Parameters:
Name Type Default Description
selector string The slideshow's CSS selector
pos int The position to show. Only used if diff is 0.
diff int 0 The difference between the new position and the current position.
Source:

SinTiming(t)

Timing functions used in animations
Parameters:
Name Type Description
t int The time to calculate.
Source:

SortChildrenByText(selector, childclass1, childclass2)

Rearranges selector's children by their text values. childclass1 and childclass2 can be specified to only sort those children. Useful for resorting table rows.
Parameters:
Name Type Description
selector string The parent element
childclass1 string A selector specifying the level 1 child element
childclass2 string A selector specifying the level 2 child element
Source:

SoundFile(idcode, classes, attrs)

Returns an audio tag given the short code of a file.
Parameters:
Name Type Description
idcode string The short code of the file.
classes string extra classes for the audio tag.
attrs string extra attributes for the audio tag.
Source:

Store(obj, name)

Stores an object into the global registry. Used by EditPopup() to save the original object for editing later.
Parameters:
Name Type Default Description
obj object The value to store
name string 0 The name to identify the object. If name is not specified, then this function will generate a random integer ID and return it.
Source:

StoreGlobals(vars)

Stores variables in the global window object using dot notation. Handy for passing complicated structures from server side.
Parameters:
Name Type Description
vars object An object containing the names and values to store into window.
Source:

StoreInArray(container, name, value, overwrite)

Converts dotted name and value pairs such as animals.lions.number = 5 into animals['lions']['number'] = 5. Useful for form elements when you want to convert them to a JSON array.
Parameters:
Name Type Default Description
container object The object to store the value in
name string The dotted name
value value The value to store
overwrite bool false If enabled, the value to store will be added to a list containing all previous values. Otherwise, it will overwrite the previous value.
Source:

Target()

Shortcut to get the target element from an event for all browsers.
Source:

TargetClass(e, searchselector)

Returns a parent of the event target that has the specified selector
Parameters:
Name Type Description
e event DOM event
searchselector string CSS selector that you want to search for.
Source:

(async) Toast(message, selector, duration, options)

Convenience function to automatically hide a popup after option.duration seconds
Parameters:
Name Type Default Description
message string The text to display
selector string The selector to display the toast in, or blank to display in a popup.
duration int 2000 The number of milliseconds before the toast disappears
options object Options to pass to the popup. You can also add an onfinished function to call when the toast disappears.
Source:

ToggledButtons(selector)

Returns the state of a set of toggled buttons in selector as an object containing keys of 'on', 'off', and 'unset' and values of lists. The list will contain the names of each button that is in that state.
Parameters:
Name Type Description
selector string CSS selector containing the buttons.
Source:

(async) Tooltip(selector, func, delay)

Simple function to display a tooltip above selector after delay milliseconds have passed. func(el) should return the text of the tooltip when called.
Parameters:
Name Type Default Description
selector string CSS selector
func function function to return the tooltip text with the signature func(element)
delay int 1000 Number of milliseconds to delay before showing the tooltip. Defaults to 1000 milliseconds.
Source:

UpdateFileField(el, thumbnail, idcode, filename)

Updates a file field with the chosen file's name and thumbnail
Parameters:
Name Type Description
el DOMElement The file field
thumbnail string The URL for the file's thumbnail image
idcode string The short code for the file
filename string The name of the file
Source:

(async) UpdateFileList(fieldname, newvalue, additionalids, fileobjs)

Helper function for the EditPopup() file fields to show a newly chosen file.
Parameters:
Name Type Description
fieldname string The name for the file field
newvalue string The short code for the new file
additionalids list A list of short codes for multiple select file lists
fileobjs list A list of objects containing the information for each file.
Source:

UploadFile(fileselector, options)

Uploads a file to the Pafera system. If you want to upload a file manually, send a POST request to /system/upload in the format /system/upload/fileid/filename/filetitle/filesecurity
Parameters:
Name Type Default Description
fileselector string .UploadFile CSS class of the file input. By default .UploadFile
options object An optional object which may contain
title
The title for the system, which is a description of the file separate from the file name.
security
public, protected, or private. The default is public.
onfinished
a function with the signature onfinished(event, xhr, filename)
Source:

UploadFileField(el, camera)

Handles the user manually uploading a new file into a file field
Parameters:
Name Type Description
el DOMElement The file field element
camera string Can be blank, "front", or "back" to let the user use the camera to take a photo or video.
Source:

UploadFilePopup(uploadurl, options)

Shows the system standard upload dialog for the user to choose a file to upload. Note that by default, only users in the uploaders group can upload files, so make sure that your user has been added to the group before using this.
Parameters:
Name Type Description
uploadurl string The URL to upload to, by default /system/upload
options object An object containing optional attributes
accept
accept attribute for the file input
maxsize
Size limit for the file, default 128MiB.
filetype
MIME type to look for
fileid
existing short code when replacing an already uploaded file
attrs
extra attributes for the file input
title
a title for the popup
onfinished
a handler called when upload has finished with signature func(event, xmlhttprequest, filename)
resizeimage
int value for the largest dimension of an image. Before upload, Pafera will use HTML canvas to resize the image to the largest dimension.
Source:

UploadFileProgress(e, el)

Sets the percentage indicator in P.UploadFilePopup()
Parameters:
Name Type Description
e event An upload progress event
el DOMElement The element to update
Source:

(async) UserActionsPopup(userid)

Permits the current user to add other users to various groups or to send messages to other users.
Parameters:
Name Type Description
userid string The ID code of the other user
Source:

(async) UserPopup(e)

Shows the system standard user settings popup.
Parameters:
Name Type Description
e event The event used to get the positioning of the popup in e.target
Source:

VideoFile(idcode, classes, attrs)

Returns a video tag given the short code of a file.
Parameters:
Name Type Description
idcode string The short code of the file.
classes string extra classes for the video tag.
attrs string extra attributes for the video tag.
Source:

ViewPortRect()

Returns the actual viewport size. Thanks to http://stackoverflow.com/questions/16894603/javascript-incorrect-viewport-size
Source:

VisibleInSelector(el, selector)

A simple function to see if this element is visible within the selector's on-screen region. For speed, this checks only the vertical offset.
Parameters:
Name Type Description
el DOMElement The child element
selector string The parent element
Source: