Commit Graph

44 Commits

Author SHA1 Message Date
David Taylor
48193767bf DEV: Sort imports
Automatically generated by `eslint --fix` to satisfy the updated configuration
2023-10-10 21:46:54 +01:00
Joffrey JAFFEUX
2a10ea0e3f
DEV: FloatKit (#23650)
This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @Label={{i18n "foo.bar"}}
  @ICON="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @ICON="plus" @Label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-26 13:39:52 +02:00
David Taylor
8a57798419
DEV: Update discourse-local-dates to new Modal API (#23560) 2023-09-13 15:00:38 +01:00
Joffrey JAFFEUX
85fddf58bc
Revert "DEV: FloatKit (#23541)" (#23549)
This reverts commits

0623ac684a
408e71e437
a32fa3b947

User tips were running into some issues.
2023-09-12 13:55:12 -04:00
David Taylor
c3061d580c
DEV: Remove decorateCookedElement id parameters (#23544)
These are no longer required per https://github.com/discourse/discourse/pull/23543
2023-09-12 16:32:04 +01:00
Joffrey JAFFEUX
0623ac684a
DEV: FloatKit (#23541)
Second iteration of https://github.com/discourse/discourse/pull/23312 with a fix for embroider not resolving an export file using .gjs extension.

---

This PR introduces three new concepts to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast


## Tooltips
### Component

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip 
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

### Service

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

## Menus

Menus are very similar to tooltips and provide the same kind of APIs:

### Component

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

### Service

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manual close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  { 
    component: MyComponent,
    data: { foo: 1 }
  }
)
```


## Toasts

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:50:26 +02:00
Joffrey JAFFEUX
b8cc1072cc
Revert "DEV: FloatKit (#23312)" (#23540)
This reverts commit abcdd8d367.
2023-09-12 15:37:16 +02:00
Joffrey JAFFEUX
abcdd8d367
DEV: FloatKit (#23312)
This PR introduces three new UI elements to Discourse codebase through an addon called "FloatKit":

- menu
- tooltip
- toast

Simple cases can be express with an API similar to DButton:

```hbs
<DTooltip
  @label={{i18n "foo.bar"}}
  @icon="check"
  @content="Something"
/>
```

More complex cases can use blocks:

```hbs
<DTooltip>
  <:trigger>
   {{d-icon "check"}}
   <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
   Something
  </:content>
</DTooltip>
```

You can manually show a tooltip using the `tooltip` service:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
tooltipInstance.close();
tooltipInstance.destroy();

// you can also just close any open tooltip through the service
this.tooltip.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const tooltipInstance = this.tooltip.register(
  document.querySelector(".my-span"),
  options
)

// when done you can destroy the instance to remove the listeners
tooltipInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const tooltipInstance = await this.tooltip.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Menus are very similar to tooltips and provide the same kind of APIs:

```hbs
<DMenu @icon="plus" @label={{i18n "foo.bar"}}>
  <ul>
    <li>Foo</li>
    <li>Bat</li>
    <li>Baz</li>
  </ul>
</DMenu>
```

They also support blocks:

```hbs
<DMenu>
  <:trigger>
    {{d-icon "plus"}}
    <span>{{i18n "foo.bar"}}</span>
  </:trigger>
  <:content>
    <ul>
      <li>Foo</li>
      <li>Bat</li>
      <li>Baz</li>
    </ul>
  </:content>
</DMenu>
```

You can manually show a menu using the `menu` service:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  options
)

// and later manually close or destroy it
menuInstance.close();
menuInstance.destroy();

// you can also just close any open tooltip through the service
this.menu.close();
```

The service also allows you to register event listeners on a trigger, it removes the need for you to manage open/close of a tooltip started through the service:

```javascript
const menuInstance = this.menu.register(
   document.querySelector(".my-span"),
   options
)

// when done you can destroy the instance to remove the listeners
menuInstance.destroy();
```

Note that the service also allows you to use a custom component as content which will receive `@data` and `@close` as args:

```javascript
const menuInstance = await this.menu.show(
  document.querySelector(".my-span"),
  {
    component: MyComponent,
    data: { foo: 1 }
  }
)
```

Interacting with toasts is made only through the `toasts` service.

A default component is provided (DDefaultToast) and can be used through dedicated service methods:

- this.toasts.success({ ... });
- this.toasts.warning({ ... });
- this.toasts.info({ ... });
- this.toasts.error({ ... });
- this.toasts.default({ ... });

```javascript
this.toasts.success({
  data: {
    title: "Foo",
    message: "Bar",
    actions: [
      {
        label: "Ok",
        class: "btn-primary",
        action: (componentArgs) => {
          // eslint-disable-next-line no-alert
          alert("Closing toast:" + componentArgs.data.title);
          componentArgs.close();
        },
      }
    ]
  },
});
```

You can also provide your own component:

```javascript
this.toasts.show(MyComponent, {
  autoClose: false,
  class: "foo",
  data: { baz: 1 },
})
```

Co-authored-by: Martin Brennan <mjrbrennan@gmail.com>
Co-authored-by: Isaac Janzen <50783505+janzenisaac@users.noreply.github.com>
Co-authored-by: David Taylor <david@taylorhq.com>
Co-authored-by: Jarek Radosz <jradosz@gmail.com>
2023-09-12 15:06:51 +02:00
Ted Johansson
bb328792fb
FIX: Remove magic time ranges (#19477)
In #15474 we introduced dedicated support for date ranges. As part of that
change we added a fallback of "magic" date ranges, which treats dates in
any paragraph with exactly two dates as a range. There were discussions
about migrating all such paragraphs to use the new date range element, but
it was ultimately decided against.

This change removes the fallback and, as a bonus, adds support for multiple
date ranges in the same paragraph.
2022-12-16 14:48:39 +08:00
Natalie Tay
e391f71c04
FIX: Determining local date same range is erroring when there is no date (#18509) 2022-10-07 21:07:27 +08:00
Natalie Tay
7d8cda9858
FEATURE: Omit showing day when 'to' day is same as 'from' day (#18500)
Essentially,

Saturday at 2:50 PM -> Saturday at 4:38 PM becomes
Saturday at 2:50 PM -> 4:38 PM (Singapore)

Also, the displayed dates are shortened when the standalone date
is within two days. So despite the 'from' and 'to' date being the
same day, it may show 'Saturday' for 'from', and the specific date
for the 'to'. This corrects the behaviour.

(so if the current date and time is Thursday 5PM, the 'from' date
below is within 2 days, but the 'to' date is not)
Saturday at 2:50 PM -> 8 October 2022 at 9:38 PM becomes
Saturday at 2:50 PM -> 9:38 PM
2022-10-07 09:39:41 +08:00
David Taylor
9534f13256
DEV: Replace site-settings:main with service:site-settings (#17734)
This will allow consumers to inject it using `siteSettings: service()` in preparation for the removal of implicit injections in Ember 4.0. `site-settings:main` is still available and will print a deprecation notice.
2022-08-01 09:43:33 +01:00
Jarek Radosz
c3fd91670e
DEV: Update linting setup and fix issues (#17345)
Re-lands #16119 and #17298

* Update eslint-config-discourse
* Update linting workflow
* Prettier-ignore stuff
* Update template-lint config
* Auto-fix template issues
* Fix various template issues
  Mostly incorrect attributes and unused templates
* Prettier js files
* Fix template auto-fix regressions
* Small css tweak

Co-authored-by: Peter Wagenet <peter.wagenet@gmail.com>
2022-07-06 10:37:54 +02:00
Martin Brennan
54a518b21d
FIX: Quoting local dates bbcode regeneration (#17141)
This commit allows quoting of discourse-local-date elements
and converts the quoted tags back into bbcode so that the
rendered quote will also render the discourse-local-date HTML.
This works on single dates as well as date ranges, and supports
all of the options used by discourse-local-date.

This also necessitated adding addTextDecorateCallback to the
to-markdown core lib (similar to addBlockDecorateCallback and
addTagDecorateCallback) to transform the text nodes between
date ranges to remove the -> in the final quote.

c.f. https://meta.discourse.org/t/quotes-that-contain-date-time/101999
2022-06-21 10:07:21 +10:00
Jarek Radosz
36c2284dea
DEV: Fix typos "formated" -> "formatted" (#17156)
(nothing in all-the* relies on these)
2022-06-20 20:02:05 +02:00
Joffrey JAFFEUX
ad293e510d
FIX: destroys instance when hiding date popover (#16623)
This fix attempts to fix an issue where the preview was not updated after changing timezone. Changing time would work as it would recreate the date DOM element and as a result, reset the popper.
2022-05-03 23:47:25 +02:00
Joffrey JAFFEUX
f86b53778d
FIX: closes popover when downloading calendar (#16598) 2022-05-02 20:35:15 +02:00
Joffrey JAFFEUX
fad94160c7
FIX: uses tippy for popover (#15409)
Note this commit also introduce a new {{d-popover}} component, example usage:

```hbs
{{#d-popover |state|}}
  {{d-button label="foo.things" class="d-popover-trigger"}}

  <div class="d-popover-content">
    Some content
  <div>
{{/d-popover}}
```
2022-05-02 17:10:26 +02:00
Penar Musaraj
e66933ead4
DEV: Remove chat plugin button (#16342) 2022-03-31 09:16:33 -04:00
Penar Musaraj
943083f4df
DEV: Include helper in core for applyLocalDates (#16325) 2022-03-30 20:58:38 -04:00
Krzysztof Kotlarek
17ec3bc5b9
FEATURE: date-range tag for local dates (#15474)
New range tag for local dates with syntax like:
```
[date-range from=2022-01-06T13:00 to=2022-01-08 timezone=Australia/Sydney]
```

Previously, 2 dates in one line were considered as range. It was hard to decide if 2 dates are range when they were in separate lines or have some content between them.

New explicit tag should clearly distinguish between single date and range.

Common code from `addLocalDate` is extracted to `addSingleLocalDate`.

Both `addLocalDate` and new `addLocalRange` are using `addSingleLocalDate`.

Also, `defaultDateConfig` was extracted to have one place for all possible parameters.
2022-01-10 08:02:36 +01:00
Natalie Tay
4c46c7e334
DEV: Remove xlink hrefs (#15059) 2021-11-25 15:22:43 +11:00
Jarek Radosz
4ad77f3382
DEV: Remove .es6 extensions from core (#14912)
Still supported in plugins though.
2021-11-13 12:51:53 +01:00
Krzysztof Kotlarek
9062fd9b7a
FIX: improvements for download local dates (#14588)
* FIX: do not display add to calendar for past dates

There is no value in saving past dates into calendar

* FIX: remove postId and move ICS to frontend

PostId is not necessary and will make the solution more generic for dates which doesn't belong to a specific post.

Also, ICS file can be generated in JavaScript to avoid calling backend.
2021-10-14 09:22:44 +11:00
David Taylor
837bd5a6e5
FIX: Fix local-dates in non-post contexts, and in long topics (#14565)
- Stop looking up the topic title from the DOM. On long topics, the topic title may not be present. Instead, we can store the topic title in a data-title attribute during decorateCookedElement, and then access it later. This approach would also allow us to add customize titles per-local-date in future. If there is no topic title available (e.g. when local dates are used elsewhere in the UI), we use the site name to build a sensible default

- Don't require a postId for creating calendar events. We don't have postIds in non-post contexts. At the moment, the 'download ICS' function will fail without a valid postId, so that will need to be fixed in a future commit.
2021-10-08 20:22:52 +01:00
Krzysztof Kotlarek
4285706d97
FIX: local date trim when no time available (#14525)
When there is a blank space in the end of date, moment is returning a different value:

```javascript
  console.log(moment.tz("2021-09-09 ", "Australia/Sydney").toISOString());
  // 2021-09-09T00:00:00.000Z
  console.log(moment.tz("2021-09-09", "Australia/Sydney").toISOString());
  // 2021-09-08T14:00:00.000Z
```
2021-10-06 16:18:32 +11:00
Krzysztof Kotlarek
cb5b0cb9d8
FEATURE: save local date to calendar (#14486)
It allows saving local date to calendar.
Modal is giving option to pick between ics and google. User choice can be remembered as a default for the next actions.
2021-10-06 14:11:52 +11:00
Jarek Radosz
62b27ea9f3
DEV: Fix moment warnings (#14482)
When start/end was missing the time component the string passed to `moment()` would have a space at the end. This was causing these warnings:

```
Deprecation warning: value provided is not in a recognized RFC2822 or ISO format. moment construction falls back to js Date(), which is not reliable across all browsers and versions. Non RFC2822/ISO date formats are discouraged. Please refer to http://momentjs.com/guides/#/warnings/js-date/ for more info.
```
2021-09-30 22:07:48 +02:00
Mark VanLandingham
c9e7b64a64
DEV: Add toolbar button when chat in installed (#14422) 2021-09-22 13:46:06 -05:00
Krzysztof Kotlarek
38c3a44bf9
FIX: return empty array when no parent for range (#14386)
If parent element for range does not exists, range calculator should
return empty array. In that case duration calculations will stop because
of:

```
if (_rangeElements(element).length === 2) {
  opts.duration = _calculateDuration(element);
}
```
2021-09-20 16:03:02 +10:00
Krzysztof Kotlarek
82b7e34f30
FEATURE: local dates range on click (#14355)
This PR is introducing 2 changes.
1. Date popup is displayed on click instead on hover
2. If the range is given then the whole range is always displayed for both startDate and endDate
3. For range, short time is displayed for end if the range is < 24 hours
2021-09-20 09:23:18 +10:00
Robin Ward
09764291b1 FIX: In test mode, initializers were modifying classes over and over
This adds a new property, `pluginId` which you can pass to `modifyClass`
which prevent the class from being modified over and over again.

This also includes a fix for polls which was leaking state between tests
which this new functionality exposed.
2021-09-02 11:22:01 -04:00
Joffrey JAFFEUX
4ca34940d3
DEV: ensures container is not destroyed before showing tooltip (#13992)
In fast tests it could results in an error.
2021-08-10 11:48:31 +02:00
Joffrey JAFFEUX
11668ee85b
PERF: generates dates tooltip on demand (#13944) 2021-08-04 16:28:07 +02:00
Joffrey JAFFEUX
d23c0c06c3
PERF: reduces rendering time of local-dates (#13931)
- prefers insertAdjacentHTML over innerHTML as it's much faster in this case (about 5x)
- memoizes tz.guess()
- memoizes list of timezones
- inlines template
- applies main element class in one pass

All in all for a very edge case of about 80 dates it should be faster of about 15/20ms.
2021-08-04 08:27:22 +02:00
Roman Rizzi
bbe5d8d5cf
DEV: Sort imports alphabetically (#11382) 2020-12-01 15:31:26 -03:00
Joffrey JAFFEUX
bf88410126
DEV: apply coding standards to plugins (#10594) 2020-09-04 13:51:53 +02:00
Joffrey JAFFEUX
25f95af418
REFACTOR: local dates to improve reliability with DST and recurrence (#9379)
This commit improves testing and separates local-date generation from dates with zone manipulations.
2020-04-08 08:53:21 +02:00
Robin Ward
c322cccd53 FIX: Memory Leaks when decorating posts (#7749)
* Remove long-deprecated method

* FIX: Memory Leaks when decorating posts

Previously we'd keep creating mixins dynamically when decorating the
same class.

This code changes the API to recommend an `id` parameter for each
decorator which will avoid leaks. All plugins should be updated to
include this parameter, although if they don't in the meantime it'll
just mean a warning in the console (and a continued leak.)
2019-06-11 17:21:23 +02:00
Joffrey JAFFEUX
5e68c5f851
UX: moves local-dates from popupMenu to toolbar (#7335) 2019-04-08 15:52:09 +02:00
Joffrey JAFFEUX
8fb63b2706
FEATURE: unified popover implementation (#7244) 2019-03-26 15:43:27 +01:00
Joffrey JAFFEUX
60ff0e9b8c
missing prettified files 2018-06-15 18:42:20 +02:00
Joffrey JAFFEUX
7285e7fbba
FIX: uses tooltip to display local dates previews 2018-05-22 13:58:06 +02:00
Sam
2ed7b6e459 lots of missing files 2018-05-04 16:54:31 +10:00