diff --git a/admin.js b/admin.js
new file mode 100644
index 0000000000000000000000000000000000000000..a97c17e209de53dfc3bad8f0a96e00a21b03a34e
--- /dev/null
+++ b/admin.js
@@ -0,0 +1,3 @@
+jQuery(document).ready(function($){
+ $('.imageorbit-color-field').wpColorPicker();
+});
\ No newline at end of file
diff --git a/code.js b/code.js
index d0e18090bd6ac21922227559643372d9121156ef..0cae3f978242cae95bfc91b33b3bab97ea58b975 100644
--- a/code.js
+++ b/code.js
@@ -1,40 +1,58 @@
+class Orbital {
+ constructor(element) {
+ this.element = element;
+ this.planet = element.querySelector('.planet');
+ this.addCustomHover();
+ this.render();
+ this.config = { attributes: true, childList: true };
+ this.observer = new MutationObserver(this.render.bind(this));
+ this.observer.observe(this.planet, this.config);
+ window.addEventListener('resize', () => {debounce(this.render.bind(this), 200)});
+ }
-/**
- * Redraws all the orbitals found in the document
- */
-const redraw_orbitals = () => {
- planets = document.getElementsByClassName("planet");
- Array.prototype.forEach.call(planets, (planet) => {
- orbit(planet, 75);
- })
-}
+ addCustomHover() {
+ let css = `#${this.element.id}>.orbital>.planet>.satellite:hover {
+ background-color: ${this.planet.dataset.hovercolor ? this.planet.dataset.hovercolor : "#000"} !important;
+ color: ${this.planet.dataset.texthovercolor ? this.planet.dataset.texthovercolor : "#fff"} !important;
+ }`
+ let style = document.createElement('style');
+ if (style.styleSheet) {
+ style.styleSheet.cssText = css;
+ } else {
+ style.appendChild(document.createTextNode(css));
+ }
+
+ document.getElementsByTagName('head')[0].appendChild(style);
-/**
- * Set the satellites of selected planet into orbital
- * @param {div} planet - the Div element to the planet (ie. every planet got by getByClassName("planet"))
- * @param {integer} radiusHint - Number in range [0, 100]. 0 being closest to the planet, 100 the furthest.
- */
-const orbit = (planet, radiusHint) => {
- console.log(window.getComputedStyle(planet).getPropertyValue('margin-left'));
- let satellites = planet.children;
- //console.log(window.getComputedStyle(planet).margin)
- let div = 360 / satellites.length;
- let planetOrigoOffset = (planet.offsetWidth / 2);
- // Assuming that every satellite is the same size
- let satelliteOrigoOffset = satellites[0].offsetWidth/2;
- let totalOffset = planetOrigoOffset - satelliteOrigoOffset;
- let maxRadius = parseFloat(window.getComputedStyle(planet).getPropertyValue('margin-left')) + totalOffset;
- let minRadius = planetOrigoOffset+satelliteOrigoOffset;
- let radius = minRadius+(((maxRadius-minRadius)/100)*radiusHint);
- for (i=0; i<satellites.length; i++) {
- let y = Math.sin((div * i+1) * (Math.PI / 180)) * radius;
- let x = Math.cos((div * i+1) * (Math.PI / 180)) * radius;
- satellites[i].style.top = (y + totalOffset).toString() + "px";
- satellites[i].style.left = (x + totalOffset).toString() + "px";
}
+
+ render() {
+ let planet = this.planet;
+ let radiusHint = parseInt(planet.dataset.radius);
+ // Designer's choice: This quarantees that if the amount of satellites is odd,
+ // the odd one will be on the top (-90 degrees) rather than as the rightmost
+ let rotation = parseInt(planet.dataset.rotation) - 90;
+ let satellites = planet.children;
+ let div = 360 / satellites.length;
+ let planetOrigoOffset = (planet.offsetWidth / 2);
+ // Assuming that every satellite is the same size
+ let satelliteOrigoOffset = satellites[0].offsetWidth/2;
+ let totalOffset = planetOrigoOffset - satelliteOrigoOffset;
+ let maxRadius = parseFloat(window.getComputedStyle(planet).getPropertyValue('margin-left')) + totalOffset;
+ let minRadius = planetOrigoOffset+satelliteOrigoOffset;
+ let radius = minRadius+(((maxRadius-minRadius)/100)*radiusHint);
+ for (let i=0; i<satellites.length; i++) {
+ let y = Math.sin((div * i + rotation) * (Math.PI / 180)) * radius;
+ let x = Math.cos((div * i + rotation) * (Math.PI / 180)) * radius;
+ satellites[i].style.top = (y + totalOffset).toString() + "px";
+ satellites[i].style.left = (x + totalOffset).toString() + "px";
+ }
+
+ }
}
+
/**
*
* @param {function} func - function to execute via debouncing
@@ -46,5 +64,12 @@ const debounce = (func, delay) => {
debounce.timeout = setTimeout(func, delay);
}
-window.addEventListener('DOMContentLoaded', redraw_orbitals);
-window.addEventListener('resize', () => {debounce(redraw_orbitals, 200)});
+const create_orbitals = () => {
+ planets = document.getElementsByClassName("imageorbit");
+ Array.prototype.forEach.call(planets, (planet) => {
+ new Orbital(planet);
+ })
+}
+
+window.addEventListener('DOMContentLoaded', create_orbitals);
+//window.addEventListener('resize', () => {debounce(redraw_orbitals, 200)});
diff --git a/code.js.old b/code.js.old
new file mode 100644
index 0000000000000000000000000000000000000000..3e074a1b42cfd2ad3b5e63d4ce52c443df0fa06f
--- /dev/null
+++ b/code.js.old
@@ -0,0 +1,53 @@
+
+/**
+ * Redraws all the orbitals found in the document
+ */
+const redraw_orbitals = () => {
+ planets = document.getElementsByClassName("planet");
+ Array.prototype.forEach.call(planets, (planet) => {
+ console.log(planet.dataset.radius)
+ console.log(planet.dataset.rotation)
+ orbit(planet, parseInt(planet.dataset.radius), parseInt(planet.dataset.rotation));
+ })
+}
+
+/**
+ * Set the satellites of selected planet into orbital
+ * @param {div} planet - the Div element to the planet (ie. every planet got by getByClassName("planet"))
+ * @param {integer} radiusHint - Number in range [0, 100]. 0 being closest to the planet, 100 the furthest.
+ * @param {integer} rotation - Number in range [0,360). Offset the rotation by this many degrees.
+ */
+const orbit = (planet, radiusHint, rotation) => {
+ console.log(window.getComputedStyle(planet).getPropertyValue('margin-left'));
+ let satellites = planet.children;
+ //console.log(window.getComputedStyle(planet).margin)
+ let div = 360 / satellites.length;
+ let planetOrigoOffset = (planet.offsetWidth / 2);
+ // Assuming that every satellite is the same size
+ let satelliteOrigoOffset = satellites[0].offsetWidth/2;
+ let totalOffset = planetOrigoOffset - satelliteOrigoOffset;
+ let maxRadius = parseFloat(window.getComputedStyle(planet).getPropertyValue('margin-left')) + totalOffset;
+ let minRadius = planetOrigoOffset+satelliteOrigoOffset;
+ let radius = minRadius+(((maxRadius-minRadius)/100)*radiusHint);
+ for (i=0; i<satellites.length; i++) {
+ let y = Math.sin((div * i + rotation) * (Math.PI / 180)) * radius;
+ let x = Math.cos((div * i + rotation) * (Math.PI / 180)) * radius;
+ satellites[i].style.top = (y + totalOffset).toString() + "px";
+ satellites[i].style.left = (x + totalOffset).toString() + "px";
+ }
+
+}
+
+/**
+ *
+ * @param {function} func - function to execute via debouncing
+ * @param {integer} delay - the delay to wait for things to settle
+ */
+const debounce = (func, delay) => {
+ debounce.timeout = debounce.timeout ? debounce.timeout : false;
+ clearTimeout(debounce.timeout)
+ debounce.timeout = setTimeout(func, delay);
+}
+
+window.addEventListener('DOMContentLoaded', redraw_orbitals);
+window.addEventListener('resize', () => {debounce(redraw_orbitals, 200)});
diff --git a/imageorbit.php b/imageorbit.php
index 02a2d82f2b3630c5c56dc79121f99d5bfb7898c4..21ba7548229143c35da4f3f1140b283050e478d9 100644
--- a/imageorbit.php
+++ b/imageorbit.php
@@ -17,7 +17,7 @@ define('WP_DEBUG_DISPLAY', true);
@ini_set('display_errors', E_ALL);
-defined('ABSPATH') || exit;
+defined('ABSPATH') || exit;
/**
* Load all translations for our plugin from the MO file.
*/
@@ -35,13 +35,13 @@ add_action('init', 'imageorbit_load_textdomain');
function imageorbit_init()
{
-
-define('WP_DEBUG', true);
-define('WP_DEBUG_LOG', true);
-define('WP_DEBUG_DISPLAY', true);
-@ini_set('display_errors', E_ALL);
+
+ define('WP_DEBUG', true);
+ define('WP_DEBUG_LOG', true);
+ define('WP_DEBUG_DISPLAY', true);
+ @ini_set('display_errors', E_ALL);
-
+
wp_register_script(
'imageorbit',
plugins_url('code.js', __FILE__),
@@ -61,27 +61,6 @@ define('WP_DEBUG_DISPLAY', true);
}
add_action('init', 'imageorbit_init');
-// imageorbit usage [imageorbit id="2"]
-function imageorbit_func($attr, $content = null)
-{
- $id = isset($attr['id']) ? $attr['id'] : false;
- if (!$id) {
- return "<!-- imageorbit missing id -->";
- }
-
- wp_enqueue_script("imageorbit");
- wp_enqueue_style("imageorbit");
-
- ob_start();
-
- include("template.php");
-
- $html = ob_get_contents();
- ob_end_clean();
- return $html;
-}
-add_shortcode('imageorbit', 'imageorbit_func');
-
add_action( 'init', 'imageorbit_register_post_type' );
@@ -137,195 +116,306 @@ function imageorbit_register_post_type() {
}
+// imageorbit usage [imageorbit id="2"]
+function imageorbit_func($attr, $content = null)
+{
+ $id = isset($attr['id']) ? $attr['id'] : false;
+ if (!$id) {
+ return "<!-- imageorbit missing id -->";
+ }
+ wp_enqueue_script("imageorbit");
+ wp_enqueue_style("imageorbit");
+ $attachment_id = get_post_thumbnail_id($id);
+ $img_alt = get_post_meta( $attachment_id, '_wp_attachment_image_alt', true );
+ $img_alt2 = get_the_post_thumbnail_caption($id);
+ $imgorbit_radius = carbon_get_post_meta( $id, 'imageorbit_radius' );
+ $imgorbit_rotation = carbon_get_post_meta( $id, 'imageorbit_rotation' );
+ $img_src = get_the_post_thumbnail_url($id,'large');
+ $slides = carbon_get_post_meta( $id, 'imageorbit_slides' );
+ $bgurl = wp_get_attachment_url( get_post_thumbnail_id($id) );
+ $imageorbit_coloring = carbon_get_post_meta( $id, 'imageorbit_coloring' );
+ $imageorbit_coloring_hover = carbon_get_post_meta( $id, 'imageorbit_coloring_hover' );
+ $imageorbit_text_coloring = carbon_get_post_meta( $id, 'imageorbit_text_coloring', true );
+ $imageorbit_text_coloring_hover = carbon_get_post_meta( $id, 'imageorbit_text_coloring_hover', true );
+ $imageorbit_border_radius = carbon_get_post_meta( $id, 'imageorbit_border_radius', true );
+ $imageorbit_border_radius = isset($imageorbit_border_radius)?$imageorbit_border_radius:0;
+ ob_start();
+ include("template.php");
+ $html = ob_get_contents();
+ ob_end_clean();
+ return $html;
+}
+add_shortcode('imageorbit', 'imageorbit_func');
+use Carbon_Fields\Field;
+use Carbon_Fields\Container;
+
+add_action( 'carbon_fields_register_fields', 'imageorbit_attach_post_meta' );
+function imageorbit_attach_post_meta() {
+ Container::make( 'post_meta', __( 'Asetukset', 'imageorbit' ) )
+ ->set_priority( 'low' )
+ ->where( 'post_type', '=', 'imageorbit' ) // only show our new fields on pages
+ ->add_fields( array(
+
+ Field::make( 'color', 'imageorbit_coloring', __( 'Taustaväri', 'imageorbit' ) )->set_palette( array( '#000000', '#FFFFFF', '#EEEEEE', '#333333' ) ),
+ Field::make( 'color', 'imageorbit_coloring_hover', __( 'Taustaväri (korostus)', 'imageorbit' ) )->set_palette( array( '#000000', '#FFFFFF', '#EEEEEE', '#333333' ) ),
+ Field::make( 'color', 'imageorbit_text_coloring', __( 'Tekstin väri', 'imageorbit' ) )->set_palette( array( '#000000', '#FFFFFF', '#EEEEEE', '#333333' ) ),
+ Field::make( 'color', 'imageorbit_text_coloring_hover', __( 'Tekstin väri (korostus)', 'imageorbit' ) )->set_palette( array( '#000000', '#FFFFFF', '#EEEEEE', '#333333' ) ),
+ Field::make( 'text', 'imageorbit_font_size', __( 'Fonttikoko', 'imageorbit' ) )->set_attribute("type",'number')->set_attribute( 'placeholder', 15),
+ Field::make( 'text', 'imageorbit_rotation', __( 'Kulma', 'imageorbit' ) )->set_attribute('max',360)->set_attribute("min",0)->set_attribute("step",1)->set_attribute("type",'number')->set_attribute( 'placeholder', 0),
+ Field::make( 'text', 'imageorbit_radius', __( 'Etäisyys', 'imageorbit' ) )->set_attribute('max',200)->set_attribute("min",10)->set_attribute("step",1)->set_attribute("type",'number')->set_attribute( 'placeholder', 75),
+ Field::make( 'text', 'imageorbit_border_radius', __( 'Etäisyys', 'imageorbit' ) )->set_attribute('max',50)->set_attribute("min",0)->set_attribute("type",'number')->set_attribute( 'placeholder', 0),
+
+ Field::make( 'complex', 'imageorbit_slides', __( 'Laatikot', 'imageorbit' ) )
+ //->set_layout( 'tabbed-horizontal' )
+ ->set_min(2)
+ ->set_max(33)
+ ->add_fields( array(
+ Field::make( 'text', 'title', __( 'Otsikko', 'imageorbit' ) )->set_attribute( 'placeholder', "Laatikon otsikko tähän"),
+ Field::make( 'text', 'link', __( 'Linkki', 'imageorbit' ) )->set_attribute( 'placeholder', "https://example.com")
+ ) ),
+
+
+
+ ) );
+}
+function imageorbit_general_settings_print ($args) {
+ global $post;
+ ?>
-
-
-
-// how to print each meta box type
-function imageorbit_print_option ($opt) {
-
- switch ($opt['type']) {
- case "inputtext": imageorbit_print_option_input_text($opt); break;
- case "upload": imageorbit_print_meta_upload($opt); break;
- }
-}
-
-// nonce Verification
-function imageorbit_set_nonce () {
- wp_nonce_field(plugin_basename(__FILE__), 'imageorbit_nonce');
+ <strong>Koodi: </strong><br/>
+ [imageorbit id="<?= $post->ID ?>"]
+ <strong>Esikatselu: </strong><br/>
+
+ <?php
}
-// text => name, title, value, default
-function imageorbit_print_option_input_text ($args) {
+function imageorbit_print_example ($args) {
+ global $post;
?>
- <input type="number" value="5" min="2" max="15" name="<?php echo $args['name']; ?>" id="<?php echo $args['name']; ?>" value="<?php echo $args['value']; ?>" style="width:100%" rows="10" />
- <p><?php echo $args['extra']; ?></p>
-
<?php
-
+ echo(imageorbit_func(array(
+ "id" => $post->ID
+ )));
}
-function imageorbit_general_settings_print ($args) {
- ?>
-
- <input type="number" value="5" min="2" max="15" name="imageorbit_numorbits" id="imageorbit_numorbits" />
- <span> Laatikoiden määrä </span><button name="imageorbit_update_amt" type="button">Päivitä</button>
-
- <?php
-}
-// text => name, title, value
-function imageorbit_print_meta_upload ($args) {
-
- $src = '';
-
- if (!empty($args['value'])) {
- $src = wp_get_attachment_url($args['value']);
- }
-
- ?>
-
- <input name="<?php echo $args['name']; ?>" type="hidden" id="upload_image_attachment_id" value="<?php echo esc_html($args['value']); ?>" />
- <input id="upload_image_text_meta" type="text" value="<?php echo $src; ?>" style="width:80%" />
- <input class="upload_image_button_meta" type="button" value="Upload" />
+// OBOSOLETE
+if (false) {
- <p><?php echo $args['extra']; ?></p>
-
- <?php
-
-}
-function imageorbit_save_option_meta ($post_id) {
+ // how to print each meta box type
+ function imageorbit_print_option ($opt) {
- // Verification
- if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
- if (!isset($_POST['imageorbit_nonce'])) return;
- if (!wp_verify_nonce($_POST['imageorbit_nonce'], plugin_basename( __FILE__ ))) return;
-
- if ($_POST['post_type'] == 'imageorbit') {
- if (!current_user_can('edit_post', $post_id)) return;
+ switch ($opt['type']) {
+ case "inputtext": imageorbit_print_option_input_text($opt); break;
+ case "upload": imageorbit_print_meta_upload($opt); break;
+ }
+ }
+
+ // nonce Verification
+ function imageorbit_set_nonce () {
+ wp_nonce_field(plugin_basename(__FILE__), 'imageorbit_nonce');
+ }
+
+ // text => name, title, value, default
+ function imageorbit_print_option_input_text ($args) {
+
+ ?>
- imageorbit_save_imageorbit_option_meta($post_id);
+ <input type="text" name="<?php echo $args['name']; ?>" id="<?php echo $args['name']; ?>" value="<?php echo $args['value']; ?>" style="width:100%" placeholder="Teksti"/>
+ <input type="text" name="<?php echo $args['name']; ?>-link" id="<?php echo $args['name']; ?>-link" value="<?php echo $args['value']; ?>" style="width:100%" placeholder="Linkki"/>
+
+ <?php
+
}
-
-}
-function imageorbit_save_metadata ($post_id, $new_data, $old_data, $name) {
- if ($new_data == $old_data) {
- add_post_meta($post_id, $name, $new_data, true);
+ // text => name, title, value
+ function imageorbit_print_meta_upload ($args) {
+
+ $src = '';
+
+ if (!empty($args['value'])) {
+ $src = wp_get_attachment_url($args['value']);
+ }
+
+ ?>
- } else if (!$new_data) {
- delete_post_meta($post_id, $name, $old_data);
+ <input name="<?php echo $args['name']; ?>" type="hidden" id="upload_image_attachment_id" value="<?php echo esc_html($args['value']); ?>" />
+ <input id="upload_image_text_meta" type="text" value="<?php echo $src; ?>" style="width:80%" />
+ <input class="upload_image_button_meta" type="button" value="Upload" />
+
+ <p><?php echo $args['extra']; ?></p>
- } else if ($new_data != $old_data) {
- update_post_meta($post_id, $name, $new_data, $old_data);
+ <?php
}
-}
-function imageorbit_array_merge ($base, $changes) {
- if (!is_array($base) || !is_array($changes)) {
- return;
+ function imageorbit_save_option_meta ($post_id) {
+
+ // Verification
+ if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
+ if (!isset($_POST['imageorbit_nonce'])) return;
+ if (!wp_verify_nonce($_POST['imageorbit_nonce'], plugin_basename( __FILE__ ))) return;
+
+ if ($_POST['post_type'] == 'imageorbit') {
+ if (!current_user_can('edit_post', $post_id)) return;
+
+ imageorbit_save_imageorbit_option_meta($post_id);
+ }
+
}
- foreach ($changes as $key => $value) {
- if (array_key_exists($key, $base)) {
- $base[$key] = $value;
+ function imageorbit_save_metadata ($post_id, $new_data, $old_data, $name) {
+
+ if ($new_data == $old_data) {
+ add_post_meta($post_id, $name, $new_data, true);
+
+ } else if (!$new_data) {
+ delete_post_meta($post_id, $name, $old_data);
+
+ } else if ($new_data != $old_data) {
+ update_post_meta($post_id, $name, $new_data, $old_data);
+
}
}
- return $base;
-}
-// Setup the imageorbits edit page
-$imageorbit_meta_boxes = array(
- array(
- 'title' => __('Orbits', 'imageorbit'),
- 'name' => 'imageorbit_imageorbit-option-authors',
- 'type' => 'inputtext',
- 'extra' => __('Listaa yksi per rivi laatikoiden sisällöt.', 'imageorbit'))
-);
+ function imageorbit_array_merge ($base, $changes) {
+ if (!is_array($base) || !is_array($changes)) {
+ return;
+ }
+
+ foreach ($changes as $key => $value) {
+ if (array_key_exists($key, $base)) {
+ $base[$key] = $value;
+ }
+ }
+ return $base;
+ }
+
+
+ // Setup the imageorbits edit page
+ $imageorbit_meta_boxes = array(
+
+ );
+
+ for ($i=1; $i < 7; $i++) {
+ array_push($imageorbit_meta_boxes,
+ array(
+ 'title' => __('Laatikko '.$i, 'imageorbit'),
+ 'name' => 'imageorbit_imageorbit-option-box$i',
+ 'type' => 'inputtext',
+ 'extra' => __('asd', 'imageorbit')));
+ }
+}
function imageorbit_add_imageorbit_options () {
add_meta_box('imageorbit_gensettings',
- __("General"),
+ __("Tiedot",'imageorbit'),
'imageorbit_general_settings_print',
'imageorbit',
'normal',
'high',
$opt);
-/*
- global $imageorbit_meta_boxes;
-
- foreach ($imageorbit_meta_boxes as $opt) {
- add_meta_box('imageorbit_metabox-' . $opt['title'],
- __($opt['title']),
- 'imageorbit_add_imageorbit_option_content',
- 'imageorbit',
- 'normal',
- 'high',
- $opt);
+ add_meta_box('imageorbit_preview',
+ __("Esikatselu (päivitä sivu muutosten jälkeen)",'imageorbit'),
+ 'imageorbit_print_example',
+ 'imageorbit',
+ 'normal',
+ 'low',
+ $opt);
+
+ if (false) {
+ global $imageorbit_meta_boxes;
+
+ foreach ($imageorbit_meta_boxes as $opt) {
+ add_meta_box('imageorbit_metabox-' . $opt['title'],
+ __($opt['title']),
+ 'imageorbit_add_imageorbit_option_content',
+ 'imageorbit',
+ 'normal',
+ 'high',
+ $opt);
+ }
}
-*/
}
+add_action('add_meta_boxes', 'imageorbit_add_imageorbit_options');
-function imageorbit_add_imageorbit_option_content ($post, $option) {
- $option = $option['args'];
+if (false) {
+ function imageorbit_add_imageorbit_option_content ($post, $option) {
+ $option = $option['args'];
- imageorbit_set_nonce();
+ imageorbit_set_nonce();
- $option['value'] = get_post_meta($post->ID, $option['name'], true);
- imageorbit_print_option($option);
+ $option['value'] = get_post_meta($post->ID, $option['name'], true);
+ imageorbit_print_option($option);
-}
+ }
-function imageorbit_save_imageorbit_option_meta ($post_id) {
+ function imageorbit_save_imageorbit_option_meta ($post_id) {
- global $imageorbit_meta_boxes;
+ global $imageorbit_meta_boxes;
- foreach ($imageorbit_meta_boxes as $opt){
+ foreach ($imageorbit_meta_boxes as $opt){
+
+ $name = $opt['name'];
- $name = $opt['name'];
-
- if (isset($_POST[$name])) {
- $new_data = stripslashes($_POST[$name]);
- } else {
- $new_data = '';
- }
+ if (isset($_POST[$name])) {
+ $new_data = stripslashes($_POST[$name]);
+ } else {
+ $new_data = '';
+ }
- $old_data = get_post_meta($post_id, $name, true);
- imageorbit_save_metadata($post_id, $new_data, $old_data, $name);
+ $old_data = get_post_meta($post_id, $name, true);
+ imageorbit_save_metadata($post_id, $new_data, $old_data, $name);
- }
-
-}
+ }
-add_action('save_post', 'imageorbit_save_option_meta');
-add_action('add_meta_boxes', 'imageorbit_add_imageorbit_options');
+ }
+ add_action('save_post', 'imageorbit_save_option_meta');
+ function check_color( $value ) {
+
+ if ( preg_match( '/^#[a-f0-9]{6}$/i', $value ) ) {
+ return true;
+ }
+
+ return false;
+ }
+}
+function imageorbit_admin_enqueue_scripts( $hook ) {
+
+ if( is_admin() ) {
+
+ wp_enqueue_style( 'wp-color-picker' );
+
+ wp_enqueue_script( 'imageorbit-admin', plugins_url( 'admin.js', __FILE__ ), array( 'wp-color-picker' ), false, true );
+ }
+}
+add_action( 'admin_enqueue_scripts', 'imageorbit_admin_enqueue_scripts' );
//require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/admin.php';
diff --git a/style.css b/style.css
index 11e80e1ec9326807e6d2203429f590c6c53a70d0..5da1593e64e9a575e90f4fdad26e70797a3ccd9c 100644
--- a/style.css
+++ b/style.css
@@ -1,19 +1,16 @@
-.planet>.moon {
+.planet>.satellite {
background-color: #ac5;
box-shadow: 0 0 5px rgba(0,0,0,0.50);
transition: background-color, 0.5s, transform 0.5s;
padding: 5%;
color: #fff;
font-weight: bold;
-
font-variant: all-small-caps;
-
box-sizing: border-box;
}
-.planet>.moon:hover {
- background-color: rgb(203, 236, 119);
-
+.planet>.satellite:hover {
+ /*background-color: rgb(203, 236, 119);*/
transform: scale(1.2);
z-index: 1000;
box-shadow: 0 0 20px rgba(0,0,0,0.70);
@@ -21,63 +18,68 @@
.planet {
display: flex;
- flex-wrap: wrap;
+ flex-direction: column;
+ text-decoration: none;
}
+
@media only screen and (min-width: 350px) {
-.planet {
- display: block;
- position: relative;
- width: 30%;
- height: 0;
- padding-bottom: 30%; /*Use this instead of height to maintain aspect ratio*/
- margin: 35%; /* (100%-30%)/2 */
- background-color: #ac5;
- border-radius: 50%;
-}
+ /* PC style */
-.planet>.moon {
- --edge: 80%;
- --max-edge: 150px;
- width: var(--edge);
- height: var(--edge);
- position: absolute;
- max-width: var(--max-edge);
- max-height: var(--max-edge);
- margin: 0;
-
- display: table;
- table-layout: fixed;
-}
+ .mobile_planet {
+ display: none;
+ }
-.planet>.moon>* {
- display: table-cell;
- vertical-align: middle; /*height on prosentteina, tämä ei toimi*/
- /*width: var(--edge);
- height: var(--edge);
- max-width: var(--max-edge);
- max-height: var(--max-edge);*/
- text-align: center;
- hyphens: auto;
- margin: 0;
-}
+ .planet {
+ display: block;
+ position: relative;
+ width: 30%;
+ height: 0;
+ padding-bottom: 30%; /*Use this instead of height to maintain aspect ratio*/
+ margin: 35%; /* (100%-30%)/2 ie. (100%-width)/2 */
+ background-color: #ac5;
+ border-radius: 50%;
+ }
+ .planet {
+ border-radius: initial !important;
+ background-image: url(/wp-content/uploads/2019/10/ennakointi_akatemia_logo1.png) !important;
+ background-color: rgba(0,0,0,0) !important;
+ background-size: contain !important;
+ background-position: center !important;
+ background-repeat: no-repeat !important;
+ }
-.orbital {
- width: 100%;
- height: 0;
- padding-bottom: 100%;
- overflow: hidden;
-}
-}
+ .planet>.satellite {
+ --edge: 80%;
+ --max-edge: 150px;
+ width: var(--edge);
+ height: var(--edge);
+ position: absolute;
+ max-width: var(--max-edge);
+ max-height: var(--max-edge);
+ margin: 0;
+ display: table;
+ table-layout: fixed;
+ }
+ .planet>.satellite>* {
+ display: table-cell;
+ vertical-align: middle; /*height on prosentteina, tämä ei toimi*/
+ /*width: var(--edge);
+ height: var(--edge);
+ max-width: var(--max-edge);
+ max-height: var(--max-edge);*/
+ text-align: center;
+ hyphens: auto;
+ margin: 0;
+ }
+
+ .orbital {
+ width: 100%;
+ height: 0;
+ padding-bottom: 100%;
+ overflow: hidden;
+ }
+}
-.planet {
-
- border-radius: initial !important;
- background-image: url(/wp-content/uploads/2019/10/ennakointi_akatemia_logo1.png) !important;
- background-color: rgba(0,0,0,0) !important;
- background-size: contain !important;
- background-position: center !important;
- background-repeat: no-repeat !important;
-}
\ No newline at end of file
diff --git a/template.php b/template.php
index fca3338c5bd2ea33480d751362c2debf172bad36..47e727e166bf42bb4be97f82d2f395d8593340ec 100644
--- a/template.php
+++ b/template.php
@@ -1,15 +1,34 @@
<!--<h1>orbit images here from category <?= $id; ?></h1>-->
-<img class="mobile_planet" src="/wp-content/uploads/2019/10/ennakointi_akatemia_logo1.png" />
-<div class="orbital">
- <div class="planet">
- <!--Somebody do loops here-->
- <a class="moon" href="#robot"><p>robotisaatio, digitalisaatio, Big data</p></a>
- <a class="moon" href="#jatk"><p>jatkuva oppiminen</p> </a>
- <a class="moon" href="#ymp"><p>ympäristö, ilmastonmuutos</p> </a>
- <a class="moon" href="#tyov"><p>työvoimapuloa, sitoutuminen</p> </a>
- <a class="moon" href="#vast"><p>vastuullisuus</p> </a>
- <a class="moon" href="#kaup"><p>kaupungistuminen</p> </a>
- <a class="moon" href="#arvot"><p>arvot: vapaa-ajan arvostus</p> </a>
- <a class="moon" href="#arvot2"><p>arvot: vapaa-ajan arvostus</p> </a>
- </div> </a>
-</div>
+<div class="imageorbit imageorbit-<?= $id; ?>" id="imageorbit-<?= $id; ?>" style="color: <?= esc_html($imageorbit_text_coloring); ?>;">
+ <img class="mobile_planet" src="<?= esc_html($img_src); ?>" alt="<?= esc_html($img_alt); ?>" />
+ <div class="orbital">
+ <div class="planet"
+ style="background-image: url(<?= $bgurl; ?>) !important; border-radius: <?= $imageorbit_border_radius?>%"
+ data-hovercolor="<?= esc_html($imageorbit_coloring_hover); ?>"
+ data-texthovercolor="<?= esc_html($imageorbit_text_coloring_hover); ?>"
+ data-radius="<?= esc_html($imgorbit_radius); ?>"
+ data-rotation="<?= esc_html($imgorbit_rotation); ?>" >
+
+ <?php
+
+ if ( $slides ) {
+ foreach ( $slides as $slide ) {
+ ?>
+ <a class="satellite" style="background-color: <?= esc_html($imageorbit_coloring); ?>;" href="<?= esc_html($slide['link']); ?>"><p><?= esc_html($slide['title']); ?></p></a>
+ <?php
+ }
+ }
+
+ ?>
+
+ <!-- <a class="satellite" href="#vast"><p>vastuullisuus</p> </a>
+ <a class="satellite" href="#kaup"><p>kau­pun­gis­tu­mi­nen</p></a>
+ <a class="satellite" href="#vast"><p>vastuullisuus</p> </a>
+ <a class="satellite" href="#arvot"><p>arvot: vapaa-ajan arvostus</p> </a>
+ <a class="satellite" href="#vast"><p>vastuullisuus</p> </a>
+ <a class="satellite" href="#vast"><p>vastuullisuus</p> </a>
+ <a class="satellite" href="#vast"><p>vastuullisuus</p> </a>-->
+
+ </div>
+ </div>
+</div>
\ No newline at end of file