diff --git a/admin/main.php b/admin/main.php
new file mode 100644
index 0000000000000000000000000000000000000000..15c5adc7fae9b7dab7ba2410a6cabc4361f76852
--- /dev/null
+++ b/admin/main.php
@@ -0,0 +1,3 @@
+<?php
+
+?>
\ No newline at end of file
diff --git a/code.js b/code.js
new file mode 100644
index 0000000000000000000000000000000000000000..d0e18090bd6ac21922227559643372d9121156ef
--- /dev/null
+++ b/code.js
@@ -0,0 +1,50 @@
+
+/**
+ * Redraws all the orbitals found in the document
+ */
+const redraw_orbitals = () => {
+ planets = document.getElementsByClassName("planet");
+ Array.prototype.forEach.call(planets, (planet) => {
+ orbit(planet, 75);
+ })
+}
+
+/**
+ * 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";
+ }
+
+}
+
+/**
+ *
+ * @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 d8d0f79b41740cdf2bf33cd872e4b872a9dd2419..02a2d82f2b3630c5c56dc79121f99d5bfb7898c4 100644
--- a/imageorbit.php
+++ b/imageorbit.php
@@ -9,3 +9,323 @@ Author URI: http://tech.utu.fi/soft/
License: TODO
*/
+
+
+define('WP_DEBUG', true);
+define('WP_DEBUG_LOG', true);
+define('WP_DEBUG_DISPLAY', true);
+@ini_set('display_errors', E_ALL);
+
+
+defined('ABSPATH') || exit;
+/**
+ * Load all translations for our plugin from the MO file.
+*/
+function imageorbit_load_textdomain()
+{
+ load_plugin_textdomain('imageorbit', false, basename(__DIR__) . '/languages');
+}
+add_action('init', 'imageorbit_load_textdomain');
+/**
+ * Registers all block assets so that they can be enqueued through Gutenberg in
+ * the corresponding context.
+ *
+ * Passes translations to JavaScript.
+ */
+function imageorbit_init()
+{
+
+
+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__),
+ array(/*'wp-blocks', */'wp-i18n', /*'wp-element', 'wp-editor', */'underscore'),
+ filemtime(plugin_dir_path(__FILE__) . 'code.js')
+ );
+ wp_register_style(
+ 'imageorbit',
+ plugins_url('style.css', __FILE__),
+ array(),
+ filemtime(plugin_dir_path(__FILE__) . 'style.css')
+ );
+
+ if (function_exists('wp_set_script_translations')) {
+ wp_set_script_translations('imageorbit', 'imageorbit');
+ }
+}
+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' );
+function imageorbit_register_post_type() {
+
+
+ $labels = array(
+ 'name' => __( 'Image Orbits' ),
+ 'singular_name' => __( 'Image Orbit' ),
+ 'add_new' => _x( 'Add New', 'Image Orbit', 'imageorbit' ),
+ 'add_new_item' => __( 'Create a New Image Orbit', 'imageorbit' ),
+ 'new_item' => __( 'New Image Orbit', 'imageorbit' ),
+ 'edit_item' => __( 'Edit Image Orbit', 'imageorbit' ),
+ 'view_item' => __( 'View Image Orbit', 'imageorbit' ),
+ 'all_items' => __( 'All Image Orbits', 'imageorbit' ),
+ 'search_items' => __( 'Search Image Orbits', 'imageorbit' ),
+ 'parent_item_colon' => __( 'Parent Image Orbits:', 'imageorbit' ),
+ 'not_found' => __( 'No Image Orbits found.', 'imageorbit' ),
+ 'not_found_in_trash' => __( 'No Image Orbits found in Trash.', 'imageorbit' )
+ );
+
+ $supports = array(
+ 'title',
+ 'editor',
+ 'thumbnail',
+ 'comments',
+ 'revisions',
+ );
+
+ $public_pt_args = array(
+ 'labels' => $labels,
+ 'public' => false,
+ 'publicly_queryable' => false,
+ 'exclude_from_search' => true,
+ 'show_in_nav_menus' => false,
+ 'show_ui' => true,
+ 'supports' => $supports,
+ 'rewrite' => array(
+ 'slug' => 'imageorbit',
+ 'feeds' => false,
+ 'pages' => false
+ ),
+ 'supports' => false,
+ 'show_in_menu' => true,
+ 'has_archive' => false,
+ 'menu_icon' => 'dashicons-image-filter',
+ 'query_var' => true,
+ );
+ register_post_type( 'imageorbit', $public_pt_args );
+
+ add_post_type_support( 'imageorbit', 'title' );
+ add_post_type_support( 'imageorbit', 'thumbnail' );
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// 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');
+}
+
+// text => name, title, value, default
+function imageorbit_print_option_input_text ($args) {
+
+ ?>
+
+ <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
+
+}
+
+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" />
+
+ <p><?php echo $args['extra']; ?></p>
+
+ <?php
+
+}
+
+
+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);
+ }
+
+}
+
+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);
+
+ }
+}
+
+
+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(
+ array(
+ 'title' => __('Orbits', 'imageorbit'),
+ 'name' => 'imageorbit_imageorbit-option-authors',
+ 'type' => 'inputtext',
+ 'extra' => __('Listaa yksi per rivi laatikoiden sisällöt.', 'imageorbit'))
+);
+
+function imageorbit_add_imageorbit_options () {
+
+ add_meta_box('imageorbit_gensettings',
+ __("General"),
+ '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);
+ }
+*/
+}
+
+function imageorbit_add_imageorbit_option_content ($post, $option) {
+ $option = $option['args'];
+
+ imageorbit_set_nonce();
+
+ $option['value'] = get_post_meta($post->ID, $option['name'], true);
+ imageorbit_print_option($option);
+
+}
+
+function imageorbit_save_imageorbit_option_meta ($post_id) {
+
+ global $imageorbit_meta_boxes;
+
+ foreach ($imageorbit_meta_boxes as $opt){
+
+ $name = $opt['name'];
+
+ 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);
+
+ }
+
+}
+
+add_action('save_post', 'imageorbit_save_option_meta');
+add_action('add_meta_boxes', 'imageorbit_add_imageorbit_options');
+
+
+
+
+
+
+
+//require_once plugin_dir_path( dirname( __FILE__ ) ) . 'admin/admin.php';
diff --git a/style.css b/style.css
new file mode 100644
index 0000000000000000000000000000000000000000..11e80e1ec9326807e6d2203429f590c6c53a70d0
--- /dev/null
+++ b/style.css
@@ -0,0 +1,83 @@
+.planet>.moon {
+ 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);
+
+ transform: scale(1.2);
+ z-index: 1000;
+ box-shadow: 0 0 20px rgba(0,0,0,0.70);
+}
+
+.planet {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+@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%;
+}
+
+.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;
+}
+
+.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;
+}
+
+
+.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
new file mode 100644
index 0000000000000000000000000000000000000000..fca3338c5bd2ea33480d751362c2debf172bad36
--- /dev/null
+++ b/template.php
@@ -0,0 +1,15 @@
+<!--<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>