Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Upgrade/8525 j query3.6 bootstrap4.6 #8531

Open
wants to merge 20 commits into
base: dev
Choose a base branch
from
Open

Upgrade/8525 j query3.6 bootstrap4.6 #8531

Show file tree
Hide file tree
Changes from 19 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
76d1e9a
- jQuery 3.6, JQueryUI 1.13, Bootstrap 4.6
HermesSbicego-Laser Jan 10, 2022
7456a71
Adds Assets for jquery-3.6.0.js _interactions.scss
HermesSbicego-Laser Jan 10, 2022
850b9c2
col-xs-* changed into col-sm-* bevause was dismissed in bootstrap 4.x
HermesSbicego-Laser Jan 10, 2022
96ee888
Removes default-grid.css from admin views of Layout editor because in…
HermesSbicego-Laser Jan 10, 2022
bbe1086
GetPhysicalPath returns error if url contains '?'
HermesSbicego-Laser Jan 10, 2022
33f3561
Merge branch 'fix/GetPhysicalPath_Querystring_Support' of https://git…
HermesSbicego-Laser Jan 10, 2022
5a01727
- refactor
HermesSbicego-Laser Jan 11, 2022
b1e9b93
refactor
HermesSbicego-Laser Jan 11, 2022
8334106
Adds ParentType property to LayoutEditor_Template_Children shape so i…
HermesSbicego-Laser Jan 11, 2022
858c1ff
Adds original Bootstrap js and css
HermesSbicego-Laser Jan 12, 2022
51e9c60
Gulpfile.js restored to its original version: it does not support js …
HermesSbicego-Laser Jan 12, 2022
8bee023
- csproj file
HermesSbicego-Laser Jan 13, 2022
32848f5
Uses on("unload", handler) instead of unload(handler) because the las…
HermesSbicego-Laser Jan 13, 2022
af3c676
Updates jquery.mjs.nestedSortable.js to latest version
HermesSbicego-Laser Jan 13, 2022
2156489
downgrade to bootstrap 4.6.0 cause ajaxaspnetcdn does not have 4.6.1 …
HermesSbicego-Laser Jan 13, 2022
19ee480
Bootstrap 4.6.1 jQuery 3.6.0 jQueryUI 1.13.0 CDN + local files
HermesSbicego-Laser Jan 14, 2022
d56c452
prevent the "Cannot set properties of null (setting 'dir')" error if …
HermesSbicego-Laser Jan 17, 2022
01ce4d0
Merge remote-tracking branch 'remotes/Orchard/dev' into Upgrade/8525_…
HermesSbicego-Laser Jan 18, 2022
552ab4e
set the #content width to auto in order to keep it within the window
HermesSbicego-Laser Jan 18, 2022
73bea3c
replaced a removed method (size()) with a property (length)
AgostiniAlessandro Oct 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,7 @@ function buildJsPipeline(assetGroup, doConcat, doRebuild) {
var typeScriptOptions = { allowJs: true, noImplicitAny: true, noEmitOnError: true };
if (assetGroup.typeScriptOptions)
typeScriptOptions = Object.assign(typeScriptOptions, assetGroup.typeScriptOptions); // Merge override options from asset group if any.
if (doConcat)
if (doConcat)
typeScriptOptions.outFile = assetGroup.outputFileName;
return gulp.src(assetGroup.inputPaths)
.pipe(gulpif(!doRebuild,
Expand All @@ -237,7 +237,7 @@ function buildJsPipeline(assetGroup, doConcat, doRebuild) {
))
.pipe(plumber())
.pipe(gulpif(generateSourceMaps, sourcemaps.init()))
.pipe(typescript(typeScriptOptions))
.pipe(typescript(typeScriptOptions)) // typescript does not support javascript modules
Copy link
Contributor

@Skrypt Skrypt Jan 18, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Typescript should support javascript modules out of the box. I would need to see an example of what you are refering to. An alternative is to build the modules assets with whatever works and to use the gulp pipeline to copy over the bundled assets. If you want to automate that build another option is to call for example Webpack from Gulp.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am talking specifically about gulp-typescript here, because I'm not familiar enough with typescript to make blanket statements.
Typescript does support javascript modules, as long as there also are other dependencies. I mean to say that the transpilation step for modules that are written in .js files results in javascript that depends on other libraries.
For example, it could create javascript that depends on system.js, or amd.js, but doesn't seem to be able to produce javascript that stands on its own. The specific library the js will depend on is "selected" by a property in typeScriptOptions, but the library itself is not automatically included (it would be hard to do so at this stage), so the end result is that the resulting js fails to execute.

Copy link
Contributor

@Skrypt Skrypt Jan 28, 2022 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Have you tried updating gulp-typescript?
"gulp-typescript": "3.1.4",

Because as you can see here :

https://github.com/OrchardCMS/OrchardCore/blob/5310bdb49797e9db02f3107ea9c0feb270e92346/package.json#L54

We are using a newer version. And also, when you say that it produces a non-working javascript file maybe that's because we were back then using a lower version of TypeScript too. So, one thing that could be done here is to try updating TypeScript to the latest version and try to transpile manually these modules assets. Then, if it works, update the gulp-typescript version to the latest version too, and see if that works.

We would need to update the Documentation about the Gulp pipeline so that we know which exact version everything was built with including the TypeScript version used on the system it was built with.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Basically it should support TypeScript 2.2.0

https://github.com/ivogabe/gulp-typescript/pull/457/files#diff-7ae45ad102eab3b6d7e7896acd08c427a9b25b346470d7bc6507b6481575d519R83

.pipe(header(
"/*\n" +
"** NOTE: This file is generated by Gulp and should not be edited directly!\n" +
Expand Down
826 changes: 670 additions & 156 deletions src/Orchard.Web/Core/Navigation/Scripts/jquery.mjs.nestedSortable.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Orchard.Web/Core/Shapes/Scripts/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@
link.text(button.text())
.addClass(button.attr("class"))
.click(function () { _this.submit(); return false; })
.unload(function () { _this = 0; });
.on("unload", function () { _this = 0; });
_this.replaceWith(link);
_this.css({ "position": "absolute", "left": "-9999em" });
$("body").append(_this);
Expand Down
4 changes: 1 addition & 3 deletions src/Orchard.Web/Modules/Orchard.Layouts/Assets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
"Assets/JavaScript/LayoutEditor/Directives/Child.js",
"Assets/JavaScript/LayoutEditor/Directives/Column.js",
"Assets/JavaScript/LayoutEditor/Directives/Content.js",
"Assets/JavaScript/LayoutEditor/Directives/Html.js",
"Assets/JavaScript/LayoutEditor/Directives/Grid.js",
"Assets/JavaScript/LayoutEditor/Directives/Row.js",
"Assets/JavaScript/LayoutEditor/Directives/Popup.js",
Expand All @@ -43,8 +42,7 @@
"Assets/JavaScript/Models/Grid.js",
"Assets/JavaScript/Models/Row.js",
"Assets/JavaScript/Models/Column.js",
"Assets/JavaScript/Models/Content.js",
"Assets/JavaScript/Models/Html.js"
"Assets/JavaScript/Models/Content.js"
],
"output": "Scripts/Models.js"
}
Expand Down
2 changes: 1 addition & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Assets/JavaScript/LayoutEditor/Directives/Toolbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,7 @@
break;
case "Column":
parentClasses = [".layout-row:not(.layout-row-full)"];
placeholderClasses = "layout-element layout-container layout-column ui-sortable-placeholder";
placeholderClasses = "layout-element layout-container layout-column col ui-sortable-placeholder";
floating = true; // To ensure a smooth horizontal-list reordering. https://github.com/angular-ui/ui-sortable#floating
break;
case "Content":
Expand Down
8 changes: 4 additions & 4 deletions ....Web/Modules/Orchard.Layouts/Assets/JavaScript/LayoutEditor/Services/ScopeConfigurator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -228,8 +228,8 @@
return $(e).height();
}));
for (i = 1; i <= 12; i++)
ui.placeholder.removeClass("col-xs-" + i);
ui.placeholder.addClass("col-xs-" + receivedColumn.width);
ui.placeholder.removeClass("col-sm-" + i);
ui.placeholder.addClass("col-sm-" + receivedColumn.width);
if (maxHeight > 0) {
ui.placeholder.height(maxHeight);
ui.placeholder.css("min-height", 0);
Expand Down Expand Up @@ -321,8 +321,8 @@
result.push("layout-row-full");
}
if (child.type == "Column") {
result.push("col-xs-" + child.width);
result.push("col-xs-offset-" + child.offset);
result.push("col-sm-" + child.width);
result.push("col-sm-offset-" + child.offset);
}
if (child.type == "Content")
result.push("layout-content-" + child.contentTypeClass);
Expand Down
12 changes: 6 additions & 6 deletions src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Scripts/LayoutEditor.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Scripts/Models.js
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 0 additions & 3 deletions src/Orchard.Web/Modules/Orchard.Layouts/Views/EditorTemplates/LayoutEditor.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,6 @@
Style.Include("LayoutEditor.css", "LayoutEditor.min.css");
Script.Include("LayoutDesignerHost.js");

