uskytuning with style suggest and preview device

2014-05-12 19:57:06 +02:00
parent 2d050a0c88
commit 7e61b25746
10 changed files with 1096 additions and 838 deletions
--- 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'],
--- a/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less
+++ b/src/Umbraco.Web.UI.Client/src/less/uSkyTuning.panelStyles.less
--- 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",
--- 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)" },
--- 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;
+            }
+        });
+    }
+
+});
--- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.front.js
+++ 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'));
+            });
+        }
+    });
+
+}
--- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.global.js
+++ 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();
+
+}
--- a/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html
+++ b/src/Umbraco.Web.UI.Client/src/uSky/uSkyTuning.html
@@ -1,38 +1,62 @@
-<div class="uskytuning">
+
+<!DOCTYPE html>
+<html lang="en">
+<head>

-    <div ng-controller="Umbraco.uSkyTuningController">
+    <link href="/Umbraco/lib/bootstrap/css/bootstrap.min.3.0.1.css" type="text/css" rel="stylesheet" />
+    <link href="/Umbraco/assets/css/uSkyTuning.panelStyles.css" type="text/css" rel="stylesheet" />
+    <link href="/Umbraco/lib/spectrum/spectrum.css" type="text/css" rel="stylesheet" />
+    <link href="/Umbraco/lib/jquery/jquery-ui-1.10.4.custom.min.css" type="text/css" rel="stylesheet" />
+
+</head>
+
+<body id="uSkyTuningPanel" ng-controller="Umbraco.uSkyTuningController">
+
+    <div class="uskytuning">

        <div id="TuningBg" ng-class="{open:isOpen}" style="display: block;">

-            <div class="tunning-tools">
+            <div class="tuning-tools">

                <div ng-click="togglePanel()">
                    <i ng-if="isOpen" class="icon icon-left-double-arrow"></i>
                    <i ng-if="!isOpen" class="icon icon-right-double-arrow"></i>
                </div>

-                <div ng-if="isOpen" ng-click="settingOpen(true)" ng-class="{selected:settingIsOpen}">
+                <div ng-if="isOpen" ng-click="settingOpen('setting')" ng-class="{selected:settingIsOpen=='setting'}">
                    <i class="icon icon-paint-roller"></i>
                </div>

-                <div ng-if="isOpen" ng-click="settingOpen(false)" ng-class="{selected:!settingIsOpen}">
+                <div ng-if="isOpen" ng-click="settingOpen('presetColors')" ng-class="{selected:settingIsOpen=='presetColors'}">
                    <i class="icon icon-palette"></i>
                </div>

+                <div ng-if="isOpen" ng-click="settingOpen('previewDevice')" ng-class="{selected:settingIsOpen=='previewDevice'}">
+                    <i class="icon icon-iphone"></i>
+                </div>
+
            </div>

            <div class="tuning-wrapper">

-                <div ng-show="settingIsOpen">
+                <div ng-show="settingIsOpen == 'setting'">

                    <tabset vertical="false">

-                        <tab ng-repeat="category in tunningModel.categories" heading="{{category.name}}">
+                        <tab ng-repeat="category in tuningModel.categories" active="category.active">
+
+                            <tab-heading>
+                                <span>{{category.name}}</span>
+                            </tab-heading>

                            <div ng-repeat="section in category.sections">

                                <accordion close-others="true">
-                                    <accordion-group ng-repeat="subSection in section.subSections" is-open="$index == 0" heading="{{subSection.name}}">
+                                    <accordion-group ng-repeat="subSection in section.subSections" is-open="(schemaFocus != '' && schemaFocus == subSection.schema.toLowerCase())">
+
+                                        <accordion-heading>
+                                            <span ng-click="accordionOpened(subSection.name)" ng-mouseover="accordionWillBeOpened(subSection.name)">{{subSection.name}}</span>
+                                        </accordion-heading>

                                        <div class="div-field" ng-repeat="field in subSection.fields">

@@ -104,14 +128,14 @@

                </div>

-                <div ng-show="!settingIsOpen">
+                <div ng-show="settingIsOpen == 'presetColors'">

                    <tabset vertical="false">

                        <tab heading="Preset colors">

                            <ul class="palette">
-                                <li ng-click="refreshTunningByPalette(palette.colors)" ng-repeat="palette in tunningPalette">
+                                <li ng-click="refreshtuningByPalette(palette.colors)" ng-repeat="palette in tuningPalette">
                                    <div>
                                        <span style="background-color: {{ palette.mainColor }}"></span>
                                    </div>
@@ -124,14 +148,32 @@
                    </tabset>

                </div>
-                 
+
+                <div ng-show="settingIsOpen == 'previewDevice'">
+
+                    <tabset vertical="false">
+
+                        <tab heading="Preview device">
+
+                            <ul>
+                                <li style="color:white" ng-click="updatePreviewDevice('desktop')">desktop  {{previewDevice}}</li>
+                                <li style="color:white" ng-click="updatePreviewDevice('tablet')">tablet</li>
+                                <li style="color:white" ng-click="updatePreviewDevice('mobile')">mobile</li>
+                            </ul>
+
+                        </tab>
+
+                    </tabset>
+
+                </div>
+
                <button class="btn btn-default btn-default-save" ng-click="saveLessParameters()">save</button>

            </div>

            <script type="text/ng-template" id="myModalContent.html">
-                <div class="modal-body bodyuSkyTunningImagePicker">
-                    <ul class="uSkyTunningImagePicker">
+                <div class="modal-body bodyuSkytuningImagePicker">
+                    <ul class="uSkytuningImagePicker">
                        <li ng-repeat="background in items.backgrounds">
                            <h3>{{background.name}}</h3>
                            <ul>
@@ -150,17 +192,17 @@

            <script type="text/ng-template" id="fontFamilyPickerModel.html">

-                <div class="modal-header uskytunning-fontfamilypicker">
+                <div class="modal-header uskytuning-fontfamilypicker">
                    <select ng-model="selectedFont" ng-change="showFontPreview(selectedFont)" ng-options="font as font.fontFamily group by font.fontType for font in fonts"></select>
                    <select ng-model="selectedFont.variant" ng-change="showFontPreview(selectedFont)" ng-options="variant for variant in selectedFont.variants" />
                </div>

-                <div class="modal-body uskytunning-fontfamilypicker">
+                <div class="modal-body uskytuning-fontfamilypicker">
                    <span class="show" ng-style="setStyleVariant()">Aa Bb Cc 1 2 3 4 ... <br />The quick brown fox jumps over the lazy dog....</span>
                </div>


-                <div class="modal-footer uskytunning-fontfamilypicker">
+                <div class="modal-footer uskytuning-fontfamilypicker">
                    <button class="btn btn-primary" ng-click="ok()">OK</button>
                    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
                </div>
@@ -168,8 +210,17 @@
            </script>

        </div>
- 

    </div>

-</div>
+
+    <div id="demo-iframe-wrapper" class="{{previewDevice}}">
+        <iframe id="resultFrame" src="/" frameborder="0"></iframe>
+    </div>
+
+    <script src="/umbraco/lib/lazyload/lazyload.min.js"></script>
+    <script src="/umbraco/js/uSkyTuning.loader.js"></script>
+
+</body>
+
+</html>
--- 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']);
--- a/src/Umbraco.Web.UI/Umbraco/js/uSkyTuning.loader.js
+++ b/src/Umbraco.Web.UI/Umbraco/js/uSkyTuning.loader.js
@@ -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']);
-    });
-}
-);