pan old
1.0.0
Pan.js (o P.JS ) es un marco JS ligero (<40ko) y simple hecho para ayudarlo a desarrollar aplicaciones web bien estructuradas rápidamente.
Puede organizar su aplicación web en componentes y herramientas . Viene con algunas cosas prefabricadas útiles. Simplemente incluya los archivos JS en su HTML y comience a usarlo. P.JS todavía está en desarrollo, no dude si tiene algún consejo.
Tabla de contenido
P.JS no tiene dependencias (no, no necesitas jQuery). Es compatible con todos los navegadores modernos hasta IE8.
Dependiendo de los navegadores y clases que esté utilizando, es posible que necesite polyfills que se incluyen en la carpeta SRC/Polyfills.
La compilación predeterminada incluye todos los polyultos necesarios, pero puede usar la versión no-compatibility .
Hay dos formas de usar P.JS.
Puede usarlo como una biblioteca simple instanciando las herramientas o puede usarlo como marco extendiendo P.JS para crear sus propias herramientas y componentes.
< script src =" ../../builds/pan-0.3.min.js " > </ script > var viewport = new P . Tools . Viewport ( ) ;
viewport . on ( 'resize' , function ( width , height )
{
console . log ( width , height ) ;
} ) ; Cree sus propias herramientas y componentes basados en las clases de P.JS. Puede colocar sus componentes dentro del objeto P.Components o puede crear su propio espacio de nombres como Foo.Bar.My_Class .
La herencia se basa en el Código John Resig con algunas mejoras como la fusión de propiedad profunda, Singleton, Opciones Defualt, etc.
P.JS se desarrolla en modo estricto. Haga lo que láfate y siéntase libre de compartir sus herramientas y componentes personalizados.
< script src =" ../../builds/pan-0.3.min.js " > </ script > // Create a class wrapping the all application
P . Components . My_App = P . Core . Abstract . extend (
{
construct : function ( )
{
// Instantiate a sidebar and header
this . sidebar = new P . Components . My_Sidebar ( { color : 'blue' } ) ;
this . header = new P . Components . My_Header ( ) ;
}
} ) ;
// Create a class for the sidebar
P . Components . My_Sidebar = P . Core . Abstract . extend (
{
// Default options
options :
{
colors : 'red'
} ,
construct : function ( options )
{
this . _super ( options ) ;
this . main = document . querySelector ( 'aside' ) ;
console . log ( 'Init Sidebar' ) ;
}
} ) ;
// Create a class for the header
P . Components . My_Header = P . Core . Abstract . extend (
{
construct : function ( )
{
this . main = document . querySelector ( 'header' ) ;
console . log ( 'Init Header' ) ;
}
} ) ; // Let's rock
var my_app = new P . Components . My_App ( ) ; Las clases centrales son los cimientos de P.JS.
Cada herramienta o componente heredan de una de esas clases y sus clases personalizadas también deberían.
P.Core.Abstract es la clase predeterminada.
construct cuando se instanciarástatic establece la clase como un singleton. Eso significa que la primera instigantiación con new actuará normalmente, pero cada próxima instantilización con new devolverá la primera.options es un objeto que se fusionará con las opciones cuandoregister de propiedad dentro de la propiedad options agregará automáticamente la instancia a la herramienta de registro con el valor register como clave_super( parameters ) dentro de un método llamará al método de anulación de los padres // Inherit from Abstract
P . Components . Custom_Class = P . Core . Abstract . extend (
{
construct : function ( )
{
console . log ( 'Welcome to my custom class' ) ;
}
} ) ;
var custom_class = new P . Components . Custom_Class ( ) ; P . Components . Custom_Class = P . Core . Abstract . extend (
{
// Options with random deep properties
options :
{
test :
{
foo : 'bar' ,
lorem : 'ipsum'
}
} ,
// Add options argument
construct : function ( options )
{
// Pass options to _super
this . _super ( options ) ;
console . log ( 'Options' , this . options ) ;
}
} ) ;
// Instantiate by passing different options
var custom_class = new P . Components . Custom_Class ( {
test :
{
lorem : 'dolores'
}
} ) ; // Currently, static functionnality is only used for tools
// It's just a matter of organization, do whatever you want.
P . Tools . Custom_Class = P . Core . Event_Emitter . extend (
{
// Chose a name never used
static : 'custom_tool' ,
construct : function ( )
{
// Don't forget the _super
this . _super ( ) ;
console . log ( 'Init' ) ;
}
} ) ;
// 'custom_class' and 'custom_class_again' will share the same instance
// 'construct' will be called only the first time
var custom_class = new P . Tools . Custom_Class ( ) ,
custom_class_again = new P . Tools . Custom_Class ( ) ; // Create any class you'd like
P . Components . Test_Class = P . Core . Abstract . extend ( { } ) ;
// Instantiate and specify the register property in options object
// The value is the key you want to retrieve the instance later
var test_class = new P . Components . Test_Class ( { register : 'my_key' } ) ;
// Instantiate the registry tools and get the test_class using the register key
var registry = new P . Tools . Registry ( ) ,
test_class_2 = registry . get ( 'my_key' ) ; P.Core.Event_Emitter extiende P.Core.Abstract con métodos de eventos adicionales.
on , off y triggerevent-name == eventname == event_name ) // Create a custom component that extends Event_Emitter
P . Components . Custom_Component = P . Core . Event_Emitter . extend (
{
construct : function ( )
{
this . _super ( ) ;
// Save context
var that = this ;
// Interval every seconds
window . setInterval ( function ( )
{
// Trigger event and pass parameters
that . trigger ( 'event-test' , [ 'test-1' ] ) ;
} , 1000 ) ;
}
} ) ;
var custom_component = new P . Components . Custom_Component ( ) ;
// Listen to 'event-text'
custom_component . on ( 'event-test' , function ( value )
{
// Will log 'text-1' every second
console . log ( value ) ;
} ) ; // Create a custom component that extends Event_Emitter
P . Components . Custom_Component = P . Core . Event_Emitter . extend (
{
construct : function ( )
{
this . _super ( ) ;
// Save context
var that = this ;
// Wait a second
window . setTimeout ( function ( )
{
// Trigger some events
that . trigger ( 'event-1' , [ 'test-1' ] ) ;
that . trigger ( 'event-2' , [ 'test-2' ] ) ;
that . trigger ( 'event-3' , [ 'test-3' ] ) ;
that . trigger ( 'event-4' , [ 'test-4' ] ) ;
} ) ;
}
} ) ;
// Try to instantiate twice but get a common object each time
var custom_component = new P . Components . Custom_Component ( ) ;
// Listen two events
custom_component . on ( 'event-1 event-2' , function ( value )
{
console . log ( value ) ;
} ) ;
// Stop listening to 'event-1' event
custom_component . off ( 'event-1' ) ;
// Listen to event with namespace
custom_component . on ( 'event-2.foo event-3.bar event-4.bar' , function ( value )
{
console . log ( value ) ;
} ) ;
// Stop listening on 'event-2' with 'foo' namespace
custom_component . off ( 'event-2.foo' ) ;
// Stop listening on every events with 'bar' namespace
custom_component . off ( '.bar' ) ;P.JS viene con algunas herramientas prefabricadas. Cada uno es un singleton (estático). Puede instanciarlo varias veces, siempre obtendrá la primera instancia.
Puede extender esas herramientas si lo desea.
Los puntos de interrupción funcionan un poco como ancho y altura para consultas de medios. Especifique algunos puntos de interrupción y activará eventos al cambiar el tamaño de la ventana gráfica.
Ver código
Ver ejemplo
Opción
{
breakpoints : [ // Breakpoints
{
name : 'large' ,
width :
{
value : 960 ,
extreme : 'min' ,
included : false
}
} ,
{
name : 'medium' ,
width :
{
value : 960 ,
extreme : 'max' ,
included : true
}
} ,
{
name : 'small' ,
width :
{
value : 500 ,
extreme : 'max' ,
included : true
} ,
height :
{
value : 500 ,
extreme : 'max' ,
included : true
}
}
]
}Propiedades
Métodos
breakpoints (objeto | matriz) Agregar uno son múltiples puntos de interrupciónsilent (opcional, booleano, predeterminado: verdadero) no debe activar el eventobreakpoints (cadena | matriz) Eliminar uno son múltiples puntos de interrupción por nombresilent (opcional, booleano, predeterminado: falso) no debe activar el eventobreakpoint (cadena) si el punto de interrupción está activocondition (cadena) Proceda a un clásico MatchMedia pero solo devuelva un booleanoEventos
breakpoints (matriz) Actualmente los puntos de interrupción activos Ayudarlo a convertir cadenas en colores bien formados.
Crea hermosos arcoiris. ?
Ver código
Ver ejemplo
Opción
{
gradients :
{
parse : true , // Automatically parse, looking for text to convert to gradient
target : document . body , // Default target when parsing
classes :
{
to_convert : 'gradient-text' , // Searched class
converted : 'gradient-text-converted' // Converted class
}
}
}Propiedades
Métodos
input de objeto RGB (cadena) cualquier cosa que se vea como un color (#FF0000,#F00, Red, {R: 1, G: 0, B: 1}, {H: 1, S: 1, L: 0.5})target (opcional, elemento DOM, predeterminado: document.body)selector (cadena, predeterminado: 'To-Riseiz')start (cualquiera)end (y)count (número)format (opcional, cadena, valores: 'rgb' | 'hsl' , predeterminado: 'hsl' )input (Objeto) Objeto RGBinput (Object) Objeto HSLEventos
ninguno
Aplique CSS en el elemento dirigido y agregue automáticamente prefijos. La propiedad se formará automáticamente.
Ver código
Ver ejemplo
Opción
{
prefixes : [ 'webkit' , 'moz' , 'o' , 'ms' , '' ] // Default prefixes
}Propiedades
ninguno
Métodos
target (Elemento DOM | jQuery) recuperado con Fetcher clásico como Queryselector o jQueryvalues (objeto) Valor para aplicarprefixes (opcional, booleano | matriz) Verdadero para la matriz de prefijos o prefijos predeterminadosEventos
ninguno
Proporcione información como motor, navegador, sistema y características.
Ver código
Ver ejemplo
Opción
{
targets : [ 'html' ] // Add detected informations to targets in array (selector or DOM Elements)
}Propiedades
ie (número)gecko (número)webkit (número)khtml (número)opera (número)version (número)ie (número)firefox (número)safari (número)konq (número)opera (número)chrome (número)version (número)windows (booleano)mac (booleano)osx (booleano)iphone (booleano)ipod (booleano)ipad (booleano)ios (booleano)blackberry (booleano)android (booleano)opera_mini (booleano)windows_mobile (booleano)wii (booleano)ps (booleano)touch (booleano)media_query (booleano)Métodos
ninguno
Eventos
ninguno
Envíe información a Google Analytics utilizando la instancia actual. Debes instanciar Google Analytics tú mismo.
Ver código
Ver ejemplo
Opción
{
send : true , // Should send informations
parse : true , // Automatically parse
true_link_duration : 300 , // Wait duration before following the link (enough time to be sure that informations have been well stend)
target : document . body , // Default target when parsing
classes :
{
to_tag : 'tag' , // Search class
tagged : 'tagged' // Tagged class
} ,
logs :
{
warnings : false , // Log warning
send : false // Log sent informations
}
}Propiedades
ninguno
Métodos
target (opcional, elemento DOM, predeterminado: document.body)selector (cadena, predeterminado: 'To-Riseiz')datas (objeto)category (cualquiera)action (cualquiera)label (opcional, cualquiera)value (opcional, cualquiera)unique (opcional, cadena) no debe enviar los datos más de una vez (dependiendo del valor de la cadena)Eventos
Métodos, propiedades y eventos parientes del teclado
Ver código
Ver ejemplo
Opción
ninguno
Propiedades
Métodos
input (número) Código de teclasinput (numero) código de teclas o carácterinputs (matrices) Códigos de teclas y/o caracteresEventos
keycode (número)character (cadena)keycode (número)character (cadena) Sepa cuando sus usuarios usan el código Konami ↑ ↑ ↓ ↓ ← → ← → BA
Ver código
Ver ejemplo
Opción
{
reset_duration : 1000 , // Time in before reseting
sequence : // Sequence to enter
[
'up' ,
'up' ,
'down' ,
'down' ,
'left' ,
'right' ,
'left' ,
'right' ,
'b' ,
'a'
]
}Propiedades
ninguno
Métodos
ninguno
Eventos
index (int) progreso antes del tiempo de esperaindex (int) progreso antes de fallar Parientes de propiedades y eventos del mouse
Ver código
Ver ejemplo
Opción
ninguno
Propiedades
Métodos
ninguno
Eventos
position (objeto) Información de posición del mousetarget (elemento DOM) Elemento directo debajo de la posición del mousefalse en la devolución de llamadaposition (objeto) Información de posición del mousetarget (elemento DOM) Elemento directo debajo de la posición del mouseposition (objeto) Información de posición del mousetarget (elemento DOM) Elemento directo debajo de la posición del mousewheel (objeto) Información de la rueda del mousefalse en la devolución de llamada Registro de clave/valor para cuándo necesita almacenar variable y recuperarla en cualquier lugar sin usar variables globales feas.
Puede usarlo para almacenar variables.
Ver código
Ver ejemplo
Opción
ninguno
Propiedades
Métodos
key (cadena)callback (opcional, función) llamado si el elemento no se encuentra para la clave especificada y el resultado de la función devueltokey (cadena)value (cualquiera)Eventos
key (cadena)value (cualquiera) Cambie los elementos dentro de los contenedores de acuerdo con muchas opciones posibles.
Puede analizar y cambiar el tamaño automáticamente de acuerdo con clases y atributos en contenedores.
Para trabajar, tendrá que especificar las siguientes propiedades en los propios elementos DOM
data-width | width (opcional, número)data-height | height (opcional, número)data-width | width (número)data-height | height (número)data-fit-type (opcional, string, valores: 'relleno' | 'ajuste' , predeterminado: 'relleno' )data-align-x (opcional, string, valores: 'izquierda' | 'centro' | 'derecha' , predeterminado: 'centro' )data-align-y (opcional, cadena, valores: 'top' | 'centro' | 'fondo' , predeterminado: 'centro' )data-rounding (opcional, cadena, valores: 'techo' | 'piso' | 'redondo' | Ninguno, predeterminado: 'techo' ) Ver código
Ver ejemplo
Opción
{
force_style : true , // Add 'position' and 'overflow' CSS properties if not set yet
parse : true , // Automatically parse
target : document . body , // Default target when parsing
auto_resize : true , // Resize on browser 'resize' event
classes :
{
to_resize : 'to-resize' , // Containers searched class (on the container)
content : 'content' // Content class (must be inside container)
}
}Propiedades
ninguno
Métodos
target (opcional, elemento DOM, predeterminado: document.body)selector (cadena, predeterminado: 'To-Riseiz')container (elemento dom)content (elemento DOM)force_style (opcional, booleano, predeterminado: true) Agregar propiedades de estilo 'posición' y 'desbordamiento' si aún no está configuradoparameters (objeto)content_width (número)content_height (número)container_width (número)container_height (número)fit_type (opcional, cadena, predeterminado: relleno , valor: relleno | Fit )align_x (opcional, cadena, predeterminado: centro , valor: izquierda | centro | derecha )align_y (opcional, cadena, predeterminado: centro , valor: superior | centro | inferior )rounding (opcional, cadena, predeterminado: techo , valor: techo | piso | redondo | ninguno)format (opcional, cadena, predeterminado: ambos , valor: ambos | cartesiano | css )Eventos
ninguno
Método para administrar cadenas
Ver código
Ver ejemplo
Opción
ninguno
Propiedades
ninguno
Métodos
value (cadena) cadena que debe cambiar el casoformat (cadena) Caso buscadovalue (cadena) cadena para recortarcharacters (cadena) caracteres para recortarvalue (cadena) Convierta de manera inteligente a Boolean con muchos idiomas compatiblesvalue (String) String para SlugifyEventos
ninguno
Ejecute un ticker que active eventos cada cuadro base en requestAnimationFrame.
Ver código
Ver ejemplo
Opción
{
auto_run : true
}Propiedades
start cuando el ticker comenzóelapsed dedicadodelta Pasado desde la última marcacurrent actual actualMétodos
run (boolean) debe comenzar a ejecutar el temporizadorframes_count (número)action (función)after (opcional, booleano, valores: verdadero | falso , predeterminado: verdadero ) debe aplicar la función después de activar el evento tickEventos
time de tiempo (objeto)time de tiempo (objeto) Le brinda información sobre la ventana gráfica como el ancho, la altura, el desplazamiento superior, el desplazamiento a la izquierda, el delta de desplazamiento, etc.
Activar eventos en desplazamiento y cambio de tamaño.
Puede deshabilitar el flotador en el desplazamiento para mejorar el rendimiento
Ver código
Ver ejemplo
Opción
{
disable_hover_on_scroll : false , // Improve performance when scrolling but disable hovers
initial_triggers : [ 'resize' , 'scroll' ] // On the next frame, triggers 'resize' then 'resize' events
}Propiedades
delta (objeto)top | y (número) Top delta de desplazamientoleft | x (número) Scroll delta izquierdadirection (objeto)y (cadena) Dirección de desplazamiento verticalx (cadena) Dirección de desplazamiento horizontalMétodos
condition (cadena) Proceda a un clásico MatchMedia pero solo devuelva un booleanoEventos
viewport (objeto)viewport (objeto) Preferences > Browse Packages...User/ carpetaBC : clase PAN
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;BCS : Class Pan Striction
( function ( )
{
'use strict' ;
P . Components . Class = P . Core . Abstract . extend (
{
static : 'class' ,
options : { } ,
construct : function ( options )
{
this . _super ( options ) ;
}
} ) ;
} ) ( ) ;BFN : función PAN
/**
* Description
*/
name : function ( options )
{
var that = this ;
this . _super ( ) ;
}BN : Pan NUEVO
new Pan . Namespace . Class ( ) ;BNC : PAN NUEVO componente
new Pan . Components . Class ( ) ;BNT : PAN NUEVA HERRAMIENTA
new Pan . Tools . Class ( ) ; convert_case con dashed add_detector none en redondeo init por construct$ propiedad en abstractop- a predeterminadanull'use strict' generalmatch_breakpoint a la vistano-features que no funcionan en el detectorformat en el método get_sizes (soporte "cartesiano", "css" o "ambos")wait Inicio
