Skip to content
This repository was archived by the owner on Apr 29, 2021. It is now read-only.

Commit 1ab8a8d

Browse files
hollyschinskyhollyschinsky
committed
Fixes and enhancements to template branch:
- [#688] Updated file watcher handling to watch the config.xml file and keep watching for updates upon change - [#680] Added new styling and a status message to better visually indicate create is occurring - [#679] Improved overlay transitions for template/create overlays - [#678] Fixed drag n drop workflow to add the project when an existing project folder is dragged in - Removed updateConfig functions for project create since the CLI does it prior - Updated README with quick start info using electron-prebuilt and live reload - Added sample sign-config file Former-commit-id: 9f26b36
1 parent 84d9cbb commit 1ab8a8d

10 files changed

+114
-87
lines changed

‎sign-config-sample.json

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// A sample config file for code signing this app. Copy to a file named sign-config.json locally
2+
// and replace with your developer certificate information from the Mac Keychain
3+
{
4+
"certName": "Mac Developer: Your Name (DM2Q9XM67D)"
5+
}

‎www/css/animate.css

+7
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,13 @@
2222
animation-fill-mode: both;
2323
}
2424

25+
.animatedFast {
26+
-webkit-animation-duration: .3s;
27+
animation-duration: .3s;
28+
-webkit-animation-fill-mode: both;
29+
animation-fill-mode: both;
30+
}
31+
2532
.animatedNotification {
2633
-webkit-animation-duration: 2s;
2734
animation-duration: 2s;

‎www/css/index.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@
112112
position: fixed;
113113
top: 0px;
114114
left: 75px;
115-
z-index: 12;
115+
z-index: 5;
116116
width: 375px;
117117
height: 120px;
118118
}

‎www/css/loader.css

+23-1
Original file line numberDiff line numberDiff line change
@@ -43,11 +43,33 @@ modified:
4343
-ms-transform: translateZ(0);
4444
transform: translateZ(0);
4545
-webkit-animation: load8 1.1s infinite linear;
46-
animation: load8 1.1s infinite linear;
46+
animation: load8 1.1s infinite linear;
4747
}
4848
.loader,
4949
.loader:after {
5050
border-radius: 50%;
5151
width: 38px;
5252
height: 38px;
5353
}
54+
.loader.bw {
55+
position: absolute;
56+
top: 260px;
57+
left: 162px;
58+
border-top: 5px solid rgba(0, 0, 0, 0.6);
59+
border-right: 5px solid rgba(0, 0, 0, 0.6);
60+
border-bottom: 5px solid rgba(0, 0, 0, 0.6);
61+
border-left: 5px solid #ffffff;
62+
-webkit-transform: translateZ(0);
63+
-ms-transform: translateZ(0);
64+
transform: translateZ(0);
65+
-webkit-animation: load8 1.1s infinite linear;
66+
animation: load8 1.1s infinite linear;
67+
}
68+
.loaderText {
69+
display: none;
70+
position: absolute;
71+
top: 300px;
72+
left: 130px;
73+
font-weight: bold;
74+
opacity: 1.0;
75+
}

‎www/index.html

+1
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
<div id="loading-overlay-sidebar" class="loading-overlay-sidebar"></div>
2626
<div id="loading-overlay-content" class="loading-overlay-content">
2727
<div class="loader"></div>
28+
<p class="loaderText"></p>
2829
</div>
2930
</div>
3031

‎www/js/drag-n-drop-handlers.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -3,26 +3,26 @@ function handleDragOver(evt) {
33
evt.preventDefault();
44
evt.originalEvent.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
55
}
6-
76
function handleDrop(evt) {
87
evt.stopPropagation();
98
evt.preventDefault();
109

1110
var length = evt.originalEvent.dataTransfer.items.length;
1211
for (var i = 0; i < length; i++) {
1312
var entry = evt.originalEvent.dataTransfer.items[i].webkitGetAsEntry();
13+
var path = evt.originalEvent.dataTransfer.files[i].path;
1414
if (entry) {
1515
trackDragAndDrop();
1616
if (entry.isFile) {
17-
console.log("file");
18-
// if user drags a file, put them into the normal add / open project workflow
19-
displayAddCreateProjectOverlay();
17+
// If they drop a file in and not a folder, show a message telling them to add the folder.
18+
// Could consider trying to use parent folder of the file they dragged in, in the future.
19+
displayErrorMessage("Please drag in an existing PhoneGap project folder to add it to your project list. ");
2020
} else if (entry.isDirectory) {
21-
console.log("folder: " + entry.fullPath);
22-
// prompt user into normal add / open project workflow - we may want to consider automatically adding the folder as a project but we would
23-
// need to add logic to determine if the folder contains a valid project. (validProject) ? openExisting : createNew
24-
displayAddCreateProjectOverlay();
25-
}
21+
// Trigger the open project workflow, which will look for the existence of the config.xml etc
22+
// and add the project if found
23+
global.createClicked = false;
24+
openProject(path);
25+
}
2626
}
2727
}
2828
}

