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.

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

(WIP) Multiple clippers #50

Open
wants to merge 57 commits into
base: main
Choose a base branch
from
Open
Changes from 1 commit
Commits
Show all changes
57 commits
Select commit Hold shift + click to select a range
229ef52
first pass at changing settings to support multiple clipper configs
jgchristopher Nov 15, 2023
0041a84
adding click handler and randomUUID for clipper settings
jgchristopher Nov 16, 2023
efbc652
(WIP) messing with styling
jgchristopher Nov 16, 2023
26f491c
working POC. Still messing with UI/UX
jgchristopher Nov 17, 2023
fd67e72
(wip) messing with ux
jgchristopher Nov 17, 2023
045ce3c
(wip) more ux stuff
jgchristopher Nov 17, 2023
86a2309
Update styles, change clipper name in bookmarklet links, add clipperI…
jgchristopher Nov 18, 2023
df284fe
(wip) working topic note creation from pallete command
jgchristopher Nov 18, 2023
2f9d337
(wip) consolidating settings
jgchristopher Nov 20, 2023
feeebc4
add clipper popover
jgchristopher Nov 21, 2023
b336adc
tweaking styling and UX
jgchristopher Nov 21, 2023
19ab379
(wip) show settings after adding and deleting issue
jgchristopher Nov 21, 2023
359dbb2
refactor add clipper to a component
jgchristopher Nov 22, 2023
7cf8831
(wip) trying to figure out issue with deleting after editing.
jgchristopher Nov 22, 2023
767ec80
add hack to fix deleting settings after editing
jgchristopher Nov 23, 2023
13cab09
reorganizing and cleaning up
jgchristopher Nov 24, 2023
ccb1845
Fix creating topic note via command palette
jgchristopher Nov 25, 2023
539cca5
remove spaces in tag names when replacing in the template
jgchristopher Nov 25, 2023
32f05ea
more cleanup and organization
jgchristopher Nov 26, 2023
2a5b805
fix relative urls
jgchristopher Dec 2, 2023
aee404f
bump version
jgchristopher Dec 2, 2023
e2925c2
allow folder selection for advanced clipping storage location
jgchristopher Dec 16, 2023
595ba75
remove check for `html` formatted clippings
jgchristopher Dec 16, 2023
263b97f
allow selection of note when creating a topic note and support append…
jgchristopher Dec 16, 2023
5f99ba0
fix to limit to only canvas files when selecting canvas clipper type
jgchristopher Dec 16, 2023
c36a3c6
remove debugger
jgchristopher Dec 17, 2023
8b40be2
don't show header and position for canvas clippers. add type to table…
jgchristopher Dec 17, 2023
71009f4
fix command pallete options for Topic and Canvas clippers
jgchristopher Dec 17, 2023
7772495
remove unused variables
jgchristopher Dec 17, 2023
b5ad633
don't pull in that css
jgchristopher Dec 17, 2023
0b9b0ef
fix my mobile issues (crypto). Add svg icons for edit and delete butt…
jgchristopher Dec 20, 2023
0a354ac
use icons already being used in obsidian for edit and trash
jgchristopher Dec 20, 2023
2ec2cc0
remove notePath from bookmarklet. Add a view and ribbon icon to show …
jgchristopher Dec 21, 2023
5dffe3c
add ability to get a link to use with shortcuts
jgchristopher Dec 29, 2023
aba91a0
fixing bugs in appending
jgchristopher Dec 30, 2023
7a97202
don't add a line to the start_line
jgchristopher Jan 13, 2024
a8914ec
beta release
jgchristopher Jan 13, 2024
acda21a
add manifest-beta and put manifest back to last released version
jgchristopher Jan 13, 2024
26c6600
merge existing settings when upgrading
jgchristopher Jan 30, 2024
9f7d079
bump beta version
jgchristopher Jan 30, 2024
9297423
We need to pass the entire path, not just the file name
jgchristopher Mar 13, 2024
3d56d49
version 1.0.0-beta.3
jgchristopher Apr 14, 2024
28a8c2c
remove debugger. Fix showing '#' when tags are empty
jgchristopher Apr 21, 2024
f02c3af
fix copy topic note bookmarklet to clipoard. Add copy topic note appl…
jgchristopher May 16, 2024
fd43455
(WIP) Create header if configured heading doens't exist.
jgchristopher May 27, 2024
4374535
remove old heading code from bookmarklet
jgchristopher May 29, 2024
5249e0b
remove experimental comment settings
jgchristopher May 29, 2024
c3545be
handle newly created / empty canvas
jgchristopher May 29, 2024
de340a3
fix prepend
jgchristopher May 29, 2024
c5afbf0
tick for version beta.4
jgchristopher May 30, 2024
99bb94b
fix Clipper view, update Shortcut links, change advancednoteentry if …
jgchristopher Jul 21, 2024
dd00fdb
remove ribbon icon, add `Clipper: Open view` command, tick beta version
jgchristopher Jul 21, 2024
6d5debf
remove the word Note
jgchristopher Aug 7, 2024
9f6a02a
handle old bookmarklets (wip)
jgchristopher Aug 9, 2024
1f136a0
play with showing notification modal then showing the migrated config…
jgchristopher Aug 9, 2024
b675888
replace DeepMerge with structuredClone
jgchristopher Aug 14, 2024
d710fa9
add topic note migration modal and create new clipper setting
jgchristopher Aug 14, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
refactor add clipper to a component
jgchristopher committed Nov 22, 2023

