From 7e61b2574600b33bc0dcbda25c4dc97af3228041 Mon Sep 17 00:00:00 2001 From: antoine Date: Mon, 12 May 2014 19:57:06 +0200 Subject: [PATCH] uskytuning with style suggest and preview device --- src/Umbraco.Web.UI.Client/gruntFile.js | 13 +- .../src/less/uSkyTuning.panelStyles.less | 1023 +++++++++-------- .../src/uSky/config/uSkyTuning.config.js | 18 +- .../src/uSky/config/uSkyTuning.palettes.js | 8 +- .../src/uSky/uSkyTuning.controller.js | 657 ++++++----- .../src/uSky/uSkyTuning.front.js | 67 ++ .../src/uSky/uSkyTuning.global.js | 41 + .../src/uSky/uSkyTuning.html | 87 +- .../src/uSkyTuning.loader.js | 5 +- .../Umbraco/js/uSkyTuning.loader.js | 15 - 10 files changed, 1096 insertions(+), 838 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js create mode 100644 src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js delete mode 100644 src/Umbraco.Web.UI/Umbraco/js/uSkyTuning.loader.js diff --git a/src/Umbraco.Web.UI.Client/gruntFile.js b/src/Umbraco.Web.UI.Client/gruntFile.js index 316a1442f6..147dc5e5ad 100644 --- a/src/Umbraco.Web.UI.Client/gruntFile.js +++ b/src/Umbraco.Web.UI.Client/gruntFile.js @@ -11,7 +11,7 @@ module.exports = function (grunt) { grunt.registerTask('watch-html', ['copy:views', 'copy:vs']); grunt.registerTask('watch-packages', ['copy:packages']); grunt.registerTask('watch-installer', ['concat:install', 'concat:installJs', 'copy:installer', 'copy:vs']); - grunt.registerTask('watch-usky', ['copy:uSky', 'concat:uSkyJs']); + grunt.registerTask('watch-usky', ['copy:uSky', 'concat:uSkyJs','concat:uSkyLess']); grunt.registerTask('watch-test', ['jshint:dev', 'karma:unit']); //triggered from grunt dev or grunt @@ -122,6 +122,9 @@ module.exports = function (grunt) { files: [ { dest: '<%= distdir %>/views/uSky', src: '**/*.html', expand: true, cwd: 'src/usky' }, { dest: '<%= distdir %>/assets/less', src: 'uSkyTuning.lessParameters.less', expand: true, cwd: 'src/usky' }, + { dest: '<%= distdir %>/js', src: 'uSkyTuning.config.js', expand: true, cwd: 'src/usky/config' }, + { dest: '<%= distdir %>/js', src: 'uSkyTuning.palettes.js', expand: true, cwd: 'src/usky/config' }, + { dest: '<%= distdir %>/js', src: 'uSkyTuning.front.js', expand: true, cwd: 'src/usky' } ] }, @@ -186,12 +189,8 @@ module.exports = function (grunt) { } }, uSkyJs: { - src: ['src/uSky/**/*.js'], - dest: '<%= distdir %>/js/umbraco.uSkyTuning.js', - options: { - banner: "<%= banner %>\n(function() { \n\n angular.module('umbraco.uSkyTuning', []); \n", - footer: "\n\n})();" - } + src: ['src/uSky/uSkyTuning.global.js', 'src/uSky/uSkyTuning.controller.js', 'src/uSky/lib/slider.directive.js', 'src/uSky/lib/spectrum.directive.js'], + dest: '<%= distdir %>/js/uSkyTuning.panel.js' }, uSkyLess: { src: ['src/uSky/uSkyTuning.lessParameters.less', 'src/uSky/uSkyTuning.baseStyles.less', 'src/uSky/uSkyTuning.dynamicStyles.less'], diff --git a/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less b/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less index 7d59195a2f..e204a782da 100644 --- a/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less +++ b/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less @@ -1,489 +1,495 @@ - - .uskytuning #TuningBg { - background: rgba(29, 29, 29, 0.91); - left: 0; - top: 0; - /*min-height: 100%;*/ - width: 275px; - position: fixed; - z-index: 999; - height: 100%; - padding:10px 5px 10px 10px; - -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0); - -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0); - box-shadow: 0 0 14px rgba(0, 0, 0, 0); - margin-left: -275px; - transition: all .20s ease-in-out; - -moz-transition: all .20s ease-in-out; - -webkit-transition: all .20s ease-in-out; - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size: 13px; - line-height: 16px; - } - - .uskytuning .tuning-wrapper { - padding:0px 5px 0 0; - overflow-y:auto; - height:100%; - - } - - .uskytuning #TuningBg.open { - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - margin-left: -0px; - } - - .uskytuning .colpick { - z-index: 99999999; - } - - .uskytuning .nav { - margin-bottom: 10px; - border-bottom: 1px solid #f57020; - color: #ffffff; - - } - - .uskytuning .nav-tabs>li.active>a, - .uskytuning .nav-tabs>li.active>a:hover, - .uskytuning .nav-tabs>li.active>a:focus { - color: #d9d9d9; - cursor: default; - background-color: #f57020; - border: 1px solid #f57020; - border-bottom-color: transparent; - } - - .uskytuning .nav-tabs>li>a:hover { - border: 1px solid rgba(245, 112, 32, 0.53); - } - .uskytuning .nav>li>a:hover, - .uskytuning .nav>li>a:focus { - text-decoration: none; - background-color: rgba(245, 112, 32, 0.53); - border: 1px solid rgba(245, 112, 32, 0.53); - } - - .uskytuning .nav-tabs>li>a { - border-radius: 2px 2px 0 0; - } - - .uskytuning .nav-tabs > li > a { - cursor:pointer; - color: #ffffff; - } - - .uskytuning .nav>li>a { - padding: 5px 10px; - } - - .uskytuning .panel-title>a { - display:block; - cursor:pointer; - font-size:13px; - line-height: 22px; - color: #d9d9d9; - } - - .uskytuning .panel-title>a:hover { - color: #ffffff; - text-decoration:none; - } - - .uskytuning .panel-heading { - padding: 0px 10px; - } - - .uskytuning .panel-group .panel { - border-radius: 1px; - } - - .uskytuning .panel { - margin-bottom: 5px; - background-color: rgba(85, 85, 85, 0.76); - border: 1px solid rgba(217, 217, 217, 0.5); - border-radius: 1px; - -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.05); - box-shadow: 0 1px 1px rgba(0,0,0,0.05); - } - - .uskytuning .panel-default>.panel-heading { - color: #333; - background-color: rgba(85, 85, 85, 0.76); - border-color: rgba(217, 217, 217, 0.5); - border-radius: 2px; - } - - .uskytuning .panel-default > .panel-heading:hover { - background-color: rgba(255, 255, 255, 0.41); - color:#ffffff; - text-decoration:none; - } - - .uskytuning .btn-default-save, - .uskytuning .btn-default-save:focus { - float: right; - margin-top: 5px; - color: #fff; - background-color: #f57020; - border-color: #ccc; - border-radius: 2px; - } - - .uskytuning .btn-default-save:hover { - background-color: rgba(245, 112, 32, 0.53); - color: #fff; - } - - .uskytuning .field-title { - color:#d9d9d9; - float: left; - margin-right:10px; - font-size:11px; - } - - .uskytuning .div-field { - margin-bottom:10px; - clear:both; - overflow:hidden; - } - - .uskytuning .sp-replacer { - padding: 0px; - border: solid 1px #d9d9d9; - background: none; - margin-top: 0px; - float: left; - } - - .uskytuning .panel-body { - border-top-color: rgba(217, 217, 217, 0.5) !important; - border-top: 1px solid rgba(217, 217, 217, 0.5) !important; - } - - .uskytuning select { - font-size:11px; - } - - .uskytuning .sp-dd { - display:none; - } - - .uskytuning .sp-preview { - margin-right: 0px; - width: 17px; - height: 17px; - border:none; - } - - .uskytuning .box-slider { - clear: both; - padding: 7px 2px 12px 2px; - } - - .uskytuning .ui-widget-content { - border: 0px solid #fff !important; - background: rgba(255, 255, 255, 0.09) !important; - border-radius: 2px !important; - } - - .uskytuning .ui-slider-horizontal { - height: .3em !important; - width: 155px; - float: left; - } - - .uskytuning .ui-slider .ui-slider-handle { - width: 0.3em !important; - height: 0.9em !important; - top: -.3em; - margin-left: -.0em; - border-bottom-right-radius: 1px; - border-bottom-left-radius: 1px; - border-top-right-radius: 1px; - border-top-left-radius: 1px; - color: #d9d9d9 !important; - cursor:pointer; - } - - .uskytuning .ui-slider .ui-slider-handle:hover, - .uskytuning .ui-slider .ui-slider-handle:focus { - color: #d9d9d9 !important; - } - - .uskytuning .slider-input { - width: 25px; - float: right; - background-color: transparent; - color: #d9d9d9; - font-size: 11px; - border: none; - padding: 0; - margin-top: -9px; - margin-right: 1px; - text-align: right; - } - - .uskytuning .slider-span { - float:right; - float: right; - margin: -9px 0 0 0; - color: #d9d9d9; - font-size: 11px; - } - - @-moz-document url-prefix() { - .uskytuning .slider-input { - margin-top: -6px; - } - } - - .uskytuning .imagePickerPreviewContainer { - float:left - } - - .uskytuning .imagePickerPreview { - float: left; - border: 1px solid rgba(217, 217, 217, 0.5); - width: 50px; - height: 30px; - cursor:pointer; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - clear:both; - text-align: center; - color: rgba(217, 217, 217, 0.5); - } - - .uskytuning .imagePickerPreview:hover { - border: 1px solid #d9d9d9; - color: #d9d9d9; - } - - .uskytuning .imagePickerPreview i { - font-size: 14px; - line-height: 30px; - cursor: pointer; - } - - .uskytuning .colorPickerDelete { - float: left; - font-size: 10px; - cursor: pointer; - color: rgba(217, 217, 217, 0.5); - margin-left: 3px; - margin-top: 5px; - } - - .uskytuning .colorPickerDelete:hover { - color:#d9d9d9; - } - - .uskytuning .tunning-tools { - position: absolute; - right: -28px; - margin: 120px 0 0 0; - } - - .uskytuning #TuningBg.open .tunning-tools { - right: -33px; - } - - .uskytuning .tunning-tools div { - color: rgba(255, 255, 255, 0.4); - background: rgba(41, 41, 41, 0.84); - display: block; - margin: 5px 0 0 0; - padding: 8px 10px 8px 10px; - font-size: 14px; - -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); - cursor: pointer; - border-bottom-right-radius: 5px; - border-top-right-radius: 5px; - } - - .uskytuning .tunning-tools div:hover, - .uskytuning .tunning-tools div.selected { - color: rgba(255, 255, 255, 1); - background: rgba(29, 29, 29, 0.91); - } - - .uSkyTunningImagePicker { - list-style: none; - padding: 0; - margin: 10px 0 0 -16px; - height: 500px; - overflow: auto; - } - - .uSkyTunningImagePicker ul { - list-style: none; - padding: 0; - margin: 0; - } - - .uSkyTunningImagePicker li { - display: inline-block; - margin: 0 0px 10px 17px; - } - - .uSkyTunningImagePicker .image-preview { - border: 2px solid #F3F2F2; - display: inline-block; - cursor: pointer; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - width: 110px; - height: 60px; - } - - .uSkyTunningImagePicker .image-preview:hover, .image-preview.selected { - border: 2px solid #53a93f; - } - - .bodyuSkyTunningImagePicker { - padding: 10px 20px 0px 15px; - } - - - .uSkyTunningImagePicker .modal-dialog { - width: 618px; - font-weight:normal - } - - - .uSkyTunningImagePicker h3 { - color: rgba(85, 85, 85, 1); - font-size: 18px; - line-height: 25px; - font-style: normal; - font-weight: normal; - font-family: sans-serif; - margin: 0 0 10px 17px; - } - - .uskytunning-fontfamilypicker .show { - font-size: 32px; - line-height: 34px; - color: #242424; - margin-top: 10px; - } - - .uskytuning h4 { - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif !important; - } - - .uskytuning .fontFamilyPickerPreview { - border: 1px solid rgba(217, 217, 217, 0.5); - width: 90%; - min-height: 50px; - font-size: 18px; - cursor: pointer; - padding: 8px; - clear: both; - color: rgba(255, 255, 255, 0.8); - margin-top: 4px; - background-color: rgba(0, 0, 0, 0.28); - float: left; - } - - .uskytuning .fontFamilyPickerPreview span { - font-size: 32px; - line-height: 32px; - } - - .uskytuning .fontFamilyPickerPreview:hover { - border: 1px solid #d9d9d9; - color: #d9d9d9; - } - - .uskytunning-fontfamilypicker { - font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; - font-size:14px; - line-height:14px; - } - - .uskytuning .palette { - list-style:none; - margin:20px 0 20px 0; - padding:0; - } - - .uskytuning .palette li { - margin: 10px 0px 0 0px; - clear: both; - overflow: hidden; - cursor:pointer; - background-color: rgba(0, 0, 0, 0.12); - } - - .uskytuning .palette div { - border:1px solid rgba(255, 255, 255, 0.61); - display: inline-block; - float:left; - } - - .uskytuning .palette li:hover { - background-color: rgba(0, 0, 0, 0.4); - } - - .uskytuning .palette li:hover div { - border:1px solid #ffffff; - } - - .uskytuning .palette li:hover p { - color:#ffffff; - } - - .uskytuning .palette div span { - width: 30px; - height: 30px; - display: table-cell; - margin: 0; - padding: 0 0 0 0; - border: 1px solid rgba(0, 0, 0, 0.55); - } - - .uskytuning .palette p { - color: rgba(255, 255, 255, 0.57); - margin: 7px 0 0 10px; - float: left; - } - - - @font-face { - font-family: 'icomoon'; - src:url('/Umbraco/assets/fonts/helveticons/helveticons.eot'); - src:url('/Umbraco/assets/fonts/helveticons/helveticons.eot?#iefix') format('embedded-opentype'), - url('/Umbraco/assets/fonts/helveticons/helveticons.ttf') format('truetype'), - url('/Umbraco/assets/fonts/helveticons/helveticons.svg#icomoon') format('svg'); - font-weight: normal; - font-style: normal; - } +body { + margin:0px; + padding:0px; + text-align:center; + background-color:#fafbfd; + } + +.uskytuning #TuningBg { + position: fixed; + top: 0; + left: 0; + z-index: 999; + width: 275px; + height: 100%; + padding: 10px 5px 10px 10px; + margin-left: -275px; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 13px; + line-height: 16px; + background: rgba(29, 29, 29, 0.91); + -webkit-box-shadow: 0 0 14px rgba(0, 0, 0, 0); + -moz-box-shadow: 0 0 14px rgba(0, 0, 0, 0); + box-shadow: 0 0 14px rgba(0, 0, 0, 0); + -webkit-transition: all 0.2s ease-in-out; + -moz-transition: all 0.2s ease-in-out; + transition: all 0.2s ease-in-out; +} + +.uskytuning .tuning-wrapper { + height: 100%; + padding: 0 5px 0 0; + overflow-y: auto; + text-align:left; +} + +.uskytuning #TuningBg.open { + margin-left: 0; + -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +} + +.uskytuning .colpick { + z-index: 99999999; +} + +.uskytuning .nav { + margin-bottom: 10px; + color: #ffffff; + border-bottom: 1px solid #f57020; +} + +.uskytuning .nav-tabs > li.active > a, +.uskytuning .nav-tabs > li.active > a:hover, +.uskytuning .nav-tabs > li.active > a:focus { + color: #d9d9d9; + cursor: default; + background-color: #f57020; + border: 1px solid #f57020; + border-bottom-color: transparent; +} + +.uskytuning .nav-tabs > li > a:hover { + border: 1px solid rgba(245, 112, 32, 0.53); +} + +.uskytuning .nav > li > a:hover, +.uskytuning .nav > li > a:focus { + text-decoration: none; + background-color: rgba(245, 112, 32, 0.53); + border: 1px solid rgba(245, 112, 32, 0.53); +} + +.uskytuning .nav-tabs > li > a { + border-radius: 2px 2px 0 0; +} + +.uskytuning .nav-tabs > li > a { + color: #ffffff; + cursor: pointer; +} + +.uskytuning .nav > li > a { + padding: 5px 10px; +} + +.uskytuning .panel-title > a { + display: block; + font-size: 13px; + line-height: 22px; + color: #d9d9d9; + cursor: pointer; +} + +.uskytuning .panel-title > a span { + display:block; +} + +.uskytuning .panel-title > a:hover { + color: #ffffff; + text-decoration: none; +} + +.uskytuning .panel-heading { + padding: 0 10px; +} + +.uskytuning .panel-group .panel { + border-radius: 1px; +} + +.uskytuning .panel { + margin-bottom: 5px; + background-color: rgba(85, 85, 85, 0.76); + border: 1px solid rgba(217, 217, 217, 0.5); + border-radius: 1px; + -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); +} + +.uskytuning .panel-default > .panel-heading { + color: #333; + background-color: rgba(85, 85, 85, 0.76); + border-color: rgba(217, 217, 217, 0.5); + border-radius: 2px; +} + +.uskytuning .panel-default > .panel-heading:hover { + color: #ffffff; + text-decoration: none; + background-color: rgba(255, 255, 255, 0.41); +} + +.uskytuning .btn-default-save, +.uskytuning .btn-default-save:focus { + float: right; + margin-top: 5px; + color: #fff; + background-color: #f57020; + border-color: #ccc; + border-radius: 2px; +} + +.uskytuning .btn-default-save:hover { + color: #fff; + background-color: rgba(245, 112, 32, 0.53); +} + +.uskytuning .field-title { + float: left; + margin-right: 10px; + font-size: 11px; + color: #d9d9d9; +} + +.uskytuning .div-field { + margin-bottom: 10px; + overflow: hidden; + clear: both; +} + +.uskytuning .sp-replacer { + float: left; + padding: 0; + margin-top: 0; + background: none; + border: solid 1px #d9d9d9; +} + +.uskytuning .panel-body { + border-top: 1px solid rgba(217, 217, 217, 0.5) !important; + border-top-color: rgba(217, 217, 217, 0.5) !important; +} + +.uskytuning select { + font-size: 11px; +} + +.uskytuning .sp-dd { + display: none; +} + +.uskytuning .sp-preview { + width: 17px; + height: 17px; + margin-right: 0; + border: none; +} + +.uskytuning .box-slider { + padding: 7px 2px 12px 2px; + clear: both; +} + +.uskytuning .ui-widget-content { + background: rgba(255, 255, 255, 0.09) !important; + border: 0px solid #fff !important; + border-radius: 2px !important; +} + +.uskytuning .ui-slider-horizontal { + float: left; + width: 155px; + height: .3em !important; +} + +.uskytuning .ui-slider .ui-slider-handle { + top: -0.3em; + width: 0.3em !important; + height: 0.9em !important; + margin-left: 0; + color: #d9d9d9 !important; + cursor: pointer; + border-top-right-radius: 1px; + border-bottom-right-radius: 1px; + border-bottom-left-radius: 1px; + border-top-left-radius: 1px; +} + +.uskytuning .ui-slider .ui-slider-handle:hover, +.uskytuning .ui-slider .ui-slider-handle:focus { + color: #d9d9d9 !important; +} + +.uskytuning .slider-input { + float: right; + width: 25px; + padding: 0; + margin-top: -9px; + margin-right: 1px; + font-size: 11px; + color: #d9d9d9; + text-align: right; + background-color: transparent; + border: none; +} + +.uskytuning .slider-span { + float: right; + margin: -9px 0 0 0; + font-size: 11px; + color: #d9d9d9; +} + +@-moz-document url-prefix() { + .uskytuning .slider-input { + margin-top: -6px; + } +} + +.uskytuning .imagePickerPreviewContainer { + float: left; +} + +.uskytuning .imagePickerPreview { + float: left; + width: 50px; + height: 30px; + clear: both; + color: rgba(217, 217, 217, 0.5); + text-align: center; + cursor: pointer; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + border: 1px solid rgba(217, 217, 217, 0.5); +} + +.uskytuning .imagePickerPreview:hover { + color: #d9d9d9; + border: 1px solid #d9d9d9; +} + +.uskytuning .imagePickerPreview i { + font-size: 14px; + line-height: 30px; + cursor: pointer; +} + +.uskytuning .colorPickerDelete { + float: left; + margin-top: 5px; + margin-left: 3px; + font-size: 10px; + color: rgba(217, 217, 217, 0.5); + cursor: pointer; +} + +.uskytuning .colorPickerDelete:hover { + color: #d9d9d9; +} + +.uskytuning .tuning-tools { + position: absolute; + right: -28px; + margin: 120px 0 0 0; +} + +.uskytuning #TuningBg.open .tuning-tools { + right: -33px; +} + +.uskytuning .tuning-tools div { + display: block; + padding: 8px 10px 8px 10px; + margin: 5px 0 0 0; + font-size: 14px; + color: rgba(255, 255, 255, 0.4); + cursor: pointer; + background: rgba(41, 41, 41, 0.84); + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + -webkit-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + -moz-box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); +} + +.uskytuning .tuning-tools div:hover, +.uskytuning .tuning-tools div.selected { + color: #ffffff; + background: rgba(29, 29, 29, 0.91); +} + +.uSkytuningImagePicker { + height: 500px; + padding: 0; + margin: 10px 0 0 -16px; + overflow: auto; + list-style: none; +} + +.uSkytuningImagePicker ul { + padding: 0; + margin: 0; + list-style: none; +} + +.uSkytuningImagePicker li { + display: inline-block; + margin: 0 0 10px 17px; +} + +.uSkytuningImagePicker .image-preview { + display: inline-block; + width: 110px; + height: 60px; + cursor: pointer; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + border: 2px solid #F3F2F2; +} + +.uSkytuningImagePicker .image-preview:hover, +.image-preview.selected { + border: 2px solid #53a93f; +} + +.bodyuSkytuningImagePicker { + padding: 10px 20px 0 15px; +} + +.uSkytuningImagePicker .modal-dialog { + width: 618px; + font-weight: normal; +} + +.uSkytuningImagePicker h3 { + margin: 0 0 10px 17px; + font-family: sans-serif; + font-size: 18px; + font-style: normal; + font-weight: normal; + line-height: 25px; + color: #555555; +} + +.uskytuning-fontfamilypicker .show { + margin-top: 10px; + font-size: 32px; + line-height: 34px; + color: #242424; +} + +.uskytuning h4 { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; +} + +.uskytuning .fontFamilyPickerPreview { + float: left; + width: 90%; + min-height: 50px; + padding: 8px; + margin-top: 4px; + clear: both; + font-size: 18px; + color: rgba(255, 255, 255, 0.8); + cursor: pointer; + background-color: rgba(0, 0, 0, 0.28); + border: 1px solid rgba(217, 217, 217, 0.5); +} + +.uskytuning .fontFamilyPickerPreview span { + font-size: 32px; + line-height: 32px; +} + +.uskytuning .fontFamilyPickerPreview:hover { + color: #d9d9d9; + border: 1px solid #d9d9d9; +} + +.uskytuning-fontfamilypicker { + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 14px; +} + +.uskytuning .palette { + padding: 0; + margin: 20px 0 20px 0; + list-style: none; +} + +.uskytuning .palette li { + margin: 10px 0 0 0px; + overflow: hidden; + clear: both; + cursor: pointer; + background-color: rgba(0, 0, 0, 0.12); +} + +.uskytuning .palette div { + display: inline-block; + float: left; + border: 1px solid rgba(255, 255, 255, 0.61); +} + +.uskytuning .palette li:hover { + background-color: rgba(0, 0, 0, 0.4); +} + +.uskytuning .palette li:hover div { + border: 1px solid #ffffff; +} + +.uskytuning .palette li:hover p { + color: #ffffff; +} + +.uskytuning .palette div span { + display: table-cell; + width: 30px; + height: 30px; + padding: 0 0 0 0; + margin: 0; + border: 1px solid rgba(0, 0, 0, 0.55); +} + +.uskytuning .palette p { + float: left; + margin: 7px 0 0 10px; + color: rgba(255, 255, 255, 0.57); +} + +@font-face { + font-family: 'icomoon'; + font-style: normal; + font-weight: normal; + src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot'); + src: url('/Umbraco/assets/fonts/helveticons/helveticons.eot?#iefix') format('embedded-opentype'), url('/Umbraco/assets/fonts/helveticons/helveticons.ttf') format('truetype'), url('/Umbraco/assets/fonts/helveticons/helveticons.svg#icomoon') format('svg'); +} [class^="icon-"], [class*=" icon-"] { - font-family: icomoon; - font-weight: normal; - font-style: normal; - text-decoration: inherit; - -webkit-font-smoothing: antialiased; *margin-right: .3em; + font-family: icomoon; + -webkit-font-smoothing: antialiased; + font-style: normal; + font-weight: normal; + text-decoration: inherit; } + [class^="icon-"]:before, [class*=" icon-"]:before { - text-decoration: inherit; display: inline-block; + text-decoration: inherit; speak: none; } + /* [class^="icon-"]:before, [class*=" icon-"]:before { font-family: 'icomoon'; @@ -496,30 +502,75 @@ -webkit-font-smoothing: antialiased; }*/ -i.large{ - font-size: 32px; +i.large { + font-size: 32px; } -i.medium{ - font-size: 24px; +i.medium { + font-size: 24px; } -i.small{ - font-size: 14px; + +i.small { + font-size: 14px; } .icon-right-double-arrow:before { - content: "\e094"; + content: "\e094"; } .icon-left-double-arrow:before { - content: "\e141"; + content: "\e141"; } .icon-paint-roller:before { - content: "\e120"; + content: "\e120"; } + .icon-palette:before { - content: "\e121"; + content: "\e121"; +} + +.icon-iphone:before{content:"\e0f1"} + +/******* IFRAME *******/ + +.desktop { + margin:0px auto; + width: 100%; + height: 100%; +} + +.tablet { + width: 1040px; + height: 757px; + margin:75px auto; + opacity: 1.0; + border-radius: 10px; + transition: all 0.5s ease-in-out; + box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3; + background-color:#ffffff; } +.mobile { + width: 350px; + height: 568px; + margin:75px auto; + opacity: 1.0; + border-radius: 10px; + transition: all 0.5s ease-in-out; + box-shadow: 0 0 0 29px #fff, 0 0 0 30px #dee0e3; + background-color:#ffffff; +} + +iframe { + overflow:hidden; + overflow-x:hidden; + overflow-y:hidden; + height:100%; + width:100%; + top:0px; + left:0px; + right:0px; + bottom:0px +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js b/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js index e80b5ac17d..a249fd43e9 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js +++ b/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.config.js @@ -1,11 +1,16 @@ -var tunningConfig = { +/*********************************************************************************************************/ +/* uSkyTuning setting panel config */ +/*********************************************************************************************************/ + +var tuningConfig = { categories: [{ name: "Background", sections: [{ name: "Main", subSections: [{ name: "Body", + schema: "body", fields: [ { name: "Color", @@ -61,6 +66,7 @@ var tunningConfig = { }, { name: "Main", + schema: ".content", fields: [ { name: "Color", @@ -116,6 +122,7 @@ var tunningConfig = { }, { name: "Header", + schema: "header", fields: [ { name: "Color", @@ -171,6 +178,7 @@ var tunningConfig = { }, { name: "Footer", + schema: ".footer", fields: [ { name: "Color", @@ -351,6 +359,7 @@ var tunningConfig = { }, { name: "Navigation", + schema: ".navbar-collapse", fields: [{ name: "Display", alias: "stylingNavDisplay", @@ -598,6 +607,7 @@ var tunningConfig = { name: "Main", subSections: [{ name: "Body", + schema: "p", fields: [{ name: "Color", alias: "FontBodyColor", @@ -732,6 +742,7 @@ var tunningConfig = { }, { name: "H1", + schema: "h1", fields: [{ name: "Color", alias: "FontH1Color", @@ -788,6 +799,7 @@ var tunningConfig = { }] }, { name: "H2", + schema: "h2", fields: [{ name: "Color", alias: "FontH2Color", @@ -844,6 +856,7 @@ var tunningConfig = { }] }, { name: "H3", + schema: "h3", fields: [{ name: "Color", alias: "FontH3Color", @@ -900,6 +913,7 @@ var tunningConfig = { }] }, { name: "H4", + schema: "h4", fields: [{ name: "Color", alias: "FontH4Color", @@ -956,6 +970,7 @@ var tunningConfig = { }] }, { name: "H5", + schema: "h5", fields: [{ name: "Color", alias: "FontH5Color", @@ -1012,6 +1027,7 @@ var tunningConfig = { }] }, { name: "H6", + schema: "h6", fields: [{ name: "Color", alias: "FontH6Color", diff --git a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js b/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js index 2e78da11e7..94a2af0a1c 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js +++ b/src/Umbraco.Web.UI.Client/src/uSky/config/uSkyTuning.palettes.js @@ -1,5 +1,9 @@ -var tunningPalette = [{ +/*********************************************************************************************************/ +/* uSkyTuning palette tab config */ +/*********************************************************************************************************/ + +var tuningPalette = [{ name: "orange", mainColor: 'rgb(230, 126, 34)', colors: [ @@ -194,7 +198,7 @@ var tunningPalette = [{ { alias: "FontHighlightedBackgroundColor", value: "rgb(24, 94, 101)" }, { alias: "FontBigColor", value: "rgb(24, 94, 101)" }, { alias: "FontButtonColor", value: "rgba(255, 255, 255, 0.92)" }, - { alias: "FontButtonBackgroundColor", value: "rgb(24, 94, 101)" }, + { alias: "FontButtonBackgroundColor", value: "rgb(24, 94, 101)" }, { alias: "FontButtonColorHover", value: "rgba(255, 255, 255, 0.55)" }, { alias: "FontButtonBackgroundColorHover", value: "rgba(24, 94, 101, 0.74)" }, { alias: "FontColor2Color", value: "rgb(24, 94, 101)" }, diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js index a35f9d7bb6..8bf42f2946 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js +++ b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.controller.js @@ -1,345 +1,388 @@ + +/*********************************************************************************************************/ +/* uSkyTuning panel app and controller */ +/*********************************************************************************************************/ + +// uSkyTuning main app angular.module("umbraco.uSkyTuning", ['ui.bootstrap', 'spectrumcolorpicker', 'ui.slider']) - .controller("Umbraco.uSkyTuningController", function ($scope, $modal, $http) { +// panel main controller +.controller("Umbraco.uSkyTuningController", function ($scope, $modal, $http, $window) { - $scope.isOpen = false; - $scope.settingIsOpen = true; - $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; - $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y']; - $scope.BackgroundAttachments = ['scroll', 'fixed']; - $scope.Layouts = ['boxed', 'wide', 'full']; - $scope.displays = ['float-left', 'float-right', 'block-left', 'block-right', 'none']; - $scope.optionHomes = ['icon', 'text', 'none']; - $scope.googleFontFamilies = {} + $scope.isOpen = false; + $scope.schemaFocus = "body"; + $scope.settingIsOpen = 'setting'; + $scope.previewDevice = 'desktop'; + $scope.BackgroundPositions = ['center', 'left', 'right', 'bottom center', 'bottom left', 'bottom right', 'top center', 'top left', 'top right']; + $scope.BackgroundRepeats = ['no-repeat', 'repeat', 'repeat-x', 'repeat-y']; + $scope.BackgroundAttachments = ['scroll', 'fixed']; + $scope.Layouts = ['boxed', 'wide', 'full']; + $scope.displays = ['float-left', 'float-right', 'block-left', 'block-right', 'none']; + $scope.optionHomes = ['icon', 'text', 'none']; + $scope.googleFontFamilies = {} - // Load parameters from GetLessParameters and init data of the tuning config - var initTunning = function () { - $http.get('/Umbraco/Api/uSkyTuning/GetLessParameters') - .success(function (data) { + // Load parameters from GetLessParameters and init data of the tuning config + var initTuning = function () { + $http.get('/Umbraco/Api/uSkyTuning/GetLessParameters') + .success(function (data) { - $.each(tunningConfig.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { + $.each(tuningConfig.categories, function (indexCategory, category) { + $.each(category.sections, function (indexSection, section) { + $.each(section.subSections, function (indexSubSection, subSection) { + $.each(subSection.fields, function (indexField, field) { - // value - field.value = eval("data." + field.alias.replace("@", "")); - if (field.value == "''") { field.value = ""; } + // value + field.value = eval("data." + field.alias.replace("@", "")); + if (field.value == "''") { field.value = ""; } - // special init for font family picker - if (field.type == "fontFamilyPicker") { - field.fontWeight = eval("data." + field.alias.replace("@", "") + "_weight"); - field.fontStyle = eval("data." + field.alias.replace("@", "") + "_style"); - field.fontType = eval("data." + field.alias.replace("@", "") + "_type"); - if (field.fontWeight == "''") { field.fontWeight = ""; } - if (field.fontStyle == "''") { field.fontStyle = ""; } - if (field.fontType == "''") { field.fontType = ""; } - } + // special init for font family picker + if (field.type == "fontFamilyPicker") { + field.fontWeight = eval("data." + field.alias.replace("@", "") + "_weight"); + field.fontStyle = eval("data." + field.alias.replace("@", "") + "_style"); + field.fontType = eval("data." + field.alias.replace("@", "") + "_type"); + if (field.fontWeight == "''") { field.fontWeight = ""; } + if (field.fontStyle == "''") { field.fontStyle = ""; } + if (field.fontType == "''") { field.fontType = ""; } + } - }) }) }) - }); - - $scope.tunningModel = tunningConfig; - $scope.tunningPalette = tunningPalette; - - refreshTunning(); - - $scope.$watch('tunningModel', function () { - refreshTunning(); - }, true); - + }) }); - } - // Refresh all less parameters for every changes watching tunningModel - var refreshTunning = function () { - var parameters = []; - $.each($scope.tunningModel.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { + $scope.tuningModel = tuningConfig; + $scope.tuningPalette = tuningPalette; - // value - parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "':'" + field.value + "'"); + refreshtuning(); - // special init for font family picker - if (field.type == "fontFamilyPicker") { - parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_weight':'" + field.fontWeight + "'"); - parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_Style':'" + field.fontStyle + "'"); - } + $scope.$watch('tuningModel', function () { + refreshtuning(); + }, true); + + }); + } + + // Refresh all less parameters for every changes watching tuningModel + var refreshtuning = function () { + var parameters = []; + $.each($scope.tuningModel.categories, function (indexCategory, category) { + $.each(category.sections, function (indexSection, section) { + $.each(section.subSections, function (indexSubSection, subSection) { + $.each(subSection.fields, function (indexField, field) { + + // value + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "':'" + field.value + "'"); + + // special init for font family picker + if (field.type == "fontFamilyPicker") { + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_weight':'" + field.fontWeight + "'"); + parameters.splice(parameters.length + 1, 0, "'@" + field.alias + "_Style':'" + field.fontStyle + "'"); + } - }) }) }) - }); - var string = "less.modifyVars({" + parameters.join(",") + "})"; - eval(string); - } - - // Refresh with selected tunning palette - $scope.refreshTunningByPalette = function (colors) { - - $.each($scope.tunningModel.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { - - if (field.type == "colorPicker") { - $.each(colors, function (indexColor, color) { - if (color.alias == field.alias) { - field.value = color.value; - } - }); - } - - }) - }) - }) - }); - - refreshTunning(); - } - - // Save all parameter in TunningParameters.less file - $scope.saveLessParameters = function () { - var parameters = []; - $.each($scope.tunningModel.categories, function (indexCategory, category) { - $.each(category.sections, function (indexSection, section) { - $.each(section.subSections, function (indexSubSection, subSection) { - $.each(subSection.fields, function (indexField, field) { - - // value - var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; - parameters.splice(parameters.length + 1, 0, "@" + field.alias + ":" + value + ";"); - - // special init for font family picker - if (field.type == "fontFamilyPicker") { - if (field.fontType == "google" && value != "''") { - var variant = field.fontWeight != "" || field.fontStyle != "" ? ":" + field.fontWeight + field.fontStyle : ""; - var gimport = "@import url('http://fonts.googleapis.com/css?family=" + value + variant + "');"; - if ($.inArray(gimport, parameters) < 0) { - parameters.splice(0, 0, gimport); - } - } - var fontWeight = (field.fontWeight != 0 && (field.fontWeight == undefined || field.fontWeight == "")) ? "''" : field.fontWeight; - var fontStyle = (field.fontStyle != 0 && (field.fontStyle == undefined || field.fontStyle == "")) ? "''" : field.fontStyle; - var fontType = (field.fontType != 0 && (field.fontType == undefined || field.fontType == "")) ? "''" : field.fontType; - parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_weight:" + fontWeight + ";"); - parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_style:" + fontStyle + ";"); - parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_type:" + fontType + ";"); - } - - }) - }) - }) - }); - - var resultParameters = { result: parameters.join("") }; - var transform = function (result) { - return $.param(result); - } - - $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; - $http.post('/Umbraco/Api/uSkyTuning/PostLessParameters', resultParameters, { - headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, - transformRequest: transform }) - .success(function (data) { - alert("Change saved !"); - }); + }); + // Refrech page style + document.getElementById("resultFrame").contentWindow.refrechLayout(parameters); + + } + + var openIntelTuning = function () { + document.getElementById("resultFrame").contentWindow.initIntelTuning($scope.tuningModel); + } + + var closeIntelTuning = function () { + document.getElementById("resultFrame").contentWindow.closeIntelTuning($scope.tuningModel); + } + + // Refresh with selected tuning palette + $scope.refreshtuningByPalette = function (colors) { + + $.each($scope.tuningModel.categories, function (indexCategory, category) { + $.each(category.sections, function (indexSection, section) { + $.each(section.subSections, function (indexSubSection, subSection) { + $.each(subSection.fields, function (indexField, field) { + + if (field.type == "colorPicker") { + $.each(colors, function (indexColor, color) { + if (color.alias == field.alias) { + field.value = color.value; + } + }); + } + + }) + }) + }) + }); + + refreshtuning(); + } + + // Save all parameter in tuningParameters.less file + $scope.saveLessParameters = function () { + var parameters = []; + $.each($scope.tuningModel.categories, function (indexCategory, category) { + $.each(category.sections, function (indexSection, section) { + $.each(section.subSections, function (indexSubSection, subSection) { + $.each(subSection.fields, function (indexField, field) { + + // value + var value = (field.value != 0 && (field.value == undefined || field.value == "")) ? "''" : field.value; + parameters.splice(parameters.length + 1, 0, "@" + field.alias + ":" + value + ";"); + + // special init for font family picker + if (field.type == "fontFamilyPicker") { + if (field.fontType == "google" && value != "''") { + var variant = field.fontWeight != "" || field.fontStyle != "" ? ":" + field.fontWeight + field.fontStyle : ""; + var gimport = "@import url('http://fonts.googleapis.com/css?family=" + value + variant + "');"; + if ($.inArray(gimport, parameters) < 0) { + parameters.splice(0, 0, gimport); + } + } + var fontWeight = (field.fontWeight != 0 && (field.fontWeight == undefined || field.fontWeight == "")) ? "''" : field.fontWeight; + var fontStyle = (field.fontStyle != 0 && (field.fontStyle == undefined || field.fontStyle == "")) ? "''" : field.fontStyle; + var fontType = (field.fontType != 0 && (field.fontType == undefined || field.fontType == "")) ? "''" : field.fontType; + parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_weight:" + fontWeight + ";"); + parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_style:" + fontStyle + ";"); + parameters.splice(parameters.length + 1, 0, "@" + field.alias + "_type:" + fontType + ";"); + } + + }) + }) + }) + }); + + var resultParameters = { result: parameters.join("") }; + var transform = function (result) { + return $.param(result); } - // Toggle pannel - $scope.togglePanel = function () { - if ($scope.isOpen) { - $scope.isOpen = false; - } - else { - $scope.isOpen = true; - } - } - - // Toggle setting - $scope.settingOpen = function (a) { - $scope.settingIsOpen = a; - } - - // Remove value from field - $scope.removeField = function (field) { - field.value = ""; - } - - // Open image picker modal - $scope.open = function (field) { - var modalInstance = $modal.open({ - templateUrl: 'myModalContent.html', - controller: 'uskytuning.mediapickercontroller', - resolve: { - items: function () { - return field.value; - } - } - }); - modalInstance.result.then(function (selectedItem) { - field.value = selectedItem; - }); - }; - - // Open font family picker modal - $scope.openFontFamilyPickerModal = function (field) { - var modalInstance = $modal.open({ - templateUrl: 'fontFamilyPickerModel.html', - controller: 'uskytuning.fontfamilypickercontroller', - resolve: { - googleFontFamilies: function () { - return $scope.googleFontFamilies; - }, - item: function () { - return field; - } - } - }); - modalInstance.result.then(function (selectedItem) { - field.value = selectedItem.fontFamily; - field.fontType = selectedItem.fontType; - field.fontWeight = selectedItem.fontWeight; - field.fontStyle = selectedItem.fontStyle; - }); - }; - - // Preload of the google font - $http.get('/Umbraco/Api/uSkyTuning/GetGoogleFont').success(function (data) { - $scope.googleFontFamilies = data; + $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded"; + $http.post('/Umbraco/Api/uSkyTuning/PostLessParameters', resultParameters, { + headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8' }, + transformRequest: transform }) - - // Inicial tuning loading - initTunning(); - - }) - - // Controler for image picker - .controller('uskytuning.mediapickercontroller', function ($scope, $modalInstance, items, $http) { - - $scope.items = []; - - $http.get('/Umbraco/Api/uSkyTuning/GetBackGroundImage') - .success(function (data) { - $scope.items = data; - }); - - $scope.selected = { - item: $scope.items[0] - }; - - $scope.ok = function () { - $modalInstance.close($scope.selected.item); - }; - - $scope.cancel = function () { - $modalInstance.dismiss('cancel'); - }; - - }) - - // Controler for font family picker - .controller('uskytuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) { - - $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"]; - $scope.fonts = []; - $scope.selectedFont = {}; - - var googleGetWeight = function (googleVariant) { - return (googleVariant != undefined && googleVariant != "") ? googleVariant.replace("italic", "") : ""; - }; - - var googleGetStyle = function (googleVariant) { - var variantStyle = ""; - if (googleVariant != undefined && googleVariant != "" && googleVariant.indexOf("italic") >= 0) { - variantWeight = googleVariant.replace("italic", ""); - variantStyle = "italic"; - } - return variantStyle; - }; - - angular.forEach($scope.safeFonts, function (value, key) { - $scope.fonts.push({ - groupName: "Safe fonts", - fontType: "safe", - fontFamily: value, - fontWeight: "normal", - fontStyle: "normal", - }); + .success(function (data) { + alert("Change saved !"); }); - angular.forEach(googleFontFamilies.items, function (value, key) { - var variants = value.variants; - var variant = value.variants.length > 0 ? value.variants[0] : ""; - var fontWeight = googleGetWeight(variant); - var fontStyle = googleGetStyle(variant); - $scope.fonts.push({ - groupName: "Google fonts", - fontType: "google", - fontFamily: value.family, - variants: value.variants, - variant: variant, - fontWeight: fontWeight, - fontStyle: fontStyle - }); + } + + // Toggle panel + $scope.togglePanel = function () { + if ($scope.isOpen) { + $scope.isOpen = false; + closeIntelTuning(); + } + else { + $scope.isOpen = true; + $scope.settingOpen($scope.settingIsOpen); + } + } + + // Toggle setting + $scope.settingOpen = function (a) { + + if ($scope.settingIsOpen == "setting" && a != "setting") { + closeIntelTuning(); + } + + if (a == "setting") { + openIntelTuning(); + } + + $scope.settingIsOpen = a; + } + + // Remove value from field + $scope.removeField = function (field) { + field.value = ""; + } + + // Open image picker modal + $scope.open = function (field) { + var modalInstance = $modal.open({ + templateUrl: 'myModalContent.html', + controller: 'uskytuning.mediapickercontroller', + resolve: { + items: function () { + return field.value; + } + } }); + modalInstance.result.then(function (selectedItem) { + field.value = selectedItem; + }); + }; - $scope.setStyleVariant = function () { - if ($scope.selectedFont != undefined) { - return { - 'font-family': $scope.selectedFont.fontFamily, - 'font-weight': $scope.selectedFont.fontWeight, - 'font-style': $scope.selectedFont.fontStyle + // Open font family picker modal + $scope.openFontFamilyPickerModal = function (field) { + var modalInstance = $modal.open({ + templateUrl: 'fontFamilyPickerModel.html', + controller: 'uskytuning.fontfamilypickercontroller', + resolve: { + googleFontFamilies: function () { + return $scope.googleFontFamilies; + }, + item: function () { + return field; } } - }; + }); + modalInstance.result.then(function (selectedItem) { + field.value = selectedItem.fontFamily; + field.fontType = selectedItem.fontType; + field.fontWeight = selectedItem.fontWeight; + field.fontStyle = selectedItem.fontStyle; + }); + }; - $scope.showFontPreview = function (font) { - $scope.selectedFont = font; - if (font != undefined && font.fontFamily != "" && font.fontType == "google") { - $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant); - $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant); - WebFont.load({ - google: { - families: [font.fontFamily + ":" + font.variant] - }, - loading: function () { - console.log('loading'); - } - }); - } - } + // Set preview device + $scope.updatePreviewDevice = function (device) { + $scope.previewDevice = device; + } - $scope.ok = function () { - $modalInstance.close({ - fontFamily: $scope.selectedFont.fontFamily, - fontType: $scope.selectedFont.fontType, - fontWeight: $scope.selectedFont.fontWeight, - fontStyle: $scope.selectedFont.fontStyle, + // Accordion open event + $scope.accordionOpened = function (schema) { + $scope.schemaFocus = schema; + } + + // Accordion open event + $scope.accordionWillBeOpened = function (schema) { + $scope.futurSchemaFocus = schema; + } + + // Preload of the google font + $http.get('/Umbraco/Api/uSkyTuning/GetGoogleFont').success(function (data) { + $scope.googleFontFamilies = data; + }) + + // Inicial tuning loading + initTuning(); + +}) + +// Image picker controller +.controller('uskytuning.mediapickercontroller', function ($scope, $modalInstance, items, $http) { + + $scope.items = []; + + $http.get('/Umbraco/Api/uSkyTuning/GetBackGroundImage') + .success(function (data) { + $scope.items = data; }); - }; - $scope.cancel = function () { - $modalInstance.dismiss('cancel'); - }; + $scope.selected = { + item: $scope.items[0] + }; - if (item != undefined) { - angular.forEach($scope.fonts, function (value, key) { - if (value.fontFamily == item.value) { - $scope.selectedFont = value; - $scope.selectedFont.variant = item.fontWeight + item.fontStyle; - $scope.selectedFont.fontWeight = item.fontWeight; - $scope.selectedFont.fontStyle = item.fontStyle; - } - }); + $scope.ok = function () { + $modalInstance.close($scope.selected.item); + }; + + $scope.cancel = function () { + $modalInstance.dismiss('cancel'); + }; + +}) + +// Font picker controller +.controller('uskytuning.fontfamilypickercontroller', function ($scope, $modalInstance, item, googleFontFamilies, $http) { + + $scope.safeFonts = ["Arial, Helvetica", "Impact", "Lucida Sans Unicode", "Tahoma", "Trebuchet MS", "Verdana", "Georgia", "Times New Roman", "Courier New, Courier"]; + $scope.fonts = []; + $scope.selectedFont = {}; + + var googleGetWeight = function (googleVariant) { + return (googleVariant != undefined && googleVariant != "") ? googleVariant.replace("italic", "") : ""; + }; + + var googleGetStyle = function (googleVariant) { + var variantStyle = ""; + if (googleVariant != undefined && googleVariant != "" && googleVariant.indexOf("italic") >= 0) { + variantWeight = googleVariant.replace("italic", ""); + variantStyle = "italic"; } + return variantStyle; + }; + angular.forEach($scope.safeFonts, function (value, key) { + $scope.fonts.push({ + groupName: "Safe fonts", + fontType: "safe", + fontFamily: value, + fontWeight: "normal", + fontStyle: "normal", + }); }); + angular.forEach(googleFontFamilies.items, function (value, key) { + var variants = value.variants; + var variant = value.variants.length > 0 ? value.variants[0] : ""; + var fontWeight = googleGetWeight(variant); + var fontStyle = googleGetStyle(variant); + $scope.fonts.push({ + groupName: "Google fonts", + fontType: "google", + fontFamily: value.family, + variants: value.variants, + variant: variant, + fontWeight: fontWeight, + fontStyle: fontStyle + }); + }); + $scope.setStyleVariant = function () { + if ($scope.selectedFont != undefined) { + return { + 'font-family': $scope.selectedFont.fontFamily, + 'font-weight': $scope.selectedFont.fontWeight, + 'font-style': $scope.selectedFont.fontStyle + } + } + }; + + $scope.showFontPreview = function (font) { + $scope.selectedFont = font; + if (font != undefined && font.fontFamily != "" && font.fontType == "google") { + $scope.selectedFont.fontWeight = googleGetWeight($scope.selectedFont.variant); + $scope.selectedFont.fontStyle = googleGetStyle($scope.selectedFont.variant); + WebFont.load({ + google: { + families: [font.fontFamily + ":" + font.variant] + }, + loading: function () { + console.log('loading'); + } + }); + } + } + + $scope.ok = function () { + $modalInstance.close({ + fontFamily: $scope.selectedFont.fontFamily, + fontType: $scope.selectedFont.fontType, + fontWeight: $scope.selectedFont.fontWeight, + fontStyle: $scope.selectedFont.fontStyle, + }); + }; + + $scope.cancel = function () { + $modalInstance.dismiss('cancel'); + }; + + if (item != undefined) { + angular.forEach($scope.fonts, function (value, key) { + if (value.fontFamily == item.value) { + $scope.selectedFont = value; + $scope.selectedFont.variant = item.fontWeight + item.fontStyle; + $scope.selectedFont.fontWeight = item.fontWeight; + $scope.selectedFont.fontStyle = item.fontStyle; + } + }); + } + +}); diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js new file mode 100644 index 0000000000..f4387fbe3f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js @@ -0,0 +1,67 @@ + +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +var refrechLayout = function (parameters) { + var string = "less.modifyVars({" + parameters.join(",") + "})"; + eval(string); +} + +var closeIntelTuning = function (tunningModel) { + + $('a').removeClass("myDisable"); + $('a').unbind("click.myDisable"); + + $("[uSky-over]").css('outline', 'none'); + $.each(tunningModel.categories, function (key, category) { + $.each(category.sections, function (key, section) { + $.each(section.subSections, function (key, subSection) { + if (subSection.schema) { + $(subSection.schema).unbind(); + $(subSection.schema).removeAttr("uSky-over"); + } + }); + }); + }); + +} + +var initIntelTuning = function (tunningModel) { + + $('a').addClass("myDisable"); + $('a').bind("click.myDisable", function () { return false; }); + + $.each(tunningModel.categories, function (key, category) { + $.each(category.sections, function (key, section) { + $.each(section.subSections, function (key, subSection) { + if (subSection.schema) { + $(subSection.schema).attr("uSky-over", subSection.schema); + } + }); + }); + }); + + $(document).mousemove(function (e) { + + e.stopPropagation(); + + $("[uSky-over]").css('outline', 'none'); + + var target = $(e.target); + while (target.length > 0 && (target.attr('uSky-over') == undefined || target.attr('uSky-over') == '')) { + target = target.parent(); + } + + if (target.attr('uSky-over') != undefined || target.attr('uSky-over') != '') { + target.unbind(); + target.css('outline', '2px solid blue'); + target.click(function (e) { + e.stopPropagation(); + console.info(target.attr('uSky-over')); + parent.uSkyRefrechIntelTuning(target.attr('uSky-over')); + }); + } + }); + +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js new file mode 100644 index 0000000000..41e5acd85f --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js @@ -0,0 +1,41 @@ + +/*********************************************************************************************************/ +/* Global function and variable for panel/page com */ +/*********************************************************************************************************/ + +/* Refresh tuning panel with selected fieds */ +var uSkyRefrechIntelTuning = function (schema) { + + var scope = angular.element($("#uSkyTuningPanel")).scope(); + + var notFound = true; + angular.forEach(scope.tuningModel.categories, function (category, key) { + var isContainer = false; + angular.forEach(category.sections, function (section, key) { + angular.forEach(section.subSections, function (subSection, key) { + if (subSection.schema && schema.toLowerCase() == subSection.schema.toLowerCase()) { + isContainer = true; + notFound = false + } + + }); + }); + if (!category.active) { + category.active = isContainer; + } + }); + if (notFound) { + scope.tuningModel.categories[0].active = true; + } + scope.$apply(); + + if (notFound) { + scope.schemaFocus = "body"; + } + else { + scope.schemaFocus = schema.toLowerCase(); + } + + scope.$apply(); + +} \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html index 48688f0071..e99bef0a6d 100644 --- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html +++ b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html @@ -1,38 +1,62 @@ -
+ + + + -
+ + + + + + + + + +
-
+
-
+
-
+
+
+ +
+
-
+
- + + + + {{category.name}} +
- + + + + {{subSection.name}} +
@@ -104,14 +128,14 @@
-
+
    -
  • +
  • @@ -124,14 +148,32 @@
- + +
+ + + + + +
    +
  • desktop {{previewDevice}}
    • +
  • tablet
    • +
  • mobile
    • +
+ + + + + +
+
-
-
+ +
+ +
+ + + + + + + \ No newline at end of file diff --git a/src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js b/src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js index b651069538..54d43c3d58 100644 --- a/src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js +++ b/src/Umbraco.Web.UI.Client/src/uSkyTuning.loader.js @@ -1,12 +1,13 @@ LazyLoad.js([ '/Umbraco/lib/jquery/jquery-2.0.3.min.js', '/Umbraco/lib/jquery/jquery-ui-1.10.4.custom.min.js', - '/Umbraco/lib/Less/less-1.7.0.min.js', '/Umbraco/lib/angular/1.1.5/angular.min.js', '/Umbraco/lib/angular-bootstrap/ui-bootstrap-tpls-0.10.0.min.js', '/Umbraco/lib/spectrum/spectrum.js', 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', - '/umbraco/js/umbraco.uSkyTuning.js' + '/Umbraco/js/uSkyTuning.config.js', + '/Umbraco/js/uSkyTuning.palettes.js', + '/umbraco/js/uSkyTuning.panel.js' ], function () { jQuery(document).ready(function () { angular.bootstrap(document, ['umbraco.uSkyTuning']); diff --git a/src/Umbraco.Web.UI/Umbraco/js/uSkyTuning.loader.js b/src/Umbraco.Web.UI/Umbraco/js/uSkyTuning.loader.js deleted file mode 100644 index b651069538..0000000000 --- a/src/Umbraco.Web.UI/Umbraco/js/uSkyTuning.loader.js +++ /dev/null @@ -1,15 +0,0 @@ -LazyLoad.js([ - '/Umbraco/lib/jquery/jquery-2.0.3.min.js', - '/Umbraco/lib/jquery/jquery-ui-1.10.4.custom.min.js', - '/Umbraco/lib/Less/less-1.7.0.min.js', - '/Umbraco/lib/angular/1.1.5/angular.min.js', - '/Umbraco/lib/angular-bootstrap/ui-bootstrap-tpls-0.10.0.min.js', - '/Umbraco/lib/spectrum/spectrum.js', - 'http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js', - '/umbraco/js/umbraco.uSkyTuning.js' -], function () { - jQuery(document).ready(function () { - angular.bootstrap(document, ['umbraco.uSkyTuning']); - }); -} -); \ No newline at end of file