richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

adds code example style 

Former-commit-id: 432b3eea3a
Former-commit-id: 0f871e10e3
pull/258/head
Jack Lukic 11 years ago
parent
0b5ab5a839
commit
f4999197a9
8 changed files with 168 additions and 63 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      docs/button.html
  2. 82
      docs/form.html
  3. 83
      docs/javascript/semantic.js
  4. 1
      docs/library/jquery.js.REMOVED.git-id
  5. 2
      docs/module.html
  6. 8
      docs/shape.html
  7. 50
      docs/stylesheets/example.css
  8. 3
      src/modules/ui/shape.js

2
docs/button.html
View File

@ -18,7 +18,7 @@
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="library/jquery.js" type="text/javascript"></script>
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>

82
docs/form.html
View File

@ -15,20 +15,20 @@
<link rel="stylesheet" class="ui" href="../src/ui/flat/icons.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/ui/flat/menu.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/modules/shape.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../src/modules/ui/shape.css" type="text/css" media="screen" />
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
<script src="library/jquery.js" type="text/javascript"></script>
<script src="library/ace/ace.js" type="text/javascript"></script>
<script src="library/sidr.js" type="text/javascript"></script>
<script src="library/waypoints.js" type="text/javascript"></script>
<script src="javascript/semantic.js" type="text/javascript"></script>
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
</head>
<body id="example">
@ -148,48 +148,52 @@
</div>
<h2>Standard</h2>
<h4>Form:</h4>
<p>A form is a collection of user input elements, and has no stylings of its own.</p>
<div class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="example">
<i class="icon code"></i>
<h4>Form:</h4>
<p>A form is a collection of user input elements, and has no stylings of its own.</p>
<div class="demo"><div class="ui form segment">
<p>Let's go ahead and get you signed up.</p>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<div class="ui blue submit button">Submit</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div></div>
</div>
<h3>Types of Content</h3>
<h4>Field</h4>
<p>A field is a form element containing a label and an input</p>
<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
<div class="example">
<i class="icon code"></i>
<h4>Field</h4>
<p>A field is a form element containing a label and an input</p>
<div class="ui form">
<div class="field">
<label>User Input</label>
<input type="text">
</div>
</div>
</div>
<h4>Text Area</h4>
<p>A textarea uses the default form element</p>

83
docs/javascript/semantic.js
View File

