Color picker for the circles

This commit is contained in:
Alexander Yakovlev 2017-06-16 19:54:07 +07:00
parent cd1d8fa1a7
commit 3d5614e8cd
3 changed files with 51 additions and 26 deletions

File diff suppressed because one or more lines are too long

View File

@ -64,15 +64,20 @@
/**
* on-circle takes a radius, position on a circle, number of possible positions and returns top and left properties
*
* $radius {Number} radius of the circle in pixels
* $ordinalPosition {Number} the position of the item on the circle, counting from 1 (North) through N
* $positions {Number} the number of positions on the circle
* $radius {Number} radius of the circle
* $originX {Number} optional X origin point for the circle, defaults to the radius
* $originY {Number} optional Y origin point for the circle, defaults to the radius
* $offsetX {Number} optional X offset for the item, you might use 1/2 of the width of an item, default is 0
* $offsetY {Number} optional Y offset for the item, you might use 1/2 of the height of an item, default is 0
*/
@mixin on-circle ($ordinalPosition, $positions, $radius: 90%, $originX: 0, $originY: 0, $offsetX: 0, $offsetY: 0) {
@mixin on-circle ($ordinalPosition, $positions) {
$radius: 50%;
$originX: 50%;
$originY: 50%;
$offsetX: 0;
$offsetY: 0;
/*
Determine the angle for the position:
@ -98,6 +103,6 @@
x = [origin x] + (r * cos angle)
y = [origin y] + (r * sin angle)
*/
top: #{$originY + $offsetY + $radius * sin($positionAngleRadians)}px;
left: #{$originX + $offsetX + $radius * cos($positionAngleRadians)}px;
top: $originY + $offsetY + $radius * sin($positionAngleRadians);
left: $originX + $offsetX + $radius * cos($positionAngleRadians);
}

View File

@ -53,6 +53,12 @@ function imbb_register_metabox() {
'id' => $prefix . 'level',
'type' => 'text_small',
));
$cmb->add_field( array(
'name' => esc_html__( 'Circle color', 'cmb2' ),
'id' => $prefix . 'color',
'type' => 'colorpicker',
'default' => '#ffffff',
));
}
function galaxyuser($post, $i) { ?>
@ -79,12 +85,17 @@ function imbb_usergalaxy() {
<div class="imbb_container">
<div class="circles circle-1">
<?php
for ($i = 1; $i <= count($query); $i++) {
$color = 'rgb('.rand(0,255).', '.rand(0,255).', '.rand(0,255).')';
$i = 1;
foreach ($query as $post) {
$color = get_post_meta( $post->ID, 'imbb_color', TRUE );
if ($color === '#ffffff' || $color === '') {
$color = 'rgb('.rand(0,255).', '.rand(0,255).', '.rand(0,255).')';
}
?>
<div class="small-circle small-<?php echo $i ?>" data-color="<?php echo $color ?>"></div>
<?php
}
$i++;
}
?>
<div class="avatars">
<?php