/**
* Smarty plugin to include Javascript code that depends on YUI stuff.
*
* Smarty Params:
* require - A comma-separated list of required YUI components for the script block.
*
* @param array The params from smarty tag.
* @param string The javascript code.
* @param object WFSmarty object of the current tpl.
* @return string The rendered HTML.
*/
function smarty_block_YUIScript($params, $content, &$smarty, &$repeat)
{
// beginning or end block?
if (isset($content)) {
if (!isset($params['require'])) {
throw new WFException("YUIScript requires a 'require' parameter.");
}
$loader = WFYAHOO_yuiloader::sharedYuiLoader();
$loader->yuiRequire($params['require']);
$callback = '
function() {
' . $content . '}';
print $loader->jsLoaderCode($callback);
}
}
function render($blockContent = NULL)
{
if (!$this->paginator instanceof WFPaginator) {
throw new WFException("No paginator assigned to WFPaginatorState " . $this->id);
}
if ($this->paginator->mode() == WFPaginator::MODE_FORM) {
//$this->importJS(self::yuiPath() . "/yahoo-dom-event/yahoo-dom-event.js", 'YAHOO');
}
$html = parent::render($blockContent);
// When restoring the value, only put back the SORT KEYS and PAGE SIZE; the page num should be RESET.
$button = '<input type="hidden" id="' . $this->id . '" name="' . $this->name . '" value="' . $this->paginator->paginatorState() . '" />';
$js = NULL;
if ($this->paginator->mode() == WFPaginator::MODE_FORM) {
// js function to set paginator to go to first page when the MODE_FORM submit button is pressed.
$paginatorResetJSFunctionName = "__WFPaginatorState_gotoFirstPage_{$this->id}";
// do not go to first page if the submit button was pressed by paginator MODE_FORM
$paginatorModeFormSubmissionVarName = $this->paginator->jsPaginatorStateModeFormSubmissionVarName();
$js = $this->jsStartHTML() . '
var ' . $paginatorModeFormSubmissionVarName . ' = false;
function ' . $this->paginator->jsPaginatorStateModeFormGoToStateFunctionName() . '(state)
{
' . $this->paginator->jsPaginatorStateModeFormSubmissionVarName() . ' = true;
document.getElementById("' . $this->id . '").value = state;
document.getElementById("' . $this->paginator->submitID() . '").click();
}
function ' . $paginatorResetJSFunctionName . '()
{
if (' . $paginatorModeFormSubmissionVarName . ' == true) return;
var submitID = \'' . $this->paginator->submitID() . '\';
document.getElementById("' . $this->paginator->paginatorStateParameterID() . '").value = "' . $this->paginator->paginatorState(WFPaginator::PAGINATOR_FIRST_PAGE) . '";
}';
$loader = WFYAHOO_yuiloader::sharedYuiLoader();
$loader->yuiRequire('event');
$callback = 'function() { YAHOO.util.Event.addListener("' . $this->paginator->submitID() . '", "click", ' . $paginatorResetJSFunctionName . '); }';
$js .= $loader->jsLoaderCode($callback);
$js .= $this->jsEndHTML();
}
return $html . $js . $button;
}
function render($blockContent = NULL)
{
$loader = WFYAHOO_yuiloader::sharedYuiLoader();
// jquery
$loader->addModule('jquery', 'js', NULL, 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js', NULL, NULL, NULL, NULL);
// jquery-ui
$loader->addModule('jqueryui-css', 'css', NULL, 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css', NULL, NULL, NULL, NULL);
$loader->addModule('jqueryui', 'js', NULL, 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js', array('jquery', 'jqueryui-css'), NULL, NULL, NULL);
// query-file-uploader
$loader->addModule('jquery-file-uploader', 'js', NULL, $this->getWidgetWWWDir() . '/jquery.fileupload.js', array('jquery'), NULL, NULL, NULL);
// and the UI
$loader->addModule('jquery-file-uploader-ui-css', 'css', NULL, $this->getWidgetWWWDir() . '/jquery.fileupload-ui.css', NULL, NULL, array('jqueryui-css'), NULL);
$loader->addModule('jquery-file-uploader-ui', 'js', NULL, $this->getWidgetWWWDir() . '/jquery.fileupload-ui.js', array('jquery-file-uploader', 'jqueryui', 'jquery-file-uploader-ui-css'), NULL, NULL, NULL);
$loader->yuiRequire('jquery-file-uploader-ui');
// @todo In future this should not need to be a WFForm subclass; should be able to drop it in a form anywhere.
//$form = $this->getForm();
//if (!$form) throw new WFException("WFHTML5_Uploader must be a child of a WFForm.");
$form = $this;
// craft a WFRPC that we can insert into the form stream to have our callback fire
$rpc = WFRPC::RPC()->setInvocationPath($this->page->module()->invocation()->invocationPath())->setTarget('#page#' . $this->id)->setAction('_handleAsyncSingleUpload')->setForm($this)->setIsAjax(true);
$uploadFormData = json_encode($rpc->rpcAsParameters($this));
// figure out vars for drop-in into HTML block
$sequentialUploads = var_export($this->maxConcurrentUploads == 1, true);
$autoupload = var_export($this->autoupload, true);
$fileInputName = "{$this->getInputFileName()}[]";
// HTML
$formInnardsHTML = <<<END
{$blockContent}
<input type="file" name="{$fileInputName}" multiple>
<button type="submit" name="action|{$this->id}">Upload</button>
<div class="file_upload_label">Click or Drop to Upload</div>
END;
$html = parent::render($formInnardsHTML);
$maxUploadBytesJSON = WFJSON::encode($this->maxUploadBytes);
// progress indicators after form since the blueimp plugin takes over the entire form area for drag-n-drop
$html .= <<<END
<div id="{$this->id}_progressAll" style="display: none;"></div>
<table id="{$this->id}_table" style="display: none;"></table>
END;
$withJqueryJS = <<<END
function() {
jQuery.noConflict();
jQuery(function () {
window.uploader = jQuery('#{$form->id()}').fileUploadUI({
formData: {$uploadFormData},
sequentialUploads: {$sequentialUploads},
beforeSend: function (event, files, index, xhr, handler, callBack) {
document.fire ('WFHTML5_Uploader:uploadStart');
jQuery('#{$this->id}_table, #{$this->id}_progressAll').show();
var fileSize = files[index].fileSize ? files[index].fileSize : files[index].size // Firefox calls it file.size instead of file.fileSize
if ({$maxUploadBytesJSON} && fileSize > {$maxUploadBytesJSON})
{
var json = {
'name': files[index].name,
'description': ('File exceeds maximum file size of ' + {$maxUploadBytesJSON} + ' bytes.'),
'uploadOK': false
};
handler.downloadRow = handler.buildDownloadRow(json, handler);
handler.replaceNode(handler.uploadRow, handler.downloadRow, null);
return;
}
if ({$autoupload})
{
callBack();
}
},
progressAllNode: jQuery('#{$this->id}_progressAll'),
uploadTable: jQuery('#{$this->id}_table'),
onCompleteAll: function() {
var autoRedirectToUrlOnCompleteAll = '{$this->autoRedirectToUrlOnCompleteAll}';
if (autoRedirectToUrlOnCompleteAll)
{
document.fire ('WFHTML5_Uploader:uploadAllComplete');
window.location.href = autoRedirectToUrlOnCompleteAll;
}
},
buildUploadRow: function (files, index) {
return jQuery('<tr>' +
'<td width="175">' + files[index].name + '<\\/td>' +
'<td width="1"> <\\/td>' +
'<td width="250"> <\\/td>' +
'<td width="16" class="file_upload_cancel">' +
'<button class="ui-state-default ui-corner-all" title="Cancel">' +
'<span class="ui-icon ui-icon-cancel">Cancel<\\/span>' +
'<\\/button><\\/td>' +
'<td class="file_upload_progress" style="width: 160px"><div><\\/div><\\/td>' +
'<\\/tr>');
},
buildDownloadRow: function (file, handler) {
var thumbHTML = ' ';
if (file.thumb)
{
thumbHTML = '<img s'+'rc="'+file.thumb+'" style="float: right;"/>';
}
return jQuery('<tr>' +
'<td width="175">' + file.name + '<\\/td>' +
'<td width="' + (thumbHTML ? 100 : 1) + '">' + thumbHTML + '<\\/td>' +
'<td width="250">' + file.description + '<\\/td>' +
'<td width="16"><span class="ui-icon ' + (file.uploadOK ? 'ui-icon-check' : 'ui-icon-alert') + '"><\\/span><\\/td>' +
'<td><\\/td>' +
'<\\/tr>');
}
});
});
}
END;
$bootstrapJS = $loader->jsLoaderCode($withJqueryJS);
$html .= <<<END
<script>
{$bootstrapJS}
</script>
END;
return $html;
}
public function yuiloader()
{
return WFYAHOO_yuiloader::sharedYuiLoader();
}
public static function yuiPath()
{
return WFYAHOO_yuiloader::sharedYuiLoader()->base();
}
function initJS($blockContent)
{
// craft a WFRPC that we can insert into the form stream to have our callback fire
$rpc = WFRPC::RPC()->setInvocationPath($this->page->module()->invocation()->invocationPath())->setTarget('#page#' . $this->id)->setAction('handleUploadedFile')->setForm($this->getForm())->setRunsIfInvalid(true)->setIsAjax(true);
$html = "\n PHOCOA.widgets.{$this->id}.status = { 'READY': 0, 'UPLOADING': 1, 'COMPLETE': 2};\n PHOCOA.widgets.{$this->id}.summaryStatus = PHOCOA.widgets.{$this->id}.status.READY;\n PHOCOA.widgets.{$this->id}.emptyFileListDisplay = function() {\n PHOCOA.widgets.{$this->id}.filesToUploadTracker = {};\n PHOCOA.widgets.{$this->id}.filesToUploadTotalBytes = 0;\n \$('{$this->id}_fileList').update('').hide();\n };\n PHOCOA.widgets.{$this->id}.makePrettySize = function(sz, decimals) {\n if (typeof decimals === 'undefined')\n {\n decimals = 2;\n }\n var suffixes = ['Bytes','KB','MB','GB','TB'];\n var i = 0;\n\n while (sz >= 1024 && (i < suffixes.length - 1)){\n sz /= 1024;\n i++;\n }\n return Math.round(sz*Math.pow(10,decimals))/Math.pow(10,decimals) + ' ' + suffixes[i];\n };\n PHOCOA.widgets.{$this->id}.init = function() {\n PHOCOA.widgets.{$this->id}.emptyFileListDisplay(); // initialize\n\n YAHOO.util.Event.onDOMReady(function () { \n var uiLayer = YAHOO.util.Dom.getRegion('{$this->id}_browseTrigger');\n var overlay = YAHOO.util.Dom.get('{$this->id}');\n YAHOO.util.Dom.setStyle(overlay, 'width', uiLayer.width + 'px');\n YAHOO.util.Dom.setStyle(overlay, 'height', uiLayer.height + 'px');\n });\n\n YAHOO.widget.Uploader.SWFURL = '" . WFYAHOO_yuiloader::sharedYuiLoader()->localYUI() . "uploader/assets/uploader.swf'; \n var uploader = new YAHOO.widget.Uploader('{$this->id}');\n PHOCOA.runtime.addObject(uploader, '{$this->id}');\n\n // can't customize until the SWF is ready\n uploader.addListener('contentReady', function() {\n uploader.setAllowMultipleFiles(" . ($this->allowMultiple ? 'true' : 'false') . ");\n uploader.setSimUploadLimit(1);\n });\n\n \$('{$this->id}_uploadTrigger').observe('click', function() {\n PHOCOA.runtime.getObject('{$this->id}').uploadAll('" . $rpc->url() . "', 'POST', " . WFJSON::encode($rpc->rpcAsParameters()) . ", '{$this->id}');\n });\n\n uploader.addListener('fileSelect', function(e) {\n // fileSelect sends ALL files tracked by flash, not just the ones added in the most recent file select dialog\n PHOCOA.widgets.{$this->id}.emptyFileListDisplay();\n \$('{$this->id}_fileList').show();\n\n var files = \$H(e.fileList).values();\n\n files.pluck('id').each(function(o) {\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[o] = {\n id: e.fileList[o].id,\n name: e.fileList[o].name,\n size: e.fileList[o].size,\n sizeProgress: 0,\n status: PHOCOA.widgets.{$this->id}.status.READY,\n error: false,\n resultMessage: null\n };\n });\n ";
if ($this->maxUploadBytes !== NULL) {
$html .= "\n var tooBig = [];\n var justRight = {};\n \$H(PHOCOA.widgets.{$this->id}.filesToUploadTracker).values().each(function(o) {\n if (o.size > {$this->maxUploadBytes})\n {\n PHOCOA.runtime.getObject('{$this->id}').removeFile(o.id);\n tooBig.push(o);\n }\n else\n {\n justRight[o.id] = o;\n }\n });\n PHOCOA.widgets.{$this->id}.filesToUploadTracker = justRight;\n if (tooBig.length)\n {\n alert('The following files will be skipped because they are more than ' + PHOCOA.widgets.{$this->id}.makePrettySize({$this->maxUploadBytes}) + \":\\n- \" + tooBig.pluck('name').join(\"\\n- \"));\n }\n ";
}
$html .= "\n \$H(PHOCOA.widgets.{$this->id}.filesToUploadTracker).values().pluck('size').each(function(o) {\n PHOCOA.widgets.{$this->id}.filesToUploadTotalBytes += o;\n });\n PHOCOA.widgets.{$this->id}.updateProgress();\n });\n uploader.addListener('uploadStart', function(e) {\n PHOCOA.widgets.{$this->id}.summaryStatus = PHOCOA.widgets.{$this->id}.status.UPLOADING;\n PHOCOA.widgets.{$this->id}.updateProgress();\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].status = PHOCOA.widgets.{$this->id}.status.UPLOADING;\n });\n uploader.addListener('uploadProgress', function(e) {\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].sizeProgress = e.bytesLoaded;\n PHOCOA.widgets.{$this->id}.updateProgress();\n });\n uploader.addListener('uploadError', function(e) {\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].error = true;\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].resultMessage = e.status;\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].status = PHOCOA.widgets.{$this->id}.status.COMPLETE;\n PHOCOA.widgets.{$this->id}.updateProgress();\n });\n uploader.addListener('uploadComplete', function(e) {\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].sizeProgress = PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].size;\n PHOCOA.widgets.{$this->id}.filesToUploadTracker[e.id].status = PHOCOA.widgets.{$this->id}.status.COMPLETE;\n PHOCOA.widgets.{$this->id}.updateProgress();\n\n // are we done with ALL uploads?\n if (\$H(PHOCOA.widgets.{$this->id}.filesToUploadTracker).values().all(function(o) { return o.sizeProgress === o.size; }))\n {\n PHOCOA.widgets.{$this->id}.summaryStatus = PHOCOA.widgets.{$this->id}.status.COMPLETE;\n \$('{$this->id}_progress').update('Upload complete.');\n PHOCOA.runtime.getObject('{$this->id}').clearFileList(); // remove files from flash\n //PHOCOA.widgets.{$this->id}.emptyFileListDisplay();\n document.fire('WFYAHOO_widget_Uploader:allUploadsComplete', { uploadId: '{$this->id}' });\n if (" . WFJSON::encode(!empty($this->continueURL)) . ")\n {\n window.location = '{$this->continueURL}';\n }\n }\n });\n };\n PHOCOA.widgets.{$this->id}.updateProgress = function() {\n // update summary progress bar\n var allFilesToUpload = \$H(PHOCOA.widgets.{$this->id}.filesToUploadTracker).values();\n\n if (allFilesToUpload.any(function(o) { return o.status !== PHOCOA.widgets.{$this->id}.status.READY; }))\n {\n var uploadProgressBytes = 0;\n allFilesToUpload.pluck('sizeProgress').each( function(o) {\n uploadProgressBytes += o;\n });\n var msg = 'Upload progress: ' + Math.round(uploadProgressBytes*100 / PHOCOA.widgets.{$this->id}.filesToUploadTotalBytes) + '%';\n \$('{$this->id}_progress').update(msg);\n }\n\n // Update per-file progress\n // Sort by amount of upload left, descending. makes it easy to spot what's left and problems.\n allFilesToUpload.sort( function(a,b) { return a.size - a.sizeProgress < b.size - b.sizeProgress } );\n \$('{$this->id}_fileList').update('<strong>' + allFilesToUpload.length + ' file(s) selected:</strong><table><tr><th>Name</th><th nowrap>Size</th><th nowrap>Status</th></tr>' + allFilesToUpload.collect(function(o) { \n var msg = '<tr>';\n msg += '<td>' + o.name + '</td>';\n msg += '<td>' + PHOCOA.widgets.{$this->id}.makePrettySize(o.size) + '</td>';\n msg += '<td>';\n switch (o.status) {\n case PHOCOA.widgets.{$this->id}.status.READY:\n break;\n case PHOCOA.widgets.{$this->id}.status.UPLOADING:\n var pct = Math.round(100 * o.sizeProgress / o.size);\n msg += ' progress: ' + pct + '%';\n break;\n case PHOCOA.widgets.{$this->id}.status.COMPLETE:\n if (o.error)\n {\n msg += ' Error uploading: ' + o.resultMessage;\n }\n else\n {\n msg += ' Uploaded.';\n }\n break;\n }\n msg += '</td>';\n msg += '</tr>';\n return msg;\n }).join('') + '</table>');\n };\n ";
return $html;
}
