// расширим свой класс от числового типа class UserDataColor extends CUserTypeInteger { // инициализация пользовательского свойства для главного модуля function GetUserTypeDescription() { return array( "USER_TYPE_ID" => "color", "CLASS_NAME" => "UserDataColor", "DESCRIPTION" => "Цвет", "BASE_TYPE" => "int", ); } // инициализация пользовательского свойства для инфоблока function GetIBlockPropertyDescription() { return array( "PROPERTY_TYPE" => "S", "USER_TYPE" => "color", "DESCRIPTION" => "Цвет", 'GetPropertyFieldHtml' => array('UserDataColor', 'GetPropertyFieldHtml'), 'GetAdminListViewHTML' => array('UserDataColor', 'GetAdminListViewHTML') ); } // представление свойства function getViewHTML($name, $value) { return '<div style="display: block; width: 16px; height: 16px; background-color: #'.str_pad(dechex($value), 6, '0', STR_PAD_LEFT).';"> </div>'; } // редактирование свойства function getEditHTML($name, $value, $is_ajax = false) { $uid = 'x'.uniqid(); $dom_id = $uid; $colorHex = str_pad(dechex($value), 6, '0', STR_PAD_LEFT); $colorRGB = array(); $colorRGB[0] = hexdec(substr($colorHex, -6, 2)); $colorRGB[1] = hexdec(substr($colorHex, -4, 2)); $colorRGB[2] = hexdec(substr($colorHex, -2, 2)); $init = $is_ajax ? 'init();' : '$(init);'; return ' <input type="hidden" id="'.$dom_id.'" name="'.$name.'" value="'.$value.'"> <link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script> <style> #red'.$uid.', #green'.$uid.', #blue'.$uid.' {float: left; clear: left; width: 300px; margin: 15px;} #swatch'.$uid.' {width: 120px; height: 100px; margin-top: 18px; margin-left: 350px; background-image: none;} #red'.$uid.' .ui-slider-range, #red'.$uid.' .ui-slider-handle { background: #ef2929; } #green'.$uid.' .ui-slider-range, #green'.$uid.' .ui-slider-handle { background: #8ae234; } #blue'.$uid.' .ui-slider-range, #blue'.$uid.' .ui-slider-handle { background: #729fcf; } </style> <div> <div id="red'.$uid.'"></div> <div id="green'.$uid.'"></div> <div id="blue'.$uid.'"></div> <div id="swatch'.$uid.'" class="ui-widget-content ui-corner-all"></div> </div> <script> (function(){ function hexFromRGB(r, g, b) { var hex = [ r.toString( 16 ), g.toString( 16 ), b.toString( 16 ) ]; $.each( hex, function( nr, val ) { if ( val.length === 1 ) { hex[ nr ] = "0" + val; } }); return hex.join( "" ).toUpperCase(); } function refreshSwatch() { var red = $( "#red'.$uid.'" ).slider( "value" ), green = $( "#green'.$uid.'" ).slider( "value" ), blue = $( "#blue'.$uid.'" ).slider( "value" ), hex = hexFromRGB( red, green, blue ); $( "#'.$dom_id.'" ).val(red*256*256+green*256+blue); $( "#swatch'.$uid.'" ).css( "background-color", "#" + hex ); } var init = function() { $( "#red'.$uid.', #green'.$uid.', #blue'.$uid.'" ).slider({ orientation: "horizontal", range: "min", max: 255, value: 0, slide: refreshSwatch, change: refreshSwatch }); $( "#red'.$uid.'" ).slider( "value", '.$colorRGB[0].' ); $( "#green'.$uid.'" ).slider( "value", '.$colorRGB[1].' ); $( "#blue'.$uid.'" ).slider( "value", '.$colorRGB[2].' ); }; '.$init.' })(); </script> '; } // редактирование свойства в форме (главный модуль) function GetEditFormHTML($arUserField, $arHtmlControl) { return self::getEditHTML($arHtmlControl['NAME'], $arHtmlControl['VALUE'], false); } // редактирование свойства в списке (главный модуль) function GetAdminListEditHTML($arUserField, $arHtmlControl) { return self::getViewHTML($arHtmlControl['NAME'], $arHtmlControl['VALUE'], true); } // представление свойства в списке (главный модуль, инфоблок) function GetAdminListViewHTML($arProperty, $value) { return self::getViewHTML('dddd', $value['VALUE']); } // редактирование свойства в форме и списке (инфоблок) function GetPropertyFieldHtml($arProperty, $value, $strHTMLControlName) { return $strHTMLControlName['MODE'] == 'FORM_FILL' ? self::getEditHTML($strHTMLControlName['VALUE'], $value['VALUE'], false) : self::getViewHTML($strHTMLControlName['VALUE'], $value['VALUE']) ; } } // добавляем тип для инфоблока AddEventHandler("iblock", "OnIBlockPropertyBuildList", array("UserDataColor", "GetIBlockPropertyDescription")); // добавляем тип для главного модуля AddEventHandler("main", "OnUserTypeBuildList", array("UserDataColor", "GetUserTypeDescription")); |
На странице "/bitrix/admin/userfield_admin.php?lang=ru" появится новое поле типа "цвет".
Спасибо https://bad-code.ru/sozdanie-novogo-tipa-ili-kastomizatsiya-polzovatelskogo-polya-v-1s-bitrix/