mirror/processwire
1
0
Fork 0
mirror of https://github.com/processwire/processwire.git synced 2025-08-12 01:34:31 +02:00
Code Issues Releases Wiki Activity

Add PR #71 via @rolandtoth - Improvements to InputfieldIcon

Browse Source 
Co-authored-by: rolandtoth <tproli@gmail.com>
This commit is contained in:
Ryan Cramer
2021-05-12 13:59:58 -04:00
parent 2c8cce1d47
commit 89d52edaa6
4 changed files with 164 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.css Normal file
View File

@@ -0,0 +1,60 @@
.InputfieldIconAll {
overflow: visible !important;
margin-top: 12px;
text-align: justify;
}
.InputfieldIconAll .fa.fw {
padding: 7px 6px;
font-size: 16px !important;
transition: all 0.16s;
min-width: 34px;
text-align: center;
backface-visibility: hidden;
background: white;
}
.fa.fw:hover {
background: #E2E9EF;
cursor: pointer;
border-radius: 3px;
}
.fa.fw.on {
background: #d52978;
color: white;
border-radius: 3px;
}
.fa.fw:active {
animation: 0.16s zoomIcon 0.3s forwards;
z-index: 200;
}
.fa.fw::after {
content: attr(title);
color: inherit;
position: absolute;
top: 100%;
margin-top: -3px;
font-size: 4px;
letter-spacing: 0;
left: 0;
right: 0;
padding-bottom: 2px;
backface-visibility: hidden;
opacity: 0;
transition: opacity 0.4s cubic-bezier(0.895, 0.030, 0.685, 0.220);
}
.fa.fw:active::after {
background: #E2E9EF;
opacity: 1;
pointer-events: none;
}
@keyframes zoomIcon {
0% {
transform: scale(1);
}
100% {
transform: scale(4);
color: inherit;
background: #E2E9EF;
pointer-events: none;
}
}

125
wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.js
View File