‎www/js/loader.js

+14-3
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,19 @@ function hideLoader() {
33
}
44

55
function showLoader(shouldFade) {
6-
// For longer running tasks, show spinner and fade out UI until complete
7-
if (shouldFade)
8-
$("#loading-overlay").css({'opacity':0.2})
6+
// For longer running tasks, show spinner and fade out background until complete
7+
if (shouldFade) {
8+
// Style spinner black/white and add helpful text to show what's happening.
9+
$("#loading-overlay").css({'opacity':0.8})
10+
$(".loader").addClass('bw');
11+
$(".loaderText").html("Creating Project...");
12+
$(".loaderText").css({'display':'block'});
13+
}
14+
else {
15+
$("#loading-overlay").css({'opacity':1.0});
16+
$(".loader").removeClass('bw');
17+
$(".loaderText").css({'display':'none'});
18+
}
19+
920
$("#loading-overlay").show();
1021
}

‎www/js/project-create-open-handlers.js

+37-55
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,12 @@ function selectDirectory(e) {
6969
var projectDir = $("#projectDirectory").val().trim();
7070
var projectName = $("#projectName").val().trim();
7171

72+
// If this came from drag-n-drop the project directory name will be
73+
// passed in there so use it
74+
if (e != null) {
75+
projectDir = e;
76+
}
77+
7278
var isProjectPathEmpty = isProjectPathFieldEmpty(projectDir);
7379
var isProjectNameEmpty = isEmptyField(projectName);
7480

@@ -162,88 +168,64 @@ function create(projectName, projectId, projDir) {
162168
var opts = [];
163169
opts.env = process.env;
164170

171+
var start = new Date();
172+
console.log("CREATE *STARTED* AT: "+ start.toUTCString());
173+
165174
// spawn child process and include success/error callbacks
166175
var child = spawn(node, args, opts);
167176
showLoader(true);
168177

169178
child.on('close', function(code) {
179+
170180
if (code === 0) {
171-
d = new Date();
172181
hideLoader();
173-
console.log("Created project at: "+ options.path + " end time " + d.toUTCString());
182+
var complete = new Date();
183+
var diff = complete - start;
184+
var seconds_diff = diff / 1000;
185+
var seconds_between = Math.abs(seconds_diff);
186+
console.log("CREATE *COMPLETED* AT " + complete.toUTCString() + ". TOTAL TIME: "+seconds_between + " seconds.");
174187
createHandler(projectName, projectId, options.path);
175188
setLastSelectedProjectPath(options.path);
176189
}
177190
else {
178191
hideLoader();
179-
displayErrorMessage("Project create failed with code " + code);
192+
displayErrorMessage("Project create failed with code " + code);
180193
}
194+
181195
});
182196
child.on('error', function(e) {
183-
console.log(e);
184-
displayErrorMessage(e);
197+
console.log(data.toString('utf8'));
198+
displayErrorMessage(e.toString);
185199
});
186-
187200
}
188201

189202
function createHandler(projectName, projectId, projDir) {
190-
// update the config.xml of the newly created project with the project name & project id entered by the user
191-
updateConfig(projectName, projectId, projDir);
203+
// Removed updateConfig in favor of new readConfig since the config.xml file was already updated by the CLI
204+
// updateConfig(projectName, projectId, projDir);
205+
readConfig(projectName, projectId, projDir);
192206
global.projDir = projDir;
193207
hideProjectDetailsOverlay();
194208
}
195209

196-
function updateConfig(projectName, projectId, projDir) {
197-
console.log("updateConfig");
210+
// Read the config.xml of the newly created project to get the version etc and invoke addProject
211+
function readConfig(projName, projId, projDir) {
198212
var newPathToConfigFile = projDir + buildPathBasedOnOS("/config.xml");
199-
213+
200214
fs.readFile(newPathToConfigFile, {encoding: 'utf8'}, function(err, newPathData) {
201215
if(err) {
202216
console.log("Error reading config file at " + newPathToConfigFile);
203-
displayMissingConfigFileNotification();
204-
} else {
205-
$.xmlDoc = $.parseXML(newPathData);
206-
console.log("updateConfigOnProjectCreation - newPathData");
207-
updateConfigOnProjectCreation($.xmlDoc, projectName, projectId, newPathToConfigFile, projDir);
208-
}
209-
});
210-
}
211-
212-
function updateConfigOnProjectCreation(configXML, projectName, projectId, pathToConfigFile, projDir) {
213-
var iconPath = projDir + buildPathBasedOnOS("/www/");
214-
var serializer = new XMLSerializer();
215-
var contents = serializer.serializeToString(configXML);
216-
var xml = new XML(contents);
217-
$.xml = $(configXML);
218-
219-
// update project name
220-
xml.child("name").setValue(projectName);
221-
222-
// update project id
223-
xml.attribute("id").setValue(projectId);
224-
225-
// get the project version
226-
var projVersion = xml.attribute("version").getValue();
227-
228-
// get the app icon
229-
var projectIcon = $.xml.find("icon").attr("src");
230-
iconPath += projectIcon;
231-
232-
// write the user entered project name & project id to the config.xml file
233-
fs.writeFile(pathToConfigFile, xml, function (err) {
234-
if (err) {
235-
// throw err
236-
} else {
237-
// check if the project exists in PG-GUI's localstorage before adding
238-
//console.log("projDir: " + projDir);
239-
//console.log(projectExistsInLocalStorage(projDir));
240-
if(!projectExistsInLocalStorage(projDir)) {
241-
addProject(projectName, projVersion, iconPath, projDir);
242-
} else {
243-
displayProjectExistsNotification();
244-
}
245-
}
246-
});
217+
displayMissingConfigFileNotification();
218+
} else {
219+
console.log("updateConfigOnProjectCreation - newPathData");
220+
xmlDoc = $.parseXML(newPathData);
221+
$xml = $(xmlDoc);
222+
var projVersion = $xml.find("widget").attr("version")
223+
var projIcon = $xml.find( "icon" ).attr("src");;
224+
var iconPath = projDir + buildPathBasedOnOS("/www/");
225+
iconPath += projIcon;
226+
addProject(projName, projVersion, iconPath, projDir);
227+
}
228+
});
247229
}
248230

