Skip to content
This repository was archived by the owner on Dec 8, 2020. It is now read-only.

Commit 7dfd847

Browse files
swmitraswmitra
committed
Stylesheet selection settings
Default stylesheet selection settings capability to let the tool know , which stylesheet to choose when creating/cloning elements using widget palette
1 parent 1b6b5fc commit 7dfd847

File tree

8 files changed

+193
-5
lines changed

8 files changed

+193
-5
lines changed

‎DesignerSettingsManager.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/*jslint vars: true, plusplus: true, devel: true, nomen: true, indent: 4, maxerr: 50 */
2+
/*global define, document, console, brackets, $, Mustache */
3+
4+
define(function (require, exports, module) {
5+
"use strict";
6+
7+
var widgetContext = null;
8+
9+
var PreferencesManager = brackets.getModule('preferences/PreferencesManager'),
10+
AppInit = brackets.getModule("utils/AppInit"),
11+
FileSystem = brackets.getModule("filesystem/FileSystem"),
12+
FileUtils = brackets.getModule("file/FileUtils");
13+
14+
// Extension config
15+
var _ExtensionID = "swmitra.html-designer";
16+
var _settingsPath = null;
17+
18+
var _preferenceCache = {};
19+
20+
var _prefs = PreferencesManager.getExtensionPrefs(_ExtensionID);
21+
_prefs.definePreference('settings-file-path', 'string', "");
22+
23+
var currentApplication = null;
24+
var _entryTemplate = '<li class="list-group-item" data-path="{{path}}" title="{{path}}"><a href="#">{{value}}</a><div>Default</div></li>';
25+
26+
$(document).on("application.context","#html-design-editor", function(event,applicationKey){
27+
currentApplication = applicationKey;
28+
$("#html-design-editor").trigger("default-stylesheet-path",[_preferenceCache[currentApplication]]);
29+
});
30+
31+
function _createStylesheetOptions(styleSheets){
32+
$("#default-stylesheet-select-list").html("");
33+
var prefferedStylePath = _preferenceCache[currentApplication];
34+
var newOption;
35+
36+
var sheetCount,styleSheet;
37+
for (sheetCount = 0; sheetCount < styleSheets.length ; sheetCount++) {
38+
styleSheet = styleSheets[sheetCount];
39+
newOption = _entryTemplate.split("{{path}}").join(styleSheet.href);
40+
newOption = newOption.split("{{value}}").join(FileUtils.getBaseName(styleSheet.href));
41+
newOption = $(newOption).appendTo("#default-stylesheet-select-list");
42+
if(styleSheet.href === prefferedStylePath){
43+
newOption.addClass("active");
44+
}
45+
}
46+
47+
if($("#default-stylesheet-select-list").children().length === 0){
48+
$("#default-stylesheet-select-list").html("No Stylesheets Loaded!");
49+
}
50+
}
51+
52+
$(document).on("click","#reset-default-stylesheet",function(event){
53+
$("#default-stylesheet-select-list>li").removeClass("active");
54+
delete _preferenceCache[currentApplication];
55+
$("#html-design-editor").trigger("default-stylesheet-path",[_preferenceCache[currentApplication]]);
56+
FileSystem.getFileForPath(_settingsPath+"/swmitra.html-designer-settings/DefaultStyleSheetPreferences.json").write(JSON.stringify(_preferenceCache),{ blind: true });
57+
});
58+
59+
$(document).on("click","#default-stylesheet-select-list>li",function(event){
60+
$("#default-stylesheet-select-list>li").removeClass("active");
61+
$(this).addClass("active");
62+
_preferenceCache[currentApplication] = $(this).data('path');
63+
$("#html-design-editor").trigger("default-stylesheet-path",[_preferenceCache[currentApplication]]);
64+
FileSystem.getFileForPath(_settingsPath+"/swmitra.html-designer-settings/DefaultStyleSheetPreferences.json").write(JSON.stringify(_preferenceCache),{ blind: true });
65+
});
66+
67+
$(document).on("stylesheets-in-dom","#html-design-editor",function(event, styleSheets){
68+
_createStylesheetOptions(styleSheets);
69+
});
70+
71+
$(document).on("click","#design-settings-anchor",function(event){
72+
if(_settingsPath){
73+
$("#design-modal-backdrop").show();
74+
$("#designer-settings-container").show();
75+
}
76+
});
77+
78+
$(document).on("click","#designer-settings-close",function(event){
79+
$("#design-modal-backdrop").hide();
80+
$("#designer-settings-container").hide();
81+
});
82+
83+
AppInit.appReady(function () {
84+
_settingsPath = _prefs.get('settings-file-path');
85+
if(_settingsPath){
86+
var dir = FileSystem.getDirectoryForPath(_settingsPath+"/swmitra.html-designer-settings");
87+
dir.exists(function(err,flag){
88+
if(flag){
89+
var file = FileSystem.getFileForPath(_settingsPath+"/swmitra.html-designer-settings/DefaultStyleSheetPreferences.json");
90+
file.exists(function(err,flag){
91+
if(flag){
92+
file.read(function(err,data,stats){
93+
if(data){
94+
_preferenceCache = JSON.parse(data);
95+
}
96+
});
97+
} else {
98+
file.write("{}",{ blind: true });
99+
}
100+
});
101+
} else {
102+
dir.create(function(){
103+
FileSystem.getFileForPath(_settingsPath+"/swmitra.html-designer-settings/DefaultStyleSheetPreferences.json").write("{}",{ blind: true });
104+
});
105+
}
106+
});
107+
}
108+
});
109+
110+
});

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -204,3 +204,6 @@ Versions
204204
* Design snippets import/export manually.
205205

206206
![Snippet Addition](https://github.com/swmitra/html-designer-user-guide/blob/master/Getting%20Started/AddTemplate.png) ![Snippet Editing](https://github.com/swmitra/html-designer-user-guide/blob/master/Getting%20Started/EditTemplate.png) ![Snippet Bookmark](https://github.com/swmitra/html-designer-user-guide/blob/master/Getting%20Started/BookmarkTemplate.png)
207+
208+
**1.2.1**
209+
* Default stylesheet selection settings capability to let the tool know , which stylesheet to choose when creating/cloning elements using widget palette (NOTE: Unless a settings path "swmitra.html-designer.settings-file-path" is configured in preferences and Brackets reloaded, settings screen will not be shown. Settings screen will show all the stylesheets loaded for the current file in design mode and only one of them can be identified as "Default")

‎controlhtml/settingsTemplate.html‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<style>
2+
#default-stylesheet-select-list.list-group {
3+
padding-left: 0;
4+
margin: 0px;
5+
}
6+
7+
#default-stylesheet-select-list.list-group .list-group-item {
8+
position: relative;
9+
display: block;
10+
padding: 10px 15px;
11+
margin-bottom: -1px;
12+
border: 1px solid gray;
13+
}
14+
15+
#default-stylesheet-select-list.list-group .list-group-item a {
16+
color:white;
17+
}
18+
19+
#default-stylesheet-select-list.list-group .list-group-item:first-child {
20+
border-top-left-radius: 4px;
21+
border-top-right-radius: 4px;
22+
}
23+
24+
#default-stylesheet-select-list.list-group .list-group-item:last-child {
25+
margin-bottom: 0;
26+
border-bottom-right-radius: 4px;
27+
border-bottom-left-radius: 4px;
28+
}
29+
30+
#default-stylesheet-select-list.list-group .list-group-item div {
31+
display: none;
32+
background-color: rgb(6, 169, 229);
33+
color: white;
34+
padding-left: 10px;
35+
padding-right: 10px;
36+
height: 100% !important;
37+
}
38+
39+
#default-stylesheet-select-list.list-group .list-group-item.active div {
40+
display: flex;
41+
position: absolute;
42+
right: 0px;
43+
top: 0px;
44+
justify-content: center;
45+
align-items: center;
46+
}
47+
</style>
48+
<div class="property-toolbox horz-resizable right-resizer vert-resizable bottom-resizer" id="designer-settings-container" style="pointer-events: all; display: none; position: absolute; padding: 10px; z-index: 52; width: 30%; left: 35%; top: 30%; background-color: rgb(74, 77, 78);">
49+
<div class="propertyToolboxHeader">
50+
Settings
51+
<a class="close" id="designer-settings-close" style="">×</a>
52+
<div class="toolboxHeaderBottom"></div>
53+
</div>
54+
<ul class="nav nav-tabs">
55+
<li class="active"><a data-toggle="tab" href="#Styles" style="color: rgb(255, 255, 255); background: transparent;">Styles</a>
56+
</li>
57+
</ul>
58+
59+
<div class="tab-content quiet-scrollbars" style="border: 1px solid rgba(255, 255, 255,0.2); margin-left: 0px; margin-top: 0px; padding: 5px;border-left-width:0px;border-right-width:0px;">
60+
<div id="Styles" class="tab-pane fade in active">
61+
<ul class="list-group" id="default-stylesheet-select-list" style="overflow-y: scroll;color:lightgray;">
62+
</ul>
63+
</div>
64+
</div>
65+
<button id="reset-default-stylesheet" class="btn warning" style="float:right">Reset</button>
66+
</div>

‎main.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,8 @@ define(function (require, exports, module) {
5151
require("BorderRadiusHandler");
5252
require("DistributionHandler");
5353

54+
require("DesignerSettingsManager");
55+
5456
require("grid/GridOptionsManager");
5557
require("propertysheet/GenericToolBoxHandler");
5658
require("propertysheet/GenericBorderToolBoxHandler");

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"title": "HTML Designer for Brackets",
44
"description": "Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.",
55
"homepage": "https://github.com/swmitra/html-designer",
6-
"version": "1.2.0",
6+
"version": "1.2.1",
77
"author": "Swagatam Mitra <[email protected]>",
88
"license": "MIT",
99
"keywords":["HTML","CSS","Designer","Illustration","Design Editor"],

‎stylemodule/RuleSetCreator.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ define(function (require, exports, module) {
2222

2323
var currentApplication = null;
2424

25+
$(document).on("default-stylesheet-path","#html-design-editor", function(event,defaultPath){
26+
defaultStyleSheet = defaultPath;
27+
});
28+
2529
$(document).on("element.added","#html-design-editor",function(event,element){
2630
var styleSheet = _findDefaultStyleSheet(element.id,null/*ADProjectManager.getConfig('default-stylesheet')*/);
2731
if(!styleSheet){
@@ -101,7 +105,7 @@ define(function (require, exports, module) {
101105
}
102106

103107
function _findDefaultStyleSheet(elementid,sheetPath) {
104-
defaultStyleSheet = sheetPath;
108+
//defaultStyleSheet = sheetPath;
105109
var styleSheets = document.getElementById('htmldesignerIframe').contentWindow.document.styleSheets;
106110
var sheetCount, styleSheet, targetStyleSheet;
107111

@@ -119,9 +123,9 @@ define(function (require, exports, module) {
119123
} else {
120124
var styleNode = document.getElementById('htmldesignerIframe').contentWindow.document.createElement('STYLE');
121125
styleNode = $(styleNode).appendTo(document.getElementById('htmldesignerIframe').contentWindow.document.head)[0];
122-
styleSheet = styleNode.sheet;
126+
targetStyleSheet = styleNode.sheet;
123127
}
124-
return styleSheet;
128+
return targetStyleSheet;
125129
}
126130

127131
$(document).on("application.context","#html-design-editor", function(event,applicationKey){

‎toolboxhtml/toolboxTemplate.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,12 @@
5757
<img class="designToolBoxItem" id="element-search-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Search.png" title="Search"/>
5858
<img class="designToolBoxItem" id="load-as-fragment" src="{{module_path}}/toolboxhtml/toolbarIcons/Fragment.png" title="Load As Fragment"/>
5959
<img class="designToolBoxItem" id="sandbox-frame" src="{{module_path}}/toolboxhtml/toolbarIcons/Sandbox.png" title="Enable Sandboxing"/>
60+
<span class="glyphicon glyphicon-wrench designToolBoxItem" id="design-settings-anchor" style="color:yellow;zoom: 1.4;margin-left: 2px;" title="Settings"></span>
6061
<img src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" style="width:100%;display:block;"/>
6162
<img class="designToolBoxItem" id="widget-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/WidgetToolbox.png" title="Widget Toolbox"/>
6263
<img class="designToolBoxItem" id="attribute-list-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Attributes.png" title="Attributes"/>
6364
<img class="designToolBoxItem" id="dom-outline-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Layers.png" title="DOM Layers"/>
64-
<img src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" style="width:100%;display:block;"/>
65+
<img src="{{module_path}}/controlhtml/Widget_Seperator.png" alt="" style="width:100%;display:block;"/>
6566
<img class="designToolBoxItem" id="bg-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Background.png" title="Background"/>
6667
<img class="designToolBoxItem" id="generic-border-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Border.png" title="Border"/>
6768
<img class="designToolBoxItem" id="transform-toolbox-anchor" src="{{module_path}}/toolboxhtml/toolbarIcons/Transform.png" title="Transform"/>

‎view/ViewManager.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ define(function (require, exports, module) {
3131

3232
var HTMLDesignViewTemplate = require("text!html/html-design-view.html");
3333
var StatusBarViewOptionsTemplate = require("text!controlhtml/view-options.html");
34+
var DesignerSettingsTemplate = require("text!controlhtml/settingsTemplate.html");
3435
var StylesSplitViewTemplate = require("text!controlhtml/splitview-styles-template.html").split("{{module_path}}").join(MODULE_PATH);
3536
var SourceSplitViewTemplate = require("text!controlhtml/splitview-source-template.html");
3637
var SelectionControlTemplate = require("text!controlhtml/selection-pane.html");
@@ -246,6 +247,7 @@ define(function (require, exports, module) {
246247
$("#info-overlay-plane").append(KeyframeTimelineToolBoxTemplate);
247248
$("#design-toolbox-anchor").append(NewToolBoxTemplate);
248249
$("#design-modal-backdrop").append(WidgetTemplateEditorTemplate);
250+
$("#design-modal-backdrop").append(DesignerSettingsTemplate);
249251
});
250252

251253
AppInit.appReady(function () {

0 commit comments

Comments
 (0)