// The grid system.
Style.Include("default-grid.css");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This removes probably extensibility.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is that related to the Parent: Row thing? People use it on the front-end for custom themes.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is only in the editor shape for layouts.
I think for front-end you are referring to what's in TheThemeMachine theme? That's a separate css file (with the same name and perhaps same content) that is included in the layout there.

Here in the backoffice editor for the layout, the content of that stylesheet "conflicts" with bootstrap's grid system. I would argue that the stylesheet itself should also be removed from Orchard.Layouts.
In case someone would want to extend styling for this editor, as it is, they would have to go in the sources and change that stylesheet, and at that point one might as well add a Style.Include("my-new.css"); line in LayoutEditor.cshtml.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should not be removed from Orchard.Layouts, because that's the default to use when it's not themed. If there is a conflict on the admin, then we need to ensure that all existing classes are also in bootstrap. Or change the names of the classes to they don't collide.


using (Script.Foot()) {
<script>

Expand Down
2 changes: 1 addition & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Canvas.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@
<div class="layout-container-children-placeholder">
@T("This layout canvas is empty. To get started, drag a grid element from the toolbox and drop it here.")
</div>
@Display(New.LayoutEditor_Template_Children())
@Display(New.LayoutEditor_Template_Children(ParentType: "Canvas"))
</div>
12 changes: 11 additions & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Children.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,15 @@
<div class="layout-children clearfix" ng-model="element.children" ui-sortable="sortableOptions" style="{{element.getContainerTemplateStyles()}}">
@{
var additionalClasses = "";
if (Model.ParentType != null) {
if (Model.ParentType == "Row") {
additionalClasses += "row";
}
}
}
<div class="layout-children clearfix @additionalClasses" ng-model="element.children" ui-sortable="sortableOptions" style="{{element.getContainerTemplateStyles()}}">
<div class="clearfix" ng-repeat="child in element.children" ng-class="getClasses(child)" ng-mouseenter="child.setIsActive(true)" ng-mouseleave="child.setIsActive(false)" ng-click="click(child, $event)" tabindex="{{$id}}">
<orc-layout-child element="child" />
</div>
</div>


2 changes: 1 addition & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Column.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,5 +24,5 @@
<div class="layout-container-children-placeholder">
@T("Drag an element from the toolbox and drop it here to add content.")
</div>
@Display(New.LayoutEditor_Template_Children())
@Display(New.LayoutEditor_Template_Children(ParentType: "Column"))
</div>
2 changes: 1 addition & 1 deletion src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Grid.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@
<div class="layout-container-children-placeholder">
@T("Drag a row element from the toolbox and drop it here to add a row.")
</div>
@Display(New.LayoutEditor_Template_Children())
@Display(New.LayoutEditor_Template_Children(ParentType: "Grid"))
</div>
4 changes: 2 additions & 2 deletions src/Orchard.Web/Modules/Orchard.Layouts/Views/LayoutEditor.Template.Row.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="layout-element-wrapper" ng-class="{'layout-container-empty': getShowChildrenPlaceholder()}">
<div class="layout-element-wrapper col" ng-class="{'layout-container-empty': getShowChildrenPlaceholder()}">
<ul class="layout-panel layout-panel-main">
<li class="layout-panel-item layout-panel-label">Row</li>
@Display(New.LayoutEditor_Template_Properties(ElementTypeName: "row"))
Expand All @@ -18,5 +18,5 @@
<div class="layout-container-children-placeholder">
@T("Drag a column element from the toolbox and drop it here to add a column.")
</div>
@Display(New.LayoutEditor_Template_Children())
@Display(New.LayoutEditor_Template_Children(ParentType: "Row"))
</div>
27 changes: 2 additions & 25 deletions src/Orchard.Web/Modules/Orchard.Resources/Assets.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[
{
"inputs": [ "Assets/Js/jQuery/jquery-3.3.1.js" ],
"inputs": [ "Assets/Js/jQuery/jquery-3.6.0.js" ],
"output": "Scripts/jquery.js"
},
{
Expand Down Expand Up @@ -30,12 +30,11 @@
"output": "Scripts/jquery.cookie.js"
},
{
"inputs": [ "Assets/Js/jQuery/jquery.iframe-transport.js" ],
"inputs": [ "Assets/Js/FileUpload/jquery.iframe-transport.js" ],
"output": "Scripts/jquery.iframe-transport.js"
},
{
"inputs": [
"Assets/Js/FileUpload/jquery.iframe-transport.js",
"Assets/Js/FileUpload/jquery.fileupload.js",
"Assets/Js/FileUpload/jquery.fileupload-process.js",
"Assets/Js/FileUpload/jquery.fileupload-validate.js"
Expand Down Expand Up @@ -102,28 +101,6 @@
"inputs": [ "Assets/Js/Underscore/underscore.js" ],
"output": "Scripts/underscore.js"
},
{
"inputs": [ "Assets/scss/Bootstrap/bootstrap.scss" ],
"output": "Styles/bootstrap.css"
},
{
"inputs": [
"Assets/Js/Bootstrap/alert.js",
"Assets/Js/Bootstrap/button.js",
"Assets/Js/Bootstrap/carousel.js",
"Assets/Js/Bootstrap/collapse.js",
"Assets/Js/Bootstrap/dropdown.js",
"Assets/Js/Bootstrap/index.js",
"Assets/Js/Bootstrap/modal.js",
"Assets/Js/Bootstrap/tooltip.js",
"Assets/Js/Bootstrap/popover.js",
"Assets/Js/Bootstrap/scrollspy.js",
"Assets/Js/Bootstrap/tab.js",
"Assets/Js/Bootstrap/toast.js",
"Assets/Js/Bootstrap/util.js"
],
"output": "Scripts/bootstrap.js"
},
{
"inputs": [ "Assets/Less/FontAwesome/font-awesome.less" ],
"output": "Styles/font-awesome.css"
Expand Down