Verified

This commit was signed with the committer’s verified signature.
wiseaidev Mahmoud
commit 359dbb2886ff90b4658667bdbc73aec73bad46a3
120 changes: 5 additions & 115 deletions src/settings/SettingsComponent.svelte
Original file line number Diff line number Diff line change
@@ -5,67 +5,14 @@
import { pluginSettings } from './settingsstore';
import { propertyStore } from 'svelte-writable-derived';
import { get, type Writable } from 'svelte/store';
import { createPopperActions } from 'svelte-popperjs';
import {
DEFAULT_CLIPPER_SETTING,
type ObsidianClipperSettings,
ClipperType,
} from './types';
import { deepmerge } from 'deepmerge-ts';
import { randomUUID } from 'crypto';
import moment from 'moment';
import AddClipperComponent from './components/AddClipperComponent.svelte';
import type { ObsidianClipperSettings } from './types';

export let app: App;
const noticeText =
'Lost on how to get started? Check out the new documentation website';

let addClipperName: string;
let addClipperType: ClipperType;
const ALL_TYPES = [
ClipperType.DAILY,
ClipperType.WEEKLY,
ClipperType.TOPIC,
ClipperType.CANVAS,
];

const [popperRef, popperContent] = createPopperActions({
placement: 'left-start',
strategy: 'fixed',
});

const extraOpts = {
modifiers: [
{ name: 'offset', options: { offset: [0, 5] } },
{
name: 'preventOverflow',
options: {
padding: 4,
},
},
],
};

let showAddClipperPopup = false;

const plusButtonClicked = () => {
showAddClipperPopup = !showAddClipperPopup;
};

const addClipper = () => {
let clipperPlaceholderSettings = deepmerge({}, DEFAULT_CLIPPER_SETTING);
clipperPlaceholderSettings.clipperId = randomUUID();
clipperPlaceholderSettings.name = addClipperName;
clipperPlaceholderSettings.type = addClipperType;
const length = $pluginSettings.clippers.push(clipperPlaceholderSettings);
$pluginSettings = $pluginSettings; //eslint-disable-line
showAddClipperPopup = false;
addClipperName = '';

const settingsStore = getSettingStore(length - 1);

editSetting(settingsStore);
};

const handleClick = (id: string) => {
console.log(id);

@@ -79,12 +26,11 @@
};

const handleDelete = (id: string) => {
debugger;
const remainingClippers = $pluginSettings.clippers.filter(
(c: ObsidianClipperSettings) => c.clipperId !== id
);
$pluginSettings.clippers = remainingClippers;
$pluginSettings = $pluginSettings; //eslint-disable-line
pluginSettings.set($pluginSettings);
};

