Merge pull request #1 from codesyntax/1.0.6

1.0.6

Author: bipoza

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mastodon-share-button",
-  "version": "1.0.3",
+  "version": "1.0.6",
   "description": "Stencil Mastodon share button",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -9,7 +9,7 @@
   "types": "dist/types/index.d.ts",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
-  "unpkg": "dist/mastodon-share/mastodon-share.js",
+  "unpkg": "dist/mastodon-share-button/mastodon-share-button.js",
   "files": [
     "dist/",
     "loader/"
@@ -36,11 +36,14 @@
     "mastodon",
     "share",
     "button",
-    "social"
+    "social",
+    "web component",
+    "stencil",
+    "stenciljs"
   ],
   "author": "bipoza",
   "bugs": {
     "url": "https://github.com/codesyntax/mastodon-share-button/issues"
   },
-  "homepage": "https://github.com/codesyntax/mastodon-social-button#readme"
+  "homepage": "https://github.com/codesyntax/mastodon-share-button#readme"
 }

readme.md

@@ -10,6 +10,9 @@ This package is a user friendly web component to share in mastodon.
 | --------- | --------- | --------- | --------- | --------- | --------- |
 | IE11 *([limited](docs/ie.md))*, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions| last 2 versions
 
+<br/>
+
+# [View demos 👁](https://codepen.io/bipoza/pen/XWbegOM?editors=1100)
 # Preview
 
 ![](preview.gif)
@@ -18,7 +21,7 @@ This package is a user friendly web component to share in mastodon.
 ## Installation
 ### Via CDN
 ```html
-<script src="https://unpkg.com/mastodon-share-button@1.0.0/dist/mastodon-share/mastodon-share.js"></script>
+<script src="https://unpkg.com/mastodon-share-button@latest/dist/mastodon-share-button/mastodon-share-button.js"></script>
 ```
 ### Via NPM
 ```bash
@@ -46,21 +49,35 @@ $ npm install mastodon-share-button
 # Documentation
 ## Properties
 
-| Property              | Attribute             | Required     | Type      | Default                                      |
-| --------------------- | --------------------- | -----------  | --------- | -------------------------------------------- |
-| `share_message`       | `share_message`       | Required     | `string`  | `undefined`                                  |
-| `close_button_text`   | `close_button_text`   | Not Required | `string`  | `"Close"`                                    |
-| `dark_mode`           | `dark_mode`           | Not Required | `boolean` | `false`                                      |
-| `icon_url`            | `icon_url`            | Not Required | `string`  | `mastodon oficial logo`                      |
-| `instances`           | `instances`           | Not Required | `string`  | `'["https://mastodon.social"]'`              |
-| `modal_title`         | `modal_title`         | Not Required | `string`  | `"Share to Mastodon"`                        |
-| `open`                | `open`                | Not Required | `boolean` | `false`                                      |
-| `other_instance_text` | `other_instance_text` | Not Required | `string`  | `"Other instance"`                           |
-| `send_button_text`    | `send_button_text`    | Not Required | `string`  | `"Send"`                                     |
-| `share_button_text`   | `share_button_text`   | Not Required | `string`  | `"Share to Mastodon"`                        |
+| Property              | Attribute             | Required     | Description                                        | Type     | Default                          |
+| --------------------- | --------------------- | ------------ | -------------------------------------------------- | -------- | -------------------------------- |
+| `share_message`       | `share_message`       | Required     | Text to share in mastodon.                         |`string`  | `undefined`                      |
+| `instances`           | `instances`           | Not Required | List of instances to display in the select option. |`string`  | `'["https://mastodon.social"]'`  |
+| `dark_mode`           | `dark_mode`           | Not Required | Option to activate dark mode.                      |`boolean` | `false`                          |
+| `send_button_text`    | `send_button_text`    | Not Required | Text to show at the bottom of sharing in the modal.|`string`  | `"Send"`                         |
+| `icon_url`            | `icon_url`            | Not Required | Icon url. Put it "" to not display any icon.       |`string`  | `mastodon oficial logo`          |
+| `modal_title`         | `modal_title`         | Not Required | Title to display in modal.                         |`string`  | `"Share to Mastodon"`            |
+| `close_button_text`   | `close_button_text`   | Not Required | Text to display to close modal.                    |`string`  | `"Close"`                        |
+| `other_instance_text` | `other_instance_text` | Not Required | Text to display on the form.                       |`string`  | `"Other instance"`               |
+| `share_button_text`   | `share_button_text`   | Not Required | Text to show at the bottom of sharing. Put it "" to not display any text. |`string`  | `"Share to Mastodon"`            |
+| `open`                | `open`                | Not Required | Variable to display the modal opened.              |`boolean` | `false`                          |
 
 ## CSS Custom Properties (Styling)
-* Important: If you are using the dark mode you will not be able to apply any color variable, because this mode will overlap the dark mode 
+The component could be styled with the help of CSS3 variables.
+
+Example:
+
+```html
+<style type="text/css">
+  mastodon-share-button {
+    --share-button-background-color:#259FFC;
+    --share-button-background-color-hover:#C7E7FE;
+  }
+</style>
+```
+
+* **Important**: If you are using the dark mode, you cannot apply any color variable, because this mode will overlap your css.
+
 ### Share button
 | Name                                  | Description
 | -------------------------------       | --------------------------------------------------------------------|

src/components/mastodon-share-button/mastodon-share-button.css

@@ -61,6 +61,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  z-index: 999;
 }
 
 .is-visible {

src/components/mastodon-share-button/mastodon-share-button.tsx

@@ -76,7 +76,7 @@ export class MastodonShareButton {
 
         <button onClick={() => this.openModal()} class="share-button">
           {this.share_button_text}
-          <img src={this.icon_url} class={this.share_button_text.length!=0?"icon-with-text":""}/>
+          {this.icon_url?<img src={this.icon_url} class={this.share_button_text.length!=0?"icon-with-text":""}/>:""}
         </button>
 
         <div class={'overlay ' + (this.open ? 'is-visible' : '')} id="modal">

src/index.html

@@ -9,27 +9,76 @@
   <script type="module" src="/build/mastodon-share-button.esm.js"></script>
   <script nomodule src="/build/mastodon-share-button.js"></script>
   <!-- <link rel="stylesheet" href="/build/mastodon-share-button.css"> -->
-<style>
-  .mastodon-button{
-    --modal-background-color:red !important;
-    /* --img-width:30px;
-    --share-button-padding:10px;
-    --share-button-border-radius:50%; */
-    /* --button-color:red; */
-  }
-  
-</style>
+  <style>
+    .round {
+      --share-button-border-radius: 50%;
+    }
+
+    .small {
+      --img-width: 15px;
+      --img-height: 15px;
+    }
+
+    .blue-color {
+      --share-button-background-color: #259FFC;
+      --share-button-background-color-hover: #1e7fc9;
+    }
+
+    .text-small {
+      --share-button-font-size: 10px;
+      --share-button-padding: 5px;
+      --img-width: 12px;
+      --img-height: 12px;
+    }
+  </style>
 
 </head>
 
 <body>
-  <mastodon-share-button instances='["https://mastodon.eus", "https://mastodon.jalgi.eus"]' share_message="Aproba bat"
-    share_button_text="Partekatu mastodonen" close_button_text="Itxi" send_button_text="Bidali" modal_title="Partekatu mastodonen"
-    other_instance_text="Gehitu zure instantzia" dark_mode="true" class="mastodon-button">
+
+  <h2>Basic</h2>
+  <mastodon-share-button share_message="Text to share"></mastodon-share-button>
+
+  <br>
+
+  <h2>Dark mode</h2>
+  <mastodon-share-button share_message="Text to share" dark_mode="true"></mastodon-share-button>
+
+  <br />
+
+  <h2>Custom text</h2>
+  <mastodon-share-button instances='["https://mastodon.eus", "https://mastodon.jalgi.eus"]'
+    share_message="Text to share" share_button_text="Custom share button text" close_button_text="Custom close text"
+    send_button_text="Custom send text" modal_title="Custom modal title"
+    other_instance_text="Custom other instance select option text" dark_mode="true"></mastodon-share-button>
+
+  <br>
+
+  <h2>Custom formats</h2>
+  <mastodon-share-button share_message="Text to share" share_button_text="" class="round"></mastodon-share-button>
+
+  <br>
+
+  <mastodon-share-button share_message="Text to share" icon_url=""></mastodon-share-button>
+
+  <br>
+
+  <h2>Custom color</h2>
+  <mastodon-share-button share_message="Text to share" share_button_text="" class="round blue-color">
   </mastodon-share-button>
 
- <!--  <mastodon-share-button >
-  </mastodon-share-button> -->
+  <h2>Custom image</h2>
+  <mastodon-share-button share_message="Text to share" share_button_text=""
+    icon_url="https://upload.wikimedia.org/wikipedia/commons/thumb/5/51/Mastodon_First_Logo.svg/1200px-Mastodon_First_Logo.svg.png">
+  </mastodon-share-button>
+
+  <h2>Custom size</h2>
+  <mastodon-share-button share_message="Text to share" share_button_text="" class="round small blue-color">
+  </mastodon-share-button>
+
+  <br>
+  <mastodon-share-button share_message="Text to share" icon_url="" class="text-small blue-color">
+  </mastodon-share-button>
 
 </body>