Plato on Github
Report Home
space/_create_folder_overlay.js
Maintainability
55.27
Lines of code
357
Difficulty
42.90
Estimated Errors
3.61
Function weight
By Complexity
By SLOC
/*global Y, window, document, YUI */ /** * ~/miiicasa/static/space/_create_folder_overlay.js * <p>Overlay version for create folder function</p> * * <p>Show create folder form for user to input folder name and folder * description</p> * * <ul> * <li>Spec: http://produce.corp.miiicasa.com/Revised_Space/Page_2-86._Add_Photos_-_Create_Album_-_storage_full.html</li> * <li>Mockup: http://produce.corp.miiicasa.com/UED/miiicasa/mockup/2_84_Create-Album.png</li> * </ul> * * @author Hunter Wu * @module space * @submodule _create_folder_overlay */ YUI.add("space/_create_folder_overlay", function (Y) { var _api, _node, _afterCreate, // hoding the callback function _featureSupport, // holding flags those feature support or not, true is for support _lang = {}, // L10N language strings _needUpdate = false, // if the free_space is not ready (-1), this flag will be true for further update //=========================== // Shortcut //=========================== util, Lang, MIIICASA = window.MIIICASA || {}, //=========================== // Constants //=========================== CONST, MODULE_ID = "#create-folder-overlay", STORAGE_ID_PREFIX = "create_folder_storage_", //=========================== // Private Events //=========================== _closeHandler, _createHandler, _folderDescCheckHandler, _folderNameCheckHandler, _preventEnterSubmitHandler, //=========================== // Private Methods //=========================== _initUI, _show, MODULE_FUNC, //=========================== // Public Methods //=========================== init, onviewload, onmessage; //=========================== // Private Events //=========================== _closeHandler = function () { _node.all("p.warn-msg").setStyle("visibility", "hidden"); _needUpdate = false; }; _createHandler = function (e) { _api.log("_createHandler() is executed."); var cantCreated = e.currentTarget.hasClass("miii-button-disabled"), desc, folderName, formElements = document.forms["create-folder-overlay-form"].elements, storageIndex, storageName, storageNode, folderNameWarnNode = _node.one("p.folder-name-msg"), descriptionWarnNode = _node.one("p.description-msg"); // this is for IE only! if (cantCreated) { return; } folderName = Lang.trim(formElements.folder_name.value); if (folderName === "") { folderNameWarnNode.setStyle("visibility", "visible"); folderNameWarnNode.one(".text").set("innerHTML", _lang.folderNameEmpty); formElements.folder_name.focus(); return; } else if (folderName.indexOf(".") === 0) { folderNameWarnNode.setStyle("visibility", "visible"); folderNameWarnNode.one(".text").set("innerHTML", _lang.folderNameBegins); formElements.folder_name.focus(); return; } else if (!util.validateFilename(folderName)) { folderNameWarnNode.setStyle("visibility", "visible"); folderNameWarnNode.one(".text").set("innerHTML", _lang.folderNameIllegal); formElements.folder_name.focus(); return; } else if (folderName.length > 70) { folderNameWarnNode.setStyle("visibility", "visible"); folderNameWarnNode.one(".text").set("innerHTML", _lang.folderNameTooLong); formElements.folder_name.focus(); return; } folderNameWarnNode.setStyle("visibility", "hidden"); desc = Lang.trim(formElements.description.value); if (desc.length > 300) { descriptionWarnNode.setStyle("visibility", "visible"); descriptionWarnNode.one(".text").set("innerHTML", _lang.descTooLong); formElements.description.focus(); return; } if (Lang.isFunction(_afterCreate)) { storageNode = _node.one("input:checked"); storageIndex = storageNode.get("id").replace(STORAGE_ID_PREFIX, ""); _afterCreate(storageIndex, folderName, desc); } e.halt(); }; /** * Check folder desc on change * @event _folderDescCheckHandler * @private */ _folderDescCheckHandler = function (e) { var val = Lang.trim(e.currentTarget.get("value")), warnNode = _node.one("p.description-msg"); if (val.length > 300) { warnNode.setStyle("visibility", "visible"); warnNode.one(".text").set("innerHTML", _lang.descTooLong); return; } warnNode.setStyle("visibility", "hidden"); }; /** * Check folder name on blur * @event _folderNameCheckHandler * @private */ _folderNameCheckHandler = function (e) { var val = Y.String.trim(e.currentTarget.get("value")).replace(/[.\s]+$/, ""), //remove tailing spaces and dots warnNode = _node.one("p.folder-name-msg"); e.currentTarget.set("value", val); if (val === "") { warnNode.setStyle("visibility", "visible"); warnNode.one(".text").set("innerHTML", _lang.folderNameEmpty); return; } else if (val.indexOf(".") === 0) { warnNode.setStyle("visibility", "visible"); warnNode.one(".text").set("innerHTML", _lang.folderNameBegins); return; } else if (!util.validateFilename(val)) { warnNode.setStyle("visibility", "visible"); warnNode.one(".text").set("innerHTML", _lang.folderNameIllegal); return; } else if (val.length > 70) { warnNode.setStyle("visibility", "visible"); warnNode.one(".text").set("innerHTML", _lang.folderNameTooLong); return; } warnNode.setStyle("visibility", "hidden"); }; _preventEnterSubmitHandler = function (e) { if (e.keyCode === 13) { e.preventDefault(); } }; //=========================== // Private Methods //=========================== _show = function (storages, callback) { _api.log("_show(storages, callback) is executed."); _afterCreate = callback; var canCreate = false, checkFirst = false, formNode = document.forms["create-folder-overlay-form"], storageCount = storages.length, storageLabelNode = _node.one(".storage-labels"), warnNode = _node.one("p.folder-name-msg"); formNode.elements.folder_name.value = ""; formNode.elements.description.value = ""; warnNode.setStyle("visibility", "hidden"); storageLabelNode.get("children").remove(true); Y.each(storages, function (storage, i) { var freeSpace, freespaceWarn, html, storageIndex = storage.storageIndex || 0; if (!_needUpdate && storage.free_space === -1) { _needUpdate = true; } freespaceWarn = (storage.free_space < CONST.ONE_MB); freeSpace = Y.substitute(_lang.freeSpace, { freeSpace : util.formatDiskSpace(storage.free_space) }); html = Y.substitute(MIIICASA.tpls.storageLabel, { storageId : STORAGE_ID_PREFIX + storageIndex, storageName : storage.name, showName : util.substr(storage.name, 22, "..."), statusClass : (freespaceWarn ? "warn" : "status"), freeSpace : (freespaceWarn ? (storage.free_space === -1 ? "" : _lang.lessThanOneMB) : freeSpace) //later render freeSpace when photo sub page }); html = Y.Node.create(html); if (storageCount === 1) { html.one("input").set("checked", "checked").setStyle("display", "none"); } else if (freespaceWarn) { html.one("input").set("disabled", "disabled"); html.one("label").addClass("radio-label-disabled"); } else if (!checkFirst) { html.one("input").set("checked", "checked"); checkFirst = true; } storageLabelNode.insert(html); if (!freespaceWarn) { canCreate = true; } }); _api.show(); _node.one("input[name=folder_name]").focus(); if (!canCreate) { util.disableMiiiButton(_node.one(".do-create-button")); formNode.elements.folder_name.disabled = "disabled"; formNode.elements.description.disabled = "disabled"; } else { util.enableMiiiButton(_node.one(".do-create-button")); formNode.elements.folder_name.disabled = ""; formNode.elements.description.disabled = _featureSupport.upload ? "" : "disabled"; formNode.elements.folder_name.focus(); } }; _initUI = function () { // create overlay _api.on("visibleChange", _closeHandler); _node.one(".do-create-button").on("click", _createHandler); _node.one("input.folder-name").on("blur", _folderNameCheckHandler); _node.one("input.folder-name").on("keypress", _preventEnterSubmitHandler); _node.one("textarea.folder-desc").on("change", _folderDescCheckHandler); }; //=========================== // Public Methods //=========================== /* * Module initialization * @event init * @param api {Y.Sandbox} Module API * @public * @return void */ init = function (sandbox) { _api = sandbox; _api.log("init() is executed"); _api.listen("show-create-folder"); _api.listen("show-create-folder-update-ui"); _api.listen("show-create-folder-errmsg"); _lang = { descTooLong : _api.getTrans("desc_too_long", "The description is too long."), folderNameBegins : _api.getTrans("folder_name_begins_with_dot", "The {album} name can't begin with the \".\" character."), folderNameEmpty : _api.getTrans("folder_name_empty", "Please enter the {album} name."), folderNameIllegal : _api.getTrans("folder_name_illegal", "These characters can not be used in {album} names: : \\ / : * ? \" < > |"), folderNameTooLong : _api.getTrans("folder_name_too_long", "The {album} name is too long."), freeSpace : _api.getTrans("free_space", "{freeSpace} Free"), lessThanOneMB : _api.getTrans("less_than_1mb", "less than 1MB Free") }; _api.broadcast("get-device-message", { callback : function (msg) { var phrases = msg.phrases, albumReplacement = { album : phrases.folder }; _lang.deviceMessage = msg; _lang.folderNameBegins = Y.substitute(_lang.folderNameBegins, albumReplacement); _lang.folderNameEmpty = Y.substitute(_lang.folderNameEmpty, albumReplacement); _lang.folderNameIllegal = Y.substitute(_lang.folderNameIllegal, albumReplacement); _lang.folderNameTooLong = Y.substitute(_lang.folderNameTooLong, albumReplacement); } }); }; /* * Module content ready * @event onviewload * @public * @return void */ onviewload = function () { _api.log("onviewload() is executed"); _node = _api.getViewNode(); util = Y.MiiiCasa.util; Lang = Y.Lang; CONST = Y.MiiiCasa.CONST; _featureSupport = util.featureDetect(); _initUI(); }; /* * Module message receive * @event onmessage * @public * @return void */ onmessage = function (e) { _api.log("onmessage() " + e.name); switch (e.name) { case "show-create-folder": _show(e.data.storages, e.data.callback); break; case "show-create-folder-update-ui": if (_needUpdate) { _show(e.data.storages, e.data.callback); } break; case "show-create-folder-errmsg": var formNode = document.forms["create-folder-overlay-form"], warnNode = _node.one("p.folder-name-msg"); formNode.elements.folder_name.focus(); warnNode.setStyle("visibility", "visible"); if (!Lang.isUndefined(_lang.deviceMessage[e.data.errno])) { warnNode.one(".text").set("innerHTML", _lang.deviceMessage[e.data.errno]); } else { warnNode.one(".text").set("innerHTML", _lang.deviceMessage["5001"]); } break; } }; _api = new Y.Module({ selector : MODULE_ID, langModule : "space", popuped: true, init : init, on : { viewload: onviewload, message : onmessage } }); }, "0.0.1", { "group" : "space", "js" : "space/_create_folder_overlay.js", "css" : "space/_create_folder_overlay.css", "requires": [ "module", "module-intl", "module-popup", "space", "overlay", "substitute", "node-base", "node-style", "selector-css3", "event-base", "space/_device_message", "yui-string" ] });