Compare commits
No commits in common. "d1bc751caafeb59aaa2cf78fcba5afd56e596125" and "c819c43bce9f9b0f7ff81f9c971a83e6903d8e8e" have entirely different histories.
d1bc751caa
...
c819c43bce
62 changed files with 98 additions and 3539 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Binary file not shown.
|
Before Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
|
|
@ -1,137 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ProcessWire Configuration File
|
|
||||||
*
|
|
||||||
* Site-specific configuration for ProcessWire
|
|
||||||
*
|
|
||||||
* Please see the file /wire/config.php which contains all configuration options you may
|
|
||||||
* specify here. Simply copy any of the configuration options from that file and paste
|
|
||||||
* them into this file in order to modify them.
|
|
||||||
*
|
|
||||||
* SECURITY NOTICE
|
|
||||||
* In non-dedicated environments, you should lock down the permissions of this file so
|
|
||||||
* that it cannot be seen by other users on the system. For more information, please
|
|
||||||
* see the config.php section at: https://processwire.com/docs/security/file-permissions/
|
|
||||||
*
|
|
||||||
* This file is licensed under the MIT license
|
|
||||||
* https://processwire.com/about/license/mit/
|
|
||||||
*
|
|
||||||
* ProcessWire 3.x, Copyright 2023 by Ryan Cramer
|
|
||||||
* https://processwire.com
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
if(!defined("PROCESSWIRE")) die();
|
|
||||||
|
|
||||||
/** @var Config $config */
|
|
||||||
|
|
||||||
/*** SITE CONFIG *************************************************************************/
|
|
||||||
|
|
||||||
// Let core API vars also be functions? So you can use $page or page(), for example.
|
|
||||||
$config->useFunctionsAPI = true;
|
|
||||||
|
|
||||||
// Use custom Page classes in /site/classes/ ? (i.e. template "home" => HomePage.php)
|
|
||||||
$config->usePageClasses = true;
|
|
||||||
|
|
||||||
// Use Markup Regions? (https://processwire.com/docs/front-end/output/markup-regions/)
|
|
||||||
$config->useMarkupRegions = true;
|
|
||||||
|
|
||||||
// Prepend this file in /site/templates/ to any rendered template files
|
|
||||||
$config->prependTemplateFile = 'layout/init.php';
|
|
||||||
|
|
||||||
// Append this file in /site/templates/ to any rendered template files
|
|
||||||
$config->appendTemplateFile = 'layout/main.php';
|
|
||||||
|
|
||||||
// Allow template files to be compiled for backwards compatibility?
|
|
||||||
$config->templateCompile = false;
|
|
||||||
|
|
||||||
/*** INSTALLER CONFIG ********************************************************************/
|
|
||||||
/**
|
|
||||||
* Installer: Database Configuration
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->dbHost = 'localhost';
|
|
||||||
$config->dbName = 'db_dev_artabro';
|
|
||||||
$config->dbUser = 'admin_laegnur';
|
|
||||||
$config->dbPass = '3Ru34T3NN010';
|
|
||||||
$config->dbPort = '3306';
|
|
||||||
$config->dbCharset = 'utf8mb4';
|
|
||||||
$config->dbEngine = 'InnoDB';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: User Authentication Salt
|
|
||||||
*
|
|
||||||
* This value was randomly generated for your system on 2024/08/27.
|
|
||||||
* This should be kept as private as a password and never stored in the database.
|
|
||||||
* Must be retained if you migrate your site from one server to another.
|
|
||||||
* Do not change this value, or user passwords will no longer work.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->userAuthSalt = 'b9a3d034ad1cb8ec63da2aa0bf1943f16ca13a86';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: Table Salt (General Purpose)
|
|
||||||
*
|
|
||||||
* Use this rather than userAuthSalt when a hashing salt is needed for non user
|
|
||||||
* authentication purposes. Like with userAuthSalt, you should never change
|
|
||||||
* this value or it may break internal system comparisons that use it.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->tableSalt = '56b10609254338feaeb627452cc95a2a08cfcded';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: File Permission Configuration
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->chmodDir = '2770'; // permission for directories created by ProcessWire
|
|
||||||
$config->chmodFile = '0660'; // permission for files created by ProcessWire
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Temporary directory for uploads
|
|
||||||
*
|
|
||||||
* Optionally override PHP's upload_tmp_dir with your own.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
$config->uploadTmpDir = dirname(__FILE__) . '/assets/uploads/';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: Time zone setting
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->timezone = 'Europe/Madrid';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: Admin theme
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->defaultAdminTheme = 'AdminThemeUikit';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: Unix timestamp of date/time installed
|
|
||||||
*
|
|
||||||
* This is used to detect which when certain behaviors must be backwards compatible.
|
|
||||||
* Please leave this value as-is.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->installed = 1724750493;
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: HTTP Hosts Whitelist
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->httpHosts = array('artabro.localhost', 'www.artabro.localhost');
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Installer: Debug mode?
|
|
||||||
*
|
|
||||||
* When debug mode is true, errors and exceptions are visible.
|
|
||||||
* When false, they are not visible except to superuser and in logs.
|
|
||||||
* Should be true for development sites and false for live/production sites.
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
$config->debug = true;
|
|
||||||
|
|
||||||
|
|
@ -52,9 +52,9 @@ $config->templateCompile = false;
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
$config->dbHost = 'localhost';
|
$config->dbHost = 'localhost';
|
||||||
$config->dbName = '';
|
$config->dbName = 'db_dev_artabro';
|
||||||
$config->dbUser = '';
|
$config->dbUser = 'admin_laegnur';
|
||||||
$config->dbPass = '';
|
$config->dbPass = '3Ru34T3NN010';
|
||||||
$config->dbPort = '3306';
|
$config->dbPort = '3306';
|
||||||
$config->dbCharset = 'utf8mb4';
|
$config->dbCharset = 'utf8mb4';
|
||||||
$config->dbEngine = 'InnoDB';
|
$config->dbEngine = 'InnoDB';
|
||||||
|
|
@ -84,7 +84,7 @@ $config->tableSalt = '56b10609254338feaeb627452cc95a2a08cfcded';
|
||||||
* Installer: File Permission Configuration
|
* Installer: File Permission Configuration
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
$config->chmodDir = '2770'; // permission for directories created by ProcessWire
|
$config->chmodDir = '0770'; // permission for directories created by ProcessWire
|
||||||
$config->chmodFile = '0660'; // permission for files created by ProcessWire
|
$config->chmodFile = '0660'; // permission for files created by ProcessWire
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -113,7 +113,7 @@ $config->installed = 1724750493;
|
||||||
* Installer: HTTP Hosts Whitelist
|
* Installer: HTTP Hosts Whitelist
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
$config->httpHosts = array('artabro.org', 'www.artabro.org');
|
$config->httpHosts = array('artabro.localhost', 'www.artabro.localhost');
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -124,5 +124,5 @@ $config->httpHosts = array('artabro.org', 'www.artabro.org');
|
||||||
* Should be true for development sites and false for live/production sites.
|
* Should be true for development sites and false for live/production sites.
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
$config->debug = false;
|
$config->debug = true;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,135 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ProcessWire ColorPicker Fieldtype
|
|
||||||
*
|
|
||||||
* created by Philipp "Soma" Urlich
|
|
||||||
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
|
|
||||||
*
|
|
||||||
* additions (swatches) by @Rayden
|
|
||||||
*
|
|
||||||
* Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
class FieldtypeColorPicker extends Fieldtype {
|
|
||||||
|
|
||||||
const TRANSPARENT = "transparent";
|
|
||||||
const HEX_PREFIX = "#";
|
|
||||||
|
|
||||||
public static function getModuleInfo() {
|
|
||||||
return array(
|
|
||||||
'title' => 'ColorPicker',
|
|
||||||
'version' => 203,
|
|
||||||
'summary' => 'Fieldtype that stores a HEX color or the value transp. Color can be picked using a jQuery ColorPicker Plugin by http://www.eyecon.ro/colorpicker/ or from a configurable color swatch.',
|
|
||||||
'href' => 'http://processwire.com/talk/topic/865-module-colorpicker/page__gopid__7340#entry7340',
|
|
||||||
'installs' => 'InputfieldColorPicker'
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return the default or if not set a blank value
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
public function getBlankValue(Page $page, Field $field) {
|
|
||||||
if($field->default == "0") $field->default = "000000";
|
|
||||||
return $field->default ? $field->default : '';
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return the associated InputfieldColorPicker
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
public function getInputfield(Page $page, Field $field) {
|
|
||||||
$inputField = $this->modules->get('InputfieldColorPicker');
|
|
||||||
$inputField->set('default', $field->default);
|
|
||||||
$inputField->set('swatch', $field->swatch);
|
|
||||||
return $inputField;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Format the value for output
|
|
||||||
* @param Page $page
|
|
||||||
* @param Field $field
|
|
||||||
* @param mixed $value
|
|
||||||
* @return string
|
|
||||||
*/
|
|
||||||
public function ___formatValue(Page $page, Field $field, $value){
|
|
||||||
|
|
||||||
if(!$value) $value = trim($field->default);
|
|
||||||
if(!strlen($value)) return $value;
|
|
||||||
if(!$field->formatting) return $value;
|
|
||||||
|
|
||||||
if("transp" == strtolower($value)) return self::TRANSPARENT;
|
|
||||||
if($value == "0") $value = "000000";
|
|
||||||
|
|
||||||
return self::HEX_PREFIX . $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Render formatted markup for use in Admin ie. Lister
|
|
||||||
*/
|
|
||||||
public function ___markupValue(Page $page, Field $field, $value = null, $property = '') {
|
|
||||||
$m = "";
|
|
||||||
if($value) {
|
|
||||||
$m = "<span class='Markup_{$this->className}' style='width: 1em; height: 1em; display: inline-block; background-color:#" . $value . "'></span>";
|
|
||||||
}
|
|
||||||
return $m;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* sanitize the HEX value and cut off characters if longer than 6
|
|
||||||
*/
|
|
||||||
public function sanitizeValue(Page $page, Field $field, $value) {
|
|
||||||
$value = $value == "transp" ? $value : strtoupper(substr($value, 0, 6));
|
|
||||||
return $value;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return the database schema in specified format
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
public function getDatabaseSchema(Field $field) {
|
|
||||||
$schema = parent::getDatabaseSchema($field);
|
|
||||||
$schema['data'] = 'CHAR(6) NOT NULL'; // i.e. FFFFFF or 333333 (hex color codes) or transp
|
|
||||||
return $schema;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* set the config option fields for this field
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
public function ___getConfigInputfields(Field $field) {
|
|
||||||
$inputfields = parent::___getConfigInputfields($field);
|
|
||||||
|
|
||||||
$f = $this->modules->get("InputfieldText");
|
|
||||||
$f->attr('name', 'default');
|
|
||||||
$f->attr('size', 6);
|
|
||||||
$f->attr('value', $field->default);
|
|
||||||
$f->label = $this->_('Default Value');
|
|
||||||
$f->description = $this->_('Set the default HEX value or "transp" (transparent) for the field.');
|
|
||||||
$f->notes = $this->_('For example "EAEAEA". To have a blank value leave this field empty.');
|
|
||||||
$inputfields->append($f);
|
|
||||||
|
|
||||||
/* additions (swatches) by @Rayden */
|
|
||||||
$f = $this->modules->get("InputfieldTextarea");
|
|
||||||
$f->attr('name', 'swatch');
|
|
||||||
$f->attr('value', $field->swatch);
|
|
||||||
$f->label = $this->_('Color Swatch');
|
|
||||||
$f->description = $this->_('Comma seperated HEX values or "transp" (transparent) to add color swatches for each.');
|
|
||||||
$f->notes = $this->_('For example "transp,FFFFFF,000000". Leave this field empty if you do not want to use the color swatch.');
|
|
||||||
$inputfields->append($f);
|
|
||||||
|
|
||||||
$f = $this->modules->get("InputfieldCheckbox");
|
|
||||||
$f->attr('name', 'formatting');
|
|
||||||
$f->attr('value', $field->formatting);
|
|
||||||
$f->attr('checked', $field->formatting ? 'checked' : '');
|
|
||||||
$f->label = $this->_('Turn on output formatting');
|
|
||||||
$f->description = $this->_('Enabling this turns on output formatting for this field. This will return the HEX value of the field already prefixed with "#" for convenience i.e "#FFAADD" and "transp" will be output as "transparent".');;
|
|
||||||
$inputfields->append($f);
|
|
||||||
|
|
||||||
return $inputfields;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,96 +0,0 @@
|
||||||
/**
|
|
||||||
* An Inputfieldtype for handling Colors
|
|
||||||
* used by the FieldtypeColorPicker/InputfieldColorPicker
|
|
||||||
*
|
|
||||||
* created by Philipp "Soma" Urlich
|
|
||||||
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
|
|
||||||
*
|
|
||||||
* Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
;
|
|
||||||
|
|
||||||
(function(document, $){
|
|
||||||
|
|
||||||
var InputfieldColorPicker = {
|
|
||||||
|
|
||||||
init: function() {
|
|
||||||
|
|
||||||
$('div[id^=ColorPicker_]:not(.colorpicker_loaded)').each(function(){
|
|
||||||
var $colorpicker = $(this);
|
|
||||||
console.log("init colorpicker" + $colorpicker);
|
|
||||||
|
|
||||||
$colorpicker.ColorPicker({
|
|
||||||
color: $(this).data('color').toString(),
|
|
||||||
onShow: function (colpkr) {
|
|
||||||
$(colpkr).fadeIn(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onHide: function (colpkr) {
|
|
||||||
$(colpkr).fadeOut(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onChange: function (hsb, hex, rgb) {
|
|
||||||
$colorpicker.css('backgroundColor', '#' + hex);
|
|
||||||
$colorpicker.css('background-image', 'none');
|
|
||||||
$colorpicker.next('input').val(hex).trigger('change');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
$colorpicker.addClass("colorpicker_loaded");
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
},
|
|
||||||
|
|
||||||
attachEvents: function() {
|
|
||||||
$(document).on('click', 'a.ColorPickerReset', function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
var color = $(this).data('default') && $(this).data('default') != 'transp' ? '#' + $(this).data('default').toString() : 'transparent';
|
|
||||||
$(this).parent().find('input').val($(this).data('default')).trigger('change');
|
|
||||||
$(this).parent().find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('default').toString());
|
|
||||||
$(this).parent().find('div[id^=ColorPicker_]')
|
|
||||||
.css('backgroundColor', color)
|
|
||||||
.css('background-image', 'none')
|
|
||||||
.attr('data-color', $(this).data('default').toString());
|
|
||||||
if(color == 'transparent') {
|
|
||||||
var modurl = $(this).data('modurl');
|
|
||||||
$(this).parent().find('div[id^=ColorPicker_]')
|
|
||||||
.css('background-image', 'url(' + modurl + 'transparent.gif)');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/* additions (swatches) by @Rayden */
|
|
||||||
$(document).on('click', 'div.ColorPickerSwatch',function(e){
|
|
||||||
e.preventDefault();
|
|
||||||
var color = $(this).data('color') && $(this).data('color') != 'transp' ? '#' + $(this).data('color').toString() : 'transparent';
|
|
||||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('input').val($(this).data('color')).trigger('change');
|
|
||||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]').ColorPickerSetColor($(this).data('color').toString());
|
|
||||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
|
|
||||||
.css('backgroundColor', color)
|
|
||||||
.css('background-image', 'none')
|
|
||||||
.attr('data-color', $(this).data('color').toString());
|
|
||||||
if(color == 'transparent') {
|
|
||||||
var modurl = $(this).closest('.ui-widget-content, .InputfieldContent').find('.ColorPickerReset').data('modurl');
|
|
||||||
$(this).closest('.ui-widget-content, .InputfieldContent').find('div[id^=ColorPicker_]')
|
|
||||||
.css('background-image', 'url(' + modurl + 'transparent.gif)');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
};
|
|
||||||
|
|
||||||
// document ready
|
|
||||||
$(function(){
|
|
||||||
InputfieldColorPicker.init();
|
|
||||||
InputfieldColorPicker.attachEvents();
|
|
||||||
$(".Inputfield").on("repeateradd", ".InputfieldRepeater", InputfieldColorPicker.init);
|
|
||||||
$(".Inputfield").on("reloaded", ".InputfieldRepeater", function(){
|
|
||||||
InputfieldColorPicker.init();
|
|
||||||
});
|
|
||||||
|
|
||||||
});
|
|
||||||
|
|
||||||
}(document, jQuery));
|
|
||||||
|
|
||||||
|
|
@ -1,93 +0,0 @@
|
||||||
<?php
|
|
||||||
|
|
||||||
/**
|
|
||||||
* An Inputfieldtype for handling Colors
|
|
||||||
* used by the FieldtypeColorPicker
|
|
||||||
*
|
|
||||||
* created by Philipp "Soma" Urlich
|
|
||||||
* ColorPicker jQuery Plugin by http://www.eyecon.ro/colorpicker/
|
|
||||||
*
|
|
||||||
* additions (swatches) by @Rayden
|
|
||||||
*
|
|
||||||
* Licensed under LGPL3 http://www.gnu.org/licenses/lgpl-3.0.txt
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
class InputfieldColorPicker extends Inputfield {
|
|
||||||
|
|
||||||
public static function getModuleInfo() {
|
|
||||||
return array(
|
|
||||||
'title' => 'ColorPicker',
|
|
||||||
'version' => 203,
|
|
||||||
'summary' => 'Choose your colors the easy way.',
|
|
||||||
'href' => 'http://processwire.com/talk/topic/865-module-colorpicker/page__gopid__7340#entry7340',
|
|
||||||
'requires' => array("FieldtypeColorPicker")
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
public function __construct() {
|
|
||||||
parent::__construct();
|
|
||||||
$this->setAttribute('type', 'hidden');
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* inputfield is loaded
|
|
||||||
*/
|
|
||||||
public function init() {
|
|
||||||
parent::init();
|
|
||||||
$conf = $this->getModuleInfo();
|
|
||||||
$version = (int) $conf['version'];
|
|
||||||
// append script needed for the inputfield
|
|
||||||
$this->config->styles->add($this->config->urls->InputfieldColorPicker . "colorpicker/css/colorpicker.css?v={$version}");
|
|
||||||
$this->config->scripts->add($this->config->urls->InputfieldColorPicker . "colorpicker/js/colorpicker.min.js?v={$version}");
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* render the markup for this iputfield
|
|
||||||
* @return string html markup
|
|
||||||
*/
|
|
||||||
public function ___render() {
|
|
||||||
|
|
||||||
$out = "\n<div id='ColorPicker_$this->name' style='border:2px solid #444; display:block;";
|
|
||||||
$out .= "width:40px; height:40px; background-color:";
|
|
||||||
$out .= $this->value == "transp"
|
|
||||||
? $this->value . "; background-image:url({$this->config->urls->InputfieldColorPicker}transparent.gif);"
|
|
||||||
: "#" . $this->value . "; background-image:none";
|
|
||||||
$out .= "' data-color='" . $this->value . "'></div>";
|
|
||||||
$out .= "<input " . $this->getAttributesString() . " />";
|
|
||||||
if($this->default == "0") $this->default = "000000";
|
|
||||||
$out .= "<a class='ColorPickerReset' href='#' data-default='{$this->default}' ";
|
|
||||||
$out .= "data-modurl='{$this->config->urls->InputfieldColorPicker}'>" . $this->_('reset color') . "</a>";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* add swatches for predefined color values | @Rayden
|
|
||||||
*/
|
|
||||||
$swatch = trim($this->swatch);
|
|
||||||
|
|
||||||
if(strlen($swatch)) {
|
|
||||||
|
|
||||||
$csvalues = explode(",", trim($swatch));
|
|
||||||
|
|
||||||
if(count($csvalues)) {
|
|
||||||
|
|
||||||
$out .= "<ul style='list-style-type: none; margin: 1em 0 0; padding: 0; overflow: hidden'>";
|
|
||||||
|
|
||||||
foreach($csvalues as $csvalue) {
|
|
||||||
$csvalue = trim($csvalue);
|
|
||||||
if($csvalue == "0") $csvalue = "000000";
|
|
||||||
$out .= "<li style='display: inline-block; float:left; margin:0 4px 4px 0; border:1px solid #444; width:24px; height:24px; background-color:";
|
|
||||||
$out .= $csvalue == "transp"
|
|
||||||
? $csvalue . ";background-image:url({$this->config->urls->InputfieldColorPicker}transparent.gif);"
|
|
||||||
: "#" . $csvalue;
|
|
||||||
$out .= "'><div class='ColorPickerSwatch' href='#' data-color='{$csvalue}' style='width:24px;height:24px;display:block;cursor:pointer;' title='{$csvalue}'></div></li>";
|
|
||||||
}
|
|
||||||
|
|
||||||
$out .= "</ul>";
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return $out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
@ -1,101 +0,0 @@
|
||||||
ColorPicker
|
|
||||||
=====================
|
|
||||||
|
|
||||||
**Custom Fieldtype/Inputfield for ProcessWire 2.+/3.+**
|
|
||||||
|
|
||||||
This module gives you a new custom Fieldtype. Let's you select a color using a Colorpicker jQuery Plugin. The color selected will be stored in HEX format uppercase: "EAEAEA";
|
|
||||||
|
|
||||||
When creating a new field in the admin, you can set a default value. The default value will be set when creating a new page, and it will also be used for empty fields.
|
|
||||||
|
|
||||||
The field supports a transparent value. In the field setting you can use the name "transp" to define it. When output formatting (2.0.0) of the field is enabled, the field will return "transparent" in template code.
|
|
||||||
|
|
||||||
The field supports a "reset" button to be able to set it back to the default value.
|
|
||||||
|
|
||||||
### How to use it
|
|
||||||
|
|
||||||
To use it in your template as a background HEX color, you'd simple output the value and prefix it with a #:
|
|
||||||
|
|
||||||
```
|
|
||||||
echo "background-color: #" . $page->color;
|
|
||||||
```
|
|
||||||
|
|
||||||
Since of 2.0.0 you can enable output formatting of the field in the details settings. When enabled it will format value directly from AADDEE to "#AADDEE" and "transp" to "transparent".
|
|
||||||
|
|
||||||
```
|
|
||||||
echo "background-color: " . $page->color;
|
|
||||||
```
|
|
||||||
|
|
||||||
The colorpicker used:
|
|
||||||
[ColorPicker jQuery Plugin by Eyecon](http://www.eyecon.ro/colorpicker/)
|
|
||||||
|
|
||||||
### Changelog
|
|
||||||
|
|
||||||
**2.0.2**
|
|
||||||
|
|
||||||
- fixed issue when field is in a Repeater or RepeaterMatrix
|
|
||||||
- added support for ___markupValue() used in Lister
|
|
||||||
|
|
||||||
|
|
||||||
**2.0.1**
|
|
||||||
|
|
||||||
- Fixed default "000000" value issue in Fieldtype
|
|
||||||
|
|
||||||
**2.0.0**
|
|
||||||
|
|
||||||
- Added output formatting option to format values with prefix "#" when output in template code.
|
|
||||||
- Added checks for "0" values and returning them as "000000", just in case ProcessWire converts them to 0.
|
|
||||||
|
|
||||||
**1.0.8**
|
|
||||||
|
|
||||||
- some maintenance, remove <p> not needed
|
|
||||||
- remove overflow: auto
|
|
||||||
_ colorpicker css fix input with box sizing coming from new admin theme
|
|
||||||
|
|
||||||
**1.0.7**
|
|
||||||
|
|
||||||
- fixed typecasting bug: when a color value is numeric it should be
|
|
||||||
typecasted to string. This prevents the color picker window from not
|
|
||||||
being launched. @Rayden
|
|
||||||
- fixed small visualisation issue with the color swatch preventing a
|
|
||||||
box collapse with css. @Rayden
|
|
||||||
|
|
||||||
**1.0.6**
|
|
||||||
|
|
||||||
- added support for color swatches for easy predefining and selecting color values @Rayden
|
|
||||||
- added "transp" support for a transparent value (empty)
|
|
||||||
|
|
||||||
**1.0.5**
|
|
||||||
|
|
||||||
- fix bug with default value
|
|
||||||
|
|
||||||
**1.0.4**
|
|
||||||
|
|
||||||
- fix bug when used in repeaters
|
|
||||||
|
|
||||||
**1.0.3**
|
|
||||||
|
|
||||||
- added support for default value
|
|
||||||
- added reset link to set back to default color
|
|
||||||
|
|
||||||
**1.0.2**
|
|
||||||
|
|
||||||
- Fixed issue with colorpicker not working when used in tabs
|
|
||||||
|
|
||||||
**1.0.1**
|
|
||||||
|
|
||||||
- Remove lots of code not needed. Cleanup.
|
|
||||||
|
|
||||||
**1.0.0**
|
|
||||||
|
|
||||||
- Initial Stable Release.
|
|
||||||
|
|
||||||
|
|
||||||
### How to install:
|
|
||||||
|
|
||||||
- Download the contents of this repository and put the folder renamed as "ColorPicker" into your site/modules/ folder
|
|
||||||
- Login to processwire and got to Modules page and click "Check for new modules". You should see a note that two new modules were found. Install the FieldtypeColorPicker module under "Field" section. This will also install the required InputfieldColorPicker at the same time.
|
|
||||||
- Done
|
|
||||||
- You can now create a new field with the "ColorPicker" Fieldtype.
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
BIN
site/modules/ColorPicker/colorpicker/.DS_Store
vendored
BIN
site/modules/ColorPicker/colorpicker/.DS_Store
vendored
Binary file not shown.
|
|
@ -1,164 +0,0 @@
|
||||||
|
|
||||||
.colorpicker {
|
|
||||||
width: 356px;
|
|
||||||
height: 176px;
|
|
||||||
overflow: hidden;
|
|
||||||
position: absolute;
|
|
||||||
background: url(../images/colorpicker_background.png);
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
display: none;
|
|
||||||
z-index:1;
|
|
||||||
}
|
|
||||||
.colorpicker_color {
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
left: 14px;
|
|
||||||
top: 13px;
|
|
||||||
position: absolute;
|
|
||||||
background: #f00;
|
|
||||||
overflow: hidden;
|
|
||||||
cursor: crosshair;
|
|
||||||
}
|
|
||||||
.colorpicker_color div {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 150px;
|
|
||||||
height: 150px;
|
|
||||||
background: url(../images/colorpicker_overlay.png);
|
|
||||||
}
|
|
||||||
.colorpicker_color div div {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 11px;
|
|
||||||
height: 11px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: url(../images/colorpicker_select.gif);
|
|
||||||
margin: -5px 0 0 -5px;
|
|
||||||
}
|
|
||||||
.colorpicker_hue {
|
|
||||||
position: absolute;
|
|
||||||
top: 13px;
|
|
||||||
left: 171px;
|
|
||||||
width: 35px;
|
|
||||||
height: 150px;
|
|
||||||
cursor: n-resize;
|
|
||||||
}
|
|
||||||
.colorpicker_hue div {
|
|
||||||
position: absolute;
|
|
||||||
width: 35px;
|
|
||||||
height: 9px;
|
|
||||||
overflow: hidden;
|
|
||||||
background: url(../images/colorpicker_indic.gif) left top;
|
|
||||||
margin: -4px 0 0 0;
|
|
||||||
left: 0px;
|
|
||||||
}
|
|
||||||
.colorpicker_new_color {
|
|
||||||
position: absolute;
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
left: 213px;
|
|
||||||
top: 13px;
|
|
||||||
background: #f00;
|
|
||||||
}
|
|
||||||
.colorpicker_current_color {
|
|
||||||
position: absolute;
|
|
||||||
width: 60px;
|
|
||||||
height: 30px;
|
|
||||||
left: 283px;
|
|
||||||
top: 13px;
|
|
||||||
background: #f00;
|
|
||||||
}
|
|
||||||
.colorpicker input {
|
|
||||||
background-color: transparent;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
position: absolute;
|
|
||||||
font-size: 10px;
|
|
||||||
font-family: Arial, Helvetica, sans-serif;
|
|
||||||
color: #898989;
|
|
||||||
top: 4px;
|
|
||||||
right: 11px;
|
|
||||||
text-align: right;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
height: 15px;
|
|
||||||
|
|
||||||
}
|
|
||||||
.colorpicker_hex {
|
|
||||||
position: absolute;
|
|
||||||
width: 72px;
|
|
||||||
height: 22px;
|
|
||||||
background: url(../images/colorpicker_hex.png) top;
|
|
||||||
left: 212px;
|
|
||||||
top: 142px;
|
|
||||||
}
|
|
||||||
.colorpicker_hex input {
|
|
||||||
right: 6px;
|
|
||||||
}
|
|
||||||
.colorpicker_field {
|
|
||||||
height: 22px;
|
|
||||||
width: 62px;
|
|
||||||
background-position: top;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.colorpicker_field span {
|
|
||||||
position: absolute;
|
|
||||||
width: 12px;
|
|
||||||
height: 22px;
|
|
||||||
overflow: hidden;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
cursor: n-resize;
|
|
||||||
}
|
|
||||||
.colorpicker_rgb_r {
|
|
||||||
background-image: url(../images/colorpicker_rgb_r.png);
|
|
||||||
top: 52px;
|
|
||||||
left: 212px;
|
|
||||||
}
|
|
||||||
.colorpicker_rgb_g {
|
|
||||||
background-image: url(../images/colorpicker_rgb_g.png);
|
|
||||||
top: 82px;
|
|
||||||
left: 212px;
|
|
||||||
}
|
|
||||||
.colorpicker_rgb_b {
|
|
||||||
background-image: url(../images/colorpicker_rgb_b.png);
|
|
||||||
top: 112px;
|
|
||||||
left: 212px;
|
|
||||||
}
|
|
||||||
.colorpicker_hsb_h {
|
|
||||||
background-image: url(../images/colorpicker_hsb_h.png);
|
|
||||||
top: 52px;
|
|
||||||
left: 282px;
|
|
||||||
}
|
|
||||||
.colorpicker_hsb_s {
|
|
||||||
background-image: url(../images/colorpicker_hsb_s.png);
|
|
||||||
top: 82px;
|
|
||||||
left: 282px;
|
|
||||||
}
|
|
||||||
.colorpicker_hsb_b {
|
|
||||||
background-image: url(../images/colorpicker_hsb_b.png);
|
|
||||||
top: 112px;
|
|
||||||
left: 282px;
|
|
||||||
}
|
|
||||||
.colorpicker_submit {
|
|
||||||
position: absolute;
|
|
||||||
width: 22px;
|
|
||||||
height: 22px;
|
|
||||||
background: url(../images/colorpicker_submit.png) top;
|
|
||||||
left: 322px;
|
|
||||||
top: 142px;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
.colorpicker_focus {
|
|
||||||
background-position: center;
|
|
||||||
}
|
|
||||||
.colorpicker_hex.colorpicker_focus {
|
|
||||||
background-position: bottom;
|
|
||||||
}
|
|
||||||
.colorpicker_submit.colorpicker_focus {
|
|
||||||
background-position: bottom;
|
|
||||||
}
|
|
||||||
.colorpicker_slider {
|
|
||||||
background-position: bottom;
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 49 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 532 B |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,012 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 B |
Binary file not shown.
|
Before Width: | Height: | Size: 984 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 562 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 970 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 86 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1,008 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1,018 B |
Binary file not shown.
|
Before Width: | Height: | Size: 997 B |
Binary file not shown.
|
Before Width: | Height: | Size: 506 B |
Binary file not shown.
|
Before Width: | Height: | Size: 518 B |
Binary file not shown.
|
Before Width: | Height: | Size: 315 B |
|
|
@ -1,484 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* Color picker
|
|
||||||
* Author: Stefan Petre www.eyecon.ro
|
|
||||||
*
|
|
||||||
* Dual licensed under the MIT and GPL licenses
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
(function ($) {
|
|
||||||
var ColorPicker = function () {
|
|
||||||
var
|
|
||||||
ids = {},
|
|
||||||
inAction,
|
|
||||||
charMin = 65,
|
|
||||||
visible,
|
|
||||||
tpl = '<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
|
|
||||||
defaults = {
|
|
||||||
eventName: 'click',
|
|
||||||
onShow: function () {},
|
|
||||||
onBeforeShow: function(){},
|
|
||||||
onHide: function () {},
|
|
||||||
onChange: function () {},
|
|
||||||
onSubmit: function () {},
|
|
||||||
color: 'ff0000',
|
|
||||||
livePreview: true,
|
|
||||||
flat: false
|
|
||||||
},
|
|
||||||
fillRGBFields = function (hsb, cal) {
|
|
||||||
var rgb = HSBToRGB(hsb);
|
|
||||||
$(cal).data('colorpicker').fields
|
|
||||||
.eq(1).val(rgb.r).end()
|
|
||||||
.eq(2).val(rgb.g).end()
|
|
||||||
.eq(3).val(rgb.b).end();
|
|
||||||
},
|
|
||||||
fillHSBFields = function (hsb, cal) {
|
|
||||||
$(cal).data('colorpicker').fields
|
|
||||||
.eq(4).val(hsb.h).end()
|
|
||||||
.eq(5).val(hsb.s).end()
|
|
||||||
.eq(6).val(hsb.b).end();
|
|
||||||
},
|
|
||||||
fillHexFields = function (hsb, cal) {
|
|
||||||
$(cal).data('colorpicker').fields
|
|
||||||
.eq(0).val(HSBToHex(hsb)).end();
|
|
||||||
},
|
|
||||||
setSelector = function (hsb, cal) {
|
|
||||||
$(cal).data('colorpicker').selector.css('backgroundColor', '#' + HSBToHex({h: hsb.h, s: 100, b: 100}));
|
|
||||||
$(cal).data('colorpicker').selectorIndic.css({
|
|
||||||
left: parseInt(150 * hsb.s/100, 10),
|
|
||||||
top: parseInt(150 * (100-hsb.b)/100, 10)
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setHue = function (hsb, cal) {
|
|
||||||
$(cal).data('colorpicker').hue.css('top', parseInt(150 - 150 * hsb.h/360, 10));
|
|
||||||
},
|
|
||||||
setCurrentColor = function (hsb, cal) {
|
|
||||||
$(cal).data('colorpicker').currentColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
|
||||||
},
|
|
||||||
setNewColor = function (hsb, cal) {
|
|
||||||
$(cal).data('colorpicker').newColor.css('backgroundColor', '#' + HSBToHex(hsb));
|
|
||||||
},
|
|
||||||
keyDown = function (ev) {
|
|
||||||
var pressedKey = ev.charCode || ev.keyCode || -1;
|
|
||||||
if ((pressedKey > charMin && pressedKey <= 90) || pressedKey == 32) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
var cal = $(this).parent().parent();
|
|
||||||
if (cal.data('colorpicker').livePreview === true) {
|
|
||||||
change.apply(this);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
change = function (ev) {
|
|
||||||
var cal = $(this).parent().parent(), col;
|
|
||||||
if (this.parentNode.className.indexOf('_hex') > 0) {
|
|
||||||
cal.data('colorpicker').color = col = HexToHSB(fixHex(this.value));
|
|
||||||
} else if (this.parentNode.className.indexOf('_hsb') > 0) {
|
|
||||||
cal.data('colorpicker').color = col = fixHSB({
|
|
||||||
h: parseInt(cal.data('colorpicker').fields.eq(4).val(), 10),
|
|
||||||
s: parseInt(cal.data('colorpicker').fields.eq(5).val(), 10),
|
|
||||||
b: parseInt(cal.data('colorpicker').fields.eq(6).val(), 10)
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
cal.data('colorpicker').color = col = RGBToHSB(fixRGB({
|
|
||||||
r: parseInt(cal.data('colorpicker').fields.eq(1).val(), 10),
|
|
||||||
g: parseInt(cal.data('colorpicker').fields.eq(2).val(), 10),
|
|
||||||
b: parseInt(cal.data('colorpicker').fields.eq(3).val(), 10)
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
if (ev) {
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
}
|
|
||||||
setSelector(col, cal.get(0));
|
|
||||||
setHue(col, cal.get(0));
|
|
||||||
setNewColor(col, cal.get(0));
|
|
||||||
cal.data('colorpicker').onChange.apply(cal, [col, HSBToHex(col), HSBToRGB(col)]);
|
|
||||||
},
|
|
||||||
blur = function (ev) {
|
|
||||||
var cal = $(this).parent().parent();
|
|
||||||
cal.data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
|
||||||
},
|
|
||||||
focus = function () {
|
|
||||||
charMin = this.parentNode.className.indexOf('_hex') > 0 ? 70 : 65;
|
|
||||||
$(this).parent().parent().data('colorpicker').fields.parent().removeClass('colorpicker_focus');
|
|
||||||
$(this).parent().addClass('colorpicker_focus');
|
|
||||||
},
|
|
||||||
downIncrement = function (ev) {
|
|
||||||
var field = $(this).parent().find('input').focus();
|
|
||||||
var current = {
|
|
||||||
el: $(this).parent().addClass('colorpicker_slider'),
|
|
||||||
max: this.parentNode.className.indexOf('_hsb_h') > 0 ? 360 : (this.parentNode.className.indexOf('_hsb') > 0 ? 100 : 255),
|
|
||||||
y: ev.pageY,
|
|
||||||
field: field,
|
|
||||||
val: parseInt(field.val(), 10),
|
|
||||||
preview: $(this).parent().parent().data('colorpicker').livePreview
|
|
||||||
};
|
|
||||||
$(document).bind('mouseup', current, upIncrement);
|
|
||||||
$(document).bind('mousemove', current, moveIncrement);
|
|
||||||
},
|
|
||||||
moveIncrement = function (ev) {
|
|
||||||
ev.data.field.val(Math.max(0, Math.min(ev.data.max, parseInt(ev.data.val + ev.pageY - ev.data.y, 10))));
|
|
||||||
if (ev.data.preview) {
|
|
||||||
change.apply(ev.data.field.get(0), [true]);
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
upIncrement = function (ev) {
|
|
||||||
change.apply(ev.data.field.get(0), [true]);
|
|
||||||
ev.data.el.removeClass('colorpicker_slider').find('input').focus();
|
|
||||||
$(document).unbind('mouseup', upIncrement);
|
|
||||||
$(document).unbind('mousemove', moveIncrement);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
downHue = function (ev) {
|
|
||||||
var current = {
|
|
||||||
cal: $(this).parent(),
|
|
||||||
y: $(this).offset().top
|
|
||||||
};
|
|
||||||
current.preview = current.cal.data('colorpicker').livePreview;
|
|
||||||
$(document).bind('mouseup', current, upHue);
|
|
||||||
$(document).bind('mousemove', current, moveHue);
|
|
||||||
},
|
|
||||||
moveHue = function (ev) {
|
|
||||||
change.apply(
|
|
||||||
ev.data.cal.data('colorpicker')
|
|
||||||
.fields
|
|
||||||
.eq(4)
|
|
||||||
.val(parseInt(360*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.y))))/150, 10))
|
|
||||||
.get(0),
|
|
||||||
[ev.data.preview]
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
upHue = function (ev) {
|
|
||||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
|
||||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
|
||||||
$(document).unbind('mouseup', upHue);
|
|
||||||
$(document).unbind('mousemove', moveHue);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
downSelector = function (ev) {
|
|
||||||
var current = {
|
|
||||||
cal: $(this).parent(),
|
|
||||||
pos: $(this).offset()
|
|
||||||
};
|
|
||||||
current.preview = current.cal.data('colorpicker').livePreview;
|
|
||||||
$(document).bind('mouseup', current, upSelector);
|
|
||||||
$(document).bind('mousemove', current, moveSelector);
|
|
||||||
},
|
|
||||||
moveSelector = function (ev) {
|
|
||||||
change.apply(
|
|
||||||
ev.data.cal.data('colorpicker')
|
|
||||||
.fields
|
|
||||||
.eq(6)
|
|
||||||
.val(parseInt(100*(150 - Math.max(0,Math.min(150,(ev.pageY - ev.data.pos.top))))/150, 10))
|
|
||||||
.end()
|
|
||||||
.eq(5)
|
|
||||||
.val(parseInt(100*(Math.max(0,Math.min(150,(ev.pageX - ev.data.pos.left))))/150, 10))
|
|
||||||
.get(0),
|
|
||||||
[ev.data.preview]
|
|
||||||
);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
upSelector = function (ev) {
|
|
||||||
fillRGBFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
|
||||||
fillHexFields(ev.data.cal.data('colorpicker').color, ev.data.cal.get(0));
|
|
||||||
$(document).unbind('mouseup', upSelector);
|
|
||||||
$(document).unbind('mousemove', moveSelector);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
enterSubmit = function (ev) {
|
|
||||||
$(this).addClass('colorpicker_focus');
|
|
||||||
},
|
|
||||||
leaveSubmit = function (ev) {
|
|
||||||
$(this).removeClass('colorpicker_focus');
|
|
||||||
},
|
|
||||||
clickSubmit = function (ev) {
|
|
||||||
var cal = $(this).parent();
|
|
||||||
var col = cal.data('colorpicker').color;
|
|
||||||
cal.data('colorpicker').origColor = col;
|
|
||||||
setCurrentColor(col, cal.get(0));
|
|
||||||
cal.data('colorpicker').onSubmit(col, HSBToHex(col), HSBToRGB(col), cal.data('colorpicker').el);
|
|
||||||
},
|
|
||||||
show = function (ev) {
|
|
||||||
var cal = $('#' + $(this).data('colorpickerId'));
|
|
||||||
cal.data('colorpicker').onBeforeShow.apply(this, [cal.get(0)]);
|
|
||||||
var pos = $(this).offset();
|
|
||||||
var viewPort = getViewport();
|
|
||||||
var top = pos.top + this.offsetHeight;
|
|
||||||
var left = pos.left;
|
|
||||||
if (top + 176 > viewPort.t + viewPort.h) {
|
|
||||||
top -= this.offsetHeight + 176;
|
|
||||||
}
|
|
||||||
if (left + 356 > viewPort.l + viewPort.w) {
|
|
||||||
left -= 356;
|
|
||||||
}
|
|
||||||
cal.css({left: left + 'px', top: top + 'px'});
|
|
||||||
if (cal.data('colorpicker').onShow.apply(this, [cal.get(0)]) != false) {
|
|
||||||
cal.show();
|
|
||||||
}
|
|
||||||
$(document).bind('mousedown', {cal: cal}, hide);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
hide = function (ev) {
|
|
||||||
if (!isChildOf(ev.data.cal.get(0), ev.target, ev.data.cal.get(0))) {
|
|
||||||
if (ev.data.cal.data('colorpicker').onHide.apply(this, [ev.data.cal.get(0)]) != false) {
|
|
||||||
ev.data.cal.hide();
|
|
||||||
}
|
|
||||||
$(document).unbind('mousedown', hide);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
isChildOf = function(parentEl, el, container) {
|
|
||||||
if (parentEl == el) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (parentEl.contains) {
|
|
||||||
return parentEl.contains(el);
|
|
||||||
}
|
|
||||||
if ( parentEl.compareDocumentPosition ) {
|
|
||||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
|
||||||
}
|
|
||||||
var prEl = el.parentNode;
|
|
||||||
while(prEl && prEl != container) {
|
|
||||||
if (prEl == parentEl)
|
|
||||||
return true;
|
|
||||||
prEl = prEl.parentNode;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
getViewport = function () {
|
|
||||||
var m = document.compatMode == 'CSS1Compat';
|
|
||||||
return {
|
|
||||||
l : window.pageXOffset || (m ? document.documentElement.scrollLeft : document.body.scrollLeft),
|
|
||||||
t : window.pageYOffset || (m ? document.documentElement.scrollTop : document.body.scrollTop),
|
|
||||||
w : window.innerWidth || (m ? document.documentElement.clientWidth : document.body.clientWidth),
|
|
||||||
h : window.innerHeight || (m ? document.documentElement.clientHeight : document.body.clientHeight)
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fixHSB = function (hsb) {
|
|
||||||
return {
|
|
||||||
h: Math.min(360, Math.max(0, hsb.h)),
|
|
||||||
s: Math.min(100, Math.max(0, hsb.s)),
|
|
||||||
b: Math.min(100, Math.max(0, hsb.b))
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fixRGB = function (rgb) {
|
|
||||||
return {
|
|
||||||
r: Math.min(255, Math.max(0, rgb.r)),
|
|
||||||
g: Math.min(255, Math.max(0, rgb.g)),
|
|
||||||
b: Math.min(255, Math.max(0, rgb.b))
|
|
||||||
};
|
|
||||||
},
|
|
||||||
fixHex = function (hex) {
|
|
||||||
var len = 6 - hex.length;
|
|
||||||
if (len > 0) {
|
|
||||||
var o = [];
|
|
||||||
for (var i=0; i<len; i++) {
|
|
||||||
o.push('0');
|
|
||||||
}
|
|
||||||
o.push(hex);
|
|
||||||
hex = o.join('');
|
|
||||||
}
|
|
||||||
return hex;
|
|
||||||
},
|
|
||||||
HexToRGB = function (hex) {
|
|
||||||
var hex = parseInt(((hex.indexOf('#') > -1) ? hex.substring(1) : hex), 16);
|
|
||||||
return {r: hex >> 16, g: (hex & 0x00FF00) >> 8, b: (hex & 0x0000FF)};
|
|
||||||
},
|
|
||||||
HexToHSB = function (hex) {
|
|
||||||
return RGBToHSB(HexToRGB(hex));
|
|
||||||
},
|
|
||||||
RGBToHSB = function (rgb) {
|
|
||||||
var hsb = {
|
|
||||||
h: 0,
|
|
||||||
s: 0,
|
|
||||||
b: 0
|
|
||||||
};
|
|
||||||
var min = Math.min(rgb.r, rgb.g, rgb.b);
|
|
||||||
var max = Math.max(rgb.r, rgb.g, rgb.b);
|
|
||||||
var delta = max - min;
|
|
||||||
hsb.b = max;
|
|
||||||
if (max != 0) {
|
|
||||||
|
|
||||||
}
|
|
||||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
|
||||||
if (hsb.s != 0) {
|
|
||||||
if (rgb.r == max) {
|
|
||||||
hsb.h = (rgb.g - rgb.b) / delta;
|
|
||||||
} else if (rgb.g == max) {
|
|
||||||
hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
|
||||||
} else {
|
|
||||||
hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
hsb.h = -1;
|
|
||||||
}
|
|
||||||
hsb.h *= 60;
|
|
||||||
if (hsb.h < 0) {
|
|
||||||
hsb.h += 360;
|
|
||||||
}
|
|
||||||
hsb.s *= 100/255;
|
|
||||||
hsb.b *= 100/255;
|
|
||||||
return hsb;
|
|
||||||
},
|
|
||||||
HSBToRGB = function (hsb) {
|
|
||||||
var rgb = {};
|
|
||||||
var h = Math.round(hsb.h);
|
|
||||||
var s = Math.round(hsb.s*255/100);
|
|
||||||
var v = Math.round(hsb.b*255/100);
|
|
||||||
if(s == 0) {
|
|
||||||
rgb.r = rgb.g = rgb.b = v;
|
|
||||||
} else {
|
|
||||||
var t1 = v;
|
|
||||||
var t2 = (255-s)*v/255;
|
|
||||||
var t3 = (t1-t2)*(h%60)/60;
|
|
||||||
if(h==360) h = 0;
|
|
||||||
if(h<60) {rgb.r=t1; rgb.b=t2; rgb.g=t2+t3}
|
|
||||||
else if(h<120) {rgb.g=t1; rgb.b=t2; rgb.r=t1-t3}
|
|
||||||
else if(h<180) {rgb.g=t1; rgb.r=t2; rgb.b=t2+t3}
|
|
||||||
else if(h<240) {rgb.b=t1; rgb.r=t2; rgb.g=t1-t3}
|
|
||||||
else if(h<300) {rgb.b=t1; rgb.g=t2; rgb.r=t2+t3}
|
|
||||||
else if(h<360) {rgb.r=t1; rgb.g=t2; rgb.b=t1-t3}
|
|
||||||
else {rgb.r=0; rgb.g=0; rgb.b=0}
|
|
||||||
}
|
|
||||||
return {r:Math.round(rgb.r), g:Math.round(rgb.g), b:Math.round(rgb.b)};
|
|
||||||
},
|
|
||||||
RGBToHex = function (rgb) {
|
|
||||||
var hex = [
|
|
||||||
rgb.r.toString(16),
|
|
||||||
rgb.g.toString(16),
|
|
||||||
rgb.b.toString(16)
|
|
||||||
];
|
|
||||||
$.each(hex, function (nr, val) {
|
|
||||||
if (val.length == 1) {
|
|
||||||
hex[nr] = '0' + val;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
return hex.join('');
|
|
||||||
},
|
|
||||||
HSBToHex = function (hsb) {
|
|
||||||
return RGBToHex(HSBToRGB(hsb));
|
|
||||||
},
|
|
||||||
restoreOriginal = function () {
|
|
||||||
var cal = $(this).parent();
|
|
||||||
var col = cal.data('colorpicker').origColor;
|
|
||||||
cal.data('colorpicker').color = col;
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
setSelector(col, cal.get(0));
|
|
||||||
setHue(col, cal.get(0));
|
|
||||||
setNewColor(col, cal.get(0));
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
init: function (opt) {
|
|
||||||
opt = $.extend({}, defaults, opt||{});
|
|
||||||
if (typeof opt.color == 'string') {
|
|
||||||
opt.color = HexToHSB(opt.color);
|
|
||||||
} else if (opt.color.r != undefined && opt.color.g != undefined && opt.color.b != undefined) {
|
|
||||||
opt.color = RGBToHSB(opt.color);
|
|
||||||
} else if (opt.color.h != undefined && opt.color.s != undefined && opt.color.b != undefined) {
|
|
||||||
opt.color = fixHSB(opt.color);
|
|
||||||
} else {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
return this.each(function () {
|
|
||||||
if (!$(this).data('colorpickerId')) {
|
|
||||||
var options = $.extend({}, opt);
|
|
||||||
options.origColor = opt.color;
|
|
||||||
var id = 'collorpicker_' + parseInt(Math.random() * 1000);
|
|
||||||
$(this).data('colorpickerId', id);
|
|
||||||
var cal = $(tpl).attr('id', id);
|
|
||||||
if (options.flat) {
|
|
||||||
cal.appendTo(this).show();
|
|
||||||
} else {
|
|
||||||
cal.appendTo(document.body);
|
|
||||||
}
|
|
||||||
options.fields = cal
|
|
||||||
.find('input')
|
|
||||||
.bind('keyup', keyDown)
|
|
||||||
.bind('change', change)
|
|
||||||
.bind('blur', blur)
|
|
||||||
.bind('focus', focus);
|
|
||||||
cal
|
|
||||||
.find('span').bind('mousedown', downIncrement).end()
|
|
||||||
.find('>div.colorpicker_current_color').bind('click', restoreOriginal);
|
|
||||||
options.selector = cal.find('div.colorpicker_color').bind('mousedown', downSelector);
|
|
||||||
options.selectorIndic = options.selector.find('div div');
|
|
||||||
options.el = this;
|
|
||||||
options.hue = cal.find('div.colorpicker_hue div');
|
|
||||||
cal.find('div.colorpicker_hue').bind('mousedown', downHue);
|
|
||||||
options.newColor = cal.find('div.colorpicker_new_color');
|
|
||||||
options.currentColor = cal.find('div.colorpicker_current_color');
|
|
||||||
cal.data('colorpicker', options);
|
|
||||||
cal.find('div.colorpicker_submit')
|
|
||||||
.bind('mouseenter', enterSubmit)
|
|
||||||
.bind('mouseleave', leaveSubmit)
|
|
||||||
.bind('click', clickSubmit);
|
|
||||||
fillRGBFields(options.color, cal.get(0));
|
|
||||||
fillHSBFields(options.color, cal.get(0));
|
|
||||||
fillHexFields(options.color, cal.get(0));
|
|
||||||
setHue(options.color, cal.get(0));
|
|
||||||
setSelector(options.color, cal.get(0));
|
|
||||||
setCurrentColor(options.color, cal.get(0));
|
|
||||||
setNewColor(options.color, cal.get(0));
|
|
||||||
if (options.flat) {
|
|
||||||
cal.css({
|
|
||||||
position: 'relative',
|
|
||||||
display: 'block'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
$(this).bind(options.eventName, show);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
showPicker: function() {
|
|
||||||
return this.each( function () {
|
|
||||||
if ($(this).data('colorpickerId')) {
|
|
||||||
show.apply(this);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
hidePicker: function() {
|
|
||||||
return this.each( function () {
|
|
||||||
if ($(this).data('colorpickerId')) {
|
|
||||||
$('#' + $(this).data('colorpickerId')).hide();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
setColor: function(col) {
|
|
||||||
if (typeof col == 'string') {
|
|
||||||
col = HexToHSB(col);
|
|
||||||
} else if (col.r != undefined && col.g != undefined && col.b != undefined) {
|
|
||||||
col = RGBToHSB(col);
|
|
||||||
} else if (col.h != undefined && col.s != undefined && col.b != undefined) {
|
|
||||||
col = fixHSB(col);
|
|
||||||
} else {
|
|
||||||
return this;
|
|
||||||
}
|
|
||||||
return this.each(function(){
|
|
||||||
if ($(this).data('colorpickerId')) {
|
|
||||||
var cal = $('#' + $(this).data('colorpickerId'));
|
|
||||||
cal.data('colorpicker').color = col;
|
|
||||||
cal.data('colorpicker').origColor = col;
|
|
||||||
fillRGBFields(col, cal.get(0));
|
|
||||||
fillHSBFields(col, cal.get(0));
|
|
||||||
fillHexFields(col, cal.get(0));
|
|
||||||
setHue(col, cal.get(0));
|
|
||||||
setSelector(col, cal.get(0));
|
|
||||||
setCurrentColor(col, cal.get(0));
|
|
||||||
setNewColor(col, cal.get(0));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}();
|
|
||||||
$.fn.extend({
|
|
||||||
ColorPicker: ColorPicker.init,
|
|
||||||
ColorPickerHide: ColorPicker.hidePicker,
|
|
||||||
ColorPickerShow: ColorPicker.showPicker,
|
|
||||||
ColorPickerSetColor: ColorPicker.setColor
|
|
||||||
});
|
|
||||||
})(jQuery)
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
(function($){var ColorPicker=function(){var ids={},inAction,charMin=65,visible,tpl='<div class="colorpicker"><div class="colorpicker_color"><div><div></div></div></div><div class="colorpicker_hue"><div></div></div><div class="colorpicker_new_color"></div><div class="colorpicker_current_color"></div><div class="colorpicker_hex"><input type="text" maxlength="6" size="6" /></div><div class="colorpicker_rgb_r colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_g colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_rgb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_h colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_s colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_hsb_b colorpicker_field"><input type="text" maxlength="3" size="3" /><span></span></div><div class="colorpicker_submit"></div></div>',
|
|
||||||
defaults={eventName:"click",onShow:function(){},onBeforeShow:function(){},onHide:function(){},onChange:function(){},onSubmit:function(){},color:"ff0000",livePreview:true,flat:false},fillRGBFields=function(hsb,cal){var rgb=HSBToRGB(hsb);$(cal).data("colorpicker").fields.eq(1).val(rgb.r).end().eq(2).val(rgb.g).end().eq(3).val(rgb.b).end()},fillHSBFields=function(hsb,cal){$(cal).data("colorpicker").fields.eq(4).val(hsb.h).end().eq(5).val(hsb.s).end().eq(6).val(hsb.b).end()},fillHexFields=function(hsb,
|
|
||||||
cal){$(cal).data("colorpicker").fields.eq(0).val(HSBToHex(hsb)).end()},setSelector=function(hsb,cal){$(cal).data("colorpicker").selector.css("backgroundColor","#"+HSBToHex({h:hsb.h,s:100,b:100}));$(cal).data("colorpicker").selectorIndic.css({left:parseInt(150*hsb.s/100,10),top:parseInt(150*(100-hsb.b)/100,10)})},setHue=function(hsb,cal){$(cal).data("colorpicker").hue.css("top",parseInt(150-150*hsb.h/360,10))},setCurrentColor=function(hsb,cal){$(cal).data("colorpicker").currentColor.css("backgroundColor",
|
|
||||||
"#"+HSBToHex(hsb))},setNewColor=function(hsb,cal){$(cal).data("colorpicker").newColor.css("backgroundColor","#"+HSBToHex(hsb))},keyDown=function(ev){var pressedKey=ev.charCode||ev.keyCode||-1;if(pressedKey>charMin&&pressedKey<=90||pressedKey==32)return false;var cal=$(this).parent().parent();if(cal.data("colorpicker").livePreview===true)change.apply(this)},change=function(ev){var cal=$(this).parent().parent(),col;if(this.parentNode.className.indexOf("_hex")>0)cal.data("colorpicker").color=col=HexToHSB(fixHex(this.value));
|
|
||||||
else if(this.parentNode.className.indexOf("_hsb")>0)cal.data("colorpicker").color=col=fixHSB({h:parseInt(cal.data("colorpicker").fields.eq(4).val(),10),s:parseInt(cal.data("colorpicker").fields.eq(5).val(),10),b:parseInt(cal.data("colorpicker").fields.eq(6).val(),10)});else cal.data("colorpicker").color=col=RGBToHSB(fixRGB({r:parseInt(cal.data("colorpicker").fields.eq(1).val(),10),g:parseInt(cal.data("colorpicker").fields.eq(2).val(),10),b:parseInt(cal.data("colorpicker").fields.eq(3).val(),10)}));
|
|
||||||
if(ev){fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0))}setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0));cal.data("colorpicker").onChange.apply(cal,[col,HSBToHex(col),HSBToRGB(col)])},blur=function(ev){var cal=$(this).parent().parent();cal.data("colorpicker").fields.parent().removeClass("colorpicker_focus")},focus=function(){charMin=this.parentNode.className.indexOf("_hex")>0?70:65;$(this).parent().parent().data("colorpicker").fields.parent().removeClass("colorpicker_focus");
|
|
||||||
$(this).parent().addClass("colorpicker_focus")},downIncrement=function(ev){var field=$(this).parent().find("input").focus();var current={el:$(this).parent().addClass("colorpicker_slider"),max:this.parentNode.className.indexOf("_hsb_h")>0?360:this.parentNode.className.indexOf("_hsb")>0?100:255,y:ev.pageY,field:field,val:parseInt(field.val(),10),preview:$(this).parent().parent().data("colorpicker").livePreview};$(document).bind("mouseup",current,upIncrement);$(document).bind("mousemove",current,moveIncrement)},
|
|
||||||
moveIncrement=function(ev){ev.data.field.val(Math.max(0,Math.min(ev.data.max,parseInt(ev.data.val+ev.pageY-ev.data.y,10))));if(ev.data.preview)change.apply(ev.data.field.get(0),[true]);return false},upIncrement=function(ev){change.apply(ev.data.field.get(0),[true]);ev.data.el.removeClass("colorpicker_slider").find("input").focus();$(document).unbind("mouseup",upIncrement);$(document).unbind("mousemove",moveIncrement);return false},downHue=function(ev){var current={cal:$(this).parent(),y:$(this).offset().top};
|
|
||||||
current.preview=current.cal.data("colorpicker").livePreview;$(document).bind("mouseup",current,upHue);$(document).bind("mousemove",current,moveHue)},moveHue=function(ev){change.apply(ev.data.cal.data("colorpicker").fields.eq(4).val(parseInt(360*(150-Math.max(0,Math.min(150,ev.pageY-ev.data.y)))/150,10)).get(0),[ev.data.preview]);return false},upHue=function(ev){fillRGBFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));
|
|
||||||
$(document).unbind("mouseup",upHue);$(document).unbind("mousemove",moveHue);return false},downSelector=function(ev){var current={cal:$(this).parent(),pos:$(this).offset()};current.preview=current.cal.data("colorpicker").livePreview;$(document).bind("mouseup",current,upSelector);$(document).bind("mousemove",current,moveSelector)},moveSelector=function(ev){change.apply(ev.data.cal.data("colorpicker").fields.eq(6).val(parseInt(100*(150-Math.max(0,Math.min(150,ev.pageY-ev.data.pos.top)))/150,10)).end().eq(5).val(parseInt(100*
|
|
||||||
Math.max(0,Math.min(150,ev.pageX-ev.data.pos.left))/150,10)).get(0),[ev.data.preview]);return false},upSelector=function(ev){fillRGBFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));fillHexFields(ev.data.cal.data("colorpicker").color,ev.data.cal.get(0));$(document).unbind("mouseup",upSelector);$(document).unbind("mousemove",moveSelector);return false},enterSubmit=function(ev){$(this).addClass("colorpicker_focus")},leaveSubmit=function(ev){$(this).removeClass("colorpicker_focus")},clickSubmit=
|
|
||||||
function(ev){var cal=$(this).parent();var col=cal.data("colorpicker").color;cal.data("colorpicker").origColor=col;setCurrentColor(col,cal.get(0));cal.data("colorpicker").onSubmit(col,HSBToHex(col),HSBToRGB(col),cal.data("colorpicker").el)},show=function(ev){var cal=$("#"+$(this).data("colorpickerId"));cal.data("colorpicker").onBeforeShow.apply(this,[cal.get(0)]);var pos=$(this).offset();var viewPort=getViewport();var top=pos.top+this.offsetHeight;var left=pos.left;if(top+176>viewPort.t+viewPort.h)top-=
|
|
||||||
this.offsetHeight+176;if(left+356>viewPort.l+viewPort.w)left-=356;cal.css({left:left+"px",top:top+"px"});if(cal.data("colorpicker").onShow.apply(this,[cal.get(0)])!=false)cal.show();$(document).bind("mousedown",{cal:cal},hide);return false},hide=function(ev){if(!isChildOf(ev.data.cal.get(0),ev.target,ev.data.cal.get(0))){if(ev.data.cal.data("colorpicker").onHide.apply(this,[ev.data.cal.get(0)])!=false)ev.data.cal.hide();$(document).unbind("mousedown",hide)}},isChildOf=function(parentEl,el,container){if(parentEl==
|
|
||||||
el)return true;if(parentEl.contains)return parentEl.contains(el);if(parentEl.compareDocumentPosition)return!!(parentEl.compareDocumentPosition(el)&16);var prEl=el.parentNode;while(prEl&&prEl!=container){if(prEl==parentEl)return true;prEl=prEl.parentNode}return false},getViewport=function(){var m=document.compatMode=="CSS1Compat";return{l:window.pageXOffset||(m?document.documentElement.scrollLeft:document.body.scrollLeft),t:window.pageYOffset||(m?document.documentElement.scrollTop:document.body.scrollTop),
|
|
||||||
w:window.innerWidth||(m?document.documentElement.clientWidth:document.body.clientWidth),h:window.innerHeight||(m?document.documentElement.clientHeight:document.body.clientHeight)}},fixHSB=function(hsb){return{h:Math.min(360,Math.max(0,hsb.h)),s:Math.min(100,Math.max(0,hsb.s)),b:Math.min(100,Math.max(0,hsb.b))}},fixRGB=function(rgb){return{r:Math.min(255,Math.max(0,rgb.r)),g:Math.min(255,Math.max(0,rgb.g)),b:Math.min(255,Math.max(0,rgb.b))}},fixHex=function(hex){var len=6-hex.length;if(len>0){var o=
|
|
||||||
[];for(var i=0;i<len;i++)o.push("0");o.push(hex);hex=o.join("")}return hex},HexToRGB=function(hex){var hex=parseInt(hex.indexOf("#")>-1?hex.substring(1):hex,16);return{r:hex>>16,g:(hex&65280)>>8,b:hex&255}},HexToHSB=function(hex){return RGBToHSB(HexToRGB(hex))},RGBToHSB=function(rgb){var hsb={h:0,s:0,b:0};var min=Math.min(rgb.r,rgb.g,rgb.b);var max=Math.max(rgb.r,rgb.g,rgb.b);var delta=max-min;hsb.b=max;if(max!=0);hsb.s=max!=0?255*delta/max:0;if(hsb.s!=0)if(rgb.r==max)hsb.h=(rgb.g-rgb.b)/delta;else if(rgb.g==
|
|
||||||
max)hsb.h=2+(rgb.b-rgb.r)/delta;else hsb.h=4+(rgb.r-rgb.g)/delta;else hsb.h=-1;hsb.h*=60;if(hsb.h<0)hsb.h+=360;hsb.s*=100/255;hsb.b*=100/255;return hsb},HSBToRGB=function(hsb){var rgb={};var h=Math.round(hsb.h);var s=Math.round(hsb.s*255/100);var v=Math.round(hsb.b*255/100);if(s==0)rgb.r=rgb.g=rgb.b=v;else{var t1=v;var t2=(255-s)*v/255;var t3=(t1-t2)*(h%60)/60;if(h==360)h=0;if(h<60){rgb.r=t1;rgb.b=t2;rgb.g=t2+t3}else if(h<120){rgb.g=t1;rgb.b=t2;rgb.r=t1-t3}else if(h<180){rgb.g=t1;rgb.r=t2;rgb.b=t2+
|
|
||||||
t3}else if(h<240){rgb.b=t1;rgb.r=t2;rgb.g=t1-t3}else if(h<300){rgb.b=t1;rgb.g=t2;rgb.r=t2+t3}else if(h<360){rgb.r=t1;rgb.g=t2;rgb.b=t1-t3}else{rgb.r=0;rgb.g=0;rgb.b=0}}return{r:Math.round(rgb.r),g:Math.round(rgb.g),b:Math.round(rgb.b)}},RGBToHex=function(rgb){var hex=[rgb.r.toString(16),rgb.g.toString(16),rgb.b.toString(16)];$.each(hex,function(nr,val){if(val.length==1)hex[nr]="0"+val});return hex.join("")},HSBToHex=function(hsb){return RGBToHex(HSBToRGB(hsb))},restoreOriginal=function(){var cal=
|
|
||||||
$(this).parent();var col=cal.data("colorpicker").origColor;cal.data("colorpicker").color=col;fillRGBFields(col,cal.get(0));fillHexFields(col,cal.get(0));fillHSBFields(col,cal.get(0));setSelector(col,cal.get(0));setHue(col,cal.get(0));setNewColor(col,cal.get(0))};return{init:function(opt){opt=$.extend({},defaults,opt||{});if(typeof opt.color=="string")opt.color=HexToHSB(opt.color);else if(opt.color.r!=undefined&&opt.color.g!=undefined&&opt.color.b!=undefined)opt.color=RGBToHSB(opt.color);else if(opt.color.h!=
|
|
||||||
undefined&&opt.color.s!=undefined&&opt.color.b!=undefined)opt.color=fixHSB(opt.color);else return this;return this.each(function(){if(!$(this).data("colorpickerId")){var options=$.extend({},opt);options.origColor=opt.color;var id="collorpicker_"+parseInt(Math.random()*1E3);$(this).data("colorpickerId",id);var cal=$(tpl).attr("id",id);if(options.flat)cal.appendTo(this).show();else cal.appendTo(document.body);options.fields=cal.find("input").bind("keyup",keyDown).bind("change",change).bind("blur",blur).bind("focus",
|
|
||||||
focus);cal.find("span").bind("mousedown",downIncrement).end().find(">div.colorpicker_current_color").bind("click",restoreOriginal);options.selector=cal.find("div.colorpicker_color").bind("mousedown",downSelector);options.selectorIndic=options.selector.find("div div");options.el=this;options.hue=cal.find("div.colorpicker_hue div");cal.find("div.colorpicker_hue").bind("mousedown",downHue);options.newColor=cal.find("div.colorpicker_new_color");options.currentColor=cal.find("div.colorpicker_current_color");
|
|
||||||
cal.data("colorpicker",options);cal.find("div.colorpicker_submit").bind("mouseenter",enterSubmit).bind("mouseleave",leaveSubmit).bind("click",clickSubmit);fillRGBFields(options.color,cal.get(0));fillHSBFields(options.color,cal.get(0));fillHexFields(options.color,cal.get(0));setHue(options.color,cal.get(0));setSelector(options.color,cal.get(0));setCurrentColor(options.color,cal.get(0));setNewColor(options.color,cal.get(0));if(options.flat)cal.css({position:"relative",display:"block"});else $(this).bind(options.eventName,
|
|
||||||
show)}})},showPicker:function(){return this.each(function(){if($(this).data("colorpickerId"))show.apply(this)})},hidePicker:function(){return this.each(function(){if($(this).data("colorpickerId"))$("#"+$(this).data("colorpickerId")).hide()})},setColor:function(col){if(typeof col=="string")col=HexToHSB(col);else if(col.r!=undefined&&col.g!=undefined&&col.b!=undefined)col=RGBToHSB(col);else if(col.h!=undefined&&col.s!=undefined&&col.b!=undefined)col=fixHSB(col);else return this;return this.each(function(){if($(this).data("colorpickerId")){var cal=
|
|
||||||
$("#"+$(this).data("colorpickerId"));cal.data("colorpicker").color=col;cal.data("colorpicker").origColor=col;fillRGBFields(col,cal.get(0));fillHSBFields(col,cal.get(0));fillHexFields(col,cal.get(0));setHue(col,cal.get(0));setSelector(col,cal.get(0));setCurrentColor(col,cal.get(0));setNewColor(col,cal.get(0))}})}}}();$.fn.extend({ColorPicker:ColorPicker.init,ColorPickerHide:ColorPicker.hidePicker,ColorPickerShow:ColorPicker.showPicker,ColorPickerSetColor:ColorPicker.setColor})})(jQuery);
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* Zoomimage
|
|
||||||
* Author: Stefan Petre www.eyecon.ro
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
(function($){
|
|
||||||
var EYE = window.EYE = function() {
|
|
||||||
var _registered = {
|
|
||||||
init: []
|
|
||||||
};
|
|
||||||
return {
|
|
||||||
init: function() {
|
|
||||||
$.each(_registered.init, function(nr, fn){
|
|
||||||
fn.call();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
extend: function(prop) {
|
|
||||||
for (var i in prop) {
|
|
||||||
if (prop[i] != undefined) {
|
|
||||||
this[i] = prop[i];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
register: function(fn, type) {
|
|
||||||
if (!_registered[type]) {
|
|
||||||
_registered[type] = [];
|
|
||||||
}
|
|
||||||
_registered[type].push(fn);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}();
|
|
||||||
$(EYE.init);
|
|
||||||
})(jQuery);
|
|
||||||
|
|
@ -1,67 +0,0 @@
|
||||||
(function($){
|
|
||||||
var initLayout = function() {
|
|
||||||
var hash = window.location.hash.replace('#', '');
|
|
||||||
var currentTab = $('ul.navigationTabs a')
|
|
||||||
.bind('click', showTab)
|
|
||||||
.filter('a[rel=' + hash + ']');
|
|
||||||
if (currentTab.size() == 0) {
|
|
||||||
currentTab = $('ul.navigationTabs a:first');
|
|
||||||
}
|
|
||||||
showTab.apply(currentTab.get(0));
|
|
||||||
$('#colorpickerHolder').ColorPicker({flat: true});
|
|
||||||
$('#colorpickerHolder2').ColorPicker({
|
|
||||||
flat: true,
|
|
||||||
color: '#00ff00',
|
|
||||||
onSubmit: function(hsb, hex, rgb) {
|
|
||||||
$('#colorSelector2 div').css('backgroundColor', '#' + hex);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$('#colorpickerHolder2>div').css('position', 'absolute');
|
|
||||||
var widt = false;
|
|
||||||
$('#colorSelector2').bind('click', function() {
|
|
||||||
$('#colorpickerHolder2').stop().animate({height: widt ? 0 : 173}, 500);
|
|
||||||
widt = !widt;
|
|
||||||
});
|
|
||||||
$('#colorpickerField1, #colorpickerField2, #colorpickerField3').ColorPicker({
|
|
||||||
onSubmit: function(hsb, hex, rgb, el) {
|
|
||||||
$(el).val(hex);
|
|
||||||
$(el).ColorPickerHide();
|
|
||||||
},
|
|
||||||
onBeforeShow: function () {
|
|
||||||
$(this).ColorPickerSetColor(this.value);
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.bind('keyup', function(){
|
|
||||||
$(this).ColorPickerSetColor(this.value);
|
|
||||||
});
|
|
||||||
$('#colorSelector').ColorPicker({
|
|
||||||
color: '#0000ff',
|
|
||||||
onShow: function (colpkr) {
|
|
||||||
$(colpkr).fadeIn(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onHide: function (colpkr) {
|
|
||||||
$(colpkr).fadeOut(500);
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
onChange: function (hsb, hex, rgb) {
|
|
||||||
$('#colorSelector div').css('backgroundColor', '#' + hex);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
var showTab = function(e) {
|
|
||||||
var tabIndex = $('ul.navigationTabs a')
|
|
||||||
.removeClass('active')
|
|
||||||
.index(this);
|
|
||||||
$(this)
|
|
||||||
.addClass('active')
|
|
||||||
.blur();
|
|
||||||
$('div.tab')
|
|
||||||
.hide()
|
|
||||||
.eq(tabIndex)
|
|
||||||
.show();
|
|
||||||
};
|
|
||||||
|
|
||||||
EYE.register(initLayout, 'init');
|
|
||||||
})(jQuery)
|
|
||||||
|
|
@ -1,252 +0,0 @@
|
||||||
/**
|
|
||||||
*
|
|
||||||
* Utilities
|
|
||||||
* Author: Stefan Petre www.eyecon.ro
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
(function($) {
|
|
||||||
EYE.extend({
|
|
||||||
getPosition : function(e, forceIt)
|
|
||||||
{
|
|
||||||
var x = 0;
|
|
||||||
var y = 0;
|
|
||||||
var es = e.style;
|
|
||||||
var restoreStyles = false;
|
|
||||||
if (forceIt && jQuery.curCSS(e,'display') == 'none') {
|
|
||||||
var oldVisibility = es.visibility;
|
|
||||||
var oldPosition = es.position;
|
|
||||||
restoreStyles = true;
|
|
||||||
es.visibility = 'hidden';
|
|
||||||
es.display = 'block';
|
|
||||||
es.position = 'absolute';
|
|
||||||
}
|
|
||||||
var el = e;
|
|
||||||
if (el.getBoundingClientRect) { // IE
|
|
||||||
var box = el.getBoundingClientRect();
|
|
||||||
x = box.left + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft) - 2;
|
|
||||||
y = box.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop) - 2;
|
|
||||||
} else {
|
|
||||||
x = el.offsetLeft;
|
|
||||||
y = el.offsetTop;
|
|
||||||
el = el.offsetParent;
|
|
||||||
if (e != el) {
|
|
||||||
while (el) {
|
|
||||||
x += el.offsetLeft;
|
|
||||||
y += el.offsetTop;
|
|
||||||
el = el.offsetParent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (jQuery.browser.safari && jQuery.curCSS(e, 'position') == 'absolute' ) {
|
|
||||||
x -= document.body.offsetLeft;
|
|
||||||
y -= document.body.offsetTop;
|
|
||||||
}
|
|
||||||
el = e.parentNode;
|
|
||||||
while (el && el.tagName.toUpperCase() != 'BODY' && el.tagName.toUpperCase() != 'HTML')
|
|
||||||
{
|
|
||||||
if (jQuery.curCSS(el, 'display') != 'inline') {
|
|
||||||
x -= el.scrollLeft;
|
|
||||||
y -= el.scrollTop;
|
|
||||||
}
|
|
||||||
el = el.parentNode;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (restoreStyles == true) {
|
|
||||||
es.display = 'none';
|
|
||||||
es.position = oldPosition;
|
|
||||||
es.visibility = oldVisibility;
|
|
||||||
}
|
|
||||||
return {x:x, y:y};
|
|
||||||
},
|
|
||||||
getSize : function(e)
|
|
||||||
{
|
|
||||||
var w = parseInt(jQuery.curCSS(e,'width'), 10);
|
|
||||||
var h = parseInt(jQuery.curCSS(e,'height'), 10);
|
|
||||||
var wb = 0;
|
|
||||||
var hb = 0;
|
|
||||||
if (jQuery.curCSS(e, 'display') != 'none') {
|
|
||||||
wb = e.offsetWidth;
|
|
||||||
hb = e.offsetHeight;
|
|
||||||
} else {
|
|
||||||
var es = e.style;
|
|
||||||
var oldVisibility = es.visibility;
|
|
||||||
var oldPosition = es.position;
|
|
||||||
es.visibility = 'hidden';
|
|
||||||
es.display = 'block';
|
|
||||||
es.position = 'absolute';
|
|
||||||
wb = e.offsetWidth;
|
|
||||||
hb = e.offsetHeight;
|
|
||||||
es.display = 'none';
|
|
||||||
es.position = oldPosition;
|
|
||||||
es.visibility = oldVisibility;
|
|
||||||
}
|
|
||||||
return {w:w, h:h, wb:wb, hb:hb};
|
|
||||||
},
|
|
||||||
getClient : function(e)
|
|
||||||
{
|
|
||||||
var h, w;
|
|
||||||
if (e) {
|
|
||||||
w = e.clientWidth;
|
|
||||||
h = e.clientHeight;
|
|
||||||
} else {
|
|
||||||
var de = document.documentElement;
|
|
||||||
w = window.innerWidth || self.innerWidth || (de&&de.clientWidth) || document.body.clientWidth;
|
|
||||||
h = window.innerHeight || self.innerHeight || (de&&de.clientHeight) || document.body.clientHeight;
|
|
||||||
}
|
|
||||||
return {w:w,h:h};
|
|
||||||
},
|
|
||||||
getScroll : function (e)
|
|
||||||
{
|
|
||||||
var t=0, l=0, w=0, h=0, iw=0, ih=0;
|
|
||||||
if (e && e.nodeName.toLowerCase() != 'body') {
|
|
||||||
t = e.scrollTop;
|
|
||||||
l = e.scrollLeft;
|
|
||||||
w = e.scrollWidth;
|
|
||||||
h = e.scrollHeight;
|
|
||||||
} else {
|
|
||||||
if (document.documentElement) {
|
|
||||||
t = document.documentElement.scrollTop;
|
|
||||||
l = document.documentElement.scrollLeft;
|
|
||||||
w = document.documentElement.scrollWidth;
|
|
||||||
h = document.documentElement.scrollHeight;
|
|
||||||
} else if (document.body) {
|
|
||||||
t = document.body.scrollTop;
|
|
||||||
l = document.body.scrollLeft;
|
|
||||||
w = document.body.scrollWidth;
|
|
||||||
h = document.body.scrollHeight;
|
|
||||||
}
|
|
||||||
if (typeof pageYOffset != 'undefined') {
|
|
||||||
t = pageYOffset;
|
|
||||||
l = pageXOffset;
|
|
||||||
}
|
|
||||||
iw = self.innerWidth||document.documentElement.clientWidth||document.body.clientWidth||0;
|
|
||||||
ih = self.innerHeight||document.documentElement.clientHeight||document.body.clientHeight||0;
|
|
||||||
}
|
|
||||||
return { t: t, l: l, w: w, h: h, iw: iw, ih: ih };
|
|
||||||
},
|
|
||||||
getMargins : function(e, toInteger)
|
|
||||||
{
|
|
||||||
var t = jQuery.curCSS(e,'marginTop') || '';
|
|
||||||
var r = jQuery.curCSS(e,'marginRight') || '';
|
|
||||||
var b = jQuery.curCSS(e,'marginBottom') || '';
|
|
||||||
var l = jQuery.curCSS(e,'marginLeft') || '';
|
|
||||||
if (toInteger)
|
|
||||||
return {
|
|
||||||
t: parseInt(t, 10)||0,
|
|
||||||
r: parseInt(r, 10)||0,
|
|
||||||
b: parseInt(b, 10)||0,
|
|
||||||
l: parseInt(l, 10)
|
|
||||||
};
|
|
||||||
else
|
|
||||||
return {t: t, r: r, b: b, l: l};
|
|
||||||
},
|
|
||||||
getPadding : function(e, toInteger)
|
|
||||||
{
|
|
||||||
var t = jQuery.curCSS(e,'paddingTop') || '';
|
|
||||||
var r = jQuery.curCSS(e,'paddingRight') || '';
|
|
||||||
var b = jQuery.curCSS(e,'paddingBottom') || '';
|
|
||||||
var l = jQuery.curCSS(e,'paddingLeft') || '';
|
|
||||||
if (toInteger)
|
|
||||||
return {
|
|
||||||
t: parseInt(t, 10)||0,
|
|
||||||
r: parseInt(r, 10)||0,
|
|
||||||
b: parseInt(b, 10)||0,
|
|
||||||
l: parseInt(l, 10)
|
|
||||||
};
|
|
||||||
else
|
|
||||||
return {t: t, r: r, b: b, l: l};
|
|
||||||
},
|
|
||||||
getBorder : function(e, toInteger)
|
|
||||||
{
|
|
||||||
var t = jQuery.curCSS(e,'borderTopWidth') || '';
|
|
||||||
var r = jQuery.curCSS(e,'borderRightWidth') || '';
|
|
||||||
var b = jQuery.curCSS(e,'borderBottomWidth') || '';
|
|
||||||
var l = jQuery.curCSS(e,'borderLeftWidth') || '';
|
|
||||||
if (toInteger)
|
|
||||||
return {
|
|
||||||
t: parseInt(t, 10)||0,
|
|
||||||
r: parseInt(r, 10)||0,
|
|
||||||
b: parseInt(b, 10)||0,
|
|
||||||
l: parseInt(l, 10)||0
|
|
||||||
};
|
|
||||||
else
|
|
||||||
return {t: t, r: r, b: b, l: l};
|
|
||||||
},
|
|
||||||
traverseDOM : function(nodeEl, func)
|
|
||||||
{
|
|
||||||
func(nodeEl);
|
|
||||||
nodeEl = nodeEl.firstChild;
|
|
||||||
while(nodeEl){
|
|
||||||
EYE.traverseDOM(nodeEl, func);
|
|
||||||
nodeEl = nodeEl.nextSibling;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
getInnerWidth : function(el, scroll) {
|
|
||||||
var offsetW = el.offsetWidth;
|
|
||||||
return scroll ? Math.max(el.scrollWidth,offsetW) - offsetW + el.clientWidth:el.clientWidth;
|
|
||||||
},
|
|
||||||
getInnerHeight : function(el, scroll) {
|
|
||||||
var offsetH = el.offsetHeight;
|
|
||||||
return scroll ? Math.max(el.scrollHeight,offsetH) - offsetH + el.clientHeight:el.clientHeight;
|
|
||||||
},
|
|
||||||
getExtraWidth : function(el) {
|
|
||||||
if($.boxModel)
|
|
||||||
return (parseInt($.curCSS(el, 'paddingLeft'))||0)
|
|
||||||
+ (parseInt($.curCSS(el, 'paddingRight'))||0)
|
|
||||||
+ (parseInt($.curCSS(el, 'borderLeftWidth'))||0)
|
|
||||||
+ (parseInt($.curCSS(el, 'borderRightWidth'))||0);
|
|
||||||
return 0;
|
|
||||||
},
|
|
||||||
getExtraHeight : function(el) {
|
|
||||||
if($.boxModel)
|
|
||||||
return (parseInt($.curCSS(el, 'paddingTop'))||0)
|
|
||||||
+ (parseInt($.curCSS(el, 'paddingBottom'))||0)
|
|
||||||
+ (parseInt($.curCSS(el, 'borderTopWidth'))||0)
|
|
||||||
+ (parseInt($.curCSS(el, 'borderBottomWidth'))||0);
|
|
||||||
return 0;
|
|
||||||
},
|
|
||||||
isChildOf: function(parentEl, el, container) {
|
|
||||||
if (parentEl == el) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
if (!el || !el.nodeType || el.nodeType != 1) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
if (parentEl.contains && !$.browser.safari) {
|
|
||||||
return parentEl.contains(el);
|
|
||||||
}
|
|
||||||
if ( parentEl.compareDocumentPosition ) {
|
|
||||||
return !!(parentEl.compareDocumentPosition(el) & 16);
|
|
||||||
}
|
|
||||||
var prEl = el.parentNode;
|
|
||||||
while(prEl && prEl != container) {
|
|
||||||
if (prEl == parentEl)
|
|
||||||
return true;
|
|
||||||
prEl = prEl.parentNode;
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
centerEl : function(el, axis)
|
|
||||||
{
|
|
||||||
var clientScroll = EYE.getScroll();
|
|
||||||
var size = EYE.getSize(el);
|
|
||||||
if (!axis || axis == 'vertically')
|
|
||||||
$(el).css(
|
|
||||||
{
|
|
||||||
top: clientScroll.t + ((Math.min(clientScroll.h,clientScroll.ih) - size.hb)/2) + 'px'
|
|
||||||
}
|
|
||||||
);
|
|
||||||
if (!axis || axis == 'horizontally')
|
|
||||||
$(el).css(
|
|
||||||
{
|
|
||||||
left: clientScroll.l + ((Math.min(clientScroll.w,clientScroll.iw) - size.wb)/2) + 'px'
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
if (!$.easing.easeout) {
|
|
||||||
$.easing.easeout = function(p, n, firstNum, delta, duration) {
|
|
||||||
return -delta * ((n=n/duration-1)*n*n*n - 1) + firstNum;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
})(jQuery);
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 92 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 72 B |
|
|
@ -1,88 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* ProcessWire Unique Text Fieldtype
|
|
||||||
*
|
|
||||||
* Basic Field that stores text, typically a single line.
|
|
||||||
* Same as FieldtypeText, but requires the value to be globally unique.
|
|
||||||
*
|
|
||||||
* Copyright (C) 2021 by Ryan Cramer
|
|
||||||
* Licensed under MPL 2.0
|
|
||||||
*
|
|
||||||
* https://processwire.com
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
class FieldtypeTextUnique extends FieldtypeText {
|
|
||||||
|
|
||||||
public static function getModuleInfo() {
|
|
||||||
return array(
|
|
||||||
'title' => 'Text Unique',
|
|
||||||
'version' => 301,
|
|
||||||
'summary' => 'Same as the Text fieldtype, but enforces that values stored are unique, site-wide.',
|
|
||||||
'requires' => 'ProcessWire>=3.0.150',
|
|
||||||
'href' => 'https://github.com/ryancramerdesign/FieldtypeTextUnique',
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Get Inputfield
|
|
||||||
*
|
|
||||||
* @param Page $page
|
|
||||||
* @param Field $field
|
|
||||||
* @return Inputfield
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
public function getInputfield(Page $page, Field $field) {
|
|
||||||
$inputfield = parent::getInputfield($page, $field);
|
|
||||||
if(!$page->id || !$field->id) return $inputfield;
|
|
||||||
$inputfield->addHookAfter('processInput', function(HookEvent $event) use($page, $field) {
|
|
||||||
if($event) {}
|
|
||||||
/** @var InputfieldText $inputfield */
|
|
||||||
$inputfield = $event->object;
|
|
||||||
if(!$inputfield->isChanged() || !$page->id || !$field->id) return;
|
|
||||||
$value = $inputfield->val();
|
|
||||||
if(!strlen($value)) return;
|
|
||||||
$fields = $field->wire()->fields;
|
|
||||||
$pageId = $fields->tableTools()->valueExists($field, $value);
|
|
||||||
if(!$pageId || $pageId == $page->id) return;
|
|
||||||
$inputfield->error(sprintf(
|
|
||||||
__('Value “%s” is already in use on page %d, please enter a different value', __FILE__),
|
|
||||||
$value, $pageId
|
|
||||||
));
|
|
||||||
});
|
|
||||||
return $inputfield;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Return the database schema in specified format
|
|
||||||
*
|
|
||||||
* @param Field $field
|
|
||||||
* @return array
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
public function getDatabaseSchema(Field $field) {
|
|
||||||
$this->checkField($field);
|
|
||||||
$length = $this->wire()->database->getMaxIndexLength();
|
|
||||||
$schema = parent::getDatabaseSchema($field);
|
|
||||||
$schema['keys']['data_exact'] = "UNIQUE `data_exact` (`data`($length))";
|
|
||||||
return $schema;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Check that field has necessary flags
|
|
||||||
*
|
|
||||||
* @param Field $field
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
protected function checkField(Field $field) {
|
|
||||||
if($field->hasFlag(Field::flagUnique)) return;
|
|
||||||
if($field->hasFlag(Field::flagFieldgroupContext)) {
|
|
||||||
$field = $this->wire()->fields->get($field->name);
|
|
||||||
if(!$field) return;
|
|
||||||
}
|
|
||||||
$field->addFlag(Field::flagUnique);
|
|
||||||
$field->save();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,63 +0,0 @@
|
||||||
# ProcessWire Unique Text Fieldtype
|
|
||||||
|
|
||||||
This is the same as the ProcessWire Text field (FieldtypeText), but
|
|
||||||
enforces that values stored are unique, site-wide.
|
|
||||||
|
|
||||||
### Requirements
|
|
||||||
|
|
||||||
Requires ProcessWire 3.0.150 or newer.
|
|
||||||
|
|
||||||
### To install
|
|
||||||
|
|
||||||
Place the files for this module in `/site/modules/FieldtypeTextUnique/`,
|
|
||||||
and then install from the Modules admin screen.
|
|
||||||
|
|
||||||
### To upgrade
|
|
||||||
|
|
||||||
This module is a rewrite of the previous version which was released in 2013.
|
|
||||||
The ProcessWire core now has some unique index tools included in it, which
|
|
||||||
this module uses. If you are using the previous version, please backup your
|
|
||||||
database before upgrading, just to play it safe. Then replace the files in
|
|
||||||
`/site/modules/FieldtypeTextUnique/` with those from the new version.
|
|
||||||
|
|
||||||
### To use on a new field
|
|
||||||
|
|
||||||
Create a new field (Setup > Fields > Add New) and choose “Text Unique” as
|
|
||||||
the type. Configure the Details and Input tabs the same way that you would
|
|
||||||
with a regular Text field.
|
|
||||||
|
|
||||||
### To use on an existing field
|
|
||||||
|
|
||||||
You may also convert an existing Text field to Text Unique. To do so, edit
|
|
||||||
the field (Setup > Fields > your_text_field) and then change the type to
|
|
||||||
“Text Unique”. Note that the existing field must not have any duplicate values.
|
|
||||||
If the field does have duplicate values then the type change will produce an
|
|
||||||
error message in the admin to that effect. Remove any duplicates and try again.
|
|
||||||
|
|
||||||
Note that this Fieldtype is not a multi-language Fieldtype, so you should not
|
|
||||||
attempt to convert multi-language text fields to Text Unique fields.
|
|
||||||
|
|
||||||
### How it works
|
|
||||||
|
|
||||||
The Text Unique Fieldtype works the same as the Text Fieldtype and uses the
|
|
||||||
same Text Inputfield. The only difference is that a UNIQUE index is applied
|
|
||||||
on the `data` column that stores the text so that each value can only be
|
|
||||||
entered once per page.
|
|
||||||
|
|
||||||
If the user attempts to enter the same value on more than one page then it
|
|
||||||
will be changed back to their previous value and an error message is reported
|
|
||||||
indicating that the value they entered is not unique, along with the page ID
|
|
||||||
that contains the colliding value.
|
|
||||||
|
|
||||||
### Please note
|
|
||||||
|
|
||||||
The first 191 characters of the text value are what determines whether or
|
|
||||||
not the value is unique. If two values are the same for the first 191
|
|
||||||
characters but differ after that, they will still collide. This seemingly
|
|
||||||
arbitrary number is actually the max index length for MySQL when used with
|
|
||||||
the InnoDB engine and the UTF8MB4 charset, so the actual number will depend
|
|
||||||
somewhat on your DB configuration.
|
|
||||||
|
|
||||||
---
|
|
||||||
Copyright 2021 by Ryan Cramer
|
|
||||||
|
|
||||||
6
site/templates/_init.php
Normal file
6
site/templates/_init.php
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?php namespace ProcessWire;
|
||||||
|
|
||||||
|
// Optional initialization file, called before rendering any template file.
|
||||||
|
// This is defined by $config->prependTemplateFile in /site/config.php.
|
||||||
|
// Use this to define shared variables, functions, classes, includes, etc.
|
||||||
|
|
||||||
55
site/templates/_main.php
Normal file
55
site/templates/_main.php
Normal file
|
|
@ -0,0 +1,55 @@
|
||||||
|
<?php namespace ProcessWire;
|
||||||
|
|
||||||
|
// Optional main output file, called after rendering page’s template file.
|
||||||
|
// This is defined by $config->appendTemplateFile in /site/config.php, and
|
||||||
|
// is typically used to define and output markup common among most pages.
|
||||||
|
//
|
||||||
|
// When the Markup Regions feature is used, template files can prepend, append,
|
||||||
|
// replace or delete any element defined here that has an "id" attribute.
|
||||||
|
// https://processwire.com/docs/front-end/output/markup-regions/
|
||||||
|
|
||||||
|
/** @var Page $page */
|
||||||
|
/** @var Pages $pages */
|
||||||
|
/** @var Config $config */
|
||||||
|
|
||||||
|
$home = $pages->get('/'); /** @var HomePage $home */
|
||||||
|
|
||||||
|
?><!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head id="html-head">
|
||||||
|
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||||||
|
<title><?php echo $page->title; ?></title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>styles/main.css" />
|
||||||
|
<script src="<?php echo $config->urls->templates; ?>scripts/main.js"></script>
|
||||||
|
</head>
|
||||||
|
<body id="html-body">
|
||||||
|
|
||||||
|
<p id="topnav">
|
||||||
|
<?php echo $home->and($home->children)->implode(" / ", "<a href='{url}'>{title}</a>"); ?>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<h1 id="headline">
|
||||||
|
<?php if($page->parents->count()): // breadcrumbs ?>
|
||||||
|
<?php echo $page->parents->implode(" > ", "<a href='{url}'>{title}</a>"); ?> >
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php echo $page->title; // headline ?>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<div id="content">
|
||||||
|
Default content
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if($page->hasChildren): ?>
|
||||||
|
<ul>
|
||||||
|
<?php echo $page->children->each("<li><a href='{url}'>{title}</a></li>"); // subnav ?>
|
||||||
|
</ul>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if($page->editable()): ?>
|
||||||
|
<p><a href='<?php echo $page->editUrl(); ?>'>Edit this page</a></p>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
15
site/templates/basic-page.php
Normal file
15
site/templates/basic-page.php
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?php namespace ProcessWire;
|
||||||
|
|
||||||
|
// Template file for pages using the “basic-page” template
|
||||||
|
// -------------------------------------------------------
|
||||||
|
// The #content div in this file will replace the #content div in _main.php
|
||||||
|
// when the Markup Regions feature is enabled, as it is by default.
|
||||||
|
// You can also append to (or prepend to) the #content div, and much more.
|
||||||
|
// See the Markup Regions documentation:
|
||||||
|
// https://processwire.com/docs/front-end/output/markup-regions/
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div id="content">
|
||||||
|
Basic page content
|
||||||
|
</div>
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
/**
|
|
||||||
* @FONTS
|
|
||||||
* =============================================================================
|
|
||||||
*
|
|
||||||
* fonts.css v0.0.1 | GNU GPL License |
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Compatibility
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. IE9 Compat Modes
|
|
||||||
2. IE6-IE8
|
|
||||||
3. Super Modern Browsers
|
|
||||||
4. Pretty Modern Browsers
|
|
||||||
5. Safari, Android, iOS
|
|
||||||
6. Legacy iOS
|
|
||||||
*/
|
|
||||||
|
|
||||||
@font-face
|
|
||||||
{
|
|
||||||
font-family: 'icomoon';
|
|
||||||
src: url('../fonts/icomoon_Regular.eot?nvq8gi'); /* 1 */
|
|
||||||
src: url('../fonts/icomoon_Regular.eot?nvq8gi#iefix') format('embedded-opentype'), /* 2 */
|
|
||||||
url('../fonts/icomoon_Regular.woff2?nvq8gi') format('woff2'), /* 3 */
|
|
||||||
url('../fonts/icomoon_Regular.woff?nvq8gi') format('woff'), /* 4 */
|
|
||||||
url('../fonts/icomoon_Regular.otf?nvq8gi') format('opentype'), /* 5 */
|
|
||||||
url('../fonts/icomoon_Regular.ttf?nvq8gi') format('truetype'), /* 5 */
|
|
||||||
url('../fonts/icomoon_Regular.svg?nvq8gi#icomoon') format('svg'); /* 6 */
|
|
||||||
font-display: block;
|
|
||||||
font-style: normal;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Iconos
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
[class^="icon-"],
|
|
||||||
[class*=" icon-"]
|
|
||||||
{
|
|
||||||
font-family: 'icomoon' !important;
|
|
||||||
font-variant: normal;
|
|
||||||
font-style: normal;
|
|
||||||
line-height: 1;
|
|
||||||
text-transform: none;
|
|
||||||
|
|
||||||
speak: never;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-chevrons-right:before
|
|
||||||
{
|
|
||||||
content: "\e900";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-edit:before
|
|
||||||
{
|
|
||||||
content: "\e901";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-document-file-txt:before
|
|
||||||
{
|
|
||||||
content: "\e902";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-corner-right-down:before
|
|
||||||
{
|
|
||||||
content: "\e903";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-folder:before
|
|
||||||
{
|
|
||||||
content: "\e904";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-tag:before
|
|
||||||
{
|
|
||||||
content: "\e905";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-book-open:before
|
|
||||||
{
|
|
||||||
content: "\e906";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-book:before
|
|
||||||
{
|
|
||||||
content: "\e907";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-arrow-right:before
|
|
||||||
{
|
|
||||||
content: "\e908";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-user:before
|
|
||||||
{
|
|
||||||
content: "\e909";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-skip-back:before
|
|
||||||
{
|
|
||||||
content: "\e90a";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-skip-forward:before
|
|
||||||
{
|
|
||||||
content: "\e90b";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-play:before
|
|
||||||
{
|
|
||||||
content: "\e90c";
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-search:before
|
|
||||||
{
|
|
||||||
content: "\e90d";
|
|
||||||
}
|
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
:root
|
|
||||||
{
|
|
||||||
--separacion: 1rem;
|
|
||||||
--contido-max: 60rem;
|
|
||||||
--destacado-max: 75rem;
|
|
||||||
--destacado: calc((var(--destacado-max) - var(--contido-max)) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.grella
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns:
|
|
||||||
[completo-start] minmax(var(--separacion), 1fr)
|
|
||||||
[destacado-start] minmax(0, var(--destacado))
|
|
||||||
[contido-start] min(100% - (var(--separacion) * 2), var(--contido-max)) [contido-end]
|
|
||||||
minmax(0, var(--destacado)) [destacado-end]
|
|
||||||
minmax(var(--separacion), 1fr) [completo-end]
|
|
||||||
;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grella > :not(.destacado, .completo),
|
|
||||||
.completo > :not(.destacado, .completo)
|
|
||||||
{
|
|
||||||
grid-column: contido;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grella > .completo
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-column: completo;
|
|
||||||
grid-template-columns: inherit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grella > .destacado,
|
|
||||||
.completo > .destacado
|
|
||||||
{
|
|
||||||
grid-column: destacado;
|
|
||||||
}
|
|
||||||
|
|
||||||
html, body
|
|
||||||
{
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
body
|
|
||||||
{
|
|
||||||
display: grid;
|
|
||||||
grid-template-rows: auto 1fr auto;
|
|
||||||
|
|
||||||
color: #6666ff;
|
|
||||||
font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
|
|
||||||
font-weight: normal;
|
|
||||||
|
|
||||||
background: #f7feb6;
|
|
||||||
background: linear-gradient(180deg, #6666ff 0%, #6666ff 10%, #f7feb6 100%);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
}
|
|
||||||
|
|
||||||
header#cabeceira
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
min-height: 80px;
|
|
||||||
|
|
||||||
margin-bottom: var(--separacion);
|
|
||||||
|
|
||||||
padding: var(--separacion);
|
|
||||||
|
|
||||||
border: 1px solid #6666ff;
|
|
||||||
border-top: 0;
|
|
||||||
border-radius: 0 0 20px 20px;
|
|
||||||
|
|
||||||
outline: 1px solid #f7feb6;
|
|
||||||
|
|
||||||
box-shadow: 0px var(--separacion) var(--separacion) 0px #00000080;
|
|
||||||
|
|
||||||
background-color: #f7feb6;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav#menu ul
|
|
||||||
{
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
@ -1,286 +0,0 @@
|
||||||
@charset "UTF-8";
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @NORMALIZE
|
|
||||||
* =============================================================================
|
|
||||||
*
|
|
||||||
* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
|
|
||||||
*
|
|
||||||
*/
|
|
||||||
|
|
||||||
/*
|
|
||||||
Document
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Correct the line height in all browsers.
|
|
||||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
|
||||||
*/
|
|
||||||
html
|
|
||||||
{
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
-webkit-text-size-adjust: 100%; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Sections
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Remove the margin in all browsers.
|
|
||||||
2. Render the `main` element consistently in IE.
|
|
||||||
3. Correct the font size and margin on `h1` elements within `section` and
|
|
||||||
`article` contexts in Chrome, Firefox, and Safari.
|
|
||||||
*/
|
|
||||||
body /* 1 */
|
|
||||||
{
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
main /* 2 */
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 /* 3 */
|
|
||||||
{
|
|
||||||
font-size: 2rem;
|
|
||||||
margin: 0.67rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Grouping content
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Add the correct box sizing in Firefox.
|
|
||||||
2. Show the overflow in Edge and IE.
|
|
||||||
3. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
4. Correct the odd `rem` font sizing in all browsers.
|
|
||||||
*/
|
|
||||||
hr
|
|
||||||
{
|
|
||||||
box-sizing: content-box; /* 1 */
|
|
||||||
height: 0; /* 1 */
|
|
||||||
overflow: visible; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
pre
|
|
||||||
{
|
|
||||||
font-family: monospace, monospace; /* 3 */
|
|
||||||
font-size: 1rem; /* 4 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Text-level semantics
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Remove the gray background on active links in IE 10.
|
|
||||||
2. Remove the bottom border in Chrome 57-
|
|
||||||
3. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
||||||
4. Add the correct font weight in Chrome, Edge, and Safari.
|
|
||||||
5. Correct the inheritance and scaling of font size in all browsers.
|
|
||||||
6. Correct the odd `em` font sizing in all browsers.
|
|
||||||
7. Add the correct font size in all browsers.
|
|
||||||
8. Prevent `sub` and `sup` elements from affecting the line height in all
|
|
||||||
browsers.
|
|
||||||
*/
|
|
||||||
a /* 1 */
|
|
||||||
{
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title]
|
|
||||||
{
|
|
||||||
border-bottom: none; /* 2 */
|
|
||||||
text-decoration: underline; /* 1 */
|
|
||||||
text-decoration: underline dotted; /* 1 */
|
|
||||||
}
|
|
||||||
|
|
||||||
b, strong /* 4 */
|
|
||||||
{
|
|
||||||
font-weight: bolder;
|
|
||||||
}
|
|
||||||
|
|
||||||
code, kbd, samp
|
|
||||||
{
|
|
||||||
font-family: monospace, monospace; /* 5 */
|
|
||||||
font-size: 1em; /* 6 */
|
|
||||||
}
|
|
||||||
|
|
||||||
small /* 7 */
|
|
||||||
{
|
|
||||||
font-size: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub, sup /* 8 */
|
|
||||||
{
|
|
||||||
font-size: 75%;
|
|
||||||
line-height: 0;
|
|
||||||
position: relative;
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
sub
|
|
||||||
{
|
|
||||||
bottom: -0.25em;
|
|
||||||
}
|
|
||||||
|
|
||||||
sup
|
|
||||||
{
|
|
||||||
top: -0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Embedded content
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Remove the border on images inside links in IE 10.
|
|
||||||
*/
|
|
||||||
img /* 1 */
|
|
||||||
{
|
|
||||||
border-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Forms
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Change the font styles in all browsers.
|
|
||||||
2. Remove the margin in Firefox and Safari.
|
|
||||||
3. Show the overflow in IE/Edge.
|
|
||||||
4. Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
||||||
5. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
6. Remove the inner border and padding in Firefox.
|
|
||||||
7. Restore the focus styles unset by the previous rule.
|
|
||||||
8. Correct the padding in Firefox.
|
|
||||||
9. Correct the text wrapping in Edge and IE.
|
|
||||||
10. Correct the color inheritance from `fieldset` elements in IE.
|
|
||||||
11. Remove the padding so developers are not caught out when they zero out
|
|
||||||
`fieldset` elements in all browsers.
|
|
||||||
12. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
||||||
13. Remove the default vertical scrollbar in IE 10+.
|
|
||||||
14. Add the correct box sizing in IE 10.
|
|
||||||
15. Remove the padding in IE 10.
|
|
||||||
16. Correct the cursor style of increment and decrement buttons in Chrome.
|
|
||||||
17. Correct the odd appearance in Chrome and Safari.
|
|
||||||
18. Correct the outline style in Safari.
|
|
||||||
19. Remove the inner padding in Chrome and Safari on macOS.
|
|
||||||
20. Correct the inability to style clickable types in iOS and Safari.
|
|
||||||
21. Change font properties to `inherit` in Safari.
|
|
||||||
*/
|
|
||||||
button, input, optgroup, select, textarea
|
|
||||||
{
|
|
||||||
font-family: inherit; /* 1 */
|
|
||||||
font-size: 100%; /* 1 */
|
|
||||||
line-height: 1.15; /* 1 */
|
|
||||||
margin: 0; /* 2 */
|
|
||||||
}
|
|
||||||
|
|
||||||
button, input /* 3 */
|
|
||||||
{
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, select /* 4 */
|
|
||||||
{
|
|
||||||
text-transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button, [type="button"], [type="reset"], [type="submit"] /* 5 */
|
|
||||||
{
|
|
||||||
-webkit-appearance: button;
|
|
||||||
}
|
|
||||||
|
|
||||||
button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
|
|
||||||
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner /* 6 */
|
|
||||||
{
|
|
||||||
border-style: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
button:-moz-focusring, [type="button"]:-moz-focusring,
|
|
||||||
[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring /* 7 */
|
|
||||||
{
|
|
||||||
outline: 1px dotted ButtonText;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset /* 8 */
|
|
||||||
{
|
|
||||||
padding: 0.35em 0.75em 0.625em;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend
|
|
||||||
{
|
|
||||||
box-sizing: border-box; /* 9 */
|
|
||||||
color: inherit; /* 10 */
|
|
||||||
display: table; /* 9 */
|
|
||||||
max-width: 100%; /* 9 */
|
|
||||||
padding: 0; /* 11 */
|
|
||||||
white-space: normal; /* 9 */
|
|
||||||
}
|
|
||||||
|
|
||||||
progress /* 12 */
|
|
||||||
{
|
|
||||||
vertical-align: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea /* 13 */
|
|
||||||
{
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type="checkbox"], [type="radio"]
|
|
||||||
{
|
|
||||||
box-sizing: border-box; /* 14 */
|
|
||||||
padding: 0; /* 15 */
|
|
||||||
}
|
|
||||||
|
|
||||||
[type="number"]::-webkit-inner-spin-button,
|
|
||||||
[type="number"]::-webkit-outer-spin-button /* 16 */
|
|
||||||
{
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type="search"]
|
|
||||||
{
|
|
||||||
-webkit-appearance: textfield; /* 17 */
|
|
||||||
outline-offset: -2px; /* 18 */
|
|
||||||
}
|
|
||||||
|
|
||||||
[type="search"]::-webkit-search-decoration /* 19 */
|
|
||||||
{
|
|
||||||
-webkit-appearance: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
::-webkit-file-upload-button
|
|
||||||
{
|
|
||||||
-webkit-appearance: button; /* 20 */
|
|
||||||
font: inherit; /* 21 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Interactive
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Add the correct display in Edge, IE 10+, and Firefox.
|
|
||||||
2. Add the correct display in all browsers.
|
|
||||||
*/
|
|
||||||
details /* 1 */
|
|
||||||
{
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary /* 2 */
|
|
||||||
{
|
|
||||||
display: list-item;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*
|
|
||||||
Misc
|
|
||||||
----------------------------------------------------------------------------
|
|
||||||
1. Add the correct display in IE 10+.
|
|
||||||
2. Add the correct display in IE 10.
|
|
||||||
*/
|
|
||||||
template /* 1 */
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[hidden] /* 2 */
|
|
||||||
{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
15
site/templates/home.php
Normal file
15
site/templates/home.php
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?php namespace ProcessWire;
|
||||||
|
|
||||||
|
// Template file for “home” template used by the homepage
|
||||||
|
// ------------------------------------------------------
|
||||||
|
// The #content div in this file will replace the #content div in _main.php
|
||||||
|
// when the Markup Regions feature is enabled, as it is by default.
|
||||||
|
// You can also append to (or prepend to) the #content div, and much more.
|
||||||
|
// See the Markup Regions documentation:
|
||||||
|
// https://processwire.com/docs/front-end/output/markup-regions/
|
||||||
|
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div id="content">
|
||||||
|
Homepage content
|
||||||
|
</div>
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
/** @var Page $page */
|
|
||||||
/** @var Pages $pages */
|
|
||||||
/** @var Config $config */
|
|
||||||
/** @var SiteConfig $configuracion */
|
|
||||||
/** @var HomePage $inicio */
|
|
||||||
|
|
||||||
?><main id="contido">
|
|
||||||
<?php if($page->hasChildren()): ?>
|
|
||||||
<?=renderMigas($page);?>
|
|
||||||
<?php endif; ?>
|
|
||||||
<p>Homepage content</p>
|
|
||||||
</main>
|
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
function getConfig($paxina)
|
|
||||||
{
|
|
||||||
$configuracion = array();
|
|
||||||
|
|
||||||
foreach($paxina->configuracion as $config)
|
|
||||||
{
|
|
||||||
switch ($config->parametro_tipo->value)
|
|
||||||
{
|
|
||||||
case 'texto':
|
|
||||||
$configuracion[$config->parametro_nome] = $config->parametro_valor;
|
|
||||||
break;
|
|
||||||
case 'imaxe':
|
|
||||||
$configuracion[$config->parametro_nome] = array(
|
|
||||||
'url' => $config->parametro_imaxe->first()->url,
|
|
||||||
'descripcion' => $config->parametro_imaxe->first()->description,
|
|
||||||
'miniatura' => $config->parametro_imaxe->getTag("mini")->url
|
|
||||||
);
|
|
||||||
break;
|
|
||||||
case 'cor':
|
|
||||||
list($r, $g, $b) = sscanf($config->parametro_cor, "%02x%02x%02x");
|
|
||||||
$configuracion[$config->parametro_nome] = $r . ', ' . $g . ', ' . $b;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
return $configuracion;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderMigas($paxina)
|
|
||||||
{
|
|
||||||
$saida = '';
|
|
||||||
|
|
||||||
$saida .= '<h1>';
|
|
||||||
if($paxina->parents->count())
|
|
||||||
{
|
|
||||||
$saida .= $paxina->parents->implode(" > ", "<a href='{url}'>{title}</a>",
|
|
||||||
array(
|
|
||||||
'append' => '>'
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}
|
|
||||||
$saida .= $paxina->title . '</h1>';
|
|
||||||
|
|
||||||
return $saida;
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderMenu($menu, $paxinas)
|
|
||||||
{
|
|
||||||
$saida = '';
|
|
||||||
|
|
||||||
$saida .= $paxinas->implode("\n", "<li><a href=\"{url}\">{title}</a></li>",
|
|
||||||
array(
|
|
||||||
'prepend' => '<nav id="' . $menu . '">' . "\n" . '<ul>' . "\n",
|
|
||||||
'append' => "\n" . '</ul>' . "\n" . '</nav>' . "\n"
|
|
||||||
)
|
|
||||||
);
|
|
||||||
|
|
||||||
return $saida;
|
|
||||||
}
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
/** @var Page $page */
|
|
||||||
/** @var Pages $pages */
|
|
||||||
/** @var Config $config */
|
|
||||||
/** @var SiteConfig $configuracion */
|
|
||||||
/** @var HomePage $inicio */
|
|
||||||
|
|
||||||
include_once("./layout/func.php");
|
|
||||||
|
|
||||||
$inicio = $pages->get('/');
|
|
||||||
$configuracion = getConfig($inicio);
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
/** @var Page $page */
|
|
||||||
/** @var Pages $pages */
|
|
||||||
/** @var Config $config */
|
|
||||||
/** @var SiteConfig $configuracion */
|
|
||||||
/** @var HomePage $inicio */
|
|
||||||
|
|
||||||
?><!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title><?php echo $configuracion['sitio_nome'] . ($configuracion['sitio_descripcion'] ? ' - ' . $configuracion['sitio_descripcion'] : ''); ?></title>
|
|
||||||
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/reset.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/fonts.css" />
|
|
||||||
<link rel="stylesheet" type="text/css" href="<?php echo $config->urls->templates; ?>css/main.css" />
|
|
||||||
</head>
|
|
||||||
<body class="grella">
|
|
||||||
<header id="cabeceira" class="destacado">
|
|
||||||
<div id="logo">
|
|
||||||
<picture>
|
|
||||||
<source srcset="<?=$configuracion['sitio_logo']['miniatura'];?>" media="(max-width: 768px)" />
|
|
||||||
<img src="<?=$configuracion['sitio_logo']['url'];?>" alt="<?=$configuracion['sitio_logo']['descripcion'];?>" />
|
|
||||||
</picture>
|
|
||||||
</div>
|
|
||||||
<?php if($page->hasChildren()): ?>
|
|
||||||
<nav id="menu">
|
|
||||||
<?=renderMenu("menu-paxinas", $inicio->children);?>
|
|
||||||
</nav>
|
|
||||||
<?php endif; ?>
|
|
||||||
</header>
|
|
||||||
<main id="contido" class="completo">
|
|
||||||
|
|
||||||
</main>
|
|
||||||
<footer class="completo">
|
|
||||||
<?php if($page->editable()): ?>
|
|
||||||
<p>
|
|
||||||
<a href='<?php echo $page->editUrl(); ?>'>Edit this page</a>
|
|
||||||
</p>
|
|
||||||
<?php endif; ?>
|
|
||||||
</footer>
|
|
||||||
<script src="<?php echo $config->urls->templates; ?>js/main.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,14 +0,0 @@
|
||||||
<?php namespace ProcessWire;
|
|
||||||
|
|
||||||
/** @var Page $page */
|
|
||||||
/** @var Pages $pages */
|
|
||||||
/** @var Config $config */
|
|
||||||
/** @var SiteConfig $configuracion */
|
|
||||||
/** @var HomePage $inicio */
|
|
||||||
|
|
||||||
?><main id="contido">
|
|
||||||
<?php if($page->hasChildren()): ?>
|
|
||||||
<?=renderMigas($page);?>
|
|
||||||
<?php endif; ?>
|
|
||||||
<p>Basic page content </p>
|
|
||||||
</main>
|
|
||||||
1
site/templates/styles/main.css
Normal file
1
site/templates/styles/main.css
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/* Example CSS file */
|
||||||
Loading…
Reference in a new issue