Download the PHP package quidphp/front without Composer

QuidPHP/Front

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.

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.