diff --git a/public/css/common/common.css b/public/css/common/common.css new file mode 100644 index 0000000..e007f8a --- /dev/null +++ b/public/css/common/common.css @@ -0,0 +1,44 @@ +body { + font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif; +} + +input.extensionActionButton { + color: white; + font-weight: bold; + cursor: pointer; + text-align: center; + border: 1px solid white; + line-height: 1.5; + display: block; + text-transform: uppercase; + -moz-border-radius: 3px; + -webkit-border-radius: 3px; + -khtml-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: black 0 0 3px; + box-shadow: black 0 0 3px; + -moz-box-shadow: 0px 0px 3px black; + font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif; +} + +input.extensionActionButton:hover { + -webkit-box-shadow: black 0 0 6px; + box-shadow: black 0 0 6px; + -moz-box-shadow: 0px 0px 6px black; +} + +input.extensionDownloadButton, input.extensionInstallButton { + background-color: #2277aa; +} + +input.extensionDownloadButton:hover, input.extensionInstallButton:hover { + background-color: #00aaaa; +} + +input.extensionUninstallButton { + background-color: #007f09; +} + +input.extensionUninstallButton:hover { + background-color: #6eb04b; +} diff --git a/public/css/extension/extension.view.css b/public/css/extension/extension.view.css index dcfa6d6..f2cca4e 100644 --- a/public/css/extension/extension.view.css +++ b/public/css/extension/extension.view.css @@ -1,6 +1,3 @@ -body { - font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif; -} div.viewWrapper { padding-right: 25px !important; @@ -52,7 +49,7 @@ div.viewWrapper { } .category { - + } .left_column { @@ -78,7 +75,7 @@ div.viewWrapper { margin-left: 25px; } -.download_button { +.extensionActionButtonWrapper { margin-bottom: 15px; margin-left: 15px; } @@ -145,36 +142,19 @@ div.viewWrapper { border: 1px solid #ddd8d8; } -#downloadButton { +input.extensionActionButton { width: 127px; - color: white; font-size: 15px; - background-color: #2277aa; - font-weight: bold; - cursor: pointer; - text-align: center; - border: 1px solid white; margin-left: 11px; margin-top: 5px; - line-height: 1.5; - display: block; - text-transform: uppercase; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: black 0 0 3px; - box-shadow: black 0 0 3px; - -moz-box-shadow: 0px 0px 3px black; - font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif; -} - -#downloadButton:hover { + } +/* +#extensionActionButton:hover { background-color: #00aaaa; -webkit-box-shadow: black 0 0 7px; box-shadow: black 0 0 7px; -moz-box-shadow: 0px 0px 7px black; -} +}*/ /* Breadcrumbs */ .category { diff --git a/public/css/index/index.index.css b/public/css/index/index.index.css index 8de4e99..f0fd2ae 100644 --- a/public/css/index/index.index.css +++ b/public/css/index/index.index.css @@ -1,6 +1,3 @@ -body { - font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif; -} div.viewWrapper { width: 100% !important; @@ -107,37 +104,13 @@ span.subtitle { font-size: 12px; } -input.downloadButton { +input.extensionActionButton { width: 130px; - color: white; font-size: 13px; - background-color: #2277aa; - font-weight: bold; - cursor: pointer; - text-align: center; - border: 1px solid white; margin-top: 5px; - line-height: 1.5; margin-left: auto; margin-right: auto; - display: block; - text-transform: uppercase; - -moz-border-radius: 3px; - -webkit-border-radius: 3px; - -khtml-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: black 0 0 3px; - box-shadow: black 0 0 3px; - -moz-box-shadow: 0px 0px 3px black; - font-family: 'Lucida Grande', 'Lucida Sans Unicode', helvetica, arial, Verdana, sans-serif; -} - -input.downloadButton:hover { - background-color: #00aaaa; - -webkit-box-shadow: black 0 0 6px; - box-shadow: black 0 0 6px; - -moz-box-shadow: 0px 0px 6px black; -} + } .extensionRatings { height: 20px; @@ -168,7 +141,7 @@ ul.categoriesList li,ul.categoriesSubList li { } ul.categoriesList li:hover,ul.categoriesSubList li:hover { - + color: #222222; } diff --git a/public/js/common/common.js b/public/js/common/common.js new file mode 100644 index 0000000..f1ba069 --- /dev/null +++ b/public/js/common/common.js @@ -0,0 +1,50 @@ +var midas = midas || {}; +midas.slicerappstore = midas.slicerappstore || {}; + +/** + * Called when a user clicks the extension button (download, install or uninstall) + */ +midas.slicerappstore.extensionButtonClick = function() { + var extensionId = $(this).attr('element'); + if(!window.extensions_manager_model || $(this).hasClass('extensionDownloadButton')) { + var url = json.global.webroot+'/slicerappstore/index/downloadextension?extensionId='+extensionId; + window.location.assign(url); + } else if($(this).hasClass('extensionInstallButton')) { + window.extensions_manager_model.downloadAndInstallExtension(extensionId); + } else if($(this).hasClass('extensionUninstallButton')) { + window.extensions_manager_model.uninstallExtension($(this).attr('extensionname')); + } +} + +/** + * Update extension button state considering 'window.extensions_manager_model' + * @param extensionName Name of the extension associated with the button to update + */ +midas.slicerappstore.updateExtensionButtonState = function(extensionName) { + if(!window.extensions_manager_model) { + midas.slicerappstore.setExtensionButtonState(extensionName, 'download'); + } else { + var buttonState = 'install'; + if(window.extensions_manager_model.isExtensionInstalled(extensionName)) { + buttonState = 'uninstall'; + } + midas.slicerappstore.setExtensionButtonState(extensionName, buttonState); + } +} + +/** + * Set extension button state + * @param extensionName Name of the extension associated with the button to update + * @param buttonState Either 'download', 'install' or 'uninstall' + */ +midas.slicerappstore.setExtensionButtonState = function(extensionName, buttonState) { + if (buttonState != 'download' && buttonState != 'install' && buttonState != 'uninstall') { + alert('Unknown buttonState:' + buttonState); + } + var buttonText = buttonState.charAt(0).toUpperCase() + buttonState.slice(1); + var buttonClass = 'extension' + buttonText + 'Button'; + $('input[extensionname="' + extensionName + '"]').val(buttonText) + .removeClass('extensionDownloadButton extensionInstallButton extensionUninstallButton') + .addClass(buttonClass) + .unbind('click').click(midas.slicerappstore.extensionButtonClick); +} diff --git a/public/js/extension/extension.view.js b/public/js/extension/extension.view.js index f5c760b..9b6eea5 100644 --- a/public/js/extension/extension.view.js +++ b/public/js/extension/extension.view.js @@ -59,6 +59,11 @@ $(document).ready(function() { midas.slicerappstore.renderCategory(json.extension.category); midas.slicerappstore.renderScreenshots(json.extension.screenshots); + $('input.extensionActionButton') + .attr('element', json.extension.slicerpackages_extension_id) + .attr('extensionname', json.extension.productname); + midas.slicerappstore.updateExtensionButtonState(json.extension.productname); + if(json.slicerView) { createNotice = function() {}; //dummy function definition to prevent exceptions } diff --git a/public/js/index/index.index.js b/public/js/index/index.index.js index b48c842..4392858 100644 --- a/public/js/index/index.index.js +++ b/public/js/index/index.index.js @@ -7,39 +7,25 @@ var json = null; * Called when a user clicks to view the extension page */ midas.slicerappstore.extensionClick = function() { - var url = json.webroot+'/slicerappstore/extension/view?extensionId='+$(this).attr('element'); + var url = json.global.webroot+'/slicerappstore/extension/view?extensionId='+$(this).attr('element'); if(json.slicerView) { url += '&slicerView'; } window.location.assign(url); } -/** - * Called when a user clicks the download or install button - */ -midas.slicerappstore.downloadClick = function() { - var extensionId = $(this).attr('element'); - if(json.slicerView) { - if(window.extensions_manager_model) { - window.extensions_manager_model.downloadExtension(extensionId); - } - } else { - var url = json.webroot+'/slicerappstore/index/downloadextension?extensionId='+extensionId; - window.location.assign(url); - } -} - /** * Render the extension result in the result list area * @param extension Json-ified slicerpackages_extension dao */ midas.slicerappstore.renderExtension = function(extension) { + var extensionName = extension.productname; var extDiv = $('#extensionTemplate').clone() .attr('id', 'extensionWrapper_'+extension.slicerpackages_extension_id); - var buttonText = json.slicerView ? 'Install' : 'Download'; - extDiv.attr('element', extension.slicerpackages_extension_id); - extDiv.find('a.extensionName').html(extension.productname) - .attr('qtip', extension.productname) + extDiv.attr('element', extension.slicerpackages_extension_id) + .attr('extensionname', extensionName); + extDiv.find('a.extensionName').html(extensionName) + .attr('qtip', extensionName) .attr('element', extension.slicerpackages_extension_id) .qtip({ content: { @@ -56,10 +42,11 @@ midas.slicerappstore.renderExtension = function(extension) { extDiv.find('span.subtitle').html(extension.subtitle); extDiv.find('img.extensionIcon').attr('src', extension.icon) .attr('element', extension.slicerpackages_extension_id) + .attr('extensionname', extensionName) .click(midas.slicerappstore.extensionClick); - extDiv.find('input.downloadButton').val(buttonText) + extDiv.find('input.extensionActionButton') .attr('element', extension.slicerpackages_extension_id) - .click(midas.slicerappstore.downloadClick); + .attr('extensionname', extensionName); var average = Math.round(extension.ratings.average * 100) / 100; var starSelect = Math.round(average * 2); @@ -72,6 +59,9 @@ midas.slicerappstore.renderExtension = function(extension) { extDiv.find('span.totalVotes').html('('+extension.ratings.total+')'); extDiv.appendTo('#extensionsContainer'); + + midas.slicerappstore.updateExtensionButtonState(extensionName); + extDiv.show(); } @@ -81,7 +71,7 @@ midas.slicerappstore.renderExtension = function(extension) { midas.slicerappstore.applyFilter = function() { $('#extensionsContainer').html(''); $('.loadingExtensions').show(); - $.post(json.webroot+'/slicerappstore/index/listextensions', { + $.post(json.global.webroot+'/slicerappstore/index/listextensions', { category: midas.slicerappstore.category, os: midas.slicerappstore.os, arch: midas.slicerappstore.arch, diff --git a/views/extension/view.phtml b/views/extension/view.phtml index 4088970..4d35bcf 100644 --- a/views/extension/view.phtml +++ b/views/extension/view.phtml @@ -18,6 +18,7 @@ if($this->slicerView) echo ''; echo ''; echo ''; + echo ''; echo ''; echo ''; echo ''; @@ -36,6 +37,7 @@ else $this->headScript()->appendFile($this->coreWebroot.'/public/js/jquery/jqplot/jqplot.categoryAxisRenderer.min.js'); $this->headScript()->appendFile($this->coreWebroot.'/public/js/jquery/jqplot/jqplot.pointLabels.min.js'); $this->headScript()->appendFile($this->coreWebroot.'/public/js/jquery/jquery.autogrow-textarea.js'); + $this->headScript()->appendFile($this->moduleWebroot.'/public/js/common/common.js'); $this->headScript()->appendFile($this->moduleWebroot.'/public/js/extension/extension.view.js'); $this->headScript()->appendFile($this->moduleWebroot.'/public/js/lightbox/jquery.lightbox-0.5.pack.js'); $this->headScript()->appendFile($this->webroot.'/modules/ratings/public/js/star_rating/jquery.ui.stars.min.js'); @@ -43,6 +45,7 @@ else $this->headScript()->appendFile($this->webroot.'/modules/comments/public/js/item/item.comments.js'); } ?> + @@ -51,7 +54,7 @@ else