quidphp/front

JavaScript and CSS assets for basic components

Installs: 77

Dependents: 1

Suggesters: 0

Security: 0

Stars: 2

Watchers: 2

Forks: 0

Open Issues: 0

Language:JavaScript

5.31.0 2022-07-02 21:56 UTC

This package is auto-updated.

Last update: 2023-02-02 23:10:22 UTC


README

Release License Code Size

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.