Skip to content

Commit

Permalink
added screen resolution check
Browse files Browse the repository at this point in the history
  • Loading branch information
Ethan Lin committed Nov 15, 2016
1 parent e698d76 commit 42fa43a
Show file tree
Hide file tree
Showing 11 changed files with 254 additions and 12 deletions.
3 changes: 3 additions & 0 deletions build/assets/css/system-requirements-check-settings.css
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,9 @@
width: 110px; }
.src-wrap .settings_box .settings_form input[type=text] {
width: 50px; }
.src-wrap .settings_box .settings_form input[type=number] {
width: 60px;
height: 25px; }
@media (max-width: 1010px) {
.src-wrap .settings_box .settings_form .src-cb {
display: block; } }
Expand Down
1 change: 1 addition & 0 deletions build/assets/script/check-screen.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 deletions build/includes/admin/class-system-requirements-check-settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,22 @@ protected function init_settings() {
array(
'name' => 'host_ip',
'std' => '0'
),
array(
'name' => 'screen',
'std' => '0'
),
array(
'name' => 'disable_screen_check',
'std' => '1'
),
array(
'name' => 'screen_w',
'std' => '1024'
),
array(
'name' => 'screen_h',
'std' => '640'
)
),
)
Expand Down
24 changes: 20 additions & 4 deletions build/includes/admin/system-requirements-check-settings-form.php
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<label class="fixed-width" for="settings-ie">Internet Explorer</label>
<input type="text" id="settings-ie" name="ie" value="<?php esc_attr_e(get_option('ie')); ?>" />
<br />
<label class="fixed-width" for="settings-ie">Microsoft Edge</label>
<label class="fixed-width" for="settings-edge">Microsoft Edge</label>
<input type="text" id="settings-edge" name="edge" value="<?php esc_attr_e(get_option('edge')); ?>" />
<br />
<label class="fixed-width" for="settings-firefox">Mozilla Firefox</label>
Expand All @@ -86,16 +86,32 @@

<div class="callout danger"><strong>Important:</strong> Displaying IP address to the public may increase of the risk of a security breach. By choosing to display the IP address, you expressed or agreed that the author of this plugin will not be held responsible for any security breaches. Please use responsibly.</div>

<label>Display client's IP address? <input type="checkbox" name="ip" value="1" <?php checked('1', get_option('ip')); ?> /></label>
<label><input type="checkbox" name="ip" value="1" <?php checked('1', get_option('ip')); ?> /> Display client's IP address</label>
<br>
<label>Display host's IP address? <input type="checkbox" name="host_ip" value="1" <?php checked('1', get_option('host_ip')); ?> /></label>
<label><input type="checkbox" name="host_ip" value="1" <?php checked('1', get_option('host_ip')); ?> /> Display host's IP address</label>

<hr />

<h4>JavaScript</h4>
<label>Check for JavaScript? <input type="checkbox" name="js" value="1" <?php checked('1', get_option('js')); ?> /></label>

<div class="callout danger"><strong>Important:</strong> Java Runtime Environment (JRE), cookie, and Adobe Flash Player checks require JavaScript to be enabled on the client's web browser.</div>
<div class="callout danger"><strong>Important:</strong> Java Runtime Environment (JRE), cookie, screen resolution, and Adobe Flash Player checks require JavaScript to be enabled on the client's web browser.</div>

<hr />

<h4>Screen Resolution</h4>

<label class="src-cb"><input type="checkbox" name="screen" value="1" <?php checked('1', get_option('screen')); ?> /> Display client's screen resolution.</label><br>

<div class="callout danger">
If "Display client's screen resolution" is selected, screen resolution will not be checked even if it is specified below.
</div>

<label class="src-cb"><input type="checkbox" name="disable_screen_check" value="1" <?php checked('1', get_option('disable_screen_check')); ?> /> Disable screen resolution check.</label><br>

