entrie colors are now dynamiclly loaded from field_color in entree term
had to patch the color_field module https://www.drupal.org/project/color_field/issues/2854199#comment-12316266
This commit is contained in:
Bachir Soussi Chiadmi
@@ -0,0 +1 @@
|
||||
https://www.drupal.org/project/color_field/issues/2854199#comment-12316266
|
||||
@@ -0,0 +1,339 @@
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
Version 2, June 1991
|
||||
|
||||
Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
|
||||
Everyone is permitted to copy and distribute verbatim copies
|
||||
of this license document, but changing it is not allowed.
|
||||
|
||||
Preamble
|
||||
|
||||
The licenses for most software are designed to take away your
|
||||
freedom to share and change it. By contrast, the GNU General Public
|
||||
License is intended to guarantee your freedom to share and change free
|
||||
software--to make sure the software is free for all its users. This
|
||||
General Public License applies to most of the Free Software
|
||||
Foundation's software and to any other program whose authors commit to
|
||||
using it. (Some other Free Software Foundation software is covered by
|
||||
the GNU Lesser General Public License instead.) You can apply it to
|
||||
your programs, too.
|
||||
|
||||
When we speak of free software, we are referring to freedom, not
|
||||
price. Our General Public Licenses are designed to make sure that you
|
||||
have the freedom to distribute copies of free software (and charge for
|
||||
this service if you wish), that you receive source code or can get it
|
||||
if you want it, that you can change the software or use pieces of it
|
||||
in new free programs; and that you know you can do these things.
|
||||
|
||||
To protect your rights, we need to make restrictions that forbid
|
||||
anyone to deny you these rights or to ask you to surrender the rights.
|
||||
These restrictions translate to certain responsibilities for you if you
|
||||
distribute copies of the software, or if you modify it.
|
||||
|
||||
For example, if you distribute copies of such a program, whether
|
||||
gratis or for a fee, you must give the recipients all the rights that
|
||||
you have. You must make sure that they, too, receive or can get the
|
||||
source code. And you must show them these terms so they know their
|
||||
rights.
|
||||
|
||||
We protect your rights with two steps: (1) copyright the software, and
|
||||
(2) offer you this license which gives you legal permission to copy,
|
||||
distribute and/or modify the software.
|
||||
|
||||
Also, for each author's protection and ours, we want to make certain
|
||||
that everyone understands that there is no warranty for this free
|
||||
software. If the software is modified by someone else and passed on, we
|
||||
want its recipients to know that what they have is not the original, so
|
||||
that any problems introduced by others will not reflect on the original
|
||||
authors' reputations.
|
||||
|
||||
Finally, any free program is threatened constantly by software
|
||||
patents. We wish to avoid the danger that redistributors of a free
|
||||
program will individually obtain patent licenses, in effect making the
|
||||
program proprietary. To prevent this, we have made it clear that any
|
||||
patent must be licensed for everyone's free use or not licensed at all.
|
||||
|
||||
The precise terms and conditions for copying, distribution and
|
||||
modification follow.
|
||||
|
||||
GNU GENERAL PUBLIC LICENSE
|
||||
TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
|
||||
|
||||
0. This License applies to any program or other work which contains
|
||||
a notice placed by the copyright holder saying it may be distributed
|
||||
under the terms of this General Public License. The "Program", below,
|
||||
refers to any such program or work, and a "work based on the Program"
|
||||
means either the Program or any derivative work under copyright law:
|
||||
that is to say, a work containing the Program or a portion of it,
|
||||
either verbatim or with modifications and/or translated into another
|
||||
language. (Hereinafter, translation is included without limitation in
|
||||
the term "modification".) Each licensee is addressed as "you".
|
||||
|
||||
Activities other than copying, distribution and modification are not
|
||||
covered by this License; they are outside its scope. The act of
|
||||
running the Program is not restricted, and the output from the Program
|
||||
is covered only if its contents constitute a work based on the
|
||||
Program (independent of having been made by running the Program).
|
||||
Whether that is true depends on what the Program does.
|
||||
|
||||
1. You may copy and distribute verbatim copies of the Program's
|
||||
source code as you receive it, in any medium, provided that you
|
||||
conspicuously and appropriately publish on each copy an appropriate
|
||||
copyright notice and disclaimer of warranty; keep intact all the
|
||||
notices that refer to this License and to the absence of any warranty;
|
||||
and give any other recipients of the Program a copy of this License
|
||||
along with the Program.
|
||||
|
||||
You may charge a fee for the physical act of transferring a copy, and
|
||||
you may at your option offer warranty protection in exchange for a fee.
|
||||
|
||||
2. You may modify your copy or copies of the Program or any portion
|
||||
of it, thus forming a work based on the Program, and copy and
|
||||
distribute such modifications or work under the terms of Section 1
|
||||
above, provided that you also meet all of these conditions:
|
||||
|
||||
a) You must cause the modified files to carry prominent notices
|
||||
stating that you changed the files and the date of any change.
|
||||
|
||||
b) You must cause any work that you distribute or publish, that in
|
||||
whole or in part contains or is derived from the Program or any
|
||||
part thereof, to be licensed as a whole at no charge to all third
|
||||
parties under the terms of this License.
|
||||
|
||||
c) If the modified program normally reads commands interactively
|
||||
when run, you must cause it, when started running for such
|
||||
interactive use in the most ordinary way, to print or display an
|
||||
announcement including an appropriate copyright notice and a
|
||||
notice that there is no warranty (or else, saying that you provide
|
||||
a warranty) and that users may redistribute the program under
|
||||
these conditions, and telling the user how to view a copy of this
|
||||
License. (Exception: if the Program itself is interactive but
|
||||
does not normally print such an announcement, your work based on
|
||||
the Program is not required to print an announcement.)
|
||||
|
||||
These requirements apply to the modified work as a whole. If
|
||||
identifiable sections of that work are not derived from the Program,
|
||||
and can be reasonably considered independent and separate works in
|
||||
themselves, then this License, and its terms, do not apply to those
|
||||
sections when you distribute them as separate works. But when you
|
||||
distribute the same sections as part of a whole which is a work based
|
||||
on the Program, the distribution of the whole must be on the terms of
|
||||
this License, whose permissions for other licensees extend to the
|
||||
entire whole, and thus to each and every part regardless of who wrote it.
|
||||
|
||||
Thus, it is not the intent of this section to claim rights or contest
|
||||
your rights to work written entirely by you; rather, the intent is to
|
||||
exercise the right to control the distribution of derivative or
|
||||
collective works based on the Program.
|
||||
|
||||
In addition, mere aggregation of another work not based on the Program
|
||||
with the Program (or with a work based on the Program) on a volume of
|
||||
a storage or distribution medium does not bring the other work under
|
||||
the scope of this License.
|
||||
|
||||
3. You may copy and distribute the Program (or a work based on it,
|
||||
under Section 2) in object code or executable form under the terms of
|
||||
Sections 1 and 2 above provided that you also do one of the following:
|
||||
|
||||
a) Accompany it with the complete corresponding machine-readable
|
||||
source code, which must be distributed under the terms of Sections
|
||||
1 and 2 above on a medium customarily used for software interchange; or,
|
||||
|
||||
b) Accompany it with a written offer, valid for at least three
|
||||
years, to give any third party, for a charge no more than your
|
||||
cost of physically performing source distribution, a complete
|
||||
machine-readable copy of the corresponding source code, to be
|
||||
distributed under the terms of Sections 1 and 2 above on a medium
|
||||
customarily used for software interchange; or,
|
||||
|
||||
c) Accompany it with the information you received as to the offer
|
||||
to distribute corresponding source code. (This alternative is
|
||||
allowed only for noncommercial distribution and only if you
|
||||
received the program in object code or executable form with such
|
||||
an offer, in accord with Subsection b above.)
|
||||
|
||||
The source code for a work means the preferred form of the work for
|
||||
making modifications to it. For an executable work, complete source
|
||||
code means all the source code for all modules it contains, plus any
|
||||
associated interface definition files, plus the scripts used to
|
||||
control compilation and installation of the executable. However, as a
|
||||
special exception, the source code distributed need not include
|
||||
anything that is normally distributed (in either source or binary
|
||||
form) with the major components (compiler, kernel, and so on) of the
|
||||
operating system on which the executable runs, unless that component
|
||||
itself accompanies the executable.
|
||||
|
||||
If distribution of executable or object code is made by offering
|
||||
access to copy from a designated place, then offering equivalent
|
||||
access to copy the source code from the same place counts as
|
||||
distribution of the source code, even though third parties are not
|
||||
compelled to copy the source along with the object code.
|
||||
|
||||
4. You may not copy, modify, sublicense, or distribute the Program
|
||||
except as expressly provided under this License. Any attempt
|
||||
otherwise to copy, modify, sublicense or distribute the Program is
|
||||
void, and will automatically terminate your rights under this License.
|
||||
However, parties who have received copies, or rights, from you under
|
||||
this License will not have their licenses terminated so long as such
|
||||
parties remain in full compliance.
|
||||
|
||||
5. You are not required to accept this License, since you have not
|
||||
signed it. However, nothing else grants you permission to modify or
|
||||
distribute the Program or its derivative works. These actions are
|
||||
prohibited by law if you do not accept this License. Therefore, by
|
||||
modifying or distributing the Program (or any work based on the
|
||||
Program), you indicate your acceptance of this License to do so, and
|
||||
all its terms and conditions for copying, distributing or modifying
|
||||
the Program or works based on it.
|
||||
|
||||
6. Each time you redistribute the Program (or any work based on the
|
||||
Program), the recipient automatically receives a license from the
|
||||
original licensor to copy, distribute or modify the Program subject to
|
||||
these terms and conditions. You may not impose any further
|
||||
restrictions on the recipients' exercise of the rights granted herein.
|
||||
You are not responsible for enforcing compliance by third parties to
|
||||
this License.
|
||||
|
||||
7. If, as a consequence of a court judgment or allegation of patent
|
||||
infringement or for any other reason (not limited to patent issues),
|
||||
conditions are imposed on you (whether by court order, agreement or
|
||||
otherwise) that contradict the conditions of this License, they do not
|
||||
excuse you from the conditions of this License. If you cannot
|
||||
distribute so as to satisfy simultaneously your obligations under this
|
||||
License and any other pertinent obligations, then as a consequence you
|
||||
may not distribute the Program at all. For example, if a patent
|
||||
license would not permit royalty-free redistribution of the Program by
|
||||
all those who receive copies directly or indirectly through you, then
|
||||
the only way you could satisfy both it and this License would be to
|
||||
refrain entirely from distribution of the Program.
|
||||
|
||||
If any portion of this section is held invalid or unenforceable under
|
||||
any particular circumstance, the balance of the section is intended to
|
||||
apply and the section as a whole is intended to apply in other
|
||||
circumstances.
|
||||
|
||||
It is not the purpose of this section to induce you to infringe any
|
||||
patents or other property right claims or to contest validity of any
|
||||
such claims; this section has the sole purpose of protecting the
|
||||
integrity of the free software distribution system, which is
|
||||
implemented by public license practices. Many people have made
|
||||
generous contributions to the wide range of software distributed
|
||||
through that system in reliance on consistent application of that
|
||||
system; it is up to the author/donor to decide if he or she is willing
|
||||
to distribute software through any other system and a licensee cannot
|
||||
impose that choice.
|
||||
|
||||
This section is intended to make thoroughly clear what is believed to
|
||||
be a consequence of the rest of this License.
|
||||
|
||||
8. If the distribution and/or use of the Program is restricted in
|
||||
certain countries either by patents or by copyrighted interfaces, the
|
||||
original copyright holder who places the Program under this License
|
||||
may add an explicit geographical distribution limitation excluding
|
||||
those countries, so that distribution is permitted only in or among
|
||||
countries not thus excluded. In such case, this License incorporates
|
||||
the limitation as if written in the body of this License.
|
||||
|
||||
9. The Free Software Foundation may publish revised and/or new versions
|
||||
of the General Public License from time to time. Such new versions will
|
||||
be similar in spirit to the present version, but may differ in detail to
|
||||
address new problems or concerns.
|
||||
|
||||
Each version is given a distinguishing version number. If the Program
|
||||
specifies a version number of this License which applies to it and "any
|
||||
later version", you have the option of following the terms and conditions
|
||||
either of that version or of any later version published by the Free
|
||||
Software Foundation. If the Program does not specify a version number of
|
||||
this License, you may choose any version ever published by the Free Software
|
||||
Foundation.
|
||||
|
||||
10. If you wish to incorporate parts of the Program into other free
|
||||
programs whose distribution conditions are different, write to the author
|
||||
to ask for permission. For software which is copyrighted by the Free
|
||||
Software Foundation, write to the Free Software Foundation; we sometimes
|
||||
make exceptions for this. Our decision will be guided by the two goals
|
||||
of preserving the free status of all derivatives of our free software and
|
||||
of promoting the sharing and reuse of software generally.
|
||||
|
||||
NO WARRANTY
|
||||
|
||||
11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
|
||||
FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN
|
||||
OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
|
||||
PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
|
||||
OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS
|
||||
TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE
|
||||
PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
|
||||
REPAIR OR CORRECTION.
|
||||
|
||||
12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
|
||||
REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
|
||||
OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
|
||||
TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
|
||||
YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
|
||||
PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
|
||||
POSSIBILITY OF SUCH DAMAGES.
|
||||
|
||||
END OF TERMS AND CONDITIONS
|
||||
|
||||
How to Apply These Terms to Your New Programs
|
||||
|
||||
If you develop a new program, and you want it to be of the greatest
|
||||
possible use to the public, the best way to achieve this is to make it
|
||||
free software which everyone can redistribute and change under these terms.
|
||||
|
||||
To do so, attach the following notices to the program. It is safest
|
||||
to attach them to the start of each source file to most effectively
|
||||
convey the exclusion of warranty; and each file should have at least
|
||||
the "copyright" line and a pointer to where the full notice is found.
|
||||
|
||||
<one line to give the program's name and a brief idea of what it does.>
|
||||
Copyright (C) <year> <name of author>
|
||||
|
||||
This program is free software; you can redistribute it and/or modify
|
||||
it under the terms of the GNU General Public License as published by
|
||||
the Free Software Foundation; either version 2 of the License, or
|
||||
(at your option) any later version.
|
||||
|
||||
This program is distributed in the hope that it will be useful,
|
||||
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||
GNU General Public License for more details.
|
||||
|
||||
You should have received a copy of the GNU General Public License along
|
||||
with this program; if not, write to the Free Software Foundation, Inc.,
|
||||
51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
|
||||
Also add information on how to contact you by electronic and paper mail.
|
||||
|
||||
If the program is interactive, make it output a short notice like this
|
||||
when it starts in an interactive mode:
|
||||
|
||||
Gnomovision version 69, Copyright (C) year name of author
|
||||
Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
|
||||
This is free software, and you are welcome to redistribute it
|
||||
under certain conditions; type `show c' for details.
|
||||
|
||||
The hypothetical commands `show w' and `show c' should show the appropriate
|
||||
parts of the General Public License. Of course, the commands you use may
|
||||
be called something other than `show w' and `show c'; they could even be
|
||||
mouse-clicks or menu items--whatever suits your program.
|
||||
|
||||
You should also get your employer (if you work as a programmer) or your
|
||||
school, if any, to sign a "copyright disclaimer" for the program, if
|
||||
necessary. Here is a sample; alter the names:
|
||||
|
||||
Yoyodyne, Inc., hereby disclaims all copyright interest in the program
|
||||
`Gnomovision' (which makes passes at compilers) written by James Hacker.
|
||||
|
||||
<signature of Ty Coon>, 1 April 1989
|
||||
Ty Coon, President of Vice
|
||||
|
||||
This General Public License does not permit incorporating your program into
|
||||
proprietary programs. If your program is a subroutine library, you may
|
||||
consider it more useful to permit linking proprietary applications with the
|
||||
library. If this is what you want to do, use the GNU Lesser General
|
||||
Public License instead of this License.
|
||||
@@ -0,0 +1,66 @@
|
||||
-----------------------------------------------------------------------------
|
||||
CURRENT FEATURES
|
||||
-----------------------------------------------------------------------------
|
||||
Formatter
|
||||
|
||||
Plain text HEX code (#FFFFFF)
|
||||
Css Declaration (color/background-color)
|
||||
|
||||
Widget
|
||||
|
||||
Plain Text
|
||||
Pre-selected Color Boxes
|
||||
Simple Query Color
|
||||
(http://recursive-design.com/projects/jquery-simple-color/)
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
ROAD MAP
|
||||
-----------------------------------------------------------------------------
|
||||
1) Make this module a base that could be used by any color picker.
|
||||
2) include http://www.eyecon.ro/colorpicker/
|
||||
3) include http://www.dematte.at/colorPicker/
|
||||
4) include http://acko.net/blog/farbtastic-jquery-color-picker-plug-in/
|
||||
-----------------------------------------------------------------------------
|
||||
REQUIREMENTS
|
||||
-----------------------------------------------------------------------------
|
||||
No specific requirement
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
INSTALLATION
|
||||
-----------------------------------------------------------------------------
|
||||
To use this module, simply enable it.
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
INSTALLATION - jQuery simple color
|
||||
-----------------------------------------------------------------------------
|
||||
If you want to use the jquery simple color plugin you need to download it and
|
||||
place it in your libraries folder (this will usually be "sites/all/libraries/").
|
||||
You can download the plugin by using the following links or by Drush.
|
||||
|
||||
http://recursive-design.com/projects/jquery-simple-color/
|
||||
https://github.com/recurser/jquery-simple-color
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
USAGE
|
||||
-----------------------------------------------------------------------------
|
||||
Field
|
||||
1. Add the field to an node/entity
|
||||
2. Select the 'Color Field' field type
|
||||
3. Select the 'Color' widget you want
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
CREDIT
|
||||
-----------------------------------------------------------------------------
|
||||
Maintainer and developer: targoo
|
||||
|
||||
Development sponsored by Marique Calcus and written by Calcus David.
|
||||
For professional support and development services contact targoo@gmail.com.
|
||||
|
||||
-----------------------------------------------------------------------------
|
||||
More info
|
||||
-----------------------------------------------------------------------------
|
||||
http://www.w3.org/TR/css3-color/#color
|
||||
https://github.com/mikeemoo/ColorJizz-PHP
|
||||
http://www.colorhexa.com/ff0000
|
||||
https://github.com/PrimalPHP/Color/blob/master/lib/Primal/Color/Parser.php
|
||||
https://github.com/matthewbaggett/php-color/blob/master/Color.php
|
||||
@@ -0,0 +1,26 @@
|
||||
From ef19dd13dceeb972e9b0fe1920d846901a076dd4 Mon Sep 17 00:00:00 2001
|
||||
From: kristiaanvandeneynde <kristiaanvandeneynde@1345130.no-reply.drupal.org>
|
||||
Date: Thu, 26 Oct 2017 14:24:28 +0200
|
||||
Subject: [PATCH] Issue #2854199 by pclaitte, kristiaanvandeneynde: Color Boxes
|
||||
Widget default values doesn't works
|
||||
|
||||
---
|
||||
src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php | 2 +-
|
||||
1 file changed, 1 insertion(+), 1 deletion(-)
|
||||
|
||||
diff --git a/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php b/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
|
||||
index 8268704..ad05958 100644
|
||||
--- a/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
|
||||
+++ b/src/Plugin/Field/FieldWidget/ColorFieldWidgetBox.php
|
||||
@@ -96,7 +96,7 @@ class ColorFieldWidgetBox extends WidgetBase {
|
||||
$default_colors = $this->getSetting('default_colors');
|
||||
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
|
||||
foreach ($default_colors as $color) {
|
||||
- $settings['palette'][] = $color[0];
|
||||
+ $settings['default_colors'][] = $color[0];
|
||||
}
|
||||
$element['#attached']['drupalSettings']['color_field']['color_field_widget_box']['settings'] = $settings;
|
||||
|
||||
--
|
||||
2.4.9 (Apple Git-60)
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
name: Color Field
|
||||
type: module
|
||||
description: 'Provides a color field type to store the color value and opacity'
|
||||
# core: 8.x
|
||||
package: Field types
|
||||
dependencies:
|
||||
- field
|
||||
|
||||
# Information added by Drupal.org packaging script on 2017-04-13
|
||||
version: '8.x-2.0-rc1+11-dev'
|
||||
core: '8.x'
|
||||
project: 'color_field'
|
||||
datestamp: 1492097733
|
||||
@@ -0,0 +1,55 @@
|
||||
color-field-widget-box:
|
||||
remote: https://github.com/targoo/color_field_widget_box
|
||||
version: 1.0.0
|
||||
js:
|
||||
js/color_field_widget_box.js: {}
|
||||
js/color_field_widget_box.jquery.js: {}
|
||||
css:
|
||||
component:
|
||||
css/color_field_widget_box.css: {}
|
||||
license:
|
||||
name: MIT
|
||||
url: https://github.com/targoo/color_field_widget_box/LICENSE-MIT
|
||||
gpl-compatible: true
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupalSettings
|
||||
|
||||
color-field-widget-spectrum:
|
||||
remote: https://github.com/bgrins/spectrum
|
||||
version: 1.6.0
|
||||
js:
|
||||
/libraries/spectrum/spectrum.js: {}
|
||||
js/color_field_widget_spectrum.jquery.js: {}
|
||||
css:
|
||||
component:
|
||||
/libraries/spectrum/spectrum.css: {}
|
||||
license:
|
||||
name: MIT
|
||||
url: https://github.com/bgrins/spectrum/blob/master/LICENSE
|
||||
gpl-compatible: true
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupalSettings
|
||||
|
||||
color-field-widget-grid:
|
||||
remote: https://github.com/recurser/jquery-simple-color
|
||||
version: 1.2.1
|
||||
js:
|
||||
/libraries/jquery-simple-color/jquery.simple-color.min.js: {}
|
||||
js/color_field_widget_grid.jquery.js: {}
|
||||
css:
|
||||
component:
|
||||
css/color_field_widget_grid.css: {}
|
||||
license:
|
||||
name: MIT
|
||||
url: https://github.com/bgrins/spectrum/blob/master/LICENSE
|
||||
gpl-compatible: true
|
||||
dependencies:
|
||||
- core/jquery
|
||||
- core/drupalSettings
|
||||
|
||||
color-field-formatter-swatch:
|
||||
css:
|
||||
component:
|
||||
css/color_field_formatter_swatch.css: {}
|
||||
@@ -0,0 +1,160 @@
|
||||
<?php
|
||||
/**
|
||||
* @file
|
||||
* A color field with a custom color picker using the Field Types API.
|
||||
*/
|
||||
|
||||
use Drupal\Core\Routing\RouteMatchInterface;
|
||||
use Drupal\Core\Url;
|
||||
|
||||
/**
|
||||
* Implements hook_help().
|
||||
*/
|
||||
function color_field_help($route_name, RouteMatchInterface $route_match) {
|
||||
switch ($route_name) {
|
||||
case 'help.page.color_field':
|
||||
$output = '';
|
||||
$output .= '<h3>' . t('About') . '</h3>';
|
||||
$output .= '<p>' . t('Color Field is simple field that use a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). See the <a href="!field">Field module help</a> and the <a href="!field_ui">Field UI help</a> pages for general information on fields and how to create and manage them. For more information, see the <a href="!link_documentation">online documentation for the Link module</a>.', array('!field' => Url::fromRoute('help.page', array('name' => 'field')), '!field_ui' => Url::fromRoute('help.page', array('name' => 'field_ui')), '!link_documentation' => 'https://drupal.org/documentation/modules/link')) . '</p>';
|
||||
$output .= '<h3>' . t('Uses') . '</h3>';
|
||||
$output .= '<dl>';
|
||||
$output .= '<dt>' . t('Managing and displaying color fields') . '</dt>';
|
||||
$output .= '<dd>' . t('The <em>settings</em> and the <em>display</em> of the link field can be configured separately. See the <a href="!field_ui">Field UI help</a> for more information on how to manage fields and their display.', array('!field_ui' => Url::fromRoute('help.page', array('name' => 'field_ui')))) . '</dd>';
|
||||
$output .= '<dt>' . t('Adding link text') . '</dt>';
|
||||
$output .= '<dd>' . t('In the field settings you can define additional link text to be <em>optional</em> or <em>required</em> in any link field.') . '</dd>';
|
||||
$output .= '<dt>' . t('Displaying link text') . '</dt>';
|
||||
$output .= '<dd>' . t('If link text has been submitted for a URL, then by default this link text is displayed as a link to the URL. If you want to display both the link text <em>and</em> the URL, choose the appropriate link format from the drop-down menu in the <em>Manage display</em> page. If you only want to display the URL even if link text has been submitted, choose <em>Link</em> as the format, and then change its <em>Format settings</em> to display <em>URL only</em>.') . '</dd>';
|
||||
$output .= '<dt>' . t('Adding attributes to links') . '</dt>';
|
||||
$output .= '<dd>' . t('You can add attributes to links, by changing the <em>Format settings</em> in the <em>Manage display</em> page. Adding <em>rel="nofollow"</em> notifies search engines that links should not be followed.') . '</dd>';
|
||||
$output .= '<dt>' . t('Validating URLs') . '</dt>';
|
||||
$output .= '<dd>' . t('All links are validated after a link field is filled in. They can include anchors or query strings.') . '</dd>';
|
||||
$output .= '</dl>';
|
||||
return $output;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements hook_theme().
|
||||
*/
|
||||
function color_field_theme() {
|
||||
$theme = [];
|
||||
|
||||
$theme['color_field_formatter_swatch'] = array(
|
||||
'variables' => array(
|
||||
'shape' => NULL,
|
||||
'color' => NULL,
|
||||
'width' => NULL,
|
||||
'height' => NULL,
|
||||
),
|
||||
);
|
||||
|
||||
$theme['color_field_widget_box'] = array(
|
||||
'render element' => 'element',
|
||||
);
|
||||
|
||||
$theme['color_field_widget_spectrum'] = array(
|
||||
'render element' => 'element',
|
||||
);
|
||||
|
||||
return $theme;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepares variables for the color_field formatter swatch template.
|
||||
*
|
||||
* This template outputs a color swatch.
|
||||
*
|
||||
* Default template: color-field-formatter-swatch.html.twig.
|
||||
*
|
||||
* @param array $variables
|
||||
* An associative array containing:
|
||||
* - color: The color background.
|
||||
* - shape: The shape of the color swatch.
|
||||
* - width: The width of the color swatch.
|
||||
* - height: The height of the color swatch.
|
||||
*/
|
||||
function template_preprocess_color_field_formatter_swatch(&$variables) {
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Prepares variables for color_field widget box wrapper template.
|
||||
*
|
||||
* Default template: color-field-widget-box.html.twig.
|
||||
*
|
||||
* @param array $variables
|
||||
* An associative array containing:
|
||||
* - element: An associative array containing the properties of the element.
|
||||
* Properties used: #title, #children, #required, #attributes.
|
||||
*/
|
||||
function template_preprocess_color_field_widget_box(&$variables) {
|
||||
$element = $variables['element'];
|
||||
|
||||
if (!empty($element['#title'])) {
|
||||
$variables['title'] = $element['#title'];
|
||||
}
|
||||
|
||||
if (!empty($element['#description'])) {
|
||||
$variables['description'] = $element['#description'];
|
||||
}
|
||||
|
||||
$variables['color'] = $element['color'];
|
||||
|
||||
if (!empty($element['opacity'])) {
|
||||
$variables['opacity'] = $element['opacity'];
|
||||
}
|
||||
|
||||
// Suppress error messages.
|
||||
$variables['errors'] = NULL;
|
||||
|
||||
if (!empty($element['#description'])) {
|
||||
$variables['description'] = $element['#description'];
|
||||
}
|
||||
|
||||
$variables['required'] = FALSE;
|
||||
if (!empty($element['#required'])) {
|
||||
$variables['required'] = TRUE;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Prepares variables for color_field widget box wrapper template.
|
||||
*
|
||||
* Default template: color-field-widget-box.html.twig.
|
||||
*
|
||||
* @param array $variables
|
||||
* An associative array containing:
|
||||
* - element: An associative array containing the properties of the element.
|
||||
* Properties used: #title, #children, #required, #attributes.
|
||||
*/
|
||||
function template_preprocess_color_field_widget_spectrum(&$variables) {
|
||||
$element = $variables['element'];
|
||||
|
||||
if (!empty($element['#title'])) {
|
||||
$variables['title'] = $element['#title'];
|
||||
}
|
||||
|
||||
if (!empty($element['#description'])) {
|
||||
$variables['description'] = $element['#description'];
|
||||
}
|
||||
|
||||
$variables['color'] = $element['color'];
|
||||
|
||||
if (!empty($element['opacity'])) {
|
||||
$variables['opacity'] = $element['opacity'];
|
||||
}
|
||||
|
||||
// Suppress error messages.
|
||||
$variables['errors'] = NULL;
|
||||
|
||||
if (!empty($element['#description'])) {
|
||||
$variables['description'] = $element['#description'];
|
||||
}
|
||||
|
||||
$variables['required'] = FALSE;
|
||||
if (!empty($element['#required'])) {
|
||||
$variables['required'] = TRUE;
|
||||
}
|
||||
|
||||
}
|
||||
+111
@@ -0,0 +1,111 @@
|
||||
# Schema for the configuration files of the color field module.
|
||||
|
||||
field.formatter.settings.color_field_formatter_text:
|
||||
type: mapping
|
||||
label: 'Color text format settings'
|
||||
mapping:
|
||||
format:
|
||||
type: label
|
||||
label: 'Format'
|
||||
opacity:
|
||||
type: label
|
||||
label: 'Display opacity'
|
||||
|
||||
field.formatter.settings.color_field_formatter_swatch:
|
||||
type: mapping
|
||||
label: 'Color swatch format settings'
|
||||
mapping:
|
||||
shape:
|
||||
type: label
|
||||
label: 'Shape'
|
||||
width:
|
||||
type: label
|
||||
label: 'Width'
|
||||
height:
|
||||
type: label
|
||||
label: 'Height'
|
||||
opacity:
|
||||
type: label
|
||||
label: 'Display opacity'
|
||||
|
||||
field.formatter.settings.color_field_formatter_css:
|
||||
type: mapping
|
||||
label: 'Color CSS declaration format settings'
|
||||
mapping:
|
||||
selector:
|
||||
type: label
|
||||
label: 'Selector'
|
||||
property:
|
||||
type: label
|
||||
label: 'Property'
|
||||
important:
|
||||
type: label
|
||||
label: 'Important'
|
||||
opacity:
|
||||
type: label
|
||||
label: 'Display opacity'
|
||||
|
||||
field.widget.settings.color_field_widget_default:
|
||||
type: mapping
|
||||
label: 'Color default format settings'
|
||||
mapping:
|
||||
placeholder_color:
|
||||
type: label
|
||||
label: 'Color placeholder'
|
||||
placeholder_opacity:
|
||||
type: label
|
||||
label: 'Opacity placeholder'
|
||||
|
||||
field.widget.settings.color_field_widget_box:
|
||||
type: mapping
|
||||
label: 'Color boxes format settings'
|
||||
mapping:
|
||||
default_colors:
|
||||
type: label
|
||||
label: 'Default colors'
|
||||
|
||||
field.widget.settings.color_field_widget_grid:
|
||||
type: mapping
|
||||
label: 'Color grid format settings'
|
||||
mapping:
|
||||
cell_width:
|
||||
type: label
|
||||
label: 'Cell width'
|
||||
cell_height:
|
||||
type: label
|
||||
label: 'Height width'
|
||||
cell_margin:
|
||||
type: label
|
||||
label: 'Cell margin'
|
||||
box_width:
|
||||
type: label
|
||||
label: 'Box width'
|
||||
box_height:
|
||||
type: label
|
||||
label: 'Box height'
|
||||
columns:
|
||||
type: label
|
||||
label: 'Columns number'
|
||||
|
||||
field.widget.settings.color_field_widget_spectrum:
|
||||
type: mapping
|
||||
label: 'Color spectrum format settings'
|
||||
mapping:
|
||||
show_input:
|
||||
type: label
|
||||
label: 'Show Input'
|
||||
show_palette:
|
||||
type: label
|
||||
label: 'Show Palette'
|
||||
palette:
|
||||
type: label
|
||||
label: 'Color Palette'
|
||||
show_palette_only:
|
||||
type: label
|
||||
label: 'Show Palette Only'
|
||||
show_buttons:
|
||||
type: label
|
||||
label: 'Show Buttons'
|
||||
allow_empty:
|
||||
type: label
|
||||
label: 'Allow Empty'
|
||||
@@ -0,0 +1,15 @@
|
||||
.color_field {}
|
||||
.color_field__swatch {}
|
||||
.color_field__swatch--square {
|
||||
}
|
||||
.color_field__swatch--circle {
|
||||
-moz-border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.color_field__swatch--parallelogram {
|
||||
-webkit-transform: skew(20deg);
|
||||
-moz-transform: skew(20deg);
|
||||
-o-transform: skew(20deg);
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
.color_field_widget_box {
|
||||
}
|
||||
|
||||
.color_field_widget_box__square {
|
||||
border: 1px solid #ffffff;
|
||||
cursor: pointer;
|
||||
font-family: monospace;
|
||||
font-size: 1.2em;
|
||||
margin: 0 3px;
|
||||
padding: 1px 8px;
|
||||
}
|
||||
|
||||
.color_field_widget_box__square.active,
|
||||
.color_field_widget_box__square:hover {
|
||||
padding: 9px 16px;
|
||||
}
|
||||
|
||||
.color_field_widget_box__square--transparent {
|
||||
background-image: url("../images/transparent_box16.gif");
|
||||
background-position: 0 3px;
|
||||
background-repeat: no-repeat;
|
||||
margin: 0 3px;
|
||||
padding: 2px 8px;
|
||||
}
|
||||
|
||||
.color_field_widget_box__square--transparent.active,
|
||||
.color_field_widget_box__square--transparent:hover {
|
||||
background-image: url(../images/transparent_box32.gif);
|
||||
background-position: 0 3px;
|
||||
background-repeat: no-repeat;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
.simpleColorDisplay {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.simpleColorContainer {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.simpleColorChooser {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,42 @@
|
||||
/**
|
||||
* @file
|
||||
* Attaches behaviors for Drupal's color field.
|
||||
*/
|
||||
|
||||
(function ($, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Enables box widget on color elements.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches a box widget to a color input element.
|
||||
*/
|
||||
Drupal.behaviors.color_field = {
|
||||
attach: function (context, settings) {
|
||||
|
||||
var $context = $(context);
|
||||
|
||||
var default_colors = settings.color_field.color_field_widget_box.settings.default_colors;
|
||||
|
||||
$context.find('.color-field-widget-box-form').each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var $input = $element.prev().find('input');
|
||||
$element.empty().addColorPicker({
|
||||
currentColor: $input.val(),
|
||||
colors: default_colors,
|
||||
blotchClass:'color_field_widget_box__square',
|
||||
blotchTransparentClass:'color_field_widget_box__square--transparent',
|
||||
clickCallback: function(color) {
|
||||
$input.val(color).trigger('change');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
},
|
||||
};
|
||||
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,74 @@
|
||||
/**
|
||||
* Color Field jQuery
|
||||
*/
|
||||
(function ($) {
|
||||
jQuery.fn.addColorPicker = function (props) {
|
||||
if (!props) { props = []; }
|
||||
|
||||
props = jQuery.extend({
|
||||
currentColor:'',
|
||||
blotchElemType: 'span',
|
||||
blotchClass:'colorBox',
|
||||
blotchTransparentClass:'transparentBox',
|
||||
clickCallback: function(ignoredColor) {},
|
||||
iterationCallback: null,
|
||||
fillString: ' ',
|
||||
fillStringX: '?',
|
||||
colors: [
|
||||
'#AC725E','#D06B64','#F83A22', '#FA573C', '#FF7537', '#FFAD46',
|
||||
'#42D692','#16A765', '#7BD148','#B3DC6C','#FBE983',
|
||||
'#92E1C0', '#9FE1E7', '#9FC6E7', '#4986E7','#9A9CFF',
|
||||
'#B99AFF','#C2C2C2','#CABDBF','#CCA6AC','#F691B2',
|
||||
'#CD74E6','#A47AE2',
|
||||
]
|
||||
}, props);
|
||||
|
||||
var count = props.colors.length;
|
||||
for (var i = 0; i < count; ++i) {
|
||||
var color = props.colors[i];
|
||||
var elem = jQuery('<' + props.blotchElemType + '/>')
|
||||
.addClass(props.blotchClass)
|
||||
.attr('color',color)
|
||||
.css('background-color',color);
|
||||
// jq bug: chaining here fails if color is null b/c .css() returns (new String('transparent'))!
|
||||
if (props.currentColor == color) {
|
||||
elem.addClass('active');
|
||||
}
|
||||
if (props.clickCallback) {
|
||||
elem.click(function() {
|
||||
jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
|
||||
jQuery(this).addClass('active');
|
||||
props.clickCallback(jQuery(this).attr('color'));
|
||||
});
|
||||
}
|
||||
this.append(elem);
|
||||
if (props.iterationCallback) {
|
||||
props.iterationCallback(this, elem, color, i);
|
||||
}
|
||||
}
|
||||
|
||||
var elem = jQuery('<' + props.blotchElemType + '/>')
|
||||
.addClass(props.blotchTransparentClass)
|
||||
.attr('color', '')
|
||||
.css('background-color', '');
|
||||
|
||||
if (props.currentColor == '') {
|
||||
elem.addClass('active');
|
||||
}
|
||||
|
||||
if (props.clickCallback) {
|
||||
elem.click(function() {
|
||||
jQuery(this).parent().children('.' + props.blotchClass).removeClass('active');
|
||||
jQuery(this).addClass('active');
|
||||
props.clickCallback(jQuery(this).attr('color'));
|
||||
});
|
||||
}
|
||||
this.append(elem);
|
||||
if (props.iterationCallback) {
|
||||
props.iterationCallback(this, elem, color, i);
|
||||
}
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
})(jQuery);
|
||||
@@ -0,0 +1,38 @@
|
||||
/**
|
||||
* @file
|
||||
* Javascript for Color Field.
|
||||
*/
|
||||
(function ($, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Enables grid widget on color elements.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches a grid widget to a color input element.
|
||||
*/
|
||||
Drupal.behaviors.color_field_jquery_simple_color = {
|
||||
attach: function (context, settings) {
|
||||
var $context = $(context);
|
||||
var settings = settings.color_field.color_field_widget_grid;
|
||||
|
||||
$context.find('.js-color-field-widget-grid__color').each(function (index, element) {
|
||||
var $element = $(element);
|
||||
|
||||
$element.simpleColor({
|
||||
cellWidth: settings.cell_width,
|
||||
cellHeight: settings.cell_height,
|
||||
cellMargin: settings.cell_margin,
|
||||
boxWidth: settings.box_width,
|
||||
boxHeight: settings.box_height
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,61 @@
|
||||
/**
|
||||
* @file
|
||||
* Javascript for Color Field.
|
||||
*/
|
||||
(function ($, Drupal) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Enables spectrum on color elements.
|
||||
*
|
||||
* @type {Drupal~behavior}
|
||||
*
|
||||
* @prop {Drupal~behaviorAttach} attach
|
||||
* Attaches a spectrum widget to a color input element.
|
||||
*/
|
||||
Drupal.behaviors.color_field_spectrum = {
|
||||
attach: function (context, settings) {
|
||||
|
||||
var $context = $(context);
|
||||
|
||||
var spectrum_settings = settings.color_field.color_field_widget_spectrum;
|
||||
|
||||
$context.find('.js-color-field-widget-spectrum').each(function (index, element) {
|
||||
var $element = $(element);
|
||||
var $element_color = $element.find('.js-color-field-widget-spectrum__color');
|
||||
var $element_opacity = $element.find('.js-color-field-widget-spectrum__opacity');
|
||||
|
||||
$element_color.spectrum({
|
||||
showInitial: true,
|
||||
preferredFormat: "hex",
|
||||
showInput: spectrum_settings.show_input,
|
||||
showAlpha: spectrum_settings.show_alpha,
|
||||
showPalette: spectrum_settings.show_palette,
|
||||
showPaletteOnly: !!spectrum_settings.show_palette_only,
|
||||
palette: [spectrum_settings.palette],
|
||||
showButtons: spectrum_settings.show_buttons,
|
||||
allowEmpty: spectrum_settings.allow_empty,
|
||||
|
||||
change: function(tinycolor) {
|
||||
$element_color.val(tinycolor.toHexString());
|
||||
$element_opacity.val(tinycolor._roundA);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
// Set alpha value on load.
|
||||
if (!!spectrum_settings.show_alpha) {
|
||||
var tinycolor = $element_color.spectrum("get");
|
||||
var alpha = $element_opacity.val();
|
||||
if (alpha > 0) {
|
||||
tinycolor.setAlpha(alpha);
|
||||
$element_color.spectrum("set", tinycolor);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
})(jQuery, Drupal);
|
||||
@@ -0,0 +1,214 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\color_field;
|
||||
|
||||
abstract class ColorBase implements ColorInterface {
|
||||
|
||||
/**
|
||||
* @var
|
||||
*/
|
||||
protected $opacity;
|
||||
|
||||
/**
|
||||
* Convert the color to Hex format
|
||||
*
|
||||
* @return ColorHex
|
||||
* The color in Hex format.
|
||||
*/
|
||||
abstract function toHex();
|
||||
|
||||
/**
|
||||
* Convert the color to RGB format
|
||||
*
|
||||
* @return ColorRGB
|
||||
* The color in RGB format.
|
||||
*/
|
||||
abstract function toRGB();
|
||||
|
||||
/**
|
||||
* Convert the color to a string format
|
||||
*
|
||||
* @return String
|
||||
* The color in string format.
|
||||
*/
|
||||
abstract function toString();
|
||||
|
||||
/**
|
||||
* Get the opacity
|
||||
*
|
||||
* @return float
|
||||
* The opacity value between 0 and 1.
|
||||
*/
|
||||
public function getOpacity() {
|
||||
return $this->opacity;;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the opacity
|
||||
*
|
||||
* @return float
|
||||
* The opacity value between 0 and 1.
|
||||
*/
|
||||
public function setOpacity($opacity) {
|
||||
$this->opacity = $opacity;
|
||||
}
|
||||
|
||||
static $patterns = array(
|
||||
'cmyk' => '/^(?:device-)?cmyk\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d+(?:\.\d+)?|\.\d+)\s*\)/',
|
||||
'rgba' => '/^rgba\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3}),\s*(\d+(?:\.\d+)?|\.\d+)\s*\)/',
|
||||
'rgb' => '/^rgb\((\d{1,3}),\s*(\d{1,3}),\s*(\d{1,3})\)$/',
|
||||
'hsla' => '/^hsla\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(\d+(?:\.\d+)?|\.\d+)\s*\)/',
|
||||
'hsl' => '/^hsl\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/',
|
||||
'hsva' => '/^hsva\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%,\s*(\d+(?:\.\d+)?|\.\d+)\s*\)$/',
|
||||
'hsv' => '/^hsv\((\d{1,3}),\s*(\d{1,3})%,\s*(\d{1,3})%\)$/',
|
||||
'hex6' => '/^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/',
|
||||
'hex3' => '/^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/'
|
||||
);
|
||||
|
||||
static $named_colors = array(
|
||||
"aliceblue" => "f0f8ff",
|
||||
"antiquewhite" => "faebd7",
|
||||
"aqua" => "00ffff",
|
||||
"aquamarine" => "7fffd4",
|
||||
"azure" => "f0ffff",
|
||||
"beige" => "f5f5dc",
|
||||
"bisque" => "ffe4c4",
|
||||
"black" => "000000",
|
||||
"blanchedalmond" => "ffebcd",
|
||||
"blue" => "0000ff",
|
||||
"blueviolet" => "8a2be2",
|
||||
"brown" => "a52a2a",
|
||||
"burlywood" => "deb887",
|
||||
"cadetblue" => "5f9ea0",
|
||||
"chartreuse" => "7fff00",
|
||||
"chocolate" => "d2691e",
|
||||
"coral" => "ff7f50",
|
||||
"cornflowerblue" => "6495ed",
|
||||
"cornsilk" => "fff8dc",
|
||||
"crimson" => "dc143c",
|
||||
"cyan" => "00ffff",
|
||||
"darkblue" => "00008b",
|
||||
"darkcyan" => "008b8b",
|
||||
"darkgoldenrod" => "b8860b",
|
||||
"darkgray" => "a9a9a9",
|
||||
"darkgreen" => "006400",
|
||||
"darkkhaki" => "bdb76b",
|
||||
"darkmagenta" => "8b008b",
|
||||
"darkolivegreen" => "556b2f",
|
||||
"darkorange" => "ff8c00",
|
||||
"darkorchid" => "9932cc",
|
||||
"darkred" => "8b0000",
|
||||
"darksalmon" => "e9967a",
|
||||
"darkseagreen" => "8fbc8f",
|
||||
"darkslateblue" => "483d8b",
|
||||
"darkslategray" => "2f4f4f",
|
||||
"darkturquoise" => "00ced1",
|
||||
"darkviolet" => "9400d3",
|
||||
"deeppink" => "ff1493",
|
||||
"deepskyblue" => "00bfff",
|
||||
"dimgray" => "696969",
|
||||
"dodgerblue" => "1e90ff",
|
||||
"feldspar" => "d19275",
|
||||
"firebrick" => "b22222",
|
||||
"floralwhite" => "fffaf0",
|
||||
"forestgreen" => "228b22",
|
||||
"fuchsia" => "ff00ff",
|
||||
"gainsboro" => "dcdcdc",
|
||||
"ghostwhite" => "f8f8ff",
|
||||
"gold" => "ffd700",
|
||||
"goldenrod" => "daa520",
|
||||
"gray" => "808080",
|
||||
"green" => "008000",
|
||||
"greenyellow" => "adff2f",
|
||||
"honeydew" => "f0fff0",
|
||||
"hotpink" => "ff69b4",
|
||||
"indianred " => "cd5c5c",
|
||||
"indigo " => "4b0082",
|
||||
"ivory" => "fffff0",
|
||||
"khaki" => "f0e68c",
|
||||
"lavender" => "e6e6fa",
|
||||
"lavenderblush" => "fff0f5",
|
||||
"lawngreen" => "7cfc00",
|
||||
"lemonchiffon" => "fffacd",
|
||||
"lightblue" => "add8e6",
|
||||
"lightcoral" => "f08080",
|
||||
"lightcyan" => "e0ffff",
|
||||
"lightgoldenrodyellow" => "fafad2",
|
||||
"lightgrey" => "d3d3d3",
|
||||
"lightgreen" => "90ee90",
|
||||
"lightpink" => "ffb6c1",
|
||||
"lightsalmon" => "ffa07a",
|
||||
"lightseagreen" => "20b2aa",
|
||||
"lightskyblue" => "87cefa",
|
||||
"lightslateblue" => "8470ff",
|
||||
"lightslategray" => "778899",
|
||||
"lightsteelblue" => "b0c4de",
|
||||
"lightyellow" => "ffffe0",
|
||||
"lime" => "00ff00",
|
||||
"limegreen" => "32cd32",
|
||||
"linen" => "faf0e6",
|
||||
"magenta" => "ff00ff",
|
||||
"maroon" => "800000",
|
||||
"mediumaquamarine" => "66cdaa",
|
||||
"mediumblue" => "0000cd",
|
||||
"mediumorchid" => "ba55d3",
|
||||
"mediumpurple" => "9370d8",
|
||||
"mediumseagreen" => "3cb371",
|
||||
"mediumslateblue" => "7b68ee",
|
||||
"mediumspringgreen" => "00fa9a",
|
||||
"mediumturquoise" => "48d1cc",
|
||||
"mediumvioletred" => "c71585",
|
||||
"midnightblue" => "191970",
|
||||
"mintcream" => "f5fffa",
|
||||
"mistyrose" => "ffe4e1",
|
||||
"moccasin" => "ffe4b5",
|
||||
"navajowhite" => "ffdead",
|
||||
"navy" => "000080",
|
||||
"oldlace" => "fdf5e6",
|
||||
"olive" => "808000",
|
||||
"olivedrab" => "6b8e23",
|
||||
"orange" => "ffa500",
|
||||
"orangered" => "ff4500",
|
||||
"orchid" => "da70d6",
|
||||
"palegoldenrod" => "eee8aa",
|
||||
"palegreen" => "98fb98",
|
||||
"paleturquoise" => "afeeee",
|
||||
"palevioletred" => "d87093",
|
||||
"papayawhip" => "ffefd5",
|
||||
"peachpuff" => "ffdab9",
|
||||
"peru" => "cd853f",
|
||||
"pink" => "ffc0cb",
|
||||
"plum" => "dda0dd",
|
||||
"powderblue" => "b0e0e6",
|
||||
"purple" => "800080",
|
||||
"red" => "ff0000",
|
||||
"rosybrown" => "bc8f8f",
|
||||
"royalblue" => "4169e1",
|
||||
"saddlebrown" => "8b4513",
|
||||
"salmon" => "fa8072",
|
||||
"sandybrown" => "f4a460",
|
||||
"seagreen" => "2e8b57",
|
||||
"seashell" => "fff5ee",
|
||||
"sienna" => "a0522d",
|
||||
"silver" => "c0c0c0",
|
||||
"skyblue" => "87ceeb",
|
||||
"slateblue" => "6a5acd",
|
||||
"slategray" => "708090",
|
||||
"snow" => "fffafa",
|
||||
"springgreen" => "00ff7f",
|
||||
"steelblue" => "4682b4",
|
||||
"tan" => "d2b48c",
|
||||
"teal" => "008080",
|
||||
"thistle" => "d8bfd8",
|
||||
"tomato" => "ff6347",
|
||||
"turquoise" => "40e0d0",
|
||||
"violet" => "ee82ee",
|
||||
"violetred" => "d02090",
|
||||
"wheat" => "f5deb3",
|
||||
"white" => "ffffff",
|
||||
"whitesmoke" => "f5f5f5",
|
||||
"yellow" => "ffff00",
|
||||
"yellowgreen" => "9acd32"
|
||||
);
|
||||
|
||||
}
|
||||
@@ -0,0 +1,113 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\color_field;
|
||||
|
||||
/**
|
||||
* ColorCMY represents the CMY color format.
|
||||
*/
|
||||
class ColorCMY extends ColorBase {
|
||||
|
||||
/**
|
||||
* The cyan
|
||||
* @var float
|
||||
*/
|
||||
private $cyan;
|
||||
|
||||
/**
|
||||
* The magenta
|
||||
* @var float
|
||||
*/
|
||||
private $magenta;
|
||||
|
||||
/**
|
||||
* The yellow
|
||||
* @var float
|
||||
*/
|
||||
private $yellow;
|
||||
|
||||
/**
|
||||
* Create a new CMYK color
|
||||
*
|
||||
* @param float $cyan
|
||||
* The cyan
|
||||
* @param float $magenta
|
||||
* The magenta
|
||||
* @param float $yellow
|
||||
* The yellow
|
||||
* @param float $opacity
|
||||
* The opacity
|
||||
*/
|
||||
public function __construct($cyan, $magenta, $yellow, $opacity) {
|
||||
$this->cyan = $cyan;
|
||||
$this->magenta = $magenta;
|
||||
$this->yellow = $yellow;
|
||||
$this->opacity = floatval($opacity);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the amount of Cyan
|
||||
*
|
||||
* @return int The amount of cyan
|
||||
*/
|
||||
public function getCyan() {
|
||||
return $this->cyan;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the amount of Magenta
|
||||
*
|
||||
* @return int The amount of magenta
|
||||
*/
|
||||
public function getMagenta() {
|
||||
return $this->magenta;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the amount of Yellow
|
||||
*
|
||||
* @return int The amount of yellow
|
||||
*/
|
||||
public function getYellow() {
|
||||
return $this->yellow;
|
||||
}
|
||||
|
||||
/**
|
||||
* A string representation of this color in the current format
|
||||
*
|
||||
* @param bool $opacity
|
||||
* Whether or not to display the opacity.
|
||||
*
|
||||
* @return string
|
||||
* The color in format: #RRGGBB
|
||||
*/
|
||||
public function toString($opacity = TRUE) {
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toHex() {
|
||||
return $this->toRGB()->toHex();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toRGB() {
|
||||
$red = (1 - $this->cyan) * 255;
|
||||
$green = (1 - $this->magenta) * 255;
|
||||
$blue = (1 - $this->yellow) * 255;
|
||||
return new ColorRGB($red, $green, $blue, $this->getOpacity());
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toCMY() {
|
||||
$cyan = ($this->cyan * (1 - $this->key) + $this->key);
|
||||
$magenta = ($this->magenta * (1 - $this->key) + $this->key);
|
||||
$yellow = ($this->yellow * (1 - $this->key) + $this->key);
|
||||
return new ColorCMY($cyan, $magenta, $yellow);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,124 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\color_field;
|
||||
|
||||
/**
|
||||
* ColorCMYK represents the CMYK color format.
|
||||
*/
|
||||
class ColorCMYK extends ColorBase {
|
||||
|
||||
/**
|
||||
* The cyan
|
||||
* @var float
|
||||
*/
|
||||
private $cyan;
|
||||
|
||||
/**
|
||||
* The magenta
|
||||
* @var float
|
||||
*/
|
||||
private $magenta;
|
||||
|
||||
/**
|
||||
* The yellow
|
||||
* @var float
|
||||
*/
|
||||
private $yellow;
|
||||
|
||||
/**
|
||||
* The key (black)
|
||||
* @var float
|
||||
*/
|
||||
private $key;
|
||||
|
||||
/**
|
||||
* Create a new CMYK color
|
||||
*
|
||||
* @param float $cyan The cyan
|
||||
* @param float $magenta The magenta
|
||||
* @param float $yellow The yellow
|
||||
* @param float $key The key (black)
|
||||
* @param float $opacity
|
||||
* The opacity
|
||||
*/
|
||||
public function __construct($cyan, $magenta, $yellow, $key, $opacity) {
|
||||
$this->cyan = $cyan;
|
||||
$this->magenta = $magenta;
|
||||
$this->yellow = $yellow;
|
||||
$this->key = $key;
|
||||
$this->opacity = floatval($opacity);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the amount of Cyan
|
||||
*
|
||||
* @return int The amount of cyan
|
||||
*/
|
||||
public function getCyan() {
|
||||
return $this->cyan;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the amount of Magenta
|
||||
*
|
||||
* @return int The amount of magenta
|
||||
*/
|
||||
public function getMagenta() {
|
||||
return $this->magenta;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the amount of Yellow
|
||||
*
|
||||
* @return int The amount of yellow
|
||||
*/
|
||||
public function getYellow() {
|
||||
return $this->yellow;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the key (black)
|
||||
*
|
||||
* @return int The amount of black
|
||||
*/
|
||||
public function getKey() {
|
||||
return $this->key;
|
||||
}
|
||||
|
||||
/**
|
||||
* A string representation of this color in the current format
|
||||
*
|
||||
* @param bool $opacity
|
||||
* Whether or not to display the opacity.
|
||||
*
|
||||
* @return string
|
||||
* The color in format: #RRGGBB
|
||||
*/
|
||||
public function toString($opacity = TRUE) {
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toHex() {
|
||||
return $this->toRGB()->toHex();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toRGB() {
|
||||
return $this->toCMY()->toRGB();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toCMY() {
|
||||
$cyan = ($this->cyan * (1 - $this->key) + $this->key);
|
||||
$magenta = ($this->magenta * (1 - $this->key) + $this->key);
|
||||
$yellow = ($this->yellow * (1 - $this->key) + $this->key);
|
||||
return new ColorCMY($cyan, $magenta, $yellow, $this->getOpacity());
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,87 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\color_field;
|
||||
|
||||
/**
|
||||
* Hex represents the Hex color format
|
||||
*/
|
||||
class ColorHex extends ColorBase {
|
||||
|
||||
/**
|
||||
* The Hex triplet of the color.
|
||||
* @var int
|
||||
*/
|
||||
private $color;
|
||||
|
||||
/**
|
||||
* Create a new Hex from a string.
|
||||
*
|
||||
* @param string $color
|
||||
* The string hex value (i.e. "FFFFFF").
|
||||
* @param string $opacity
|
||||
* The opacity value.
|
||||
* @return ColorHex
|
||||
* The ColorHex object.
|
||||
* @throws Exception
|
||||
*/
|
||||
public function __construct($color, $opacity) {
|
||||
$color = trim(strtolower($color));
|
||||
|
||||
if (substr($color, 0, 1) === '#') {
|
||||
$color = substr($color, 1);
|
||||
}
|
||||
|
||||
if (strlen($color) === 3) {
|
||||
$color = str_repeat($color[0], 2) . str_repeat($color[1], 2) . str_repeat($color[2], 2);
|
||||
}
|
||||
|
||||
if (!preg_match('/[0-9A-F]{6}/i', $color)) {
|
||||
// @throws exception.
|
||||
}
|
||||
|
||||
$this->color = hexdec($color);
|
||||
$this->setOpacity(floatval($opacity));
|
||||
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* A string representation of this color in the current format
|
||||
*
|
||||
* @param bool $opacity
|
||||
* Whether or not to display the opacity.
|
||||
*
|
||||
* @return string
|
||||
* The color in format: #RRGGBB
|
||||
*/
|
||||
public function toString($opacity = TRUE) {
|
||||
$rgb = $this->toRGB();
|
||||
$hex = '#';
|
||||
$hex .= str_pad(dechex($rgb->getRed()), 2, "0", STR_PAD_LEFT);
|
||||
$hex .= str_pad(dechex($rgb->getGreen()), 2, "0", STR_PAD_LEFT);
|
||||
$hex .= str_pad(dechex($rgb->getBlue()), 2, "0", STR_PAD_LEFT);
|
||||
if ($opacity) {
|
||||
$hex .= ' ' . $this->getOpacity();
|
||||
}
|
||||
return strtoupper($hex);
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toHex() {
|
||||
return $this;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toRGB() {
|
||||
$red = (($this->color & 0xFF0000) >> 16);
|
||||
$green = (($this->color & 0x00FF00) >> 8);
|
||||
$blue = (($this->color & 0x0000FF));
|
||||
$opacity = $this->getOpacity();
|
||||
return new ColorRGB($red, $green, $blue, $opacity);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\color_field;
|
||||
|
||||
/**
|
||||
* Defines a common interface for color classes.
|
||||
*/
|
||||
interface ColorInterface {
|
||||
|
||||
public function toString();
|
||||
|
||||
public function toHex();
|
||||
|
||||
public function toRGB();
|
||||
|
||||
//public function toHSV();
|
||||
|
||||
//public function toHSL();
|
||||
|
||||
//public function toRGB();
|
||||
|
||||
//public function toCMYK();
|
||||
|
||||
//public function toCSS();
|
||||
|
||||
}
|
||||
@@ -0,0 +1,120 @@
|
||||
<?php
|
||||
|
||||
namespace Drupal\color_field;
|
||||
|
||||
/**
|
||||
* RGB represents the RGB color format
|
||||
*/
|
||||
class ColorRGB extends ColorBase {
|
||||
|
||||
/**
|
||||
* The red value (0-255)
|
||||
* @var float
|
||||
*/
|
||||
private $red;
|
||||
|
||||
/**
|
||||
* The green value (0-255)
|
||||
* @var float
|
||||
*/
|
||||
private $green;
|
||||
|
||||
/**
|
||||
* The blue value (0-255)
|
||||
* @var float
|
||||
*/
|
||||
private $blue;
|
||||
|
||||
/**
|
||||
* Create a new RGB color
|
||||
*
|
||||
* @param int $red
|
||||
* The red (0-255)
|
||||
* @param int $green
|
||||
* The green (0-255)
|
||||
* @param int $blue
|
||||
* The blue (0-255)
|
||||
* @param float $opacity
|
||||
* The opacity
|
||||
*
|
||||
* @throws Exception
|
||||
*/
|
||||
public function __construct($red, $green, $blue, $opacity) {
|
||||
|
||||
if ($red < 0 || $red > 255) {
|
||||
// @throws exception.
|
||||
}
|
||||
if ($green < 0 || $green > 255) {
|
||||
// @throws exception.
|
||||
}
|
||||
if ($blue < 0 || $blue > 255) {
|
||||
// @throws exception.
|
||||
}
|
||||
|
||||
$this->red = $red;
|
||||
$this->green = $green;
|
||||
$this->blue = $blue;
|
||||
$this->opacity = floatval($opacity);
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the red value (rounded)
|
||||
*
|
||||
* @return int The red value
|
||||
*/
|
||||
public function getRed() {
|
||||
return (0.5 + $this->red) | 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the green value (rounded)
|
||||
*
|
||||
* @return int The green value
|
||||
*/
|
||||
public function getGreen() {
|
||||
return (0.5 + $this->green) | 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get the blue value (rounded)
|
||||
*
|
||||
* @return int The blue value
|
||||
*/
|
||||
public function getBlue() {
|
||||
return (0.5 + $this->blue) | 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* A string representation of this color in the current format
|
||||
*
|
||||
* @param bool $opacity
|
||||
* Whether or not to display the opacity.
|
||||
*
|
||||
* @return string
|
||||
* The color in format: #RRGGBB
|
||||
*/
|
||||
public function toString($opacity = TRUE) {
|
||||
if ($opacity) {
|
||||
$output = 'rgba(' . $this->getRed() . ',' . $this->getGreen() . ',' . $this->getBlue() . ',' . $this->getOpacity() . ')';
|
||||
}
|
||||
else {
|
||||
$output = 'rgb(' . $this->getRed() . ',' . $this->getGreen() . ',' . $this->getBlue() . ')';
|
||||
}
|
||||
return strtoupper($output);
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toHex() {
|
||||
return new ColorHex($this->getRed() << 16 | $this->getGreen() << 8 | $this->getBlue(), $this->getOpacity());
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function toRGB() {
|
||||
return $this;
|
||||
}
|
||||
|
||||
}
|
||||
+160
@@ -0,0 +1,160 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldFormatter\ColorFieldFormatterCss.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldFormatter;
|
||||
|
||||
use Drupal\color_field\Plugin\Field\FieldType\ColorFieldType;
|
||||
use Drupal\Core\Field\FormatterBase;
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
use Drupal\color_field\ColorHex;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_field css declaration formatter.
|
||||
*
|
||||
* @FieldFormatter(
|
||||
* id = "color_field_formatter_css",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color CSS declaration"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldFormatterCss extends FormatterBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'selector' => 'body',
|
||||
'property' => 'background-color',
|
||||
'important' => TRUE,
|
||||
'opacity' => TRUE,
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
|
||||
$elements = [];
|
||||
|
||||
$elements['selector'] = array(
|
||||
'#title' => t('Selector'),
|
||||
'#description' => t('A valid CSS selector such as <code>.links > li > a, #logo</code>.'),
|
||||
'#type' => 'textarea',
|
||||
'#rows' => '1',
|
||||
'#default_value' => $this->getSetting('selector'),
|
||||
'#required' => TRUE,
|
||||
'#placeholder' => 'body > div > a',
|
||||
);
|
||||
//$element['token'] = array(
|
||||
// '#theme' => 'token_tree',
|
||||
// '#token_types' => array($instance['entity_type']),
|
||||
// '#dialog' => TRUE,
|
||||
//);
|
||||
$elements['property'] = array(
|
||||
'#title' => t('Property'),
|
||||
'#description' => t(''),
|
||||
'#type' => 'select',
|
||||
'#default_value' => $this->getSetting('property'),
|
||||
'#required' => TRUE,
|
||||
'#options' => array(
|
||||
'background-color' => t('Background color'),
|
||||
'color' => t('Text color'),
|
||||
),
|
||||
);
|
||||
$elements['important'] = array(
|
||||
'#title' => t('Important'),
|
||||
'#description' => t('Whenever this declaration is more important than others.'),
|
||||
'#type' => 'checkbox',
|
||||
'#default_value' => $this->getSetting('important'),
|
||||
);
|
||||
|
||||
if ($opacity) {
|
||||
$elements['opacity'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Display opacity'),
|
||||
'#default_value' => $this->getSetting('opacity'),
|
||||
);
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$summary = [];
|
||||
|
||||
$summary[] = t('CSS selector : @css_selector', array('@css_selector' => $settings['selector']));
|
||||
$summary[] = t('CSS property : @css_property', array('@css_property' => $settings['property']));
|
||||
$summary[] = t('!important declaration : @important_declaration', array('@important_declaration' => (($settings['important']) ? t('Yes') : t('No'))));
|
||||
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$summary[] = t('Display with opacity.');
|
||||
}
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function viewElements(FieldItemListInterface $items, $langcode) {
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$elements = [];
|
||||
|
||||
foreach ($items as $delta => $item) {
|
||||
|
||||
$value = $this->viewValue($item);
|
||||
$selector = $settings['selector'];
|
||||
$important = ($settings['important']) ? ' !important' : '';
|
||||
$property = $settings['property'];
|
||||
|
||||
$inline_css = $selector . ' { ' . $property . ': ' . $value . $important . '; }';
|
||||
|
||||
// @todo: Not sure this is the best way.
|
||||
// https://www.drupal.org/node/2391025
|
||||
// https://www.drupal.org/node/2274843
|
||||
$elements['#attached']['html_head'][] = [[
|
||||
'#tag' => 'style',
|
||||
'#value' => $inline_css,
|
||||
], 'colorfield_css'];
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function viewValue(ColorFieldType $item) {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$color_hex = new ColorHex($item->color, $item->opacity);
|
||||
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$rgbtext = $color_hex->toRGB()->toString(TRUE);
|
||||
} else {
|
||||
$rgbtext = $color_hex->toRGB()->toString(FALSE);
|
||||
}
|
||||
|
||||
return $rgbtext;
|
||||
}
|
||||
|
||||
}
|
||||
+166
@@ -0,0 +1,166 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldFormatter\ColorFieldFormatterSwatch.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldFormatter;
|
||||
|
||||
use Drupal\color_field\Plugin\Field\FieldType\ColorFieldType;
|
||||
use Drupal\Core\Field\FormatterBase;
|
||||
use Drupal\Core\Field\FieldItemInterface;
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
use Drupal\color_field\ColorHex;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_field swatch formatter.
|
||||
*
|
||||
* @FieldFormatter(
|
||||
* id = "color_field_formatter_swatch",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color swatch"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldFormatterSwatch extends FormatterBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'shape' => 'square',
|
||||
'width' => 50,
|
||||
'height' => 50,
|
||||
'opacity' => TRUE,
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
|
||||
$elements = [];
|
||||
|
||||
$elements['shape'] = array(
|
||||
'#type' => 'select',
|
||||
'#title' => t('Shape'),
|
||||
'#options' => $this->getShape(),
|
||||
'#default_value' => $this->getSetting('shape'),
|
||||
'#description' => t(''),
|
||||
);
|
||||
$elements['width'] = array(
|
||||
'#type' => 'number',
|
||||
'#title' => t('Width'),
|
||||
'#default_value' => $this->getSetting('width'),
|
||||
'#min' => 1,
|
||||
'#description' => t(''),
|
||||
);
|
||||
$elements['height'] = array(
|
||||
'#type' => 'number',
|
||||
'#title' => t('Height'),
|
||||
'#default_value' => $this->getSetting('height'),
|
||||
'#min' => 1,
|
||||
'#description' => t(''),
|
||||
);
|
||||
|
||||
if ($opacity) {
|
||||
$elements['opacity'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Display opacity'),
|
||||
'#default_value' => $this->getSetting('opacity'),
|
||||
);
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $shape
|
||||
* @return array|string
|
||||
*/
|
||||
protected function getShape($shape = NULL) {
|
||||
$formats = [];
|
||||
$formats['square'] = $this->t('Square');
|
||||
$formats['circle'] = $this->t('Circle');
|
||||
$formats['parallelogram'] = $this->t('Parallelogram');
|
||||
|
||||
if ($shape) {
|
||||
return $formats[$shape];
|
||||
}
|
||||
return $formats;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$summary = [];
|
||||
|
||||
$summary[] = t('@shape', array(
|
||||
'@shape' => $this->getShape($settings['shape']),
|
||||
));
|
||||
|
||||
$summary[] = t('Width: @width Height: @height', array(
|
||||
'@width' => $settings['width'],
|
||||
'@height' => $settings['height']
|
||||
));
|
||||
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$summary[] = t('Display with opacity.');
|
||||
}
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function viewElements(FieldItemListInterface $items, $langcode) {
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$elements = [];
|
||||
|
||||
$elements['#attached']['library'][] = 'color_field/color-field-formatter-swatch';
|
||||
|
||||
foreach ($items as $delta => $item) {
|
||||
$elements[$delta] = array(
|
||||
'#theme' => 'color_field_formatter_swatch',
|
||||
'#color' => $this->viewValue($item),
|
||||
'#shape' => $settings['shape'],
|
||||
'#width' => $settings['width'],
|
||||
'#height' => $settings['height'],
|
||||
);
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function viewValue(ColorFieldType $item) {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$color_hex = new ColorHex($item->color, $item->opacity);
|
||||
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$rgbtext = $color_hex->toRGB()->toString(TRUE);
|
||||
} else {
|
||||
$rgbtext = $color_hex->toRGB()->toString(FALSE);
|
||||
}
|
||||
|
||||
return $rgbtext;
|
||||
}
|
||||
|
||||
}
|
||||
+144
@@ -0,0 +1,144 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldFormatter\ColorFieldFormatterText.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldFormatter;
|
||||
|
||||
use Drupal\color_field\Plugin\Field\FieldType\ColorFieldType;
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Field\FormatterBase;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
use Drupal\color_field\ColorHex;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_field text formatter.
|
||||
*
|
||||
* @FieldFormatter(
|
||||
* id = "color_field_formatter_text",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color text"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldFormatterText extends FormatterBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'format' => 'hex',
|
||||
'opacity' => TRUE,
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
|
||||
$elements = [];
|
||||
|
||||
$elements['format'] = array(
|
||||
'#type' => 'select',
|
||||
'#title' => t('Format'),
|
||||
'#options' => $this->getColorFormat(),
|
||||
'#default_value' => $this->getSetting('format'),
|
||||
);
|
||||
|
||||
if ($opacity) {
|
||||
$elements['opacity'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Display opacity'),
|
||||
'#default_value' => $this->getSetting('opacity'),
|
||||
);
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param string $format
|
||||
* @return array|string
|
||||
*/
|
||||
protected function getColorFormat($format = NULL) {
|
||||
$formats = [];
|
||||
$formats['hex'] = $this->t('Hex triplet');
|
||||
$formats['rgb'] = $this->t('RGB Decimal');
|
||||
|
||||
if ($format) {
|
||||
return $formats[$format];
|
||||
}
|
||||
return $formats;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$summary = [];
|
||||
|
||||
$summary[] = t('@format', array(
|
||||
'@format' => $this->getColorFormat($settings['format']),
|
||||
));
|
||||
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$summary[] = t('Display with opacity.');
|
||||
}
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function viewElements(FieldItemListInterface $items, $langcode) {
|
||||
$elements = [];
|
||||
|
||||
foreach ($items as $delta => $item) {
|
||||
$elements[$delta] = ['#markup' => $this->viewValue($item)];
|
||||
}
|
||||
|
||||
return $elements;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
protected function viewValue(ColorFieldType $item) {
|
||||
$opacity = $this->getFieldSetting('opacity');
|
||||
$settings = $this->getSettings();
|
||||
|
||||
$color_hex = new ColorHex($item->color, $item->opacity);
|
||||
|
||||
switch ($settings['format']) {
|
||||
case 'hex':
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$output = $color_hex->toString(TRUE);
|
||||
} else {
|
||||
$output = $color_hex->toString(FALSE);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'rgb':
|
||||
if ($opacity && $settings['opacity']) {
|
||||
$output = $color_hex->toRGB()->toString(TRUE);
|
||||
} else {
|
||||
$output = $color_hex->toRGB()->toString(FALSE);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
}
|
||||
+243
@@ -0,0 +1,243 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldType\ColorFieldType.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldType;
|
||||
|
||||
use Drupal\Core\Field\FieldDefinitionInterface;
|
||||
use Drupal\Core\Field\FieldItemBase;
|
||||
use Drupal\Core\Field\FieldStorageDefinitionInterface;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
use Drupal\Core\StringTranslation\TranslatableMarkup;
|
||||
use Drupal\Core\TypedData\DataDefinition;
|
||||
use Drupal\color_field\ColorHex;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the 'color_type' field type.
|
||||
*
|
||||
* @FieldType(
|
||||
* id = "color_field_type",
|
||||
* label = @Translation("Color"),
|
||||
* description = @Translation("Create and store color value."),
|
||||
* default_widget = "color_field_widget_default",
|
||||
* default_formatter = "color_field_formatter_text"
|
||||
* )
|
||||
*/
|
||||
class ColorFieldType extends FieldItemBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultFieldSettings() {
|
||||
return array(
|
||||
'opacity' => TRUE,
|
||||
) + parent::defaultFieldSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultStorageSettings() {
|
||||
return array(
|
||||
'format' => '#HEXHEX',
|
||||
) + parent::defaultStorageSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function storageSettingsForm(array &$form, FormStateInterface $form_state, $has_data) {
|
||||
$element = [];
|
||||
|
||||
$element['format'] = array(
|
||||
'#type' => 'select',
|
||||
'#title' => t('Format storage'),
|
||||
'#description' => t('Choose how to store the color.'),
|
||||
'#default_value' => $this->getSetting('format'),
|
||||
'#options' => array(
|
||||
'#HEXHEX' => t('#123ABC'),
|
||||
'HEXHEX' => t('123ABC'),
|
||||
'#hexhex' => t('#123abc'),
|
||||
'hexhex' => t('123abc'),
|
||||
),
|
||||
);
|
||||
|
||||
$element += parent::storageSettingsForm($form, $form_state, $has_data);
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function fieldSettingsForm(array $form, FormStateInterface $form_state) {
|
||||
$element = [];
|
||||
|
||||
$element['opacity'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Record opacity'),
|
||||
'#description' => t('Whether or not to record.'),
|
||||
'#default_value' => $this->getSetting('opacity'),
|
||||
);
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function schema(FieldStorageDefinitionInterface $field_definition) {
|
||||
$format = $field_definition->getSetting('format');
|
||||
$color_length = isset($format) ? strlen($format) : 7 ;
|
||||
return array(
|
||||
'columns' => array(
|
||||
'color' => array(
|
||||
'description' => 'The color value',
|
||||
'type' => 'varchar',
|
||||
'length' => $color_length,
|
||||
'not null' => FALSE,
|
||||
),
|
||||
'opacity' => array(
|
||||
'description' => 'The opacity/alphavalue property',
|
||||
'type' => 'float',
|
||||
'size' => 'tiny',
|
||||
'not null' => FALSE,
|
||||
),
|
||||
),
|
||||
'indexes' => array(
|
||||
'color' => array('color'),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function propertyDefinitions(FieldStorageDefinitionInterface $field_definition) {
|
||||
// Prevent early t() calls by using the TranslatableMarkup.
|
||||
$properties['color'] = DataDefinition::create('string')
|
||||
->setLabel(new TranslatableMarkup('Color'));
|
||||
|
||||
$properties['opacity'] = DataDefinition::create('float')
|
||||
->setLabel(new TranslatableMarkup('Opacity'));
|
||||
|
||||
return $properties;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function isEmpty() {
|
||||
$value = $this->get('color')->getValue();
|
||||
return $value === NULL || $value === '';
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function getConstraints() {
|
||||
$constraint_manager = \Drupal::typedDataManager()->getValidationConstraintManager();
|
||||
$constraints = parent::getConstraints();
|
||||
|
||||
$label = $this->getFieldDefinition()->getLabel();
|
||||
|
||||
$constraints[] = $constraint_manager->create('ComplexData', array(
|
||||
'color' => array(
|
||||
'Regex' => array(
|
||||
'pattern' => '/^#?(([0-9a-fA-F]{2}){3}|([0-9a-fA-F]){3})$/i',
|
||||
)
|
||||
),
|
||||
));
|
||||
|
||||
if ($opacity = $this->getSetting('opacity')) {
|
||||
$min = 0;
|
||||
$constraints[] = $constraint_manager->create('ComplexData', array(
|
||||
'opacity' => array(
|
||||
'Range' => array(
|
||||
'min' => $min,
|
||||
'minMessage' => t('%name: the opacity may be no less than %min.', array('%name' => $label, '%min' => $min)),
|
||||
)
|
||||
),
|
||||
));
|
||||
|
||||
$max = 1;
|
||||
$constraints[] = $constraint_manager->create('ComplexData', array(
|
||||
'opacity' => array(
|
||||
'Range' => array(
|
||||
'max' => $max,
|
||||
'maxMessage' => t('%name: the opacity may be no greater than %max.', array('%name' => $label, '%max' => $max)),
|
||||
)
|
||||
),
|
||||
));
|
||||
}
|
||||
|
||||
return $constraints;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function generateSampleValue(FieldDefinitionInterface $field_definition) {
|
||||
$settings = $field_definition->getSettings();
|
||||
|
||||
if ($format = $settings['format']) {
|
||||
switch ($format) {
|
||||
case '#HEXHEX':
|
||||
$values['color'] = '#111AAA';
|
||||
break;
|
||||
case 'HEXHEX':
|
||||
$values['color'] = '111111';
|
||||
break;
|
||||
case '#hexhex':
|
||||
$values['color'] = '#111aaa';
|
||||
break;
|
||||
case 'hexhex':
|
||||
$values['color'] = '111111';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$values['opacity'] = 1;
|
||||
|
||||
return $values;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function preSave() {
|
||||
parent::preSave();
|
||||
|
||||
if ($format = $this->getSetting('format')) {
|
||||
$color = $this->color;
|
||||
|
||||
// Clean up data and format it.
|
||||
$color = trim($color);
|
||||
|
||||
if (substr($color, 0, 1) === '#') {
|
||||
$color = substr($color, 1);
|
||||
}
|
||||
|
||||
switch ($format) {
|
||||
case '#HEXHEX':
|
||||
$color = '#' . strtoupper($color);
|
||||
break;
|
||||
case 'HEXHEX':
|
||||
$color = strtoupper($color);
|
||||
break;
|
||||
case '#hexhex':
|
||||
$color = '#' . strtolower($color);
|
||||
break;
|
||||
case 'hexhex':
|
||||
$color = strtolower($color);
|
||||
break;
|
||||
}
|
||||
|
||||
$this->color = $color;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
+139
@@ -0,0 +1,139 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetBox.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldWidget;
|
||||
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Field\WidgetBase;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_field box widget.
|
||||
*
|
||||
* @FieldWidget(
|
||||
* id = "color_field_widget_box",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color boxes"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldWidgetBox extends WidgetBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'default_colors' => '
|
||||
#AC725E,#D06B64,#F83A22,#FA573C,#FF7537,#FFAD46
|
||||
#42D692,#16A765,#7BD148,#B3DC6C,#FBE983
|
||||
#92E1C0,#9FE1E7,#9FC6E7,#4986E7,#9A9CFF
|
||||
#B99AFF,#C2C2C2,#CABDBF,#CCA6AC,#F691B2
|
||||
#CD74E6,#A47AE2',
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$element['default_colors'] = array(
|
||||
'#type' => 'textarea',
|
||||
'#title' => t('Default colors'),
|
||||
'#default_value' => $this->getSetting('default_colors'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Default colors for pre-selected color boxes'),
|
||||
);
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$summary = [];
|
||||
|
||||
$default_colors = $this->getSetting('default_colors');
|
||||
|
||||
if (!empty($default_colors)) {
|
||||
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
|
||||
foreach ($default_colors as $color) {
|
||||
$colors = $color[0];
|
||||
$summary[] = $colors;
|
||||
}
|
||||
}
|
||||
|
||||
if (empty($summary)) {
|
||||
$summary[] = t('No default colors');
|
||||
}
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
|
||||
// We are nesting some sub-elements inside the parent, so we need a wrapper.
|
||||
// We also need to add another #title attribute at the top level for ease in
|
||||
// identifying this item in error messages. We do not want to display this
|
||||
// title because the actual title display is handled at a higher level by
|
||||
// the Field module.
|
||||
|
||||
$element['#theme_wrappers'] = array('color_field_widget_box');
|
||||
$element['#attributes']['class'][] = 'container-inline';
|
||||
|
||||
$element['#attached']['library'][] = 'color_field/color-field-widget-box';
|
||||
|
||||
// Set Drupal settings.
|
||||
$settings = [];
|
||||
$default_colors = $this->getSetting('default_colors');
|
||||
preg_match_all("/#[0-9a-fA-F]{6}/", $default_colors, $default_colors, PREG_SET_ORDER);
|
||||
foreach ($default_colors as $color) {
|
||||
$settings['default_colors'][] = $color[0];
|
||||
}
|
||||
$element['#attached']['drupalSettings']['color_field']['color_field_widget_box']['settings'] = $settings;
|
||||
|
||||
// Retrieve field label and description.
|
||||
$element['#title'] = $this->fieldDefinition->getLabel();;
|
||||
$element['#description'] = $this->fieldDefinition->getDescription();
|
||||
|
||||
// Prepare color.
|
||||
$color = NULL;
|
||||
if (isset($items[$delta]->color)) {
|
||||
$color = $items[$delta]->color;
|
||||
if (substr($color, 0, 1) !== '#') {
|
||||
$color = '#' . $color;
|
||||
}
|
||||
}
|
||||
|
||||
$element['color'] = array(
|
||||
'#maxlength' => 7,
|
||||
'#size' => 7,
|
||||
'#type' => 'textfield',
|
||||
'#default_value' => $color,
|
||||
'#attributes' => array('class' => array('visually-hidden')),
|
||||
);
|
||||
$element['color']['#suffix'] = "<div class='color-field-widget-box-form'></div>";
|
||||
|
||||
if ($this->getFieldSetting('opacity')) {
|
||||
$element['opacity'] = array(
|
||||
'#title' => t('Opacity'),
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 4,
|
||||
'#size' => 4,
|
||||
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
|
||||
'#placeholder' => $this->getSetting('placeholder_opacity'),
|
||||
);
|
||||
}
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
}
|
||||
+116
@@ -0,0 +1,116 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetDefault.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldWidget;
|
||||
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Field\WidgetBase;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_widget default input widget.
|
||||
*
|
||||
* @FieldWidget(
|
||||
* id = "color_field_widget_default",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color default"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldWidgetDefault extends WidgetBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'placeholder_color' => '',
|
||||
'placeholder_opacity' => '',
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$element['placeholder_color'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Color placeholder'),
|
||||
'#default_value' => $this->getSetting('placeholder_color'),
|
||||
'#description' => t('Text that will be shown inside the field until a value is entered. This hint is usually a sample value or a brief description of the expected format.'),
|
||||
);
|
||||
$element['placeholder_opacity'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Opacity placeholder'),
|
||||
'#default_value' => $this->getSetting('placeholder_opacity'),
|
||||
'#description' => t('Text that will be shown inside the field until a value is entered. This hint is usually a sample value or a brief description of the expected format.'),
|
||||
);
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$summary = [];
|
||||
|
||||
$placeholder_color = $this->getSetting('placeholder_color');
|
||||
$placeholder_opacity = $this->getSetting('placeholder_opacity');
|
||||
|
||||
if (!empty($placeholder_color)) {
|
||||
$summary[] = t('Color placeholder: @placeholder_color', array('@placeholder_color' => $placeholder_color));
|
||||
}
|
||||
|
||||
if (!empty($placeholder_opacity)) {
|
||||
$summary[] = t('Opacity placeholder: @placeholder_opacity', array('@placeholder_opacity' => $placeholder_opacity));
|
||||
}
|
||||
|
||||
if (empty($summary)) {
|
||||
$summary[] = t('No placeholder');
|
||||
}
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
|
||||
|
||||
$label = $this->fieldDefinition->getLabel();
|
||||
|
||||
$element['color'] = array(
|
||||
'#title' => t($label),
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 7,
|
||||
'#size' => 7,
|
||||
'#required' => $element['#required'],
|
||||
'#placeholder' => $this->getSetting('placeholder_color'),
|
||||
'#default_value' => isset($items[$delta]->color) ? $items[$delta]->color : NULL,
|
||||
);
|
||||
|
||||
if ($this->getFieldSetting('opacity')) {
|
||||
$element['color']['#prefix'] = '<div class="container-inline">';
|
||||
|
||||
$element['opacity'] = array(
|
||||
'#title' => t('Opacity'),
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 4,
|
||||
'#size' => 4,
|
||||
'#required' => $element['#required'],
|
||||
'#placeholder' => $this->getSetting('placeholder_opacity'),
|
||||
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
|
||||
'#suffix' => '</div>',
|
||||
);
|
||||
}
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
}
|
||||
+191
@@ -0,0 +1,191 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetGrid.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldWidget;
|
||||
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Field\WidgetBase;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the 'color_field_default' widget.
|
||||
*
|
||||
* @FieldWidget(
|
||||
* id = "color_field_widget_grid",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color grid"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldWidgetGrid extends WidgetBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'cell_width' => 10,
|
||||
'cell_height' => 10,
|
||||
'cell_margin' => 1,
|
||||
'box_width' => 115,
|
||||
'box_height' => 20,
|
||||
'columns' => 16,
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$element = [];
|
||||
|
||||
$element['cell_width'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Cell width'),
|
||||
'#default_value' => $this->getSetting('cell_width'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Width of each individual color cell.'),
|
||||
);
|
||||
$element['cell_height'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Height width'),
|
||||
'#default_value' => $this->getSetting('cell_height'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Height of each individual color cell.'),
|
||||
);
|
||||
$element['cell_margin'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Cell margin'),
|
||||
'#default_value' => $this->getSetting('cell_margin'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Margin of each individual color cell.'),
|
||||
);
|
||||
$element['box_width'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Box width'),
|
||||
'#default_value' => $this->getSetting('box_width'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Width of the color display box.'),
|
||||
);
|
||||
$element['box_height'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Box height'),
|
||||
'#default_value' => $this->getSetting('box_height'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Height of the color display box.'),
|
||||
);
|
||||
$element['columns'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#title' => t('Columns number'),
|
||||
'#default_value' => $this->getSetting('columns'),
|
||||
'#required' => TRUE,
|
||||
'#description' => t('Number of columns to display. Color order may look strange if this is altered.'),
|
||||
);
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$summary = [];
|
||||
|
||||
$cell_width = $this->getSetting('cell_width');
|
||||
$cell_height = $this->getSetting('cell_height');
|
||||
$cell_margin = $this->getSetting('cell_margin');
|
||||
$box_width = $this->getSetting('box_width');
|
||||
$box_height = $this->getSetting('box_height');
|
||||
$columns = $this->getSetting('columns');
|
||||
|
||||
if (!empty($cell_width)) {
|
||||
$summary[] = t('Cell width: @cell_width', array('@cell_width' => $cell_width));
|
||||
}
|
||||
|
||||
if (!empty($cell_height)) {
|
||||
$summary[] = t('Cell height: @cell_height', array('@cell_height' => $cell_height));
|
||||
}
|
||||
|
||||
if (!empty($cell_margin)) {
|
||||
$summary[] = t('Cell margin: @cell_margin', array('@cell_margin' => $cell_margin));
|
||||
}
|
||||
|
||||
if (!empty($box_width)) {
|
||||
$summary[] = t('Box width: @box_width', array('@box_width' => $box_width));
|
||||
}
|
||||
|
||||
if (!empty($box_height)) {
|
||||
$summary[] = t('Box height: @box_height', array('@box_height' => $box_height));
|
||||
}
|
||||
|
||||
if (!empty($columns)) {
|
||||
$summary[] = t('Columns: @columns', array('@columns' => $columns));
|
||||
}
|
||||
|
||||
if (empty($summary)) {
|
||||
$summary[] = t('No placeholder');
|
||||
}
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
|
||||
// We are nesting some sub-elements inside the parent, so we need a wrapper.
|
||||
// We also need to add another #title attribute at the top level for ease in
|
||||
// identifying this item in error messages. We do not want to display this
|
||||
// title because the actual title display is handled at a higher level by
|
||||
// the Field module.
|
||||
|
||||
//$element['#theme_wrappers'] = array('color_field_widget_grid');
|
||||
|
||||
$element['#attached']['library'][] = 'color_field/color-field-widget-grid';
|
||||
|
||||
// Set Drupal settings.
|
||||
$settings = $this->getSettings();
|
||||
$element['#attached']['drupalSettings']['color_field']['color_field_widget_grid'] = $settings;
|
||||
|
||||
// Prepare color.
|
||||
$color = NULL;
|
||||
if (isset($items[$delta]->color)) {
|
||||
$color = $items[$delta]->color;
|
||||
if (substr($color, 0, 1) !== '#') {
|
||||
$color = '#' . $color;
|
||||
}
|
||||
}
|
||||
|
||||
$element['color'] = array(
|
||||
'#title' => t('Color'),
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 7,
|
||||
'#size' => 7,
|
||||
'#required' => $element['#required'],
|
||||
'#default_value' => $color,
|
||||
'#attributes' => array('class' => array('js-color-field-widget-grid__color')),
|
||||
);
|
||||
|
||||
if ($this->getFieldSetting('opacity')) {
|
||||
$element['color']['#prefix'] = '<div class="container-inline">';
|
||||
|
||||
$element['opacity'] = array(
|
||||
'#title' => t('Opacity'),
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 4,
|
||||
'#size' => 4,
|
||||
'#required' => $element['#required'],
|
||||
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
|
||||
'#suffix' => '</div>',
|
||||
);
|
||||
}
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
}
|
||||
+93
@@ -0,0 +1,93 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetSpectrum.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldWidget;
|
||||
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Field\WidgetBase;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_field spectrum widget.
|
||||
*
|
||||
* @FieldWidget(
|
||||
* id = "color_field_widget_html5",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color HTML5"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldWidgetHTML5 extends WidgetBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$element = [];
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$summary = array();
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
|
||||
// Prepare color.
|
||||
$color = NULL;
|
||||
if (isset($items[$delta]->color)) {
|
||||
$color = $items[$delta]->color;
|
||||
if (substr($color, 0, 1) !== '#') {
|
||||
$color = '#' . $color;
|
||||
}
|
||||
}
|
||||
|
||||
$element['color'] = array(
|
||||
'#title' => t('Color'),
|
||||
'#type' => 'color',
|
||||
'#maxlength' => 7,
|
||||
'#size' => 7,
|
||||
'#required' => $element['#required'],
|
||||
'#default_value' => $color,
|
||||
);
|
||||
|
||||
if ($this->getFieldSetting('opacity')) {
|
||||
$element['color']['#prefix'] = '<div class="container-inline">';
|
||||
|
||||
$element['opacity'] = array(
|
||||
'#title' => t('Opacity'),
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 4,
|
||||
'#size' => 4,
|
||||
'#required' => $element['#required'],
|
||||
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
|
||||
'#suffix' => '</div>',
|
||||
);
|
||||
}
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
}
|
||||
+152
@@ -0,0 +1,152 @@
|
||||
<?php
|
||||
|
||||
/**
|
||||
* @file
|
||||
* Contains Drupal\color_field\Plugin\Field\FieldWidget\ColorFieldWidgetSpectrum.
|
||||
*/
|
||||
|
||||
namespace Drupal\color_field\Plugin\Field\FieldWidget;
|
||||
|
||||
use Drupal\Core\Field\FieldItemListInterface;
|
||||
use Drupal\Core\Field\WidgetBase;
|
||||
use Drupal\Core\Form\FormStateInterface;
|
||||
|
||||
/**
|
||||
* Plugin implementation of the color_field spectrum widget.
|
||||
*
|
||||
* @FieldWidget(
|
||||
* id = "color_field_widget_spectrum",
|
||||
* module = "color_field",
|
||||
* label = @Translation("Color spectrum"),
|
||||
* field_types = {
|
||||
* "color_field_type"
|
||||
* }
|
||||
* )
|
||||
*/
|
||||
class ColorFieldWidgetSpectrum extends WidgetBase {
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public static function defaultSettings() {
|
||||
return array(
|
||||
'show_input' => FALSE,
|
||||
'show_palette' => FALSE,
|
||||
'palette' => '',
|
||||
'show_palette_only' => TRUE,
|
||||
'show_buttons' => FALSE,
|
||||
'allow_empty' => FALSE,
|
||||
) + parent::defaultSettings();
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsForm(array $form, FormStateInterface $form_state) {
|
||||
$element = [];
|
||||
|
||||
$element['show_input'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Show Input'),
|
||||
'#default_value' => $this->getSetting('show_input'),
|
||||
'#description' => t('Allow free form typing.'),
|
||||
);
|
||||
$element['show_palette'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Show Palette'),
|
||||
'#default_value' => $this->getSetting('show_palette'),
|
||||
'#description' => t('Show or hide Palette in Spectrum Widget'),
|
||||
);
|
||||
$element['palette'] = array(
|
||||
'#type' => 'textarea',
|
||||
'#title' => t('Color Palette'),
|
||||
'#default_value' => $this->getSetting('palette'),
|
||||
'#description' => t('Selectable color palette to accompany the Spectrum Widget'),
|
||||
'#states' => array(
|
||||
'visible' => array(
|
||||
':input[name="field[settings][show_palette]"]' => array('checked' => TRUE),
|
||||
),
|
||||
),
|
||||
);
|
||||
$element['show_palette_only'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Show Palette Only'),
|
||||
'#default_value' => $this->getSetting('show_palette_only'),
|
||||
'#description' => t('Only show thePalette in Spectrum Widget and nothing else'),
|
||||
);
|
||||
$element['show_buttons'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Show Buttons'),
|
||||
'#default_value' => $this->getSetting('show_buttons'),
|
||||
'#description' => t('Add Cancel/Confirm Button.'),
|
||||
);
|
||||
$element['allow_empty'] = array(
|
||||
'#type' => 'checkbox',
|
||||
'#title' => t('Allow Empty'),
|
||||
'#default_value' => $this->getSetting('allow_empty'),
|
||||
'#description' => t('Allow empty value.'),
|
||||
);
|
||||
return $element;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function settingsSummary() {
|
||||
$summary = array();
|
||||
|
||||
return $summary;
|
||||
}
|
||||
|
||||
/**
|
||||
* {@inheritdoc}
|
||||
*/
|
||||
public function formElement(FieldItemListInterface $items, $delta, array $element, array &$form, FormStateInterface $form_state) {
|
||||
// We are nesting some sub-elements inside the parent, so we need a wrapper.
|
||||
// We also need to add another #title attribute at the top level for ease in
|
||||
// identifying this item in error messages. We do not want to display this
|
||||
// title because the actual title display is handled at a higher level by
|
||||
// the Field module.
|
||||
|
||||
$element['#theme_wrappers'] = array('color_field_widget_spectrum');
|
||||
|
||||
$element['#attached']['library'][] = 'color_field/color-field-widget-spectrum';
|
||||
|
||||
// Set Drupal settings.
|
||||
$settings = $this->getSettings();
|
||||
$settings['show_alpha'] = $this->getFieldSetting('opacity');
|
||||
$element['#attached']['drupalSettings']['color_field']['color_field_widget_spectrum'] = $settings;
|
||||
|
||||
// Prepare color.
|
||||
$color = NULL;
|
||||
if (isset($items[$delta]->color)) {
|
||||
$color = $items[$delta]->color;
|
||||
if (substr($color, 0, 1) !== '#') {
|
||||
$color = '#' . $color;
|
||||
}
|
||||
}
|
||||
|
||||
$element['color'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 7,
|
||||
'#size' => 7,
|
||||
'#required' => $element['#required'],
|
||||
'#default_value' => $color,
|
||||
'#attributes' => array('class' => array('js-color-field-widget-spectrum__color')),
|
||||
);
|
||||
|
||||
if ($this->getFieldSetting('opacity')) {
|
||||
$element['opacity'] = array(
|
||||
'#type' => 'textfield',
|
||||
'#maxlength' => 4,
|
||||
'#size' => 4,
|
||||
'#required' => $element['#required'],
|
||||
'#default_value' => isset($items[$delta]->opacity) ? $items[$delta]->opacity : NULL,
|
||||
'#attributes' => array('class' => array('js-color-field-widget-spectrum__opacity', 'visually-hidden')),
|
||||
);
|
||||
}
|
||||
|
||||
return $element;
|
||||
}
|
||||
|
||||
}
|
||||
+19
@@ -0,0 +1,19 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation of a color swatch formatter.
|
||||
*
|
||||
* Available variables:
|
||||
* - color: The color background.
|
||||
* - width: The width of the color swatch.
|
||||
* - height: The height of the color swatch.
|
||||
* - shape: The shape of the color swatch.
|
||||
*
|
||||
* @see template_preprocess()
|
||||
* @see template_preprocess_color_field_formatter_swatch()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
|
||||
<div class='color_field__swatch--{{ shape }}' style="background-color: {{ color }}; width: {{ width }}px; height: {{ height }}px;"></div>
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation of a color box form wrapper.
|
||||
*
|
||||
* Available variables:
|
||||
* - content: The form element to be output, usually a datelist, or datetime.
|
||||
* - title: The title of the form element.
|
||||
* - title_attributes: HTML attributes for the title wrapper.
|
||||
* - description: Description text for the form element.
|
||||
* - required: An indicator for whether the associated form element is required.
|
||||
*
|
||||
* @see template_preprocess()
|
||||
* @see template_preprocess_color_field_widget_box()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set title_classes = [
|
||||
required ? 'js-form-required',
|
||||
required ? 'form-required',
|
||||
]
|
||||
%}
|
||||
|
||||
{% if title %}
|
||||
<h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
|
||||
{% endif %}
|
||||
|
||||
<div class="container-inline">
|
||||
{{ color }}
|
||||
{{ opacity }}
|
||||
</div>
|
||||
|
||||
{% if errors %}
|
||||
<div>
|
||||
{{ errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ description }}
|
||||
+41
@@ -0,0 +1,41 @@
|
||||
{#
|
||||
/**
|
||||
* @file
|
||||
* Default theme implementation of a color box form wrapper.
|
||||
*
|
||||
* Available variables:
|
||||
* - content: The form element to be output, usually a datelist, or datetime.
|
||||
* - title: The title of the form element.
|
||||
* - title_attributes: HTML attributes for the title wrapper.
|
||||
* - description: Description text for the form element.
|
||||
* - required: An indicator for whether the associated form element is required.
|
||||
*
|
||||
* @see template_preprocess()
|
||||
* @see template_preprocess_color_field_widget_box()
|
||||
*
|
||||
* @ingroup themeable
|
||||
*/
|
||||
#}
|
||||
{%
|
||||
set title_classes = [
|
||||
required ? 'js-form-required',
|
||||
required ? 'form-required',
|
||||
]
|
||||
%}
|
||||
|
||||
{% if title %}
|
||||
<h4{{ title_attributes.addClass(title_classes) }}>{{ title }}</h4>
|
||||
{% endif %}
|
||||
|
||||
<div class="js-color-field-widget-spectrum">
|
||||
{{ color }}
|
||||
{{ opacity }}
|
||||
</div>
|
||||
|
||||
{% if errors %}
|
||||
<div>
|
||||
{{ errors }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ description }}
|
||||
@@ -21,7 +21,8 @@
|
||||
|
||||
EdlpCorpus = function(){
|
||||
var _activated = true;
|
||||
var _$body = _$container = $('body');
|
||||
var _$body = $('body');
|
||||
var _$container = _$body;
|
||||
var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
|
||||
var _canvas = _$canvas[0];
|
||||
var _ctx = _canvas.getContext('2d');
|
||||
@@ -50,12 +51,19 @@
|
||||
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
|
||||
var _$articles_link;
|
||||
var _node_pop_up;
|
||||
// Colors depend on edlp_vars loaded by edlptheme
|
||||
// console.log('Corpus : edlp_vars', edlp_vars);
|
||||
// Colors depend on drupalSettings loaded by edlp_corpus.module
|
||||
var _ecolors = drupalSettings.edlp_corpus.colors;
|
||||
console.log('Corpus : _ecolors', _ecolors);
|
||||
// Physics
|
||||
var _attracter;
|
||||
var _repulser;
|
||||
|
||||
var _attracter,
|
||||
_repulser,
|
||||
_repulser_center,
|
||||
_scrambler_TL,
|
||||
_scrambler_TR,
|
||||
_scrambler_BR,
|
||||
_scrambler_BL,
|
||||
_scrambler_CL,
|
||||
_scrambler_CR;
|
||||
|
||||
// ____ _ __
|
||||
// / _/___ (_) /______
|
||||
@@ -155,6 +163,10 @@
|
||||
_scrambler_BR.fixed = true;
|
||||
_scrambler_BL = _physics.makeParticle(100);
|
||||
_scrambler_BL.fixed = true;
|
||||
_scrambler_CR = _physics.makeParticle(100);
|
||||
_scrambler_CR.fixed = true;
|
||||
_scrambler_CL = _physics.makeParticle(100);
|
||||
_scrambler_CL.fixed = true;
|
||||
// move _attracter and _repulser on window resize
|
||||
resizePhysics();
|
||||
};
|
||||
@@ -165,6 +177,8 @@
|
||||
_scrambler_TR.position = {x:_canvas.width+100, y:-100};
|
||||
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
|
||||
_scrambler_BL.position = {x:-100, y:_canvas.height+100};
|
||||
_scrambler_CL.position = {x:-100, y:_canvas.height/2};
|
||||
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
|
||||
// TODO: move _attracter and _repulser on window resize
|
||||
};
|
||||
|
||||
@@ -257,7 +271,7 @@
|
||||
this.p = _physics.makeParticle(this.mass, this.x, this.y);
|
||||
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
|
||||
// attracter
|
||||
this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
|
||||
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
|
||||
this.attract.on = false;
|
||||
// repulsers
|
||||
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
|
||||
@@ -271,6 +285,10 @@
|
||||
this.scramble_BR.on = false;
|
||||
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
|
||||
this.scramble_BL.on = false;
|
||||
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
|
||||
this.scramble_CR.on = false;
|
||||
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
|
||||
this.scramble_CL.on = false;
|
||||
};
|
||||
|
||||
Node.prototype.calcWallLimits = function(){
|
||||
@@ -412,6 +430,8 @@
|
||||
this.scramble_TR.on = true;
|
||||
this.scramble_BR.on = true;
|
||||
this.scramble_BL.on = true;
|
||||
// this.scramble_CR.on = true;
|
||||
// this.scramble_CL.on = true;
|
||||
}
|
||||
Node.prototype.stopScrambling = function(){
|
||||
this.scrambling = false;
|
||||
@@ -419,6 +439,8 @@
|
||||
this.scramble_TR.on = false;
|
||||
this.scramble_BR.on = false;
|
||||
this.scramble_BL.on = false;
|
||||
// this.scramble_CR.on = false;
|
||||
// this.scramble_CL.on = false;
|
||||
}
|
||||
|
||||
Node.prototype.draw = function(){
|
||||
@@ -432,8 +454,8 @@
|
||||
|
||||
_ctx.beginPath();
|
||||
_ctx.globalAlpha = this.faded ? 0.1 : 1;
|
||||
_ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
|
||||
// _ctx.fillStyle = edlp_vars[this.e_color];
|
||||
// _ctx.fillStyle = !this.p.resting() ? _ecolors[this.e_color] : 'rgb(0, 0, 0)';
|
||||
_ctx.fillStyle = _ecolors[this.e_color];
|
||||
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
|
||||
|
||||
if(this.opened){
|
||||
|
||||
@@ -21,7 +21,8 @@
|
||||
|
||||
EdlpCorpus = function(){
|
||||
var _activated = true;
|
||||
var _$body = _$container = $('body');
|
||||
var _$body = $('body');
|
||||
var _$container = _$body;
|
||||
var _$canvas = $('<canvas id="corpus-map">').appendTo(_$container);
|
||||
var _canvas = _$canvas[0];
|
||||
var _ctx = _canvas.getContext('2d');
|
||||
@@ -50,12 +51,19 @@
|
||||
var _$entrees_block_termlinks = $('a.term-link', _$entrees_block);
|
||||
var _$articles_link;
|
||||
var _node_pop_up;
|
||||
// Colors depend on edlp_vars loaded by edlptheme
|
||||
// console.log('Corpus : edlp_vars', edlp_vars);
|
||||
// Colors depend on drupalSettings loaded by edlp_corpus.module
|
||||
var _ecolors = drupalSettings.edlp_corpus.colors;
|
||||
console.log('Corpus : _ecolors', _ecolors);
|
||||
// Physics
|
||||
var _attracter;
|
||||
var _repulser;
|
||||
|
||||
var _attracter,
|
||||
_repulser,
|
||||
_repulser_center,
|
||||
_scrambler_TL,
|
||||
_scrambler_TR,
|
||||
_scrambler_BR,
|
||||
_scrambler_BL,
|
||||
_scrambler_CL,
|
||||
_scrambler_CR;
|
||||
|
||||
// ____ _ __
|
||||
// / _/___ (_) /______
|
||||
@@ -155,6 +163,10 @@
|
||||
_scrambler_BR.fixed = true;
|
||||
_scrambler_BL = _physics.makeParticle(100);
|
||||
_scrambler_BL.fixed = true;
|
||||
_scrambler_CR = _physics.makeParticle(100);
|
||||
_scrambler_CR.fixed = true;
|
||||
_scrambler_CL = _physics.makeParticle(100);
|
||||
_scrambler_CL.fixed = true;
|
||||
// move _attracter and _repulser on window resize
|
||||
resizePhysics();
|
||||
};
|
||||
@@ -165,6 +177,8 @@
|
||||
_scrambler_TR.position = {x:_canvas.width+100, y:-100};
|
||||
_scrambler_BR.position = {x:_canvas.width+100, y:_canvas.height+100};
|
||||
_scrambler_BL.position = {x:-100, y:_canvas.height+100};
|
||||
_scrambler_CL.position = {x:-100, y:_canvas.height/2};
|
||||
_scrambler_CR.position = {x:_canvas.width+100, y:_canvas.height/2};
|
||||
// TODO: move _attracter and _repulser on window resize
|
||||
};
|
||||
|
||||
@@ -257,7 +271,7 @@
|
||||
this.p = _physics.makeParticle(this.mass, this.x, this.y);
|
||||
this.p.velocity = new Physics.Vector((Math.random()-0.5)*_p_velocity_factor, (Math.random()-0.5)*_p_velocity_factor);
|
||||
// attracter
|
||||
this.attract = _physics.makeAttraction(_attracter, this.p, 100, _canvas.width*2);
|
||||
this.attract = _physics.makeAttraction(_attracter, this.p, 1000, _canvas.width*2);
|
||||
this.attract.on = false;
|
||||
// repulsers
|
||||
this.repulse_center = _physics.makeAttraction(_repulser_center, this.p, -100, _canvas.height/2);
|
||||
@@ -271,6 +285,10 @@
|
||||
this.scramble_BR.on = false;
|
||||
this.scramble_BL = _physics.makeAttraction(_scrambler_BL, this.p, -100, _canvas.height/3);
|
||||
this.scramble_BL.on = false;
|
||||
this.scramble_CR = _physics.makeAttraction(_scrambler_CR, this.p, -100, _canvas.height/3);
|
||||
this.scramble_CR.on = false;
|
||||
this.scramble_CL = _physics.makeAttraction(_scrambler_CL, this.p, -100, _canvas.height/3);
|
||||
this.scramble_CL.on = false;
|
||||
};
|
||||
|
||||
Node.prototype.calcWallLimits = function(){
|
||||
@@ -412,6 +430,8 @@
|
||||
this.scramble_TR.on = true;
|
||||
this.scramble_BR.on = true;
|
||||
this.scramble_BL.on = true;
|
||||
// this.scramble_CR.on = true;
|
||||
// this.scramble_CL.on = true;
|
||||
}
|
||||
Node.prototype.stopScrambling = function(){
|
||||
this.scrambling = false;
|
||||
@@ -419,6 +439,8 @@
|
||||
this.scramble_TR.on = false;
|
||||
this.scramble_BR.on = false;
|
||||
this.scramble_BL.on = false;
|
||||
// this.scramble_CR.on = false;
|
||||
// this.scramble_CL.on = false;
|
||||
}
|
||||
|
||||
Node.prototype.draw = function(){
|
||||
@@ -432,8 +454,8 @@
|
||||
|
||||
_ctx.beginPath();
|
||||
_ctx.globalAlpha = this.faded ? 0.1 : 1;
|
||||
_ctx.fillStyle = !this.p.resting() ? edlp_vars[this.e_color] : 'rgb(0, 0, 0)';
|
||||
// _ctx.fillStyle = edlp_vars[this.e_color];
|
||||
// _ctx.fillStyle = !this.p.resting() ? _ecolors[this.e_color] : 'rgb(0, 0, 0)';
|
||||
_ctx.fillStyle = _ecolors[this.e_color];
|
||||
_ctx.fillRect(this.x - this.r,this.y - this.r,this.r*2,this.r*2);
|
||||
|
||||
if(this.opened){
|
||||
|
||||
@@ -92,12 +92,51 @@ function edlp_corpus_taxonomy_term_view(array &$build, \Drupal\Core\Entity\Entit
|
||||
* Implements hook_page_attachments().
|
||||
* @param array $attachments
|
||||
*/
|
||||
// function edlp_corpus_page_attachments(array &$attachments) {
|
||||
// //add here any conditions if you need to limit the pages
|
||||
// if (\Drupal::service('path.matcher')->isFrontPage()) {
|
||||
// // $attachments['#attached']['library'][] = 'edlp_corpus/corpus';
|
||||
// // $attachments['#attached']['drupalSettings']['basepath'] = base_path();
|
||||
// // $attachments['#attached']['drupalSettings']['pathtoedlpcorpus'] = base_path() . drupal_get_path('module', 'edlp_corpus');
|
||||
// // $attachments['#attached']['drupalSettings']['pathtotfiles'] = PublicStream::basePath();
|
||||
// }
|
||||
// }
|
||||
function edlp_corpus_page_attachments(array &$attachments) {
|
||||
|
||||
// css class
|
||||
// :root{
|
||||
// --e-col-130:#4B8F7E;
|
||||
// }
|
||||
|
||||
// javascript list
|
||||
// drupalSettings edlp_corpus{
|
||||
// "e_col_130": "rgb(75, 143, 126)",
|
||||
// }
|
||||
|
||||
|
||||
// get all entries
|
||||
$query = \Drupal::entityQuery('taxonomy_term')
|
||||
->condition('vid', 'entrees');
|
||||
|
||||
$tids = $query->execute();
|
||||
$terms = entity_load_multiple('taxonomy_term', $tids);
|
||||
|
||||
$js_list = [];
|
||||
$css_str = ":root{\n";
|
||||
foreach ($terms as $term) {
|
||||
$tid = $term->id();
|
||||
// get the color value
|
||||
$color = $term->get('field_color')->color;
|
||||
// build colors list
|
||||
$css_str .= "\t".'--e-col-'.$tid.':'.$color.";\n";
|
||||
$js_list['e_col_'.$tid] = $color;
|
||||
}
|
||||
$css_str .= '}';
|
||||
|
||||
// attache css
|
||||
// we should find a better way
|
||||
// https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module
|
||||
$attachments['#attached']['html_head'][] = [
|
||||
[
|
||||
'#type' => 'html_tag',
|
||||
'#tag' => 'style',
|
||||
'#value' => $css_str,
|
||||
],
|
||||
// A key, to make it possible to recognize this HTML element when altering.
|
||||
'edlp_colors',
|
||||
];
|
||||
|
||||
$attachments['#attached']['drupalSettings']['edlp_corpus']['colors'] = $js_list;
|
||||
|
||||
}
|
||||
|
||||
@@ -1,26 +1,3 @@
|
||||
edlp_vars = {
|
||||
"e_col_130": "rgb(75, 143, 126)",
|
||||
"e_col_121": "rgb(134, 142, 36)",
|
||||
"e_col_134": "rgb(43, 143, 47)",
|
||||
"e_col_121": "rgb(58, 51, 182)",
|
||||
"e_col_125": "rgb(44, 159, 87)",
|
||||
"e_col_119": "rgb(196, 137, 120)",
|
||||
"e_col_132": "rgb(82, 112, 187)",
|
||||
"e_col_122": "rgb(251, 84, 211)",
|
||||
"e_col_129": "rgb(224, 116, 131)",
|
||||
"e_col_120": "rgb(101, 88, 69)",
|
||||
"e_col_130": "rgb(126, 8, 104)",
|
||||
"e_col_118": "rgb(14, 113, 33)",
|
||||
"e_col_127": "rgb(218, 189, 66)",
|
||||
"e_col_133": "rgb(3, 153, 187)",
|
||||
"e_col_128": "rgb(57, 154, 28)",
|
||||
"e_col_124": "rgb(112, 133, 64)",
|
||||
"e_col_116": "rgb(25, 27, 255)",
|
||||
"e_col_117": "rgb(39, 157, 132)",
|
||||
"e_col_131": "rgb(82, 25, 171)",
|
||||
"e_col_126": "rgb(212, 156, 182)",
|
||||
"e_col_123": "rgb(73, 119, 21)"
|
||||
};
|
||||
(function($) {
|
||||
|
||||
EdlpTheme = function(){
|
||||
|
||||
@@ -1404,43 +1404,43 @@ body.ajax-loading main[role="main"]:before {
|
||||
background-color: black;
|
||||
margin-right: 3px; }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='134'] {
|
||||
background-color: #2b8f2f; }
|
||||
background-color: var(--e-col-134); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='121'] {
|
||||
background-color: #3a33b6; }
|
||||
background-color: var(--e-col-121); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='125'] {
|
||||
background-color: #2c9f57; }
|
||||
background-color: var(--e-col-125); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='119'] {
|
||||
background-color: #c48978; }
|
||||
background-color: var(--e-col-119); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='132'] {
|
||||
background-color: #5270bb; }
|
||||
background-color: var(--e-col-132); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='122'] {
|
||||
background-color: #fb54d3; }
|
||||
background-color: var(--e-col-122); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='129'] {
|
||||
background-color: #e07483; }
|
||||
background-color: var(--e-col-129); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='120'] {
|
||||
background-color: #655845; }
|
||||
background-color: var(--e-col-120); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='130'] {
|
||||
background-color: #7e0868; }
|
||||
background-color: var(--e-col-130); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='118'] {
|
||||
background-color: #0e7121; }
|
||||
background-color: var(--e-col-118); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='127'] {
|
||||
background-color: #dabd42; }
|
||||
background-color: var(--e-col-127); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='133'] {
|
||||
background-color: #0399bb; }
|
||||
background-color: var(--e-col-133); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='128'] {
|
||||
background-color: #399a1c; }
|
||||
background-color: var(--e-col-128); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='124'] {
|
||||
background-color: #708540; }
|
||||
background-color: var(--e-col-124); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='116'] {
|
||||
background-color: #191bff; }
|
||||
background-color: var(--e-col-116); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='117'] {
|
||||
background-color: #279d84; }
|
||||
background-color: var(--e-col-117); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='131'] {
|
||||
background-color: #5219ab; }
|
||||
background-color: var(--e-col-131); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='126'] {
|
||||
background-color: #d49cb6; }
|
||||
background-color: var(--e-col-126); }
|
||||
#audio-player .cartel .cartels .first-cartel .entrees span[tid='123'] {
|
||||
background-color: #497715; }
|
||||
background-color: var(--e-col-123); }
|
||||
#audio-player .cartel .cartels .first-cartel h2.node-title {
|
||||
margin: 0.2em 0 0;
|
||||
font-size: 1em; }
|
||||
@@ -1552,43 +1552,43 @@ body.ajax-loading main[role="main"]:before {
|
||||
background-color: black;
|
||||
margin-right: 3px; }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='134'] {
|
||||
background-color: #2b8f2f; }
|
||||
background-color: var(--e-col-134); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='121'] {
|
||||
background-color: #3a33b6; }
|
||||
background-color: var(--e-col-121); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='125'] {
|
||||
background-color: #2c9f57; }
|
||||
background-color: var(--e-col-125); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='119'] {
|
||||
background-color: #c48978; }
|
||||
background-color: var(--e-col-119); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='132'] {
|
||||
background-color: #5270bb; }
|
||||
background-color: var(--e-col-132); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='122'] {
|
||||
background-color: #fb54d3; }
|
||||
background-color: var(--e-col-122); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='129'] {
|
||||
background-color: #e07483; }
|
||||
background-color: var(--e-col-129); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='120'] {
|
||||
background-color: #655845; }
|
||||
background-color: var(--e-col-120); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='130'] {
|
||||
background-color: #7e0868; }
|
||||
background-color: var(--e-col-130); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='118'] {
|
||||
background-color: #0e7121; }
|
||||
background-color: var(--e-col-118); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='127'] {
|
||||
background-color: #dabd42; }
|
||||
background-color: var(--e-col-127); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='133'] {
|
||||
background-color: #0399bb; }
|
||||
background-color: var(--e-col-133); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='128'] {
|
||||
background-color: #399a1c; }
|
||||
background-color: var(--e-col-128); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='124'] {
|
||||
background-color: #708540; }
|
||||
background-color: var(--e-col-124); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='116'] {
|
||||
background-color: #191bff; }
|
||||
background-color: var(--e-col-116); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='117'] {
|
||||
background-color: #279d84; }
|
||||
background-color: var(--e-col-117); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='131'] {
|
||||
background-color: #5219ab; }
|
||||
background-color: var(--e-col-131); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='126'] {
|
||||
background-color: #d49cb6; }
|
||||
background-color: var(--e-col-126); }
|
||||
#studio-ui .chutier_ui .documents li .entrees span[tid='123'] {
|
||||
background-color: #497715; }
|
||||
background-color: var(--e-col-123); }
|
||||
#studio-ui .chutier_ui .documents li a.audio-link {
|
||||
text-transform: capitalize;
|
||||
font-size: 0.756em;
|
||||
@@ -1948,62 +1948,62 @@ footer {
|
||||
font-size: 0.65em;
|
||||
margin: 0; }
|
||||
footer .block-block-edlp-entrees ul li[tid='134'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='134'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #2b8f2f;
|
||||
background-color: #2b8f2f; }
|
||||
border-color: var(--e-col-134);
|
||||
background-color: var(--e-col-134); }
|
||||
footer .block-block-edlp-entrees ul li[tid='121'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='121'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #3a33b6;
|
||||
background-color: #3a33b6; }
|
||||
border-color: var(--e-col-121);
|
||||
background-color: var(--e-col-121); }
|
||||
footer .block-block-edlp-entrees ul li[tid='125'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='125'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #2c9f57;
|
||||
background-color: #2c9f57; }
|
||||
border-color: var(--e-col-125);
|
||||
background-color: var(--e-col-125); }
|
||||
footer .block-block-edlp-entrees ul li[tid='119'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='119'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #c48978;
|
||||
background-color: #c48978; }
|
||||
border-color: var(--e-col-119);
|
||||
background-color: var(--e-col-119); }
|
||||
footer .block-block-edlp-entrees ul li[tid='132'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='132'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #5270bb;
|
||||
background-color: #5270bb; }
|
||||
border-color: var(--e-col-132);
|
||||
background-color: var(--e-col-132); }
|
||||
footer .block-block-edlp-entrees ul li[tid='122'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='122'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #fb54d3;
|
||||
background-color: #fb54d3; }
|
||||
border-color: var(--e-col-122);
|
||||
background-color: var(--e-col-122); }
|
||||
footer .block-block-edlp-entrees ul li[tid='129'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='129'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #e07483;
|
||||
background-color: #e07483; }
|
||||
border-color: var(--e-col-129);
|
||||
background-color: var(--e-col-129); }
|
||||
footer .block-block-edlp-entrees ul li[tid='120'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='120'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #655845;
|
||||
background-color: #655845; }
|
||||
border-color: var(--e-col-120);
|
||||
background-color: var(--e-col-120); }
|
||||
footer .block-block-edlp-entrees ul li[tid='130'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='130'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #7e0868;
|
||||
background-color: #7e0868; }
|
||||
border-color: var(--e-col-130);
|
||||
background-color: var(--e-col-130); }
|
||||
footer .block-block-edlp-entrees ul li[tid='118'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='118'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #0e7121;
|
||||
background-color: #0e7121; }
|
||||
border-color: var(--e-col-118);
|
||||
background-color: var(--e-col-118); }
|
||||
footer .block-block-edlp-entrees ul li[tid='127'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='127'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #dabd42;
|
||||
background-color: #dabd42; }
|
||||
border-color: var(--e-col-127);
|
||||
background-color: var(--e-col-127); }
|
||||
footer .block-block-edlp-entrees ul li[tid='133'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='133'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #0399bb;
|
||||
background-color: #0399bb; }
|
||||
border-color: var(--e-col-133);
|
||||
background-color: var(--e-col-133); }
|
||||
footer .block-block-edlp-entrees ul li[tid='128'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='128'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #399a1c;
|
||||
background-color: #399a1c; }
|
||||
border-color: var(--e-col-128);
|
||||
background-color: var(--e-col-128); }
|
||||
footer .block-block-edlp-entrees ul li[tid='124'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='124'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #708540;
|
||||
background-color: #708540; }
|
||||
border-color: var(--e-col-124);
|
||||
background-color: var(--e-col-124); }
|
||||
footer .block-block-edlp-entrees ul li[tid='116'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='116'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #191bff;
|
||||
background-color: #191bff; }
|
||||
border-color: var(--e-col-116);
|
||||
background-color: var(--e-col-116); }
|
||||
footer .block-block-edlp-entrees ul li[tid='117'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='117'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #279d84;
|
||||
background-color: #279d84; }
|
||||
border-color: var(--e-col-117);
|
||||
background-color: var(--e-col-117); }
|
||||
footer .block-block-edlp-entrees ul li[tid='131'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='131'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #5219ab;
|
||||
background-color: #5219ab; }
|
||||
border-color: var(--e-col-131);
|
||||
background-color: var(--e-col-131); }
|
||||
footer .block-block-edlp-entrees ul li[tid='126'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='126'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #d49cb6;
|
||||
background-color: #d49cb6; }
|
||||
border-color: var(--e-col-126);
|
||||
background-color: var(--e-col-126); }
|
||||
footer .block-block-edlp-entrees ul li[tid='123'] a.term-link:before, footer .block-block-edlp-entrees ul li[tid='123'] .entree-content span.oblique-wrapper a:before {
|
||||
border-color: #497715;
|
||||
background-color: #497715; }
|
||||
border-color: var(--e-col-123);
|
||||
background-color: var(--e-col-123); }
|
||||
footer .block-block-edlp-entrees ul li .entree-content span.oblique-wrapper a:not(:hover):not(.is-active):before {
|
||||
background-color: #fff !important; }
|
||||
footer .block-block-edlp-entrees ul li a.articles-link:not(:hover):not(.is-active):before {
|
||||
@@ -2093,43 +2093,43 @@ footer {
|
||||
background-color: black;
|
||||
margin-right: 3px; }
|
||||
.node-popup .inner .entrees span[tid='134'] {
|
||||
background-color: #2b8f2f; }
|
||||
background-color: var(--e-col-134); }
|
||||
.node-popup .inner .entrees span[tid='121'] {
|
||||
background-color: #3a33b6; }
|
||||
background-color: var(--e-col-121); }
|
||||
.node-popup .inner .entrees span[tid='125'] {
|
||||
background-color: #2c9f57; }
|
||||
background-color: var(--e-col-125); }
|
||||
.node-popup .inner .entrees span[tid='119'] {
|
||||
background-color: #c48978; }
|
||||
background-color: var(--e-col-119); }
|
||||
.node-popup .inner .entrees span[tid='132'] {
|
||||
background-color: #5270bb; }
|
||||
background-color: var(--e-col-132); }
|
||||
.node-popup .inner .entrees span[tid='122'] {
|
||||
background-color: #fb54d3; }
|
||||
background-color: var(--e-col-122); }
|
||||
.node-popup .inner .entrees span[tid='129'] {
|
||||
background-color: #e07483; }
|
||||
background-color: var(--e-col-129); }
|
||||
.node-popup .inner .entrees span[tid='120'] {
|
||||
background-color: #655845; }
|
||||
background-color: var(--e-col-120); }
|
||||
.node-popup .inner .entrees span[tid='130'] {
|
||||
background-color: #7e0868; }
|
||||
background-color: var(--e-col-130); }
|
||||
.node-popup .inner .entrees span[tid='118'] {
|
||||
background-color: #0e7121; }
|
||||
background-color: var(--e-col-118); }
|
||||
.node-popup .inner .entrees span[tid='127'] {
|
||||
background-color: #dabd42; }
|
||||
background-color: var(--e-col-127); }
|
||||
.node-popup .inner .entrees span[tid='133'] {
|
||||
background-color: #0399bb; }
|
||||
background-color: var(--e-col-133); }
|
||||
.node-popup .inner .entrees span[tid='128'] {
|
||||
background-color: #399a1c; }
|
||||
background-color: var(--e-col-128); }
|
||||
.node-popup .inner .entrees span[tid='124'] {
|
||||
background-color: #708540; }
|
||||
background-color: var(--e-col-124); }
|
||||
.node-popup .inner .entrees span[tid='116'] {
|
||||
background-color: #191bff; }
|
||||
background-color: var(--e-col-116); }
|
||||
.node-popup .inner .entrees span[tid='117'] {
|
||||
background-color: #279d84; }
|
||||
background-color: var(--e-col-117); }
|
||||
.node-popup .inner .entrees span[tid='131'] {
|
||||
background-color: #5219ab; }
|
||||
background-color: var(--e-col-131); }
|
||||
.node-popup .inner .entrees span[tid='126'] {
|
||||
background-color: #d49cb6; }
|
||||
background-color: var(--e-col-126); }
|
||||
.node-popup .inner .entrees span[tid='123'] {
|
||||
background-color: #497715; }
|
||||
background-color: var(--e-col-123); }
|
||||
.node-popup .inner .title {
|
||||
margin: 0.3em 0;
|
||||
font-size: 1.2em;
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
/* this file stays here just for memory */
|
||||
{
|
||||
"e_col_130": "rgb(75, 143, 126)",
|
||||
"e_col_121": "rgb(134, 142, 36)",
|
||||
|
||||
@@ -1,23 +0,0 @@
|
||||
edlp_vars = {
|
||||
"e_col_130": "rgb(75, 143, 126)",
|
||||
"e_col_121": "rgb(134, 142, 36)",
|
||||
"e_col_134": "rgb(43, 143, 47)",
|
||||
"e_col_121": "rgb(58, 51, 182)",
|
||||
"e_col_125": "rgb(44, 159, 87)",
|
||||
"e_col_119": "rgb(196, 137, 120)",
|
||||
"e_col_132": "rgb(82, 112, 187)",
|
||||
"e_col_122": "rgb(251, 84, 211)",
|
||||
"e_col_129": "rgb(224, 116, 131)",
|
||||
"e_col_120": "rgb(101, 88, 69)",
|
||||
"e_col_130": "rgb(126, 8, 104)",
|
||||
"e_col_118": "rgb(14, 113, 33)",
|
||||
"e_col_127": "rgb(218, 189, 66)",
|
||||
"e_col_133": "rgb(3, 153, 187)",
|
||||
"e_col_128": "rgb(57, 154, 28)",
|
||||
"e_col_124": "rgb(112, 133, 64)",
|
||||
"e_col_116": "rgb(25, 27, 255)",
|
||||
"e_col_117": "rgb(39, 157, 132)",
|
||||
"e_col_131": "rgb(82, 25, 171)",
|
||||
"e_col_126": "rgb(212, 156, 182)",
|
||||
"e_col_123": "rgb(73, 119, 21)"
|
||||
};
|
||||
@@ -8,7 +8,6 @@
|
||||
|
||||
@import 'base/reset';
|
||||
@import 'base/colors';
|
||||
@import 'base/shared_variables';
|
||||
@import 'base/grid';
|
||||
@import 'base/layout';
|
||||
@import 'base/fonts';
|
||||
@@ -27,25 +26,25 @@
|
||||
width:$s; height:$s;
|
||||
background-color: black;
|
||||
margin-right: 3px;
|
||||
&[tid='134']{background-color: $e_col_134;}
|
||||
&[tid='121']{background-color: $e_col_121;}
|
||||
&[tid='125']{background-color: $e_col_125;}
|
||||
&[tid='119']{background-color: $e_col_119;}
|
||||
&[tid='132']{background-color: $e_col_132;}
|
||||
&[tid='122']{background-color: $e_col_122;}
|
||||
&[tid='129']{background-color: $e_col_129;}
|
||||
&[tid='120']{background-color: $e_col_120;}
|
||||
&[tid='130']{background-color: $e_col_130;}
|
||||
&[tid='118']{background-color: $e_col_118;}
|
||||
&[tid='127']{background-color: $e_col_127;}
|
||||
&[tid='133']{background-color: $e_col_133;}
|
||||
&[tid='128']{background-color: $e_col_128;}
|
||||
&[tid='124']{background-color: $e_col_124;}
|
||||
&[tid='116']{background-color: $e_col_116;}
|
||||
&[tid='117']{background-color: $e_col_117;}
|
||||
&[tid='131']{background-color: $e_col_131;}
|
||||
&[tid='126']{background-color: $e_col_126;}
|
||||
&[tid='123']{background-color: $e_col_123;}
|
||||
&[tid='134']{background-color: var(--e-col-134);}
|
||||
&[tid='121']{background-color: var(--e-col-121);}
|
||||
&[tid='125']{background-color: var(--e-col-125);}
|
||||
&[tid='119']{background-color: var(--e-col-119);}
|
||||
&[tid='132']{background-color: var(--e-col-132);}
|
||||
&[tid='122']{background-color: var(--e-col-122);}
|
||||
&[tid='129']{background-color: var(--e-col-129);}
|
||||
&[tid='120']{background-color: var(--e-col-120);}
|
||||
&[tid='130']{background-color: var(--e-col-130);}
|
||||
&[tid='118']{background-color: var(--e-col-118);}
|
||||
&[tid='127']{background-color: var(--e-col-127);}
|
||||
&[tid='133']{background-color: var(--e-col-133);}
|
||||
&[tid='128']{background-color: var(--e-col-128);}
|
||||
&[tid='124']{background-color: var(--e-col-124);}
|
||||
&[tid='116']{background-color: var(--e-col-116);}
|
||||
&[tid='117']{background-color: var(--e-col-117);}
|
||||
&[tid='131']{background-color: var(--e-col-131);}
|
||||
&[tid='126']{background-color: var(--e-col-126);}
|
||||
&[tid='123']{background-color: var(--e-col-123);}
|
||||
}
|
||||
|
||||
|
||||
@@ -940,61 +939,61 @@ footer{
|
||||
|
||||
&[tid='134']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_134;background-color: $e_col_134;}}
|
||||
border-color: var(--e-col-134);background-color: var(--e-col-134);}}
|
||||
&[tid='121']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_121;background-color: $e_col_121;}}
|
||||
border-color: var(--e-col-121);background-color: var(--e-col-121);}}
|
||||
&[tid='125']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_125;background-color: $e_col_125;}}
|
||||
border-color: var(--e-col-125);background-color: var(--e-col-125);}}
|
||||
&[tid='119']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_119;background-color: $e_col_119;}}
|
||||
border-color: var(--e-col-119);background-color: var(--e-col-119);}}
|
||||
&[tid='132']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_132;background-color: $e_col_132;}}
|
||||
border-color: var(--e-col-132);background-color: var(--e-col-132);}}
|
||||
&[tid='122']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_122;background-color: $e_col_122;}}
|
||||
border-color: var(--e-col-122);background-color: var(--e-col-122);}}
|
||||
&[tid='129']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_129;background-color: $e_col_129;}}
|
||||
border-color: var(--e-col-129);background-color: var(--e-col-129);}}
|
||||
&[tid='120']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_120;background-color: $e_col_120;}}
|
||||
border-color: var(--e-col-120);background-color: var(--e-col-120);}}
|
||||
&[tid='130']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_130;background-color: $e_col_130;}}
|
||||
border-color: var(--e-col-130);background-color: var(--e-col-130);}}
|
||||
&[tid='118']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_118;background-color: $e_col_118;}}
|
||||
border-color: var(--e-col-118);background-color: var(--e-col-118);}}
|
||||
&[tid='127']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_127;background-color: $e_col_127;}}
|
||||
border-color: var(--e-col-127);background-color: var(--e-col-127);}}
|
||||
&[tid='133']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_133;background-color: $e_col_133;}}
|
||||
border-color: var(--e-col-133);background-color: var(--e-col-133);}}
|
||||
&[tid='128']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_128;background-color: $e_col_128;}}
|
||||
border-color: var(--e-col-128);background-color: var(--e-col-128);}}
|
||||
&[tid='124']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_124;background-color: $e_col_124;}}
|
||||
border-color: var(--e-col-124);background-color: var(--e-col-124);}}
|
||||
&[tid='116']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_116;background-color: $e_col_116;}}
|
||||
border-color: var(--e-col-116);background-color: var(--e-col-116);}}
|
||||
&[tid='117']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_117;background-color: $e_col_117;}}
|
||||
border-color: var(--e-col-117);background-color: var(--e-col-117);}}
|
||||
&[tid='131']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_131;background-color: $e_col_131;}}
|
||||
border-color: var(--e-col-131);background-color: var(--e-col-131);}}
|
||||
&[tid='126']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_126;background-color: $e_col_126;}}
|
||||
border-color: var(--e-col-126);background-color: var(--e-col-126);}}
|
||||
&[tid='123']{
|
||||
a.term-link:before, .entree-content span.oblique-wrapper a:before{
|
||||
border-color: $e_col_123;background-color: $e_col_123;}}
|
||||
border-color: var(--e-col-123);background-color: var(--e-col-123);}}
|
||||
|
||||
// &.highlighted{
|
||||
// a.term_link{
|
||||
|
||||
@@ -1,19 +0,0 @@
|
||||
$e_col_130: rgb(126, 8, 104);
|
||||
$e_col_121: rgb(58, 51, 182);
|
||||
$e_col_134: rgb(43, 143, 47);
|
||||
$e_col_125: rgb(44, 159, 87);
|
||||
$e_col_119: rgb(196, 137, 120);
|
||||
$e_col_132: rgb(82, 112, 187);
|
||||
$e_col_122: rgb(251, 84, 211);
|
||||
$e_col_129: rgb(224, 116, 131);
|
||||
$e_col_120: rgb(101, 88, 69);
|
||||
$e_col_118: rgb(14, 113, 33);
|
||||
$e_col_127: rgb(218, 189, 66);
|
||||
$e_col_133: rgb(3, 153, 187);
|
||||
$e_col_128: rgb(57, 154, 28);
|
||||
$e_col_124: rgb(112, 133, 64);
|
||||
$e_col_116: rgb(25, 27, 255);
|
||||
$e_col_117: rgb(39, 157, 132);
|
||||
$e_col_131: rgb(82, 25, 171);
|
||||
$e_col_126: rgb(212, 156, 182);
|
||||
$e_col_123: rgb(73, 119, 21);
|
||||
@@ -3,7 +3,7 @@ global-css:
|
||||
css:
|
||||
base:
|
||||
assets/dist/styles/app.min.css: {}
|
||||
assets/dist/bower/OverlayScrollbars.min.css: {}
|
||||
# assets/dist/bower/OverlayScrollbars.min.css: {}
|
||||
|
||||
|
||||
global-js:
|
||||
@@ -11,13 +11,12 @@ global-js:
|
||||
js:
|
||||
assets/dist/bower/jquery.history.js: { scope: footer }
|
||||
assets/dist/bower/jquery.hotkeys.js: { scope: footer }
|
||||
assets/dist/bower/jquery.overlayScrollbars.min.js: { scope: footer }
|
||||
# assets/dist/bower/jquery.overlayScrollbars.min.js: { scope: footer }
|
||||
assets/dist/bower/imagesloaded.pkgd.min.js: { scope: footer }
|
||||
assets/dist/bower/masonry.pkgd.min.js: { scope: footer }
|
||||
assets/dist/scripts/main.min.js: { scope: footer }
|
||||
dependencies:
|
||||
- core/drupal
|
||||
- core/drupal.ajax
|
||||
- core/matchmedia
|
||||
- core/matchmedia.addListener
|
||||
- core/jquery
|
||||
|
||||
@@ -9,9 +9,9 @@ var jsmin = require('gulp-jsmin');
|
||||
var cssmin = require('gulp-cssmin');
|
||||
var rename = require('gulp-rename');
|
||||
var mainBowerFiles = require('main-bower-files');
|
||||
var jsonToSass = require('gulp-json-to-sass');
|
||||
var concat = require('gulp-concat');
|
||||
var through = require('through2');
|
||||
// var jsonToSass = require('gulp-json-to-sass');
|
||||
// var concat = require('gulp-concat');
|
||||
// var through = require('through2');
|
||||
var svgmin = require('gulp-svgmin');
|
||||
// var fs = require('fs');
|
||||
// var json2js = require('gulp-json2js');
|
||||
@@ -28,49 +28,16 @@ var config = {
|
||||
production: !!util.env.production
|
||||
}
|
||||
|
||||
|
||||
gulp.task('vars2sass', function () {
|
||||
gulp.src('./assets/json/shared_variables.json')
|
||||
.pipe(jsonToSass({
|
||||
jsonPath: './assets/json/shared_variables.json',
|
||||
scssPath: './assets/styles/base/_shared_variables.scss'
|
||||
}));
|
||||
});
|
||||
|
||||
// this one is not working, works first run but then it's like it's caching the source
|
||||
// gulp.task('variables2js', function() {
|
||||
// gulp.src('./assets/scripts/shared_variables_model.js')
|
||||
// .pipe(rename('shared_variables.js'))
|
||||
// .pipe(data(function(file) {
|
||||
// delete require.cache['./assets/json/shared_variables.json'];
|
||||
// return require('./assets/json/shared_variables.json');
|
||||
// }))
|
||||
// .pipe(json2js())
|
||||
// .pipe(gulp.dest('./assets/scripts/'));
|
||||
// });
|
||||
|
||||
gulp.task('vars2js', function() {
|
||||
gulp.src('./assets/json/shared_variables.json')
|
||||
.pipe(rename('shared_variables.js'))
|
||||
.pipe(through.obj(function (file, enc, cb) {
|
||||
// console.log('file',String(file.contents));
|
||||
// small pipe to wrappe json data into a js variable
|
||||
file.contents = new Buffer("edlp_vars = "+String(file.contents).trim()+";");
|
||||
cb(null, file);
|
||||
}))
|
||||
.pipe(gulp.dest('./assets/scripts/'));
|
||||
});
|
||||
|
||||
gulp.task('scripts', function () {
|
||||
gulp.src(['./assets/scripts/shared_variables.js','./assets/scripts/main.js'])
|
||||
.pipe(concat('main.js'))
|
||||
gulp.src(['./assets/scripts/main.js']) // './assets/scripts/shared_variables.js',
|
||||
// .pipe(concat('main.js'))
|
||||
.pipe(config.production ? jsmin() : util.noop())
|
||||
.pipe(rename({suffix: '.min'}))
|
||||
.pipe(gulp.dest('./assets/dist/scripts/'));
|
||||
});
|
||||
|
||||
gulp.task('styles', function () {
|
||||
gulp.src('./assets/styles/app.scss')
|
||||
gulp.src(['./assets/styles/app.scss'])
|
||||
.pipe(sass().on('error', sass.logError))
|
||||
.pipe(autoprefixer({
|
||||
browsers: ['last 2 versions'],
|
||||
@@ -116,20 +83,49 @@ gulp.task('svg', function () {
|
||||
gulp.src('./assets/img/edlp-loader-anim.svg')
|
||||
.pipe(gulp.dest('./assets/dist/img'));
|
||||
});
|
||||
// {
|
||||
// plugins:[
|
||||
// {removeHiddenElems: false},
|
||||
// {cleanupIDs: false},
|
||||
// {removeUselessDefs: false},
|
||||
// ]
|
||||
// }
|
||||
// removeHiddenElems, cleanupIDs, removeUselessDefs.
|
||||
|
||||
// default gulp task
|
||||
gulp.task('default', ['bower', 'vars2js', 'scripts', 'vars2sass', 'styles', 'svg'], function() {
|
||||
gulp.watch('./assets/json/*.json', ['vars2js', 'vars2sass', 'styles', 'scripts']);
|
||||
// , 'vars2sass' 'vars2js',
|
||||
gulp.task('default', ['bower', 'scripts', 'styles', 'svg'], function() {
|
||||
// gulp.watch('./assets/json/*.json', ['vars2js', 'styles', 'scripts']); //, 'vars2sass'
|
||||
gulp.watch('./assets/styles/*.scss', ['styles']);
|
||||
gulp.watch('./assets/styles/base/*.scss', ['styles']);
|
||||
gulp.watch('./assets/scripts/*.js', ['scripts']);
|
||||
gulp.watch('./assets/img/*.svg', ['svg']);
|
||||
});
|
||||
|
||||
|
||||
|
||||
// this task stays here just for memeomry about how to share variables between js and css
|
||||
|
||||
// gulp.task('vars2sass', function () {
|
||||
// gulp.src('./assets/json/shared_variables.json')
|
||||
// .pipe(jsonToSass({
|
||||
// jsonPath: './assets/json/shared_variables.json',
|
||||
// scssPath: './assets/styles/base/_shared_variables.scss'
|
||||
// }));
|
||||
// });
|
||||
|
||||
// this one is not working, works first run but then it's like it's caching the source
|
||||
// gulp.task('variables2js', function() {
|
||||
// gulp.src('./assets/scripts/shared_variables_model.js')
|
||||
// .pipe(rename('shared_variables.js'))
|
||||
// .pipe(data(function(file) {
|
||||
// delete require.cache['./assets/json/shared_variables.json'];
|
||||
// return require('./assets/json/shared_variables.json');
|
||||
// }))
|
||||
// .pipe(json2js())
|
||||
// .pipe(gulp.dest('./assets/scripts/'));
|
||||
// });
|
||||
|
||||
// gulp.task('vars2js', function() {
|
||||
// gulp.src('./assets/json/shared_variables.json')
|
||||
// .pipe(rename('shared_variables.js'))
|
||||
// .pipe(through.obj(function (file, enc, cb) {
|
||||
// // console.log('file',String(file.contents));
|
||||
// // small pipe to wrappe json data into a js variable
|
||||
// file.contents = new Buffer("edlp_vars = "+String(file.contents).trim()+";");
|
||||
// cb(null, file);
|
||||
// }))
|
||||
// .pipe(gulp.dest('./assets/scripts/'));
|
||||
// });
|
||||
|
||||
+12
-2
@@ -3,10 +3,12 @@ langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- field.field.taxonomy_term.entrees.field_color
|
||||
- field.field.taxonomy_term.entrees.field_notice
|
||||
- field.field.taxonomy_term.entrees.field_workflow
|
||||
- taxonomy.vocabulary.entrees
|
||||
module:
|
||||
- color_field
|
||||
- field_group
|
||||
- text
|
||||
- workflow
|
||||
@@ -29,6 +31,7 @@ third_party_settings:
|
||||
group_infos:
|
||||
children:
|
||||
- name
|
||||
- field_color
|
||||
- langcode
|
||||
- field_workflow
|
||||
parent_name: group_tabs
|
||||
@@ -84,6 +87,13 @@ content:
|
||||
rows: 3
|
||||
placeholder: ''
|
||||
third_party_settings: { }
|
||||
field_color:
|
||||
weight: 1
|
||||
settings:
|
||||
default_colors: "#4B8F7E\n#868E24\n#2B8F2F\n#3A33B6\n#2C9F57\n#C48978\n#5270BB\n#FB54D3\n#E07483\n#655845\n#7E0868\n#0E7121\n#DABD42\n#0399BB\n#399A1C\n#708540\n#191BFF\n#279D84\n#5219AB\n#D49CB6\n#497715"
|
||||
third_party_settings: { }
|
||||
type: color_field_widget_box
|
||||
region: content
|
||||
field_notice:
|
||||
weight: 3
|
||||
settings:
|
||||
@@ -93,14 +103,14 @@ content:
|
||||
type: text_textarea
|
||||
region: content
|
||||
field_workflow:
|
||||
weight: 2
|
||||
weight: 3
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
type: workflow_default
|
||||
region: content
|
||||
langcode:
|
||||
type: language_select
|
||||
weight: 1
|
||||
weight: 2
|
||||
region: content
|
||||
settings:
|
||||
include_locked: true
|
||||
|
||||
@@ -3,10 +3,12 @@ langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- field.field.taxonomy_term.entrees.field_color
|
||||
- field.field.taxonomy_term.entrees.field_notice
|
||||
- field.field.taxonomy_term.entrees.field_workflow
|
||||
- taxonomy.vocabulary.entrees
|
||||
module:
|
||||
- color_field
|
||||
- options
|
||||
- text
|
||||
id: taxonomy_term.entrees.default
|
||||
@@ -21,6 +23,15 @@ content:
|
||||
region: content
|
||||
settings: { }
|
||||
third_party_settings: { }
|
||||
field_color:
|
||||
weight: 100
|
||||
label: above
|
||||
settings:
|
||||
format: hex
|
||||
opacity: '1'
|
||||
third_party_settings: { }
|
||||
type: color_field_formatter_text
|
||||
region: content
|
||||
field_notice:
|
||||
weight: 2
|
||||
label: above
|
||||
@@ -35,5 +46,8 @@ content:
|
||||
third_party_settings: { }
|
||||
type: list_default
|
||||
region: content
|
||||
index:
|
||||
weight: 99
|
||||
region: content
|
||||
hidden:
|
||||
langcode: true
|
||||
|
||||
@@ -11,6 +11,7 @@ module:
|
||||
breakpoint: 0
|
||||
bulkdelete: 0
|
||||
ckeditor: 0
|
||||
color_field: 0
|
||||
config: 0
|
||||
config_devel: 0
|
||||
config_update: 0
|
||||
|
||||
@@ -0,0 +1,22 @@
|
||||
uuid: 185764a3-7cbf-4de2-a7b1-aafab3624b20
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- field.storage.taxonomy_term.field_color
|
||||
- taxonomy.vocabulary.entrees
|
||||
module:
|
||||
- color_field
|
||||
id: taxonomy_term.entrees.field_color
|
||||
field_name: field_color
|
||||
entity_type: taxonomy_term
|
||||
bundle: entrees
|
||||
label: Color
|
||||
description: ''
|
||||
required: true
|
||||
translatable: false
|
||||
default_value: { }
|
||||
default_value_callback: ''
|
||||
settings:
|
||||
opacity: 0
|
||||
field_type: color_field_type
|
||||
@@ -0,0 +1,20 @@
|
||||
uuid: 9abbf68b-5252-4984-9f0d-fc9fca953575
|
||||
langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
module:
|
||||
- color_field
|
||||
- taxonomy
|
||||
id: taxonomy_term.field_color
|
||||
field_name: field_color
|
||||
entity_type: taxonomy_term
|
||||
type: color_field_type
|
||||
settings:
|
||||
format: '#HEXHEX'
|
||||
module: color_field
|
||||
locked: false
|
||||
cardinality: 1
|
||||
translatable: true
|
||||
indexes: { }
|
||||
persist_with_no_fields: false
|
||||
custom_storage: false
|
||||
@@ -3,6 +3,7 @@ langcode: fr
|
||||
status: true
|
||||
dependencies:
|
||||
config:
|
||||
- field.storage.taxonomy_term.field_color
|
||||
- field.storage.taxonomy_term.field_notice
|
||||
- field.storage.taxonomy_term.field_workflow
|
||||
- taxonomy.vocabulary.entrees
|
||||
@@ -10,6 +11,7 @@ dependencies:
|
||||
- user.role.collectionneur
|
||||
- user.role.root
|
||||
module:
|
||||
- color_field
|
||||
- options
|
||||
- taxonomy
|
||||
- text
|
||||
@@ -132,6 +134,72 @@ display:
|
||||
row:
|
||||
type: fields
|
||||
fields:
|
||||
field_color:
|
||||
id: field_color
|
||||
table: taxonomy_term__field_color
|
||||
field: field_color
|
||||
relationship: none
|
||||
group_type: group
|
||||
admin_label: ''
|
||||
label: Color
|
||||
exclude: false
|
||||
alter:
|
||||
alter_text: false
|
||||
text: ''
|
||||
make_link: false
|
||||
path: ''
|
||||
absolute: false
|
||||
external: false
|
||||
replace_spaces: false
|
||||
path_case: none
|
||||
trim_whitespace: false
|
||||
alt: ''
|
||||
rel: ''
|
||||
link_class: ''
|
||||
prefix: ''
|
||||
suffix: ''
|
||||
target: ''
|
||||
nl2br: false
|
||||
max_length: 0
|
||||
word_boundary: true
|
||||
ellipsis: true
|
||||
more_link: false
|
||||
more_link_text: ''
|
||||
more_link_path: ''
|
||||
strip_tags: false
|
||||
trim: false
|
||||
preserve_tags: ''
|
||||
html: false
|
||||
element_type: ''
|
||||
element_class: ''
|
||||
element_label_type: ''
|
||||
element_label_class: ''
|
||||
element_label_colon: true
|
||||
element_wrapper_type: ''
|
||||
element_wrapper_class: ''
|
||||
element_default_classes: true
|
||||
empty: ''
|
||||
hide_empty: false
|
||||
empty_zero: false
|
||||
hide_alter_empty: true
|
||||
click_sort_column: color
|
||||
type: color_field_formatter_swatch
|
||||
settings:
|
||||
shape: square
|
||||
width: '20'
|
||||
height: '20'
|
||||
opacity: '0'
|
||||
group_column: ''
|
||||
group_columns: { }
|
||||
group_rows: true
|
||||
delta_limit: 0
|
||||
delta_offset: 0
|
||||
delta_reversed: false
|
||||
delta_first_last: false
|
||||
multi_type: separator
|
||||
separator: ', '
|
||||
field_api_classes: false
|
||||
plugin_id: field
|
||||
name:
|
||||
id: name
|
||||
table: taxonomy_term_field_data
|
||||
@@ -549,6 +617,7 @@ display:
|
||||
- url.query_args
|
||||
- user.roles
|
||||
tags:
|
||||
- 'config:field.storage.taxonomy_term.field_color'
|
||||
- 'config:field.storage.taxonomy_term.field_notice'
|
||||
- 'config:field.storage.taxonomy_term.field_workflow'
|
||||
page_1:
|
||||
@@ -577,5 +646,6 @@ display:
|
||||
- url.query_args
|
||||
- user.roles
|
||||
tags:
|
||||
- 'config:field.storage.taxonomy_term.field_color'
|
||||
- 'config:field.storage.taxonomy_term.field_notice'
|
||||
- 'config:field.storage.taxonomy_term.field_workflow'
|
||||
|
||||
Reference in New Issue
Block a user