-
Notifications
You must be signed in to change notification settings - Fork 1
/
responsible-customiser.php
176 lines (150 loc) · 5.3 KB
/
responsible-customiser.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<?php
/*
Plugin Name: Responsible Customiser
Plugin URI: https://github.com/cftp/responsible-customiser
Description: Viewport resizing comes to the WordPress customiser
Version: 0.7.1
Author: Code For The People
Author URI: http://codeforthepeople.com
Text Domain: responsible-customiser
Domain Path: /assets/languages/
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Copyright © 2014 Code for the People ltd
_____________
/ ____ \
_____/ \ \ \
/\ \ \___\ \
/ \ \ \
/ / / _______\
/ / / \ /
/ / / \ /
\ \ \ _____ ___\ /
\ \ /\ \ / \
\ \ / \____\/ _____\
\ \/ / / / \
\ /____/ /___\
\ /
\______________________/
This program is free software; you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation; either version 2 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
*/
// Don't be a douche, eh!
if ( ! defined( 'ABSPATH' ) ) exit;
// Allow for reuse
if ( ! class_exists( 'responsible_customiser' ) ) :
add_action( 'init', array( 'responsible_customiser', 'instance' ) );
/**
* Allows for responsiveness in the customiser.
*
* @since 0.1.0
*/
class responsible_customiser {
/**
* @since 0.7.0
* @static
* @var \responsible_customiser Reusable object instance.
*/
protected static $instance = null;
/**
* Creates a new instance. Called on 'after_setup_theme'.
* May be used to access class methods from outside.
*
* @since 0.7.0
* @see __construct()
* @static
* @return \wp_less
*/
public static function instance() {
null === self::$instance AND self::$instance = new self;
return self::$instance;
}
/**
* Constructor - registers any hooks.
*
* @since 0.1.0
* @return \responsible_customiser
*/
public function __construct() {
// Queue up the main script that adds the responsive controls
add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_scripts' ) );
}
/**
* Queue up scripts we need within the WordPress customiser
*
* @since 0.1.0
* @return void
*/
public function customize_controls_enqueue_scripts() {
// Our main customiser JS
wp_register_script(
'responsible-customiser',
plugin_dir_url( __FILE__ ) . 'assets/js/responsible.js',
array('jquery', 'jquery-ui-core'),
filemtime( plugin_dir_path( __FILE__ ) . '/assets/js/responsible.js' ) // clears caches when modified
);
// Send the device sizes and HTML as variables to the script for use client-side
wp_localize_script( 'responsible-customiser', 'responsible', array(
'html' => self::customiser_control(),
// @todo Filter/configure this:
'sizes' => array(
'mobile' => array( 'width' => 320, 'height' => 568, 'alt' => 'mobile-landscape' ),
'mobile-landscape' => array( 'width' => 568, 'height' => 320, 'alt' => 'mobile' ),
'small-tablet' => array( 'width' => 600, 'height' => 800, 'alt' => 'small-tablet-landscape' ),
'small-tablet-landscape' => array( 'width' => 800, 'height' => 600, 'alt' => 'small-tablet' ),
'tablet' => array( 'width' => 768, 'height' => 1024, 'alt' => 'tablet-landscape' ),
'tablet-landscape' => array( 'width' => 1024, 'height' => 768, 'alt' => 'tablet' ),
'laptop' => array( 'width' => 1280, 'height' => 800 ),
'desktop' => array( 'width' => 1920, 'height' => 1080 ),
),
) );
wp_enqueue_script('responsible-customiser');
// Font awesome for pretty icons
wp_register_style(
'font-awesome',
plugin_dir_url( __FILE__ ) . 'assets/css/font-awesome.min.css',
array(),
filemtime( plugin_dir_path( __FILE__ ) . '/assets/css/font-awesome.min.css' ),
'screen'
);
wp_enqueue_style('font-awesome');
// Styling our "control"
wp_register_style(
'responsible-customiser-css',
plugin_dir_url( __FILE__ ) . 'assets/css/customiser.css',
array(),
filemtime( plugin_dir_path( __FILE__ ) . '/assets/css/customiser.css' ),
'screen'
);
wp_enqueue_style('responsible-customiser-css');
}
/**
* Construct the HTML to insert into the customiser
*
* @since 0.1.0
* @access protected
* @return string
*/
protected function customiser_control() {
/*
* @todo Switch to a filtered array of devices and sizes to construct this
*/
$html = '<div id="responsible">
<ul>
<li><a class="responsible-size mobile" href="mobile"><span class="fa fa-mobile"></span></a></li>
<li><a class="responsible-size small-tablet" href="small-tablet"><span class="fa fa-tablet"></span></a></li>
<li><a class="responsible-size tablet" href="tablet"><span class="fa fa-tablet"></span></a></li>
<li><a class="responsible-size laptop" href="laptop"><span class="fa fa-laptop"></span></a></li>
<li><a class="responsible-size desktop" href="desktop"><span class="fa fa-desktop"></span></a></li>
</ul>
</div>';
return $html;
}
}
endif; // instance