<input type="number" id="settings-screen-w" name="screen_w" size="4" value="<?php esc_attr_e(get_option('screen_w')); ?>" />
&times;
<input type="number" id="settings-screen-h" name="screen_h" size="4" value="<?php esc_attr_e(get_option('screen_h')); ?>" />

<hr />

Expand Down
31 changes: 29 additions & 2 deletions build/includes/class-system-requirements-check-shortcodes.php
Original file line number Diff line number Diff line change
Expand Up @@ -53,12 +53,16 @@ public function check_system_requirements() {
$browserCallout = $this->checkBrowser();
}

if ( get_option('screen') == '1' ) {
$screenCallout = $this->checkScreen();
}

$jsCallout = $this->checkJS();
$cookieCallout = $this->checkCookies();
$javaCallout = $this->checkJava();
$flashCallout = $this->checkFlash();

return '<div class="system_req_check">' . $ipCallout . $osCallout . $browserCallout . $jsCallout . $cookieCallout . $javaCallout . $flashCallout . '</div>';
return '<div class="system_req_check">' . $ipCallout . $screenCallout . $osCallout . $browserCallout . $jsCallout . $cookieCallout . $javaCallout . $flashCallout .'</div>';

}

Expand All @@ -73,7 +77,7 @@ public function getIP() {

$ip = $_SERVER['REMOTE_ADDR'];

if ( get_option('host_ip') == '1' ) {
if ( prep(get_option('host_ip')) == '1' ) {
$host = $_SERVER['SERVER_ADDR'];
return '<div class="callout success"><p><span class="icon-ip big"></span><strong>IP Addresses</strong></p><p>Your IP: ' . $ip . '<br>Host\'s IP: ' . $host . '</p></div>';
}
Expand Down Expand Up @@ -517,6 +521,29 @@ public function checkFlash() {
return '<input id="checkFL" type="hidden" value="'.$flash.'" /><script src="http' . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . ':https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script><script type="text/javascript" src="'.SYSTEM_REQ_URL.'/assets/script/check-flash.js"></script><noscript><div class="callout warning"><p><span class="icon-cancel big yellow"></span><strong>Adobe Flash Player check failed!</strong> - JavaScript is required. Please <a href="http:https://enable-javascript.com/" target="_blank">enable</a><span class="icon-link"></span> JavaScript!</p></div></noscript>';

}

/**
* checkScreen function
*
* @access public
* @param none
* @return string
*
*/
public function checkScreen() {

if ( prep(get_option('disable_screen_check')) != '1' ) {

$screenWidth = prep(get_option('screen_w'));
$screenHeight = prep(get_option('screen_h'));

return '<input id="checkScreenW" type="hidden" value="'.$screenWidth.'" /><input id="checkScreenH" type="hidden" value="'.$screenHeight.'" /><input id="disableCheckScreen" type="hidden" value="0" /><script type="text/javascript" src="'.SYSTEM_REQ_URL.'/assets/script/check-screen.js"></script><noscript><div class="callout warning"><p><span class="icon-cancel big yellow"></span><strong>Screen resolution check failed!</strong> - JavaScript is required. Please <a href="http:https://enable-javascript.com/" target="_blank">enable</a><span class="icon-link"></span> JavaScript!</p></div></noscript>';

}

return '<input id="disableCheckScreen" type="hidden" value="1" /><script type="text/javascript" src="'.SYSTEM_REQ_URL.'/assets/script/check-screen.js"></script><noscript><div class="callout warning"><p><span class="icon-cancel big yellow"></span><strong>Screen resolution check failed!</strong> - JavaScript is required. Please <a href="http:https://enable-javascript.com/" target="_blank">enable</a><span class="icon-link"></span> JavaScript!</p></div></noscript>';

}


/**
Expand Down
27 changes: 27 additions & 0 deletions config.codekit3
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,15 @@
"sC": 3,
"tS": 0
},
"\/source\/assets\/script\/check-screen.js": {
"ft": 64,
"mi": 1,
"oA": 0,
"oAP": "\/build\/assets\/script\/check-screen.js",
"oF": 3,
"sC": 3,
"tS": 0
},
"\/source\/assets\/scss\/system-requirements-check-frontend.scss": {
"aP": 0,
"bl": 0,
Expand Down Expand Up @@ -163,6 +172,12 @@
"oS": 0,
"uL": 1
},
"\/source\/includes\/admin\/class-system-requirements-check-settings.php": {
"ft": 8192,
"oA": 2,
"oAP": "\/build\/includes\/admin\/class-system-requirements-check-settings.php",
"oF": 0
},
"\/source\/includes\/admin\/system-requirements-check-functions.php": {
"ft": 8192,
"oA": 2,
Expand All @@ -175,6 +190,18 @@
"oAP": "\/build\/includes\/admin\/system-requirements-check-settings-donation.php",
"oF": 0
},
"\/source\/includes\/admin\/system-requirements-check-settings-form.php": {
"ft": 8192,
"oA": 2,
"oAP": "\/build\/includes\/admin\/system-requirements-check-settings-form.php",
"oF": 0
},
"\/source\/includes\/class-system-requirements-check-shortcodes.php": {
"ft": 8192,
"oA": 2,
"oAP": "\/build\/includes\/class-system-requirements-check-shortcodes.php",
"oF": 0
},
"\/source\/includes\/class-system-requirements-check-system.php": {
"ft": 8192,
"oA": 2,
Expand Down
88 changes: 88 additions & 0 deletions source/assets/script/check-screen.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
function ready( fn ) {

if ( document.readyState !== 'loading' ) {
fn();
} else if ( document.addEventListener ) {
document.addEventListener( 'DOMContentLoaded', fn);
} else {
document.attachEvent( 'onreadystatechange', function() {
if ( document.readyState !== 'loading' ) {
fn();
}
} );
}

}

ready( function() {

var systemRC = document.getElementsByClassName( 'system_req_check' )[0];
var node = document.createElement( 'div' );

var screenWidth = window.screen.width;
var screenHeight = window.screen.height;

var disableCheck = document.getElementById( 'disableCheckScreen' ).value;

if ( node.classList ) {
node.classList.add( 'callout' );
} else {
node.className += ' callout';
}

systemRC.appendChild( node );

if ( disableCheck === '0' ) {

var targetScreenWidth = document.getElementById( 'checkScreenW' ).value;
var targetScreenHeight = document.getElementById( 'checkScreenH' ).value;

if ( screenWidth < targetScreenWidth ) {

if ( screenHeight < targetScreenHeight ) {

if ( node.classList ) {
node.classList.add( 'danger' );
} else {
node.className += ' danger';
}

node.innerHTML = "<p><span class=\"icon-danger big red\"></span> <span class=\"icon-display big\"></span><strong>Screen resolution (" + screenWidth + "&times;" + screenHeight + ") is not optimal for viewing.</strong></p><p>Recommended screen resolution is " + targetScreenWidth + "&times;" + targetScreenHeight + " or greater.</p>";

} else {

if ( node.classList ) {
node.classList.add( 'warning' );
} else {
node.className += ' warning';
}

node.innerHTML = "<p><span class=\"icon-warning big yellow\"></span> <span class=\"icon-display big\"></span><strong>Screen resolution (" + screenWidth + "&times;" + screenHeight + ") may not be optimal for viewing.</strong></p><p>Recommended screen resolution is " + targetScreenWidth + "&times;" + targetScreenHeight + " or greater.</p>";

}

} else {

if ( node.classList ) {
node.classList.add( 'success' );
} else {
node.className += ' success';
}

node.innerHTML = "<p><span class=\"icon-checkmark big green\"></span> <span class=\"icon-display big\"></span><strong>Screen resolution (" + screenWidth + "&times;" + screenHeight + ") is optimal for viewing.</strong></p><p>Recommended screen resolution is " + targetScreenWidth + "&times;" + targetScreenHeight + " or greater.</p>";

}

} else {

if ( node.classList ) {
node.classList.add( 'success' );
} else {
node.className += ' success';
}

node.innerHTML = "<p><span class=\"icon-display big\"></span><strong>Screen Resolution: " + screenWidth + "&times;" + screenHeight + "</strong></p>";

}

} );
5 changes: 5 additions & 0 deletions source/assets/scss/system-requirements-check-settings.scss
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,11 @@
width: 50px;
}

input[type=number] {
width: 60px;
height: 25px;
}

@include breakpoint( max-width $mobile ) {

.src-cb {
Expand Down
16 changes: 16 additions & 0 deletions source/includes/admin/class-system-requirements-check-settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,22 @@ protected function init_settings() {
array(
'name' => 'host_ip',
'std' => '0'
),
array(
'name' => 'screen',
'std' => '0'
),
array(
'name' => 'disable_screen_check',
'std' => '1'
),
array(
'name' => 'screen_w',
'std' => '1024'
),
array(
'name' => 'screen_h',
'std' => '640'
)
),
)
Expand Down
24 changes: 20 additions & 4 deletions source/includes/admin/system-requirements-check-settings-form.php
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@
<label class="fixed-width" for="settings-ie">Internet Explorer</label>
<input type="text" id="settings-ie" name="ie" value="<?php esc_attr_e(get_option('ie')); ?>" />
<br />
<label class="fixed-width" for="settings-ie">Microsoft Edge</label>
<label class="fixed-width" for="settings-edge">Microsoft Edge</label>
<input type="text" id="settings-edge" name="edge" value="<?php esc_attr_e(get_option('edge')); ?>" />
<br />
<label class="fixed-width" for="settings-firefox">Mozilla Firefox</label>
Expand All @@ -86,16 +86,32 @@

<div class="callout danger"><strong>Important:</strong> Displaying IP address to the public may increase of the risk of a security breach. By choosing to display the IP address, you expressed or agreed that the author of this plugin will not be held responsible for any security breaches. Please use responsibly.</div>

<label>Display client's IP address? <input type="checkbox" name="ip" value="1" <?php checked('1', get_option('ip')); ?> /></label>
<label><input type="checkbox" name="ip" value="1" <?php checked('1', get_option('ip')); ?> /> Display client's IP address</label>
<br>
<label>Display host's IP address? <input type="checkbox" name="host_ip" value="1" <?php checked('1', get_option('host_ip')); ?> /></label>
<label><input type="checkbox" name="host_ip" value="1" <?php checked('1', get_option('host_ip')); ?> /> Display host's IP address</label>

<hr />

<h4>JavaScript</h4>
<label>Check for JavaScript? <input type="checkbox" name="js" value="1" <?php checked('1', get_option('js')); ?> /></label>

<div class="callout danger"><strong>Important:</strong> Java Runtime Environment (JRE), cookie, and Adobe Flash Player checks require JavaScript to be enabled on the client's web browser.</div>
<div class="callout danger"><strong>Important:</strong> Java Runtime Environment (JRE), cookie, screen resolution, and Adobe Flash Player checks require JavaScript to be enabled on the client's web browser.</div>

<hr />

<h4>Screen Resolution</h4>

<label class="src-cb"><input type="checkbox" name="screen" value="1" <?php checked('1', get_option('screen')); ?> /> Display client's screen resolution.</label><br>

<div class="callout danger">
If "Display client's screen resolution" is selected, screen resolution will not be checked even if it is specified below.
</div>

<label class="src-cb"><input type="checkbox" name="disable_screen_check" value="1" <?php checked('1', get_option('disable_screen_check')); ?> /> Disable screen resolution check.</label><br>

<input type="number" id="settings-screen-w" name="screen_w" size="4" value="<?php esc_attr_e(get_option('screen_w')); ?>" />
&times;
<input type="number" id="settings-screen-h" name="screen_h" size="4" value="<?php esc_attr_e(get_option('screen_h')); ?>" />

<hr />

Expand Down
Loading

0 comments on commit 42fa43a

Please sign in to comment.