const editSetting = (settingsStore: Writable<ObsidianClipperSettings>) => {
@@ -127,53 +73,7 @@
<br />

<div class="flex flex-row-reverse text-sm font-semibold leading-6 gap-2 pb-4">
<button use:popperRef on:click={plusButtonClicked}>
{@html showAddClipperPopup ? '&#215;' : '+'}
</button>
{#if showAddClipperPopup}
<div class="addPopOver" use:popperContent={extraOpts}>
<div class="clp_section_margin">
<h1>Add New Clipper</h1>
<div class="setting-item">
<div class="setting-item-info">
<div class="setting-item-name">Clipper Name</div>
<div class="setting-item-description">Name of the new clipper?</div>
</div>
<div class="setting-item-control">
<input
type="text"
bind:value={addClipperName}
spellcheck="false"
placeholder="Daily Clipper"
/>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-item-info">
<div class="setting-item-name">Clipper Type</div>
<div class="setting-item-description">
What type of note are you clipping to?
</div>
</div>
<div class="setting-item-control">
<select bind:value={addClipperType}>
<option value="">Select Clipper Type</option>
{#each ALL_TYPES as type}
<option value={type}>{type}</option>
{/each}
</select>
</div>
</div>
<div class="setting-item">
<div class="setting-item-control">
<button on:click={() => addClipper()}>Add Clipper</button>
</div>
</div>

<div id="arrow" data-popper-arrow />
</div>
{/if}
<AddClipperComponent />
</div>

<div class="px-4 sm:px-6 lg:px-8">
@@ -190,7 +90,7 @@
</tr>
</thead>
<tbody>
{#each $pluginSettings.clippers as clipper}
{#each $pluginSettings.clippers as clipper (clipper.clipperId)}
<tr>
<td class="text-center">{clipper.name}</td>
<td class="py-4 pl-4 text-sm text-center">
@@ -222,13 +122,3 @@
</div>
</div>
</div>

<style>
.addPopOver {
border-radius: var(--modal-radius);
border: var(--modal-border-width) solid var(--modal-border-color);
padding: 1rem;
background: var(--background-primary) !important;
z-index: 100 !important;
}
</style>
108 changes: 108 additions & 0 deletions src/settings/components/AddClipperComponent.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
<script lang="ts">
import { createPopperActions } from 'svelte-popperjs';
import { ClipperType, DEFAULT_CLIPPER_SETTING } from '../types';
import { deepmerge } from 'deepmerge-ts';
import { randomUUID } from 'crypto';
import { pluginSettings } from '../settingsstore';

let addClipperName: string;
let addClipperType: ClipperType;
const ALL_TYPES = [
ClipperType.DAILY,
ClipperType.WEEKLY,
ClipperType.TOPIC,
ClipperType.CANVAS,
];

const [popperRef, popperContent] = createPopperActions({
placement: 'left-start',
strategy: 'fixed',
});

const extraOpts = {
modifiers: [
{ name: 'offset', options: { offset: [0, 5] } },
{
name: 'preventOverflow',
options: {
padding: 4,
},
},
],
};

let showAddClipperPopup = false;

const plusButtonClicked = () => {
showAddClipperPopup = !showAddClipperPopup;
};

const addClipper = () => {
let clipperPlaceholderSettings = deepmerge({}, DEFAULT_CLIPPER_SETTING);
clipperPlaceholderSettings.clipperId = randomUUID();
clipperPlaceholderSettings.name = addClipperName;
clipperPlaceholderSettings.type = addClipperType;
$pluginSettings.clippers.push(clipperPlaceholderSettings);
$pluginSettings = $pluginSettings; //eslint-disable-line
showAddClipperPopup = false;
addClipperName = '';
};
</script>

<button use:popperRef on:click={plusButtonClicked}>
{@html showAddClipperPopup ? '&#215;' : '+'}
</button>
{#if showAddClipperPopup}
<div class="addPopOver" use:popperContent={extraOpts}>
<div class="clp_section_margin">
<h1>Add New Clipper</h1>
<div class="setting-item">
<div class="setting-item-info">
<div class="setting-item-name">Clipper Name</div>
<div class="setting-item-description">Name of the new clipper?</div>
</div>
<div class="setting-item-control">
<input
type="text"
bind:value={addClipperName}
spellcheck="false"
placeholder="Daily Clipper"
/>
</div>
</div>
</div>
<div class="setting-item">
<div class="setting-item-info">
<div class="setting-item-name">Clipper Type</div>
<div class="setting-item-description">
What type of note are you clipping to?
</div>
</div>
<div class="setting-item-control">
<select bind:value={addClipperType}>
<option value="">Select Clipper Type</option>
{#each ALL_TYPES as type}
<option value={type}>{type}</option>
{/each}
</select>
</div>
</div>
<div class="setting-item">
<div class="setting-item-control">
<button on:click={() => addClipper()}>Add Clipper</button>
</div>
</div>

<div id="arrow" data-popper-arrow />
</div>
{/if}

<style>
.addPopOver {
border-radius: var(--modal-radius);
border: var(--modal-border-width) solid var(--modal-border-color);
padding: 1rem;
background: var(--background-primary) !important;
z-index: 100 !important;
}
</style>
2 changes: 1 addition & 1 deletion src/settings/sveltesettingstypes.ts
Original file line number Diff line number Diff line change
@@ -3,6 +3,6 @@ import type { SvelteComponent } from 'svelte';
export type TabItem = {
label: string;
value: number;
component: typeof SvelteComponent;
component: SvelteComponent;
props?: Record<string, unknown>;
};
4 changes: 0 additions & 4 deletions styles.css
Original file line number Diff line number Diff line change
@@ -1,7 +1,3 @@
.fixed {
position: fixed;
}

.sticky {
position: sticky;
}