/** * 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; }