Skip to content
Snippets Groups Projects
Commit 9a8abe29 authored by Lauri Koivunen's avatar Lauri Koivunen :tools:
Browse files

changes

parent c04d5523
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
admin/main.php 0 → 100644
+ 3
− 0
View file @ 9a8abe29
<?php
?>
\ No newline at end of file
code.js 0 → 100644
+ 50
− 0
View file @ 9a8abe29
/**
* 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)});
imageorbit.php
+ 320
− 0
View file @ 9a8abe29
......@@ -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';
style.css 0 → 100644
+ 83
− 0
View file @ 9a8abe29
.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
template.php 0 → 100644
+ 15
− 0
View file @ 9a8abe29
<!--<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>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment