README

About

QuidPHP/Front contains JavaScript and CSS assets for basic components. It is part of the QuidPHP package.

License

QuidPHP/Front is available as an open-source software under the MIT license.

Documentation

QuidPHP/Front documentation is available at QuidPHP/Docs.

Installation

QuidPHP/Front can be easily installed with Composer. It is available on Packagist.

$ composer require quidphp/front

Once installed, the package will be available within your vendor folder.

Requirement

QuidPHP/Front requires any modern browser (not Internet Explorer).

Comment

QuidPHP/Front code is commented and all methods are explained (in French).

Convention

QuidPHP/Front is built on the following conventions:

ES5: All JavaScript code is compatible with ES5, there is no need for any transpiler.
Strict: All generated JavaScript files declare use strict on the first line.
SCSS: Nesting, variables and mixins are used within the SCSS stylesheets.
Compiling: The concatenation of the JS and SCSS files is done on the PHP side.

Overview

QuidPHP/Front contains one JavaScript initialization file.

init - Script that imports many variables within the scope

Source

QuidPHP/Front contains 67 JavaScript files. Here is an overview:

absolutePlaceholder - Script of behaviours for an absolute placeholder component
ajax - Script to activate ajax with an event on the nodes
ajaxBlock - Merges the logic for ajax, block and loading within a component
ajaxTimeout - Merges the logic for ajax, block, loading and timeout within a component
alert - Component to launch an alert notification when an event is triggered
anchorCorner - Script of behaviours for an absolute anchorCorner component
backToTop - Script for a component which brings back to the top of the page
background - Component for a background that can fadein or out
base - Base component which allow to activate or deactivate components
blockEvent - Script of behaviours for a component which blocks event propagation
burger - Script for a burger menu component
calendar - Script for the calendar component
carousel - Script for a carousel component based on the clickOpen logic
clickOpen - Grants base methods and events for a clickOpen component
clickOpenAjax - Manages a clickOpen component which triggers an ajax request when open
clickOpenAjaxAnchor - ClickOpen component which is triggered by an anchor click and dispatches an ajax call
clickOpenInputAjax - Component for a one field form which triggers an ajax request that displays in a clickOpen
clickOpenTrigger - Manages a clickOpen component which has a trigger
clickOpenTriggerBase - Grants base functions for a clickOpen component which has a trigger to open/close
clickOutside - Component to manage click outside a node
clickPrint - Component that triggers a window print on click
confirm - Component to request a confirmation once an event has triggered
externalBlank - Component to make all child anchors who are external as target _blank
fakeSelect - Script with some logic for a select replacement component, uses clickOpen
feed - Script of behaviours for a feed component with a load-more button
feedFilter - Script of behaviours for a filter which updates a feed, can include a reset button
feedSearch - Component for a feed with search and order tools
filter - Component for a clickOpen filter component which has a page feed, search and order tools
focusable - Component to allow focus navigaton on a set of nodes
form - Script with behaviours for a form component
hashChange - Script that sends the hash change event back to the nodes
hrefReplaceChar - Component to generate a dynamic href with some value replacement
indexNode - Component to find a node within a set according to an index
initOpenClose - Base component used for opening, closing and initializing a container
input - Script with behaviours for an input component
inputCalendar - Script with behaviours for a calendar component and a date input
inputGroup - Script with behaviours for an input group component (like checkbox and radio)
inputMemory - Script with behaviours for an input which has a value in memory
inputNumeric - Script with logic for an input containing a number
inputNumericHref - Script with logic for an input containing a number which triggers a page change
inputNumericRange - Script for a numeric input, linked to a range (with plus and minus buttons)
inputSearch - Script containing logic for a search input with a button
inputSearchHref - Script containing logic for a search input which triggers a page change
keyboard - Component to catch and/or prevent an event related to a key press on the keyboard
keyboardArrow - Component to catch or prevent the arrow keys on the keyboard
keyboardEnter - Component to catch or prevent the enter key on the keyboard
keyboardEscape - Component to catch or prevent the escape key on the keyboard
modal - Script for a modal component
modalMailto - Script for mailto links opening in a modal for confirmation
nav - Component for a document node, binds other components
navHash - Adds hashchange support to the nav index component
navIndex - Base component that manages index navigation for many targets
plural - Component to manage singular or plural text for a node
resizeChange - Component to notify nodes when window size has changed or stopped
scrollChange - Component to notify nodes when window scroll has changed or stopped
scrollDrag - Component to allow scrolling while dragging with the mouse
scroller - Component to manage scrolling within a container, allows animating
searchAutoInfo - Script with logic for an auto-complete search component with another fallback popup
searchSlide - Component with a search input, and an info box that slides on focus
selectConvert - Script to convert a select menu to a fakeSelect component
tabs - Script with behaviours for a tabs component
tabsNav - Script with behaviours for a tab component with support for navigation
timeout - Behaviours for a timeout component, triggers an event once a timeout has completed
tooltip - Component to manage tooltip content
validate - Component with functions related to validation (pattern and required)
validatePrevent - Component that blocks an event if the validation is not successfull
window - Behaviours to detect touch devices or responsive resolution on the window node

Styling

QuidPHP/Front contains 12 SCSS stylesheets. Here is an overview:

absolutePlaceholder - Stylesheet for the absolutePlaceholder component
anchorCorner - Stylesheet for the anchorCorner component
background - Stylesheet for the background component
calendar - Stylesheet for the calendar component
clickOpen - Stylesheet for the base styles of the clickOpen component
fakeSelect - Stylesheet for the base styles of the fakeSelect component
form - Stylsheet with base styles for form components
inputCalendar - Stylesheet for the input calendar component
inputNumericRange - Base styles for the inputNumericRange component
modal - Stylesheet for the modal component
scrollDrag - Stylesheet for the scrollDrag component
tooltip - Base styles for the tooltip component

Testing

QuidPHP/Front contains 1 test script:

front - Script to test the front files

QuidPHP/Front testsuite can be run by creating a new QuidPHP/Assert project.

quidphp / front

Maintainers

Details