@@ -1,81 +1,74 @@
$(document).ready(function() {
function InputfieldIcon() {
$(".InputfieldIcon select").change(function() {
var $select = $(this);
$('.InputfieldIcon select').change(function() {
var $select = $(this);
var val = $select.val();
if(val.length > 0) {
$select.closest(".InputfieldIcon").find(".InputfieldHeader > i.fa:first-child")
.attr('class', 'fa ' + val)
$select.closest('.InputfieldIcon').find('.InputfieldHeader > i.fa:first-child')
.attr('class', 'fa fa-fw ' + val)
.parent().effect('highlight', 500);
var $all = $select.siblings(".InputfieldIconAll");
if($all.is(":visible")) {
$all.find('.on').removeClass('on').mouseout();
var $icon = $all.find("." + val).parent('span');
if(!$icon.hasClass('on')) $icon.addClass('on').mouseover();
var $all = $select.siblings('.InputfieldIconAll');
if($all.is(':visible')) {
$all.find('.on').removeClass('on');
$all.find('.' + val).addClass('on');
}
}
$select.removeClass('on');
$select.removeClass('on');
});
$(".InputfieldIconAll").hide();
$("a.InputfieldIconShowAll").click(function() {
var $link = $(this);
var $all = $link.siblings(".InputfieldIconAll");
var $select = $link.siblings("select");
$('.InputfieldIconAll').hide();
$('a.InputfieldIconShowAll').on('click', function() {
var $a = $(this);
var $ai = $a.prev('i');
var $all = $a.siblings('.InputfieldIconAll');
var $select = $a.siblings("select");
$ai.toggleClass('fa-angle-down fa-angle-right');
if($all.is(":visible")) {
$all.slideUp('fast', function() {
$all.html('');
});
$all.hide();
return false;
}
$select.children("option").each(function() {
var val = $(this).attr('value');
$all.show();
if($all.hasClass('initialized')) return false;
$all.addClass('initialized');
$select.children('option').each(function() {
var val = $(this).val();
if(val.length == 0) return;
var $icon = $("<i class='fa fa-fw'></i>")
.addClass(val)
.attr('data-name', val)
.css('cursor', 'pointer')
.attr('title', val);
var $span = $("<span />")
.css('padding', '2px 2px 2px 2px')
.css('margin-right', '10px')
.css('line-height', '30px')
.append($icon);
$all.append($span);
});
$all.slideDown('fast', function() {
$all.on('click', 'span', function() {
$all.find('.on').removeClass('on').mouseout();
$(this).addClass('on').mouseover();
if(!$select.hasClass('on')) $select.val($(this).find('i.fa').attr('data-name')).change();
$all.append("<i class='fa fw " + val + "' title='" + val + "'>");
});
});
$all.on('mouseover', 'span', function() {
$(this).css('background-color', 'red').css('color','white');
});
$all.on('mouseout', 'span', function() {
if(!$(this).hasClass('on')) {
$(this).css('background-color', 'inherit').css('color', 'inherit');
}
});
$all.on('click', 'i', function() {
var $i = $(this);
if($i.hasClass('on')) {
$i.removeClass('on');
$select.val('').change();
return;
}
$all.find('.on').removeClass('on');
$i.addClass('on');
if(!$select.hasClass('on')) {
$select.val($i.attr('title')).change();
}
});
var val = $select.val();
if(val.length > 0) {
$all.find('.' + val).addClass('on');
}
var val = $select.val();
if(val.length > 0) $all.find("." + val).each(function() {
$(this).parent('span').addClass('on').mouseover();
});
});
return false;
});
});
});
}
$(document).ready(function() {
InputfieldIcon();
});

2
wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.min.js vendored
View File

@@ -1 +1 @@
$(document).ready(function(){$(".InputfieldIcon select").change(function(){var b=$(this);var d=b.val();if(d.length>0){b.closest(".InputfieldIcon").find(".InputfieldHeader > i.fa:first-child").attr("class","fa "+d).parent().effect("highlight",500);var c=b.siblings(".InputfieldIconAll");if(c.is(":visible")){c.find(".on").removeClass("on").mouseout();var a=c.find("."+d).parent("span");if(!a.hasClass("on")){a.addClass("on").mouseover()}}}b.removeClass("on")});$(".InputfieldIconAll").hide();$("a.InputfieldIconShowAll").click(function(){var a=$(this);var c=a.siblings(".InputfieldIconAll");var b=a.siblings("select");if(c.is(":visible")){c.slideUp("fast",function(){c.html("")});return false}b.children("option").each(function(){var f=$(this).attr("value");if(f.length==0){return}var e=$("<i class='fa fa-fw'></i>").addClass(f).attr("data-name",f).css("cursor","pointer").attr("title",f);var d=$("<span />").css("padding","2px 2px 2px 2px").css("margin-right","10px").css("line-height","30px").append(e);c.append(d)});c.slideDown("fast",function(){c.on("click","span",function(){c.find(".on").removeClass("on").mouseout();$(this).addClass("on").mouseover();if(!b.hasClass("on")){b.val($(this).find("i.fa").attr("data-name")).change()}});c.on("mouseover","span",function(){$(this).css("background-color","red").css("color","white")});c.on("mouseout","span",function(){if(!$(this).hasClass("on")){$(this).css("background-color","inherit").css("color","inherit")}});var d=b.val();if(d.length>0){c.find("."+d).each(function(){$(this).parent("span").addClass("on").mouseover()})}});return false})});
function InputfieldIcon(){$(".InputfieldIcon select").change(function(){var $select=$(this);var val=$select.val();if(val.length>0){$select.closest(".InputfieldIcon").find(".InputfieldHeader > i.fa:first-child").attr("class","fa fa-fw "+val).parent().effect("highlight",500);var $all=$select.siblings(".InputfieldIconAll");if($all.is(":visible")){$all.find(".on").removeClass("on");$all.find("."+val).addClass("on")}}$select.removeClass("on")});$(".InputfieldIconAll").hide();$("a.InputfieldIconShowAll").on("click",function(){var $a=$(this);var $ai=$a.prev("i");var $all=$a.siblings(".InputfieldIconAll");var $select=$a.siblings("select");$ai.toggleClass("fa-angle-down fa-angle-right");if($all.is(":visible")){$all.hide();return false}$all.show();if($all.hasClass("initialized"))return false;$all.addClass("initialized");$select.children("option").each(function(){var val=$(this).val();if(val.length==0)return;$all.append("<i class='fa fw "+val+"' title='"+val+"'>")});$all.on("click","i",function(){var $i=$(this);if($i.hasClass("on")){$i.removeClass("on");$select.val("").change();return}$all.find(".on").removeClass("on");$i.addClass("on");if(!$select.hasClass("on")){$select.val($i.attr("title")).change()}});var val=$select.val();if(val.length>0){$all.find("."+val).addClass("on")}return false})}$(document).ready(function(){InputfieldIcon()});

59
wire/modules/Inputfield/InputfieldIcon/InputfieldIcon.module
View File

@@ -12,25 +12,39 @@ class InputfieldIcon extends Inputfield {
return array(
'title' => __('Icon', __FILE__), // Module Title
'summary' => __('Select an icon', __FILE__), // Module Summary
'version' => 2,
'version' => 3,
);
}
const prefix = 'fa-';
protected $options = array();
/**
* Construct
*
*/
public function __construct() {
parent::__construct();
$this->options = file(dirname(__FILE__) . '/icons.inc', FILE_IGNORE_NEW_LINES);
$this->options = file(__DIR__ . '/icons.inc', FILE_IGNORE_NEW_LINES);
$this->set('prefixValue', true); // should value attr always start with prefix? (externally)
}
/**
* Init
*
*/
public function init() {
parent::init();
$this->icon = 'puzzle-piece';
}
/**
* Render
*
* @return string
*
*/
public function ___render() {
$out = '';
$attrs = $this->getAttributes();
@@ -38,27 +52,35 @@ class InputfieldIcon extends Inputfield {
if($value && strpos($value, self::prefix) !== 0) $value = self::prefix . $value;
if($value) $this->icon = $value;
unset($attrs['value']);
$out .= "\n<select " . $this->getAttributesString($attrs) . ">";
if(!$this->getSetting('required')) $out .= "\n\t<option value=''></option>";
$out .= "<select " . $this->getAttributesString($attrs) . ">";
if(!$this->getSetting('required')) $out .= "<option value=''></option>";
foreach($this->options as $option) {
$option = trim($option);
$selected = $value == $option ? " selected='selected'" : "";
$label = ucfirst(substr($option, 3));
$label = str_replace('-', ' ', $label);
$out .= "\n\t<option$selected value='$option'>$label</option>";
$out .= "<option$selected value='$option'>$label</option>";
}
$out .= "</select>&nbsp;&nbsp;";
$out .= "</select>&nbsp;";
$out .=
"<i class='fa fa-angle-right ui-priority-secondary'></i>&nbsp;" .
"<a class='InputfieldIconShowAll' target='_blank' href='#'>" .
"<i class='fa fa-fw fa-angle-right ui-priority-secondary'></i>" .
"<a class='InputfieldIconShowAll' href='#'>" .
"<small>" . $this->_('Show All Icons') . "</small></a>" .
"<div class='InputfieldIconAll'></div>";
return $out;
}
/**
* Set attribute
*
* @param array|string $key
* @param array|bool|int|string $value
* @return Inputfield
*
*/
public function setAttribute($key, $value) {
if($key == 'value' && !empty($value)) {
if($key === 'value' && !empty($value)) {
if(strpos($value, self::prefix) !== 0) $value = self::prefix . $value;
$index = array_search($value, $this->options);
if(is_int($index)) {
@@ -69,9 +91,16 @@ class InputfieldIcon extends Inputfield {
}
return parent::setAttribute($key, $value);
}
/**
* Get attribute
*
* @param string $key
* @return bool|mixed|null|string
*
*/
public function getAttribute($key) {
if($key == 'value') {
if($key === 'value') {
$value = parent::getAttribute($key);
if(empty($value)) return $value;
if($this->getSetting('prefixValue')) {