249231
function checkIfProjectConfigExists(projDir) {

‎www/js/project-widget.js

+4-9
Original file line numberDiff line numberDiff line change
@@ -225,22 +225,17 @@ function setWatcher(filePath, projDir, id) {
225225
console.log("setWatcher(" + filePath + ", " + projDir + ", " + id + ");");
226226

227227
var chokidar = require("chokidar");
228-
229-
var watcher = chokidar.watch(projDir, {
228+
229+
var watcher = chokidar.watch(filePath, {
230230
ignored: /[\/\\]\./,
231-
persistent: true,
232-
awaitWriteFinish: {
233-
stabilityThreshold: 2000,
234-
pollInterval: 100
235-
},
231+
persistent: true
236232
});
237233

238234
// Declare the listeners of the watcher
239235
watcher.on('change', function(filePath) {
240236
// Ensure the config.xml gets added to avoid timing issues reading/updating it after
241237
console.log('config.xml file changed at ' + filePath);
242-
watcher.close();
243-
238+
244239
// reload the updated values from config.xml & update the GUI
245240
fs.readFile(filePath, {encoding:'utf8'}, function(err, data) {
246241
if (err) {

‎www/js/sidebar-handlers.js

+13-9
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
// -- template overlay
22
function displayTemplateOverlay(evt) {
3-
4-
if (!global.backTemplateClicked) {
5-
hideAddCreateProjectOverlay();
3+
if (!global.backTemplateClicked) {
4+
animateTemplateOverlayEntry();
5+
hideAddCreateProjectOverlay();
66
}
7-
8-
animateTemplateOverlayEntry();
97
}
108

119
function animateTemplateOverlayEntry() {
@@ -21,7 +19,8 @@ function animateTemplateOverlayEntry() {
2119
}
2220

2321
$("#templateOverlay").show();
24-
$("#overlay-bg").show();
22+
$("#overlay-bg").show();
23+
2524
}
2625

2726
function hideTemplateOverlay(evt) {
@@ -113,16 +112,21 @@ function displayAddCreateProjectOverlay(evt) {
113112
}
114113

115114
function hideAddCreateProjectOverlay(evt) {
115+
$("#templateOverlay").off("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend");
116116
$("#createOpenProjectOverlay").removeClass("animated slideInLeft");
117-
$("#createOpenProjectOverlay").addClass("animated slideOutLeft");
117+
118+
if ($("#templateOverlay").css('display') == 'none')
119+
$("#createOpenProjectOverlay").addClass("animatedFast slideOutLeft");
120+
else $("#createOpenProjectOverlay").addClass("animatedFast fadeOut");
121+
118122
$("#createOpenProjectOverlay").on("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend", handleHideAddCreateProjectOverlayAnimationEnd);
119123
$("#plus-holder").removeClass("sidebar-button-active");
120124
}
121125

122126
function handleHideAddCreateProjectOverlayAnimationEnd() {
123-
$("#createOpenProjectOverlay").off("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend");
127+
$("#createOpenProjectOverlay").off("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oAnimationEnd animationend");
124128
$("#createOpenProjectOverlay").hide();
125-
$("#createOpenProjectOverlay").removeClass("animated slideOutLeft");
129+
$("#createOpenProjectOverlay").removeClass("animatedFast fadeOut slideOutLeft");
126130
if (!global.createChosen) {
127131
$("#plus-icon").attr("src", "img/icons/normal/plus.svg");
128132
}

0 commit comments

Comments
 (0)