• Stars
    star
    165
  • Rank 228,906 (Top 5 %)
  • Language
    HTML
  • License
    MIT License
  • Created over 9 years ago
  • Updated over 6 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

medium.com style confirm dialog

medium-style-confirm

Demo @ bitwiser.in

Usage

  • mscConfirm(title, okCallback) :
mscConfirm("Delete?",function(){
    alert("Post deleted");
});
  • mscConfirm(title, subheading, okCallback) :
mscConfirm("Delete", "Are you sure you want to delete this post?", function(){
    alert("Post deleted");
});
  • mscConfirm(title, subheading, okCallback, cancelCallback) :
mscConfirm("Delete", "Are you sure you want to delete this post?", function(){
  alert("Post deleted");
},
function() {
  alert('Cancelled');
});
  • mscConfirm(object) :
mscConfirm({
    title: 'License',
    subtitle: 'Do you accept the licese agreement?',    // default: ''
    okText: 'I Agree',      // default: OK
    cancelText: 'I Dont',   // default: Cancel
    dismissOverlay: true,   // default: false, closes dialog when clicked on overlay.
    onOk: function() {
        alert('Awesome.');
    },
    onCancel: function() {
        alert('Sad face :( .');
    }
});

New

Prompt -> Equivalent of JS prompt()

The API for mscPrompt and mscConfirm is same. Just the onOk callback of prompt receives a value parameter entered into the prompt.
  • mscPrompt(object) :
mscPrompt({
    title: 'Subscribe',
    subtitle: 'Enter your email to subscribe to the newsletter.',    // default: '',
    defaultValue: 'email',  // default: '', this value will be prefilled in the prompt box  
    okText: 'Subscribe',    // default: OK
    cancelText: 'Cancel',   // default: Cancel
    dismissOverlay: true,   // default: false, closes dialog when clicked on overlay.
    placeholder: 'Enter your email',     // placeholder value to show in input textbox
    onOk: function(value) {
        mscAlert(value+ " has been subscribed to the newsletter.");
    },
    onCancel: function() {
        mscAlert('Sad face :( .');
    }
});

Alert -> Equivalent of JS alert()

  • mscAlert(text) :
mscAlert("Hello World.");
Added support for new lines and carriage return in mscAlert()
  • mscAlert(object) :
mscAlert({
  title: 'Done',

  subtitle: 'You have been registered successfully. \n Your reg. ID is 4321', // default: ''

  okText: 'Close',    // default: OK

});

Installation

  • Install via bower bower install medium-style-confirm or download msc-style.css and msc-script.js.
  • Include msc-style.css in html as <link rel="stylesheet" href="msc-style.css"> just before ending head tag.
  • Include msc-script.js in html as <script src="msc-script.js"> just before ending body tag.
  • Call the mscConfirm() function as shown above.

LICENSE

MIT

More Repositories

1

medium-draft

📝 A medium like Rich Text Editor built on draft-js with a focus on keyboard shortcuts.
JavaScript
1,728
star
2

monaco-themes

Themes to be used and generated with monaco-editor in web browser
JavaScript
341
star
3

monaco-vim

VIM keybindings for monaco editor
JavaScript
214
star
4

kattappa

A block based rich text editor.
JavaScript
106
star
5

monaco-ace-tokenizer

Syntax highlighting support for additional languages in monaco-editor
JavaScript
77
star
6

bitwiser

Bitwiser Jekyll theme
CSS
38
star
7

blurt

A javascript default alert() and prompt() replacement.
JavaScript
33
star
8

bitwiser-material

jekyll material theme
CSS
32
star
9

vscode-excalidraw

Excalidraw integration for vscode
TypeScript
31
star
10

monaco-emacs

Emacs keybindings for monaco-editor
TypeScript
25
star
11

react-sketchapp-boilerplate

A basic project to quickly get you up and running for creating a react-sketchapp
JavaScript
16
star
12

yapper

flask self learning blog.
Python
10
star
13

flask-web-starter-kit

Flask application with complete integration of gulp build system
HTML
10
star
14

react-ssr-example

Example Typescript React project with SSR
JavaScript
10
star
15

tvm

TV Show Manager is a chrome app that can be used to track your favorite TV shows
JavaScript
6
star
16

extractor

Python
6
star
17

codemirror-lsp

JavaScript
4
star
18

Jekyll-Read

Yet another jekyll theme.
CSS
4
star
19

hello-world-tutorial

Frontend hello world tutorial with webpack
JavaScript
4
star
20

draft-text-editor-tutorial

Source code of the draft-js-text-editor tutorial
JavaScript
4
star
21

querybuilder

Python
3
star
22

monaco-playground

Demo page for monaco themes/vim/emacs/syntax highlighting
JavaScript
2
star
23

automate-github-trending

Send email notification of Github's trending repositories
Python
2
star
24

medium-blog

JavaScript
1
star
25

python-automplete-server

An autocomplete server for python source code
Python
1
star