@ -1,5 +1,5 @@
// namespace
var semantic = {
window.semantic = {
handler: {}
};
@ -7,16 +7,18 @@ var semantic = {
semantic.ready = function() {
// selector cache
var
$ui = $('.ui').not('.hover, .down'),
$swap = $('.swap'),
$menu = $('.menu.button'),
$demo = $('.demo'),
$waypoints = $('h2'),
$peek = $('.peek'),
$peekMenu = $peek.find('li'),
$code = $('.code'),
var
$ui = $('.ui').not('.hover, .down'),
$swap = $('.swap'),
$menu = $('.menu.button'),
$demo = $('.demo'),
$waypoints = $('h2'),
$exampleCode = $('.example i.code'),
$peek = $('.peek'),
$peekMenu = $peek.find('li'),
$code = $('div.code'),
// alias
handler
@ -25,19 +27,60 @@ semantic.ready = function() {
// event handlers
handler = {
createCode: function() {
var
$example = $(this).closest('.example'),
$shape = $example.find('.shape.module'),
$demo = $example.find('.demo'),
$annotated = $example.find('.annotated'),
$code = $annotated.find('.code'),
code = $demo.get(0).innerHTML
;
// add source if doesnt exist and initialize
if($annotated.size() === 0) {
$annotated = $('<div/>')
.addClass('annotated')
.appendTo($example)
;
}
if( $code.size() === 0) {
code = code.replace('^(\s+)', '$1$1');
console.log(code);
$code = $('<div/>')
.data('type', 'html')
.addClass('code')
.text(code)
.appendTo($annotated)
;
$.proxy(handler.initializeCode, $code)();
}
if( $demo.is(':visible') ) {
$demo.hide();
$annotated.fadeIn(500);
}
else {
$annotated.hide();
$demo.fadeIn(500);
}
},
removeIndents: function(code) {
},
initializeCode: function() {
var
$content = $(this),
contentType = $content.data('type') || 'javascript',
editor = ace.edit($content[0]),
var
$code = $(this),
contentType = $code.data('type') || 'javascript',
editor = ace.edit($code[0]),
editorSession = editor.getSession(),
padding = 3,
padding = 0,
codeHeight = editor.getSession().getScreenLength() * (editor.renderer.lineHeight + padding) + editor.renderer.scrollBar.getWidth()
;
editor.setTheme('ace/theme/github');
editor.setShowPrintMargin(false);
editor.setReadOnly(true);
editor.renderer.setShowGutter(false);
editor.renderer.setShowGutter(false);
editor.setHighlightActiveLine(false);
editorSession.setMode('ace/mode/'+ contentType);
@ -92,7 +135,7 @@ semantic.ready = function() {
continuous : false,
offset : 215,
handler : function(direction) {
var
var
index = (direction == 'down')
? $waypoints.index(this)
: ($waypoints.index(this) - 1 >= 0)
@ -114,6 +157,10 @@ semantic.ready = function() {
;
}
$exampleCode
.on('click', handler.createCode)
;
$swap
.on('click', handler.swapStyle)
;

1
docs/library/jquery.js.REMOVED.git-id
View File

@ -0,0 +1 @@
9908c1a7219dda4289be6b1dce8de87c439bec13

2
docs/module.html
View File

@ -16,7 +16,7 @@
<link rel="stylesheet" href="library/sidr.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="library/jquery.js" type="text/javascript"></script>
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
<script src="library/sidr.js" type="text/javascript"></script>

8
docs/shape.html
View File

@ -17,7 +17,7 @@
<link rel="stylesheet" href="stylesheets/example.css" type="text/css" media="screen" />
<link rel="stylesheet" href="stylesheets/shape.css" type="text/css" media="screen" />
<script src="../dependencies/jquery.js" type="text/javascript"></script>
<script src="library/jquery.js" type="text/javascript"></script>
<script src="../src/modules/ui/shape.js" type="text/javascript"></script>
<script src="../src/modules/behavior/state.js" type="text/javascript"></script>
@ -184,7 +184,11 @@
<h3>Changing Settings</h3>
<ol>
<li>A settings object can be passed in when initializing the plugin
<br> <div class="code">$('.foo').shape({ moduleName: 'Godzilla'});</div>
<br> <div class="code">$('.foo')
.shape({
moduleName: 'Godzilla'
})
;</div>
</li>
<li>Default settings for the module can be overridden by modifying $.fn.shape.settings.
<br><div class="code">$.fn.shape.settings.moduleName = 'Godzilla';</div>

50
docs/stylesheets/example.css
View File

@ -1,7 +1,8 @@
/*******************************
Standard Example
Glue Code
*******************************/
@font-face {
font-family: 'Icons';
src: url(../fonts/icons.eot);
@ -215,15 +216,28 @@ a:hover {
#example .peek .panel :nth-child(1) {
border-left-color: #00B9F0;
}
#example .main h2.standard {
color: #00B9F0;
}
#example .peek .panel :nth-child(2) {
border-left-color: #56BB73;
}
#example .main h2.states {
color: #56BB73;
}
#example .peek .panel :nth-child(3) {
border-left-color: #EF3F49;
}
#example .main h2.variations {
color: #EF3F49;
}
#example .peek .panel :nth-child(4) {
border-left-color: #A24096;
}
#example .main h2.group {
color: #A24096;
}
#example .peek .panel {
width: 180px;
}
@ -244,6 +258,7 @@ a:hover {
width: 300px;
}
/* example code reskin */
#example div.code {
position: relative;
width: 100%;
@ -291,6 +306,38 @@ a:hover {
color: #555555;
}
/* examples */
#example .example {
position: relative;
}
#example .example i.code {
cursor: pointer;
position: absolute;
height: 0px;
width: 0px;
overflow: hidden;
opacity: 0;
font-size: 24px;
color: #888888;
-webkit-transition: opacity 0.3s ease-out;
-moz-transition: opacity 0.3s ease-out;
-o-transition: opacity 0.3s ease-out;
-ms-transition: opacity 0.3s ease-out;
transition: opacity 0.3s ease-out;
}
#example .example:hover i.code {
height: auto;
width: auto;
overflow: visible;
opacity: 0.5;
top: 5px;
right: 5px;
}
#example .example:hover i.code:hover {
opacity: 1;
}
@media only screen and (max-width : 1640px) {
@ -315,3 +362,4 @@ a:hover {
}
}

3
src/modules/ui/shape.js
View File

@ -83,7 +83,8 @@ $.fn.shape = function(parameters) {
repaint: function() {
module.verbose('Forcing repaint event');
var
fakeAssignment = $shape.get(0).offsetWidth
shape = $shape.get(0) || document.createElement('div'),
fakeAssignment = shape.offsetWidth
;
},

Write Preview
Loading…
Cancel
Save