Permalink
Browse files

Created custom message box widget functions

  • Loading branch information...
1 parent 808e50b commit 7e0fad50f364b813b50cbb87f5adef18a50c5266 @Deconstrained committed Sep 10, 2012
View
@@ -20,6 +20,7 @@ Pre-release:
- Fixed subtle bug: event listener for hashchange was being called despite disabling it
- Improved documentation of Javascript functions
- Removed superfluous calls to removeLoadOverlay, tested to see that it still works
+- Added custom message box generation functions using jQuery UI widget factory, and used it to improve the DB test function display
##6/25/12
- Added to the installer: requirements checker
View
@@ -31,27 +31,19 @@ This aims to be a social writing/publishing and peer review web application. Cur
- Make a favicon. Store it in the root level of your theme folder.
- Create a "logo", 40x40 px, name it "logo.png", and put it in the root level of your theme's folder.
- Make a 100x100 image to serve as the rotating "loading" image. Call it 'loading.png' and put it in the root level of your theme's folder.
-9. Pick an overlay color (and transparency level) for the tint that appears over content while it's loading
-<code>
-div.loading-overlay
-{
- background-color: rgba(0, 0, 0, 0.1);
-}
-</code>
-You can also make the overlay contain a background image if you like:
-<code>
-div.loading-overlay
-{
- background: transparent url(images/hex-screen.png) repeat;
-}
-</code>
-10. Make a PHP file named "img_preload.php", and put it in the root level of your theme folder. It should return an array of filenames (relative to the theme's root) of images that you want pre-loaded (to avoid having to load them right when they're needed). Examples of when you'd need this would be for the loading or overlay image;
-<code>
-<?php
-return array('/loading.png','/css/images/overlay.png');
-?>
-</code>
-11. Protect the theme folder by copying the .htaccess file from another theme's folder into the root level of your theme's folder.
+9. Pick an overlay color (and transparency level) for the tint that appears over content while it's loading, with the following CSS:
+
+ <code>div.loading-overlay { background-color: rgba(0, 0, 0, 0.1); }</code>
+
+ You can also make the overlay contain a background image if you like, with the following CSS:
+
+ <code>div.loading-overlay { background: transparent url(images/hex-screen.png) repeat; } </code>
+
+10. Make a PHP file named "img_preload.php", and put it in the root level of your theme folder. It should return an array of filenames (relative to the theme's root) of images that you want pre-loaded (to avoid having to load them right when they're needed). Example: for the loading and overlay image;
+
+<code> <?php return array('/loading.png','/css/images/overlay.png'); ?></code>
+
+11. Protect the theme folder by copying the .htaccess file from another theme's folder into the root level of your theme's folder. It will then be safe to override view files by putting them in (yourtheme)/views/(controller ID)/(view name) (see: [Special topics: Theming](http://www.yiiframework.com/doc/guide/1.1/en/topics.theming#creating-a-theme)
Happy theming!
View
@@ -49,6 +49,32 @@ div.loading-overlay
height: 0px;
}
+.ui-custom-alert {
+ display: inline-block;
+ padding: 5px;
+}
+.ui-custom-alert .ui-icon.ui-custom-alert-icon {
+ display: inline-block;
+ margin-right: 0.5em;
+}
+.ui-custom-alert .ui-custom-elt {
+ display: inline-block;
+ vertical-align: middle;
+}
+.error.ui-custom-alert.ui-state-error .ui-custom-elt-text {
+ font-weight: bold;
+ margin:3px;
+}
+
+.ui-custom-alert .ui-custom-elt-text {
+ font-size: 14px;
+
+}
+.ui-custom-alert .ui-custom-elt > * {
+ vertical-align:center;
+ padding: 0;
+}
+
/* Overrides & resets of Foundation stuff */
a {color: blue;}
a:visited {color: purple;}
View
@@ -15,7 +15,7 @@ function isBlank(str) {
reqToScriptId = new RegExp('[;\/\?\+:@=#&]','g');
// Function for turning a unique request into a unique ID for scripts
-function makeScriptId(reqUrl) {
+function createScriptId(reqUrl) {
return reqUrl.replace(appBaseUrl,'').replace(reqToScriptId,'_')+'_';
}
@@ -178,6 +178,8 @@ function loadContent(url,elt,f,p,r) {
'url':reqUrl,
'success':function(d,t,j) {
loadOverlay.clear(loadOverCont);
+ console.log('in javascript, script id = '+'#'+createScriptId(reqUrl));
+ console.log($(d).find('#'+createScriptId(reqUrl)));
$(elt).html(d);
applyJsToContent(elt);
console.log('queue, post-abort:');
@@ -202,6 +204,81 @@ function loadContent(url,elt,f,p,r) {
}
}
+
+////////////////////////////////
+// UI functions and variables //
+////////////////////////////////
+
+// Widget for informational messages:
+$.widget( "custom.notice", {
+ // default options
+ options: {
+ // callbacks
+ dismiss: null
+ },
+ // the constructor
+ _create: function() {
+ var that = this;
+ var uiState = "ui-state-highlight";
+ var uiIcon = "ui-icon-info";
+ this.icon = $( "<div>", {
+ "class": "ui-icon ui-custom-alert-icon ui-custom-elt "+uiIcon
+ });
+ this.dismissButton = $("<div>", {
+ "class":"ui-state-default ui-corner-all, ui-custom-elt ui-custom-notice-dismiss"
+ }).append($("<div>",{
+ "class":"ui-icon ui-icon-close ui-custom-notice-elt"
+ })).button();
+ this.textWrapper = $('<div>', {
+ 'class':"ui-custom-elt ui-custom-elt-text"
+ }).html(that.element.html());
+ console.log(that.element.innerWidth()-(that.dismissButton.outerWidth()+that.icon.outerWidth()+10));
+ this.element.addClass( "ui-custom-alert ui-corner-all "+uiState).disableSelection().html('').append(that.icon).append(that.textWrapper).append(that.dismissButton);
+ this.textWrapper.css({
+ 'width':that.element.innerWidth()-(that.dismissButton.outerWidth()+that.icon.outerWidth()+30)+'px'
+ });
+
+ this.dismissButton.bind("click.ui-custom-notice", function(e){
+ that.element.fadeOut();
+ });
+ }
+});
+// Widget for error messages:
+$.widget( "custom.error", {
+ // default options
+ options: {
+ // callbacks
+ dismiss: null
+ },
+ // the constructor
+ _create: function() {
+ var that = this;
+ var uiState = "ui-state-error";
+ var uiIcon = "ui-icon-alert";
+ this.icon = $( "<div>", {
+ "class": "ui-icon ui-custom-alert-icon ui-custom-elt "+uiIcon
+ });
+ this.dismissButton = $("<div>", {
+ "class":"ui-state-default ui-corner-all, ui-custom-elt ui-custom-notice-dismiss"
+ }).append($("<div>",{
+ "class":"ui-icon ui-icon-close ui-custom-notice-elt"
+ })).button();
+ this.textWrapper = $('<div>', {
+ 'class':"ui-custom-elt ui-custom-elt-text"
+ }).html(that.element.html());
+ console.log(that.element.innerWidth()-(that.dismissButton.outerWidth()+that.icon.outerWidth()+10));
+ this.element.addClass( "ui-custom-alert ui-corner-all "+uiState).disableSelection().html('').append(that.icon).append(that.textWrapper).append(that.dismissButton);
+ this.textWrapper.css({
+ 'width':that.element.innerWidth()-(that.dismissButton.outerWidth()+that.icon.outerWidth()+30)+'px'
+ });
+
+ this.dismissButton.bind("click.ui-custom-notice", function(e){
+ that.element.fadeOut();
+ });
+ }
+});
+
+
// Function for applying jQuery UI styling and construction.
//
// EVERYTHING pertaining to the UI such that it can appear in the main
@@ -215,16 +292,17 @@ function loadContent(url,elt,f,p,r) {
//
// content (mixed): selector or DOM object inside which to apply jQuery
function applyJsToContent(content) {
+ console.log(content);
var c = $(content);
var f = function (sel) {
return c.find(sel);
};
// jQuery UI buttons:
f('.button').button();
+ f('.notice').notice();
+ f('.error').error();
}
-
-
// Javascript to be run when the DOM has fully loaded:
jQuery(document).ready(function ($) {
var fragment = $.param.fragment();
@@ -23,10 +23,6 @@ public function renderAsync() {
$allScripts .= "\n".$script;
return $allScripts;
}
-
- public function getScripts() {
- return $this->scripts;
- }
}
?>
@@ -31,11 +31,10 @@ class GController extends CController {
/**
* Creates a javascript-agnostic anchor name for permalinks.
*
- * @todo (If modules are ever used) generalize it for including modules in the route.
* @param string $name
*/
public function anchorName(string $name) {
- echo $this->id.'/'.$this->action->id.Gummii::URI_HASH_BOUNDARY.$name;
+ echo $this->route.Gummii::URI_HASH_BOUNDARY.$name;
}
/**
@@ -110,11 +109,9 @@ public function render($view, $data = null, $return = false) {
// Render content via AJAX
echo parent::renderPartial($view, $data, true, false);
// Globally unique identifying ID for route w/GET params:
- $scriptId = $this->createScriptId();
- $scripts = '<script id="' . $scriptId . '">' . "\n";
+ $scripts = '<script id="' . $this->createScriptId() . '">' . "\n";
$scripts .= $app->clientScript->renderAsync();
- $scripts .= "\n</script>";
- echo $scripts;
+ echo $scripts . "\n</script>";
$app->end();
} elseif (!($this->getAction()->id == $this->defaultAction && $this->id == $app->defaultController) || isset($_GET[$app->params->forceLoadKw]))
parent::render($view, $data, $return);
@@ -105,6 +105,7 @@ public function actionInstall() {
public function actionTestDbAjax() {
if (isset($_POST['Install'])) {
+// Yii::app()->clientScript->registerScript($this->createScriptId(), '',CClientScript::POS_END);
$model = new Install;
$model->attributes = $_POST['Install'];
$this->renderPartial('testDb', array('error' => $this->testDb($model)));
@@ -130,7 +131,7 @@ public function actionTestLoad() {
* @param type $dbName
* @param type $dbUser
* @param type $dbPass
- * @return \PDOException|boolean
+ * @return CDbException|boolean
*/
public function testDb(Install $model) {
try {
@@ -8,19 +8,22 @@
<h2>Website Info</h2>
<div>
<div style="display: inline-block;">
- <?php echo $form->labelEx($model, 'siteName');
+ <?php
+ echo $form->labelEx($model, 'siteName');
echo $form->textField($model, 'siteName');
?>
</div>
<div style="display: inline-block;">
- <?php echo $form->labelEx($model, 'mailerDaemonAddress');
+ <?php
+ echo $form->labelEx($model, 'mailerDaemonAddress');
echo $form->textField($model, 'mailerDaemonAddress');
?>
</div>
<div style="display: inline-block;">
-<?php echo $form->labelEx($model, 'timeZone');
-echo $form->textField($model, 'timeZone');
-?>
+ <?php
+ echo $form->labelEx($model, 'timeZone');
+ echo $form->textField($model, 'timeZone');
+ ?>
</div>
</div>
@@ -31,9 +34,10 @@
$isPass = is_int(strpos($attr, 'Pass'));
?>
<div style="display: inline-block;" id="<?php echo $attr; ?>">
- <?php echo $form->labelEx($model, $attr);
- echo $isPass ? $form->passwordField($model, $attr) : $form->textField($model, $attr);
- ?>
+ <?php
+ echo $form->labelEx($model, $attr);
+ echo $isPass ? $form->passwordField($model, $attr) : $form->textField($model, $attr);
+ ?>
</div>
<?php endforeach; ?>
</div>
@@ -42,32 +46,33 @@
<div class="row">
<?php foreach (array('dbHost', 'dbName', 'dbUser', 'dbPass') as $dbOpt): ?>
<div style="display: inline-block;" id="<?php echo $dbOpt; ?>">
- <?php echo $form->labelEx($model, $dbOpt);
- echo $dbOpt == 'dbPass' ? $form->passwordField($model, $dbOpt) : $form->textField($model, $dbOpt);
- ?>
+ <?php
+ echo $form->labelEx($model, $dbOpt);
+ echo $dbOpt == 'dbPass' ? $form->passwordField($model, $dbOpt) : $form->textField($model, $dbOpt);
+ ?>
</div>
-<?php endforeach; ?>
- </div>
- <div class="row">
+ <?php endforeach; ?>
+ <br />
<div style="display: inline-block;" id="dbTest">
-<?php echo CHtml::ajaxSubmitButton('Test connection', array('testDbAjax'), array('update' => '#dbTestOutput'), array('class' => 'button')); ?>
+ <?php echo CHtml::ajaxSubmitButton('Test connection', array('testDbAjax'), array('update' => '#dbTestOutput', 'complete' => 'function(){applyJsToContent("#dbTestOutput");}'), array('style'=>'margin-bottom:10px;','class' => 'button', 'id' => $this->createScriptId() . '-testDb')); ?>
</div>
<div style="display: inline-block;" id="dbTestOutput"><?php echo $form->error($model, 'dbError'); ?></div>
+
</div>
-
+
<h2>Testing &amp; debugging</h2>
<div class="row">
<div style="display: inline-block; margin-right: 50px;">
<?php echo $form->labelEx($model, 'YII_DEBUG'); ?>
-<?php echo $form->checkBox($model, 'YII_DEBUG'); ?>
+ <?php echo $form->checkBox($model, 'YII_DEBUG'); ?>
</div>
<div style="display: inline-block;">
- <?php echo $form->labelEx($model, 'dummyData'); ?>
-<?php echo $form->checkBox($model, 'dummyData'); ?>
+ <?php echo $form->labelEx($model, 'dummyData'); ?>
+ <?php echo $form->checkBox($model, 'dummyData'); ?>
</div>
</div>
-<?php echo CHtml::ajaxSubmitButton('Install', array(''), array('update' => '#installMessages'), array('class' => 'button')); ?>
-<?php $this->endWidget(); ?>
+ <?php echo CHtml::ajaxSubmitButton('Install', array(''), array('update' => '#installMessages'), array('class' => 'button')); ?>
+ <?php $this->endWidget(); ?>
</div>
</div><!-- #install-form -->
@@ -1,6 +1,5 @@
-<?php if($error):?>
-<div class="errorMessage"><?php echo $error->getMessage(); ?></div>
+<?php if ($error): ?>
+ <div class="error"><?php echo $error->getMessage(); ?></div>
<?php else: ?>
-<div style="color:green">Connection successful!</div>
+ <div class="notice">Connection successful!</div>
<?php endif; ?>
-
@@ -29,6 +29,10 @@
<p>Hash algo: <?php echo Yii::app()->hashAlgo; ?></p>
<p><?php echo Yii::app()->getBaseUrl(True);?></p>
+<div class="notice">Hi, I'm a notice.</div>
+<div class="error">Shit's on fire, yo. I be an error.</div>
+
+<?php $this->widget('zii.widgets.jui.CJuiButton',array('name'=>'IamajQuerybutton','caption'=>'Iama jQuery button')); ?>
<p>You may change the content of this page by modifying the following two files:</p>
<ul>

0 comments on commit 7e0fad5

Please